跳转到内容
必威体育论坛必威精装下载APPRedfin解决方案徽标必威体育论坛必威精装下载APPRedfin解决方案徽标 联系
在她面前拿着相机的女孩

Drupal 7中的简单图像标题

由于某种原因,当涉及到图像标题时,我有一个巨大的心理障碍。我永远记不清我喜欢哪种模块组合。这部分是因为我已经尝试了许多提供此功能的不同模块。此外,它们都有相似的名称,例如图像标题,标题过滤器图像标题格式化程序.

我对Drupal6的期望是图像标题;不幸的是,目前D7版本仍处于测试阶段。所以,我最近试过了卡普顿并发现它可以做图像标题所做的一切,而且更灵活。jCaption模块使用jQuery将图像的标题或alt属性更改为标题,方便地包装在段落标记中,以便于样式设置。因此,它可以改变如下情况:

为此:

这是一个图像标题

我喜欢这个模块的一个地方是使用CSS选择器来定位特定的图像。我和我的客户习惯于使用标题类来定位图像,所以下面是在您的网站上实现这种方式的步骤。

配置模块

  • 安装并启用卡普顿,所见即所得,还有你最喜欢的客户端编辑器. 我们的典型安装使用TinyMCE,IMCE所见即所得桥. 如果您正在使用其他内容,请随时通过发布评论来描述如何使用。
  • 接下来,您需要编辑所见即所得配置文件,用户将使用该配置文件在配置»所见即所得配置文件(/admin/config/content/Wysiwyg)中插入图像。
  • 选择一种输入格式(我通常对过滤后的完整HTML执行此操作),然后单击编辑

所见即所得情景模式屏幕

  • 单击按钮和插件下拉列表并启用图像、高级图像和IMCE按钮。
  • 单击CSS下拉列表并在CSS类下输入“Image Caption=Caption”(不带引号)。您可以用任何有效的CSS选择器替换标题。我养成了在图像标题模块中使用标题类的习惯,所以这就是我继续使用的。

将css类添加到wysiwyg配置

  • 单击保存。
  • 在Configuration»jQuery标题(/admin/config/media/jCaption)处配置jCaption模块
  • 这里有很多选择,这很好。现在,您可以将所有内容都设置为默认设置,但需要添加“img.caption”(不带引号),它会要求您的选择器。我真正地像这样,我可以在这里选择多个选择器。在过去,我不得不使用template.php以编程方式将类添加到图像中,这有点痛苦。
  • 虽然有一个选项可以对标题使用alt属性,但我更喜欢使用title。原因是alt属性为有视觉障碍的用户替换了图像本身,这些用户可能正在使用屏幕阅读器访问您的网站。出于这个原因,我喜欢使用alt属性来描述图像,而title属性(最初用作工具提示)用于更具描述性的标题。

jquery标题配置

  • 单击保存配置。

向图像添加标题

  • 使用上面配置的输入格式创建包含字段的内容。
  • 使用文本编辑器中的“插入/编辑图像”按钮插入图像。
  • 这里是高级图像按钮派上用场的地方。除了常规选项卡外,高级图像按钮还将为您提供两个选项卡:外观和高级。
  • 在第一个选项卡中,上载或导航到要使用IMCE添加的图像,给它一个标题(请记住,这将成为标题),最好给它一个描述(这将成为alt属性)。

上传图像

  • 在外观选项卡中,您现在可以在类下拉列表中选择“图像标题”。

在下拉列表中选择图像类

  • 单击“插入”,请注意,您的图像将显示在文本编辑器中,而不显示标题。不要惊慌;在保存内容并加载模块的jcaption.js文件之前,您实际上不会看到图像标题。

单击“插入”将其推回所见即所得

  • 保存你的内容,还有viola!您的图像将有一个标题,您现在可以对其进行样式设置。

你都完了!

快乐字幕!

Baidu