Incorrect output of picture element [#1783686]

My theme has nine potential breakpoints defined in it.

<ul>
<li>mobile: (min-width: 0px)
<li>mobileland: all and (min-width: 21em)</li>
<li>mobilewide: all and (min-width: 28.5em)</li>
<li>tabport: all and (min-width: 46.5em)</li>
<li>tabland: all and (min-width: 55.5em)</li>
<li>desk: all and (min-width: 65em)</li>
<li>wide: all and (min-width: 73.5em)</li>
<li>huge: all and (min-width: 91.5em)</li>
<li>giant: all and (min-width: 109.5em)</li>
</ul>

On the breakpoints configuration page, I turned on the 2x multipliers for each of those breakpoints. I then created three breakpoint groups:

<ul>
 <li>Aside</li>
<li>Full</li>
<li>Non-aside</li>
</ul>

Each group has a subset of the total potential breakpoints. For example, Aside and Non-aside use five of the breakpoints, while full uses seven of the breakpoints. Again, each of them has the 2x multipliers turned on.

I have nine image styles for the various widths to use for those breakpoints. The title of each style corresponds to the width the image will be scaled to:

<ul>
<li>resp-240</li>
<li>resp-320</li>
<li>resp-420</li>
<li>resp-480</li>
<li>resp-640</li>
<li>resp-840</li>
<li>resp-960</li>
<li>resp-1280</li>
<li>resp-1680</li>
</ul>

Then in the responsive images and styles configuration, I assign those image styles to the appropriate breakpoints and their 2x versions. For example, for Aside, I have the following assignments:

<ul>
<li>1x mobile: resp-320</li>
<li>2x mobile: resp-640</li>
<li>1x mobileland: resp-480</li>
<li>2x mobileland: resp-960</li>
<li>1x mobilewide: resp-320</li>
<li>2x mobilewide: resp-640</li>
<li>1x tabport: resp-240</li>
<li>2x tabport: resp-480</li>
<li>1x giant: resp-320</li>
<li>2x giant: resp-640</li>
</ul>

However, when the picture element code is output, and this is true regardless of how the image is selected (Media WYSIWYG integration, choosing the responsive image Aside format, or simply an image field set to the responsive image Aside format), this does not match the actual breakpoints and image styles that are output:

<picture class="resp-img-picture" alt="" title="">
<!-- <source media="(min-width: 0px)"  alt="" class="media-image resp-img-picture resp-img-picture-mobile" width="640" typeof="foaf:Image" src="http:///sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg"  /> -->
<source media="(min-width: 0px)"  alt="" class="media-image resp-img-picture resp-img-picture-mobile" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 21em)"  alt="" class="media-image resp-img-picture resp-img-picture-mobileland" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-960/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 21em)"  alt="" class="media-image resp-img-picture resp-img-picture-mobileland" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-960/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 28.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-mobilewide" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 28.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-mobilewide" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 46.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-tabport" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 46.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-tabport" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 55.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-tabland" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 55.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-tabland" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 65em)"  alt="" class="media-image resp-img-picture resp-img-picture-desk" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 65em)"  alt="" class="media-image resp-img-picture resp-img-picture-desk" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 73.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-wide" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 73.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-wide" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 91.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-huge" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 91.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-huge" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-480/public/garbage-pile-banner_6.jpg"  />
<!-- <source media="all and (min-width: 109.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-giant" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg"  /> -->
<source media="all and (min-width: 109.5em)"  alt="" class="media-image resp-img-picture resp-img-picture-giant" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg"  />
<noscript><img  alt="" class="media-image resp-img-picture resp-img-picture-mobile" width="640" typeof="foaf:Image" src="/sites/default/files/styles/resp-640/public/garbage-pile-banner_6.jpg" /></noscript>
</picture>

As you can see, all breakpoints are used, even if the responsive image group only uses a subset of the theme’s breakpoints. As well, none of the 2x versions are used. srcset is not showing up.

It appears that each breakpoint is using the image style assigned to the 2x version, rather than the 1x version.

