0

I need to display two versions of the image on my Drupal 8 website - one for "wide" viewport, another for "narow".

I can do it by CSS classes and media queries, but the user will have to load both versions of the image. I would like to avoid it.

I have decided to exploit <picture> tag. I see two possible options, but none worked for me:

1) I have tried to define type of content (banner) which contains two image fields (my 2 versions of the image). Then in the appropriate View I rewrote some field to "manually" insert <picture> tag. Unfortunatelly, it seems Views in Drupal strip this tag.

2) There is "Responsive Image" module, but it deals with the same source image served in different sizes. It is not my problem: I need two different images.

So, I need some advice how either prevent stripping of <picture> tag in Views or how to add some kind of Picture field to field types.

Radek Svítil
  • 378
  • 3
  • 20
  • After posting, I found this https://www.drupal.org/project/picture_field This is exactly what I need. Unfortunally, this project is apparently dead. – Radek Svítil Nov 10 '17 at 16:25

1 Answers1

1

The Picture module included with Drupal 8 allows you to specify the mappings to your image styles for image fields. The Picture module isn’t enabled by default. After you enable it, you can select which of your image styles will be selected at a certain viewport, or minimum width. These settings are set within your theme.

enter image description here

After you’ve added the new Picture format, this is available in the “Manage display” tab of your chosen content type, as an alternative to the Image format.

enter image description here

Akremi Mourad
  • 174
  • 4