如何使用响应图像修改一个内容类型的图像输出? -- 8 领域 和 media 领域 和 theming 领域 drupal 相关 的问题

How to modify the image output for just one content type using Responsive Images?


1
vote

问题

中文

基本内容类型上有一个字段_image(图像)字段。使用响应图像,我们在使用响应图像样式的Field_Image字段的默认视图模式下启用它。

我们将图像URL设置为Data-SRC属性的原因是因为我们使用 Lazysizes javascript库到lazyload图像。响应图像模块使用源SRCSet输出作为IMG标签的单独标签。

在我的测试中,我发现虽然浏览器获取了基于响应图像样式配置所需的尺寸,但它不会改变图像URL。

我们如何控制图像的输出,以便我们可以获得图像以显示类似于下面的?

目标:

    即使在使用响应图像模块时,懒惰加载图像
  1. 输出图像字段,以便设置数据src,未设置src,并添加"LazyLoad" 类

当前情况:

  <picture> <source srcset="/image.jpg 1x" media="all and (min-width: 768px)" type="image/jpeg"> <source srcset="/image2.jpg 1x" media="all and (min-width: 320px)" type="image/jpeg"> <img src="/original-image" alt="alt_text" > </picture>   

所需输出:

  <picture> <source srcset="/image.jpg 1x" media="all and (min-width: 768px)" type="image/jpeg"> <source srcset="/image2.jpg 1x" media="all and (min-width: 320px)" type="image/jpeg"> <img src="/original-image" alt="alt_text" class="lazyload"> </picture>   
英文原文

There is a field_image (image) field on the basic content type. Using the Responsive Image, we enabled it on the Default view mode for the field_image field using a Responsive Image style.

The reason why we are setting the Image url as the data-src attribute is because we are using Lazysizes javascript library to lazyload the images. The Responsive Image module outputs using source srcset as separate tags from the img tag.

In my testing, I have found that although the browser fetches whatever size it needs to based on the Responsive Image style configuration, it does not change the image url.

How would we control the output of the image so that we can get the image to display similar to below?

Goal:

  1. Lazy load images even while using Responsive Image Module
  2. Output the image field so that the data-src is set, src is not set, and the "lazyload" class is added

Current situation:

<picture> <source srcset="/image.jpg 1x" media="all and (min-width: 768px)" type="image/jpeg"> <source srcset="/image2.jpg 1x" media="all and (min-width: 320px)" type="image/jpeg"> <img src="/original-image" alt="alt_text" > </picture> 

Desired Output:

<picture> <source srcset="/image.jpg 1x" media="all and (min-width: 768px)" type="image/jpeg"> <source srcset="/image2.jpg 1x" media="all and (min-width: 320px)" type="image/jpeg"> <img src="/original-image" alt="alt_text" class="lazyload"> </picture> 
        

回答列表

1
 
vote
vote
最佳答案
 

响应图像模块使用调用的枝条模板创建这些模块: responsive-image.html.twig

您有两个选项来更改输出。您可以将此模板从其中的位置复制到 99887668 到您的主题下。

或者您可以在模块或 $view->style_plugin->row_plugin->nodes[$view->result[$id]->nid]->my_field_name 0 文件中使用 hook_preprocess_responsive_image()

基本上,您需要更改 998876611 对象中的值。例如。抓取 $view->style_plugin->row_plugin->nodes[$view->result[$id]->nid]->my_field_name 2 属性的值,删除它,并使用 998876614 属性的值添加 $view->style_plugin->row_plugin->nodes[$view->result[$id]->nid]->my_field_name 3 属性。

 

The responsive image module creates these with a twig template called: responsive-image.html.twig.

You have two options to change the output. You can either copy this template from it's location under core/modules/responsive_image/templates to your theme.

Or you can use the hook_preprocess_responsive_image() in a module or your my_theme.theme file.

Basically, you will need to change the values in the source_attributes object. E.g. grab the value of the src attributes, delete it, and add your srcset attribute with the value of the src attribute.

 
 
 
 

相关问题