Also, each source element is being listed twice, the first time escaped. That should not be necessary.

Hope we can get this cleared up fairly easily.

Comments

Comment #1

attiks CreditAttribution: attiks commented 14 September 2012 at 07:32

The easy part: "Also, each source element is being listed twice, the first time escaped. That should not be necessary." It is for the polyfill to work.

You're absolutely sure you select the right output formatter?

Comment #2

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 14 September 2012 at 20:29

Yes, I'm selecting the right output formatter.

For an image field, the output is the same whether I'm using the image formatter or the rendered file formatter. And yes, I've double-checked the settings on the file types configuration page for images inserted via the Media module and WYSIWYG.

Something is off.

Comment #3

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 4 October 2012 at 16:24

I just installed the latest dev versions of resp_img and breakpoints, and I'm still seeing the same errors:

The width attribute on every source element is the same, regardless of the image style settings for a given breakpoint
If 2x is set for a breakpoint, then the 2x image style is output for that breakpoint, but not the 1x. There is no srcset applied to the source element to allow for retina images.
Source elements are output for every possible breakpoint for a theme, as defined in the .info file, even if that breakpoint isn't set for a given responsive image style.

These are picture elements inserted into the content area with the Media module.

For picture elements inserted via an image field, the second and third items are still true. Different widths are applied to each source element, but based on the 2x image style for that breakpoint: the 1x width is ignored.

This is an important bug, because only retina-quality images are being output, quadrupling the page weight of responsive images, which is counter-productive on mobile devices, or on any device.

Comment #4

Jelle_S

Dutch

Antwerp, Belgium

CreditAttribution: Jelle_S commented 5 October 2012 at 10:12

Fixed in latest dev. You will need the latest dev of Breakpoints as well. And don't forget to run update.php :-)

Comment #5

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 5 October 2012 at 15:54

Hmmm. Latest dev versions installed, update.php has run.

I'm not sure what happened, but at least initially, I'm not even getting a picture element in my HTML output now.

This is the error message I'm seeing:

Notice: Undefined variable: group_name in resp_img_field_attach_view_alter() (line 261 of /sites/all/modules/contributed/resp_img/resp_img.module).

I've taken a look at the breakpoints configuration page and the responsive image styles configuration page, and all looked well. I'll check the Media and field configuration pages next.

Comment #6

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 5 October 2012 at 15:57

None of the responsive image styles are showing up in the file types > manage display or file types > manage file display configuration pages. That's probably part of the problem.

Comment #7

Jelle_S

Dutch

Antwerp, Belgium

CreditAttribution: Jelle_S commented 12 October 2012 at 10:28

If you go to admin/config/media/file-types/manage/image/file-display and you check the 'Image' checkbox you should see the responsive image styles in the 'Image' vertical tab in the 'Image style' select box. Can you confirm?

Comment #8

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 12 October 2012 at 17:52

No, they're not showing up there. Pretty sure that's the source of the problem.

Comment #9

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 12 October 2012 at 18:34

With the latest dev version, the responsive image styles are showing up correctly on the file display pages, and the picture element is now properly output on the page.

Also:

Both the 1x and the 2x versions of each source element are properly output, using srcset.
Only the specified breakpoints are being output for each picture element, as specified by the breakpoint groups and responsive image styles.

However, the same width and height attributes are still being output on every source element.

Comment #10

attiks CreditAttribution: attiks commented 12 October 2012 at 18:48

Assigned:

Unassigned

» Jelle_S

Comment #11

Jelle_S

Dutch

Antwerp, Belgium

CreditAttribution: Jelle_S commented 19 October 2012 at 14:11

The ouput seems right to me... I followed your steps described in the issue summary (starting from a clean install).

I tested with the Aside group you described.

So after creating the breakpoint groups, image styles and mappings between them here's what I did:

Change the display settings of the Article content type to use the Aside group.
Add a new Article with an image.

Here's what the mapping looks like:

