如何将CSS类添加到属于内容类型的图像中? -- theming 领域 和 media 领域 drupal 相关 的问题

How to add CSS classes to a an image which belongs to a content type?


2
vote

问题

中文

我有一个带有图像字段的内容类型;我想向这些图像添加CSS类。

我已经通过 99887661 在node.tpl.php中查看了 $content 变量的值。,但我看不到与类相关的任何属性/密钥或属性。也许我看不到他们,或者我不知道在哪里看。

我想通过node.tpl.php中的 print render($content['myimage_field']) 打印类似 <img src="path-to-image" class="my-classes"> 的东西。

我不想使用外部模块来完成此操作。是否有任何主题功能,我可以覆盖?如何覆盖它们?

英文原文

I have a content type with an image field; I would like to add CSS classes to those images.

I have looked at the values of the $content variable in node.tpl.php via the dpm(), but I couldn't see any properties/keys related to classes or attributes. Maybe I just couldn't see them, or I didn't know where to look.

I would like to print something like <img src="path-to-image" class="my-classes"> by using print render($content['myimage_field']) in node.tpl.php.

I do not want to use external modules to accomplish this. Is there any theme functions I can override? How do I override them?

     

回答列表

3
 
vote

您可以在主题中使用 hook_node_preprocess template.php 文件以添加到节点的节点的"属性" 阵列中添加到节点模板之前。当您的字段建立在HTML中时,它会有您的类。

如果启用devel模块,则可以将以下内容添加到 template.php 以查看此"构建阵列" ,用于呈现节点的"构建阵列" 。

  function twt_preprocess_node(&$vars) {      dpm($vars);  }   

要更改添加到您的字段中的类使用如下的内容(虽然查找上述内容,但要在正确的位置放置课程)。

  function twt_preprocess_node(&$vars) {      $vars['field_myimagefield']['#attributes']['class'][] = 'myclass';  }   

一些有用的阅读:

  • retwupal 7
  • 中的渲染阵列
  • 设置用于模板的变量
  • hook_preprocess_hook(drupal 7)< / a>
 

You can use hook_node_preprocess in your themes template.php file to add to the 'attributes' array for the node before the variables are sent to your node template. when your field gets built up into html it will then have your class.

If you enable the devel module you can add the following to template.php to see what this 'build array' which is used to render the node looks like.

function twt_preprocess_node(&$vars) {      dpm($vars);  } 

To alter the classes added to your field use something like the following (though look to the above to find out if you are putting your class in the right place).

function twt_preprocess_node(&$vars) {      $vars['field_myimagefield']['#attributes']['class'][] = 'myclass';  } 

Some useful reading:

  • Render Arrays in Drupal 7
  • Setting up variables for use in a template
  • hook_preprocess_HOOK (Drupal 7)
 
 
3
 
vote

没有此类方法可直接从node.tpl.php应用类 您可以通过使用主题函数来实现它 tome_image_style

