在 Drupal 7 中向图像字段添加类答案

【问题标题】：Add Class to Image Field in Drupal 7在 Drupal 7 中向图像字段添加类
【发布时间】：2011-03-11 15:29:31
【问题描述】：

我已在内容类型“基本页面”中添加了一个图像字段，并使用“管理显示”选项将其显示在页面顶部。但是，图像上没有样式，我一生都无法弄清楚如何向图像添加类以便添加样式。

【问题讨论】：

【解决方案1】：

如果您只需要以 CSS 为目标，上述答案会有所帮助。但我需要在 IMG 标签中添加一个类，句号。这是我解决问题的方法。这可能不是最好的方式，当然也不是唯一的方式，但它是一种有效的“Drupal 方式”并且有效。打开模板的 template.php 文件。

粘贴以下函数，您必须针对您的使用场景进行修改和自定义。例如，您必须将 <TEMPLATENAME> 替换为您的模板名称，并根据需要添加或减少类以及其他内容，如您所见。

function <TEMPLATENAME>_preprocess_image(&$variables) {
    // If this image is of the type 'Staff Photo' then assign additional classes to it:
    if ($variables['style_name'] == 'staff_photo') {
        $variables['attributes']['class'][] = 'lightbox';
        $variables['attributes']['class'][] = 'wideborder';
    }
}

我创建了一个“if”语句来确定何时应该将类添加到图像中，但是您必须根据自己的喜好自定义它——如果您想要在所有图像字段图像上添加一个类，您可以完全消除它，或者你可以说“如果 drupal_is_front_page()" 如果您只想将其应用于首页等。

在我的例子中，我为员工照片创建了一个图像样式（配置 > 媒体 > 图像样式），并添加了 if 子句以仅将我的首选类应用于该指定图像样式的图像。我认为这是一个很好的方法，但你可以做你喜欢做的事。

现在，每当我查看包含图像样式为“Staff Photo”的图像字段的节点时，这些类就会神奇地出现在 IMG 标记中，这正是我所需要的。

【讨论】：

【解决方案2】：

如果您使用 CCK，几乎可以肯定有一个类已经与图像相关联（或者至少是一个包装它的 div 上的类）。 CCK 包装了类中的几乎所有内容。尝试右键单击图像并单击 Inspect Element 进行仔细检查。

如果你真的需要添加一个类，你可以使用Theme Developer module 找出要覆盖的主题函数或模板文件。查看Theme Developer screencast for more details。

【讨论】：

非常感谢，我看过但没有考虑包含的 div，我找到了一个大约三层以下的 div，里面有我想要的类。

【解决方案3】：

如果使用此功能，则 Drupal 添加类但在首页查看错误“注意：未定义索引：模板预处理图像中的样式名称..”。

我粘贴“_style”并没问题。

function <TEMPLATENAME>_preprocess_image_style(&$variables)  {
    // If this image is of the type 'Staff Photo' then assign additional classes to it:
    if ($variables['style_name'] == 'staff_photo') {
        $variables['attributes']['class'][] = 'lightbox';
        $variables['attributes']['class'][] = 'wideborder';
    }
}

【讨论】：