Breakpoint	Media query	Image style
mobile	(min-width: 0px)	scale 320x320 allow upscaling
mobileland	all and (min-width: 21em)	scale 480x480 allow upscaling
mobilewide	all and (min-width: 28.5em)	scale 320x320 allow upscaling
tabport	all and (min-width: 46.5em)	scale 240x240 allow upscaling
giant	all and (min-width: 109.5em)	scale 320x320 allow upscaling

And here's the generated output:


<picture class="resp-img-picture" alt="" title="">

  <!-- <source media="(min-width: 0px)" srcset="http://respimg.dev/sites/default/files/styles/resp-320/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-640/public/field/image/aston-martin1.jpg 2x"  class="resp-img-picture resp-img-picture-mobile" typeof="foaf:Image"  width="320" height="240" alt=""  /> -->
  <source media="(min-width: 0px)" srcset="http://respimg.dev/sites/default/files/styles/resp-320/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-640/public/field/image/aston-martin1.jpg 2x" class="resp-img-picture resp-img-picture-mobile" typeof="foaf:Image" width="320" height="240" alt="">

  <!-- <source media="all and (min-width: 21em)" srcset="http://respimg.dev/sites/default/files/styles/resp-480/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-960/public/field/image/aston-martin1.jpg 2x"  class="resp-img-picture resp-img-picture-mobileland" typeof="foaf:Image"  width="480" height="360" alt=""  /> -->
  <source media="all and (min-width: 21em)" srcset="http://respimg.dev/sites/default/files/styles/resp-480/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-960/public/field/image/aston-martin1.jpg 2x" class="resp-img-picture resp-img-picture-mobileland" typeof="foaf:Image" width="480" height="360" alt="">

  <!-- <source media="all and (min-width: 28.5em)" srcset="http://respimg.dev/sites/default/files/styles/resp-320/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-640/public/field/image/aston-martin1.jpg 2x"  class="resp-img-picture resp-img-picture-mobilewide" typeof="foaf:Image"  width="320" height="240" alt=""  /> -->
  <source media="all and (min-width: 28.5em)" srcset="http://respimg.dev/sites/default/files/styles/resp-320/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-640/public/field/image/aston-martin1.jpg 2x" class="resp-img-picture resp-img-picture-mobilewide" typeof="foaf:Image" width="320" height="240" alt="">

  <!-- <source media="all and (min-width: 46.5em)" srcset="http://respimg.dev/sites/default/files/styles/resp-240/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-480/public/field/image/aston-martin1.jpg 2x"  class="resp-img-picture resp-img-picture-tabport" typeof="foaf:Image"  width="240" height="180" alt=""  /> -->
  <source media="all and (min-width: 46.5em)" srcset="http://respimg.dev/sites/default/files/styles/resp-240/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-480/public/field/image/aston-martin1.jpg 2x" class="resp-img-picture resp-img-picture-tabport" typeof="foaf:Image" width="240" height="180" alt="">

  <!-- <source media="all and (min-width: 109.5em)" srcset="http://respimg.dev/sites/default/files/styles/resp-320/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-640/public/field/image/aston-martin1.jpg 2x"  class="resp-img-picture resp-img-picture-giant" typeof="foaf:Image"  width="320" height="240" alt=""  /> -->
  <source media="all and (min-width: 109.5em)" srcset="http://respimg.dev/sites/default/files/styles/resp-320/public/field/image/aston-martin1.jpg 1x, http://respimg.dev/sites/default/files/styles/resp-640/public/field/image/aston-martin1.jpg 2x" class="resp-img-picture resp-img-picture-giant" typeof="foaf:Image" width="320" height="240" alt="">

  <noscript>&lt;img  class="resp-img-picture resp-img-picture-mobile" typeof="foaf:Image"  width="320" height="240" alt="" /&gt;</noscript>
  <img src="http://respimg.dev/sites/default/files/styles/resp-240/public/field/image/aston-martin1.jpg" width="240" height="180" class="resp-img-picture resp-img-picture-tabport">

</picture>

As far as I can see, the media queries match the widths and heights in the picture element. Can you confirm?