0  如何从节点Twig文件添加到html.twig?  ( How to add to html twig from a node twig file ) 
我需要将物品映像添加到Facebook和Twitter上共享的帖子,这是由如下所示的Meta标签完成的,如下所示 <head> <head-placeholder token="{{ placeholder_token|raw }}"> <title>{{ head_title|safe_join(' |...

1  在首页上显示一个块,但仅在第一页上  ( Show a block on the front page but only on the first page ) 
我有一个块,我想在首页上显示,但不是每个分页页面(即,不要在/ front-page?page = 1上显示它)。 如何实现这一目标? ...

1  用户传递表单提交后重定向  ( Redirect after user pass form submit ) 
我正在尝试在击中Drupal 8重置密码表单中击中提交按钮后进行重定向。 我使用 theme_form_alter 钩子和函数作为新的提交操作。问题是,重定向工作但没有发送电子邮件。 如果我取消注释新提交挂钩的行,则邮件被发送,而是当然没有重定向。 function theme_form_alter(&$form...

0  汇总CSS的问题  ( Problems with aggregated css ) 
我在本地开发和远程测试环境上激活了聚合CSS,没有任何问题。现在正在暂存CSS文件的聚合导致麻烦:在某些页面上的样式看起来正确,但随机页面它完全破碎。 HTML有时会显示: <link rel="stylesheet" href="/?p0upgh" media="all" /> <link rel="style...

0  查询条件串联  ( Query condition concatenation ) 
我可以直接在mysql ... GEOID + '-' + NAME IN ('01005-Barbour', '01007-Bibb') 但是当我尝试使用数据库API执行此操作时... $query->condition("s.STUSPS + '-' + c.NAME", $counties, ...

1  WebForm Subsumform Hook  ( Webform submitform hook ) 
我正在使用drupal 8和webform ::errorElement()5 。我有一个使用ajax的多步表单,启用了5页。 我需要改变确认消息,但我还无法弄清楚。我想要实现的是根据最后一个问题所选的某些表单值来更改消息。我创建了一个自定义模块并扩展了 ::errorElement()6 ,并创建了 ::erro...

0  如何调用CSV资源  ( How to call a csv resource ) 
我有一个解耦的Drupal网站,我想使用CSV序列化模块调用REST资源输出CSV。我还在该特定资源中配置了REST UI以接受CSV。 我尝试用 Content-Type: application/csv ,或 Content-Type: text/csv ,我发送 _format=csv 作为get参数,但唯一的...

1  “将此字段作为自定义链接输出”设置此处链接到内容[已关闭]  ( Output this field as a custom link set here link to the content ) 
关闭。这个问题需要详细信息或清晰度。它目前不接受答案。 想要改进这个问题?添加详细信息并澄清编辑此帖的问题。 关闭 3年前。 ...

0  将重复字段的所有实例输出在一起  ( Output all instances of a repeating field together ) 
我有段落安装,正在创建具有嵌套段落的内容类型 - 因此有一个标题字段的段落,一个主体字段 - 然后在另一个段落中嵌套,这样我就可以嵌套了多个框这页纸。到目前为止这么好 - 我想学习的是输出字段,所以我可以将它们放在jQuery UI标签中。 在我的模板中我现在有: {{ content.field_tab_tit...

2  Drupal 8规则和媒体  ( Drupal 8 rules and media ) 
我想在内容发布时发布与内容相关联的媒体。 是有可能的规则吗? 如果是这样,我需要设置的条件是什么? 我所设置的条件是: 节点已发布 - 数据选择器:节点 实体有字段 - 数据选择器:节点,值:field_my_media_field ...

0  如何添加块模板建议?  ( How to add block template suggestions ) 
我希望能够将块或将块放入区域,并根据面板的选定视图模式将其主题为主题。我已经注意到自定义块和实体块之间的差异,其中一个表单为您提供了视图模式,以显示块,而另一个表单没有(自定义块)。 我希望模板建议沿着 block--provider/module--block-bundle--view-mode.html.twig...

4  搜索API eferpt在结果中是空的  ( Search api excerpt are empty in the result ) 
我在Drupal 8中安装了搜索API模块,并在搜索结果中包含摘录。 但摘录在搜索结果中始终为空。 (HTML DIV元素在内但内部没有内容) 我在论坛中搜索,并启用了从建议的设置中的"亮点" 。 但结果没有变化(我清除了缓存) 我错过了什么? ...

11  如何防止块被缓存?  ( How to prevent a block from being cached ) 
登录后。我正在添加一个侧栏块。一旦我清除缓存,那么只有更新变量或它的值。 namespace Drupal est_demoPluginBlock; use DrupalCoreBlockBlockBase; /** * Provides 'Sidebar' Block * * @Block( * ...

2  如何使用Datadefinition :: Create('list')?  ( How to use datadefinitioncreatelist ) 
答案链接到a 所有可能使用的所有类型的列表 DataDefinition::create() 。 可以使用的一个插件是 itemlist 。 但我找不到有关如何定义列表中的项目的任何文档。 我会期待这样的东西: $status_definition = DataDefinition::create('list...

1  如何更改“发布状态”复选框的标签和帮助文本?  ( How do i change the label and help text of the publishing status checkbox ) 
我们最近将我们的网站更新为Drupal 8.4,并且发布节点的小部件已从下拉列表中更改为复选框。现在,如何更改标签和复选框的文本?它无法在字段UI中更改。 ...

3  贡献D8版本的现有D7 Controm项目?  ( Contribute d8 version of an existing d7 contrib project ) 
有人可以介绍如何贡献现有D7 Controm项目的D8版本?我维护D7项目,并进一步想要添加它的D8版本。 我正在努力创建8.x.1.x开发分支。 请分享以下任何引用或步骤。 我的项目链接:检查dns 。 所以当我创建 C:UsersMyusernameAppDataRoamingComposervendordrus...

4  用CKEDITOR包装锚标记的包装内容  ( Wrapping content in anchor tags with ckeditor ) 
我正在尝试在drupal 8安装中的标记中包装html内容块: <a href="/link"><h2>Link 1</h2><h3>Subheader link 1</h3></a> ckeditor将其更改为至: <h2><a href="/link">Link 1</a></h2><h3><a...

0  如何防止在节点上显示特定段落类型(捆绑包)  ( How to prevent display of specific paragraph types bundles on nodes ) 
我有一个包含段落字段的内容类型,该段落具有可用许多段落类型。对于其中一个段落类型,我不希望它在节点中显示它,因为我在使用不同区域中的视图显示它。视图工作很大,但我无法弄清楚如何防止特定段落类型在节点上显示。我尝试使用各种钩子从渲染阵列中删除.Theme,但这也从视图中删除它。我还尝试从节点模板中的段落字段中删除段落类...

0  如何从页面标题中删除“drupal”?  ( How to remove drupal from title of page ) 
现在我有这个: 在这里,我发现了如何将此文本更改为其他文本: https: //www.drupal.org/forum/support/post-installation/2016-09-20/change-site-title-in-drupal-8 我试过: 但它没有帮助。 drupal是8...

3  从段落中引用块插件或表单?  ( Reference a block plugin or form from a paragraph ) 
是否有一种方法来引用自定义表单(用Form API构建)或一个块插件,该插件呈现相同的形式?我只看到了一种方法来引用自定义块(内容)或配置块,而不是两者。如何解决这一场景? ...




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


Licensed under cc by-sa 3.0 with attribution required.