当前位置：文江博客话题详情

在 Drupal 7 中将类添加到图像字段

发布于 2024-10-21 07:44:45 字数 87 浏览 1 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北音执念 2024-10-28 07:44:45

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

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

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 子句以仅应用我喜欢的类我认为这是一个很好的方法，但是您可以做您喜欢的事情

现在，每当我查看包含图像样式为“员工照片”的图像字段时，类神奇地出现在 IMG 标签中，这正是我所需要的。

The above answer helps if targeting CSS is your only need. But I needed to add a class to the IMG tag, period. Here's the way I solved the problem. This is probably not the best way, and certainly not the only, but it's a valid "Drupal way" and works. Open up the template.php file for your template.

Paste in the following function, which you will have to MODIFY and customize for your usage scenario. For example, you must replace <TEMPLATENAME> with your template name, and add or subtract classes as desired, and other things, as you'll see.

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';
    }
}

I created an "if" statement to determine when the class should be added to the image, but you will have to customize that however you like--you might eliminate it entirely if you want a class on ALL image-field images, or you might say "if
drupal_is_front_page()" if you only want it applied on the front page, etc.

In MY case, I created an image style (Configuration > Media > Image Styles) for Staff Photos and added the if clause to only apply my preferred classes to images of that specified Image Style. I think that's a great way to do it, but you can do what you like.

Now, whenever I am viewing a node which contains an image-field with image style of "Staff Photo," the classes magically appear in the IMG tag, which is just what I needed.

回复收藏 0 原文

时光倒影 2024-10-28 07:44:45

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

如果你确实需要添加一个类，你可以使用主题开发模块来找出主题功能或要覆盖的模板文件。请查看主题开发人员截屏视频以了解更多详细信息。

回复收藏 0 原文

哀由 2024-10-28 07:44:45

如果使用此功能，则 Drupal 添加类，但在首页上会看到错误“Notice: Undefined index: style_name in template_preprocess_image..”。

我粘贴“_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';
    }
}

If use this function, then Drupal add class but view error "Notice: Undefined index: style_name in template_preprocess_image.." on front page.

I'm paste "_style" and be ok.

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';
    }
}

回复收藏 0 原文

~没有更多了~