e.g,在template.php

  /**  * Theme override  *   * Add custom class to image styles  */ function MY_THEME_image_style($variables) {   // Determine the dimensions of the styled image.   $dimensions = array(     'width' => $variables['width'],     'height' => $variables['height'],   );    image_style_transform_dimensions($variables['style_name'], $dimensions);    $variables['width'] = $dimensions['width'];   $variables['height'] = $dimensions['height'];    // Determine the URL for the styled image.   $variables['path'] = image_style_url($variables['style_name'], $variables['path']);    /* Begin custom snippet */   // Add or append custom classes, to avoid clobbering existing   if (isset($variables['attributes']['class'])) {     $variables['attributes']['class'] += array('my-class', $variables['style_name']);   }else{     $variables['attributes']['class'] = array('my-class', $variables['style_name']);   }   /* End custom snippet */   return theme('image', $variables); }   

注意:这只是一个主题的克隆_image_style,结束时添加了自定义类。

您可以基于特定类的style_name添加一些条件逻辑,也可以使用 theme_image如果需要。

 

There is no such method available to apply classes directly from node.tpl.php You can achieve it by using theme function theme_image_style

e.g, in template.php

/**  * Theme override  *   * Add custom class to image styles  */ function MY_THEME_image_style($variables) {   // Determine the dimensions of the styled image.   $dimensions = array(     'width' => $variables['width'],     'height' => $variables['height'],   );    image_style_transform_dimensions($variables['style_name'], $dimensions);    $variables['width'] = $dimensions['width'];   $variables['height'] = $dimensions['height'];    // Determine the URL for the styled image.   $variables['path'] = image_style_url($variables['style_name'], $variables['path']);    /* Begin custom snippet */   // Add or append custom classes, to avoid clobbering existing   if (isset($variables['attributes']['class'])) {     $variables['attributes']['class'] += array('my-class', $variables['style_name']);   }else{     $variables['attributes']['class'] = array('my-class', $variables['style_name']);   }   /* End custom snippet */   return theme('image', $variables); } 

Note: This is just a clone of theme_image_style with the custom classes added at the end.

You can add some conditional logic based on style_name for specific classes, and also do a similar thing with theme_image if needed.

 
 

相关问题

0  如何以视图中编程方式添加链接到图像字段  ( How to programmatically add a link to an image field in a view ) 
我有一个映像字段和其他字段的视图,我需要链接渲染的图像,而不是配置选择的内容,而是在另一个计算的过滤的视图上。 我认为我应该使用 my_theme_preprocess_views_view_field_myviewname 来捕捉这个字段,使用它的名称作为选择器,然后将其包装在计算的链接中,但没有找到如何做到这一点...

0  桌面和笔记本电脑设计是否是响应.desktop.css?  ( Is responsive desktop css for desktop laptops design ) 
我也使用自适应主题和相同的问题提出。我检查了他们的文档,但他们没有点指令。 其CSS文件有以下文件, global.base.css global.styles.css responsive.custom.css 1. responsive.desktop.css 2. responsive.smalltouc...

0  仅根据需要将库附加到标题  ( Attaching a library to the header only as needed ) 
我正在构建一个新模块。由于某种原因,jQuery仅在jQuery库附加到标题而不是默认页脚时工作。在构建模块时,我正在将库附加到文件Flot_d8.module 中 function flot_d8_page_attachments(array &$page) { $attach_footer = FALSE...

1  添加图像上传到主题配置  ( Add image upload to theme configuration ) 
我正在尝试将图像上传到我所做的主题中的主题设置。显示图像上传字段确实出现,但实际上没有上传,并且图像永远不会得到保存。 在主题 - settings.php中我有函数 function mytheme_form_system_theme_settings_alter(&$form, $form_state, $...

0  从面包屑中取出分隔符  ( Remove separator from breadcrumb ) 
如何从面包屑中删除 < 我尝试了 implode('<', $value['data']) 但没有运气 function bootstrap_fit_breadcrumb($variables) { $breadcrumb = $variables['breadcrumb']; ...

1  某些阻止代码正确处理匿名用户  ( Certain block code processes correctly for anonymous user ) 
我在Drupal 7.41网站上安装了Bluemasters主题。在此主题中,我创建了几个新区域并将新块添加到这些区域,所有这些区域都在任何访问者可用的主页上。 我发现当我将其视为经过身份验证的用户时,主页与匿名用户一起看。作为匿名用户,我有4个独立的文本块,彼此顶部,但是当我登录此文本都是正确的地方。 我发现如果我...

27  在Twig模板中获取前往主题资产的路径  ( Get path to theme assets in twig template ) 
我有一个关于在Twig模板中获取图像的路径的问题。图像未分配给字段或其他东西。只是存储在"mytheme / image / icon / my-icon.png" 中的静态图像。 在Drupal 7中,我将在我的node.template中获取以下代码: <img src="<?php print base_p...

7  如何创建一个简单的表格?  ( How do i create a simple table ) 
我正在研究一个我需要在表中显示内容的模块。虽然我已经创建了一个简单的表,但我需要知道如何使用 theme() ,因为不能直接调用函数。 基本上,相当于以下行,在Drupal 7中完全精细,在Drupal 7? return theme(table,array(header => '$header', rows =...

2  阻止模拟主题的好方法?  ( Are blocks a ok way to model a theme ) 
我试图建立一个新的主题。阻止模拟主题的好方法?有些网站似乎推荐它们,其他网站说他们应该避免。 ...

7  创建自定义枝条过滤器时出错  ( Error when creating a custom twig filter ) 
我正在尝试在drupal 8中创建自定义枝条过滤器。目标是在模板中使用我的自定义过滤器如下: {{ a_variable|myfilter }} 我创建了一个带有3个文件的自定义模块: MODULE.info.yml MODULE.services.yml src/TwigExtension/MyExt...

0  钩形表格更改不会在确实存在的自定义表单上射击[已关闭]  ( Hook form alter not firing on a custom form that does exist ) 
此问题似乎在帮助中心中定义的范围内涉及Drupal。。 想要改进这个问题?更新问题,所以它是关于drupal答案的主题。 ...

0  什么导致菜单停止通过菜单中的半途而废  ( What causes menu to stop querying for children half way through menu ) 
我有一个'主菜单',在一个案例中呈现使用'bartik'主题(网站预览)并在另一个使用'bootstrap'主题。 (网站预览) 与引导主题,从左到右工作,孩子们将在"出版物" 之前呈现。然后没有孩子。相同的菜单介绍了Bartik的所有孩子一直穿过。透过它,孩子们不在PHP数据中($元素[#below]),并不打印...

1  我可以将数据发送到表单提交的模板页面。但分页不正常工作  ( I can send data to a template page on form submission but pagination not workin ) 
模块文件: <?php function BM_weather_API_part2_theme() { return array( 'BM_weather_API_part2' => array( 'template' => 'BM_weather_API_part2', 'v...

17  如何将纯文本呈现为模板中的HTML?  ( How can i render plain text as html in a template ) 
我遇到了从纯文本字段中尝试将SVG图像标记代码渲染为HTML。 我希望从纯文本字段中渲染SVG代码,而不覆盖其他地方的纯文本字段呈现。 纯文本格式当前转换所有HTML标记和&lt;&gt;到 &lt; &gt; 。 我创建了一个字段模板,并尝试将字段内容输出为 {{ item.content.context.va...

0  CSS和JS没有显示  ( Css and js are not showing ) 
我刚刚开始使用Drupal 8,我已经遇到了问题。在我的Info.yml文件中,我添加了库/ IES和我的Libraries.yml是那些包含的文件。当我在admin中清除缓存时,CSS不会在源代码中显示。如果这将是问题,但我甚至清除缓存,但它不是。 这是我的libraries.yml文件 global-styl...

0  覆盖现场收集输出  ( Overriding field collection output ) 
我有一个名为的内容类型: lectures 在此内容中,我具有名为的字段收集字段: field_course_video_slide_sync 此字段集合由3个字段组成: 99887662 , field_slide_title 和 field_slide_number 我想要实现的是将它们重写为此: ...

0  如何在页面加载上打开Bootstrap照片库?  ( How to open bootstrap photo gallery on page load ) 
我正在使用 bootstrap照片库,并希望在页面加载时打开幻灯片。 ...

4  将库添加到页脚  ( Add library to footer ) 
如果我使用 libraries api 模块在我的模块中添加JavaScript库,是有可能在页脚中的库负载而不是标题? 如果没有替代方法? ...

3  如何在Drupal_Root /库中放置库?  ( How to place a library in drupal root libraries ) 
在drupal 8中,当我在 .libraries.yml 文件中声明一个库时,似乎库文件必须位于模块内或主题文件夹中 .libraries.yml 文件。 例如,如果MyModule模块包含此 .libraries.yml 文件: form-alter-css: version: 1.x css: ...

1  如何修改注释-wrapper.tpl.php以更改注释表单布局?  ( How to modify comment wrapper tpl php to change the comment form layout ) 
我正在尝试更改评论表单的布局。不幸的是,当我只打印我需要和提交按钮的字段时,我不能使用该按钮,当我按下它时,没有任何反应。 我在注释-wrapper.tpl.php中使用以下代码: <div id="comment-rating"> <?php print render($content['comment...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有


Licensed under cc by-sa 3.0 with attribution required.