After I upgraded to 2.0 I had the similar issues as others reported. I had to reinstall Picture, and reconfigure it.

After setting it up as similar to before, now I experience that smallest image is being displayed at all breakpoints that are defined.

The HTML from "view:source":

 
<picture>
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_xs_1x/public/hero/1800x540_0.png?itok=ij3AVCXf 1x, http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_xs_1_5x/public/hero/1800x540_0.png?itok=Z0NPnIEc 1.5x" media="(min-width: 0px)" />
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_sm_1x/public/hero/1800x540_0.png?itok=LGxUv28F 1x, http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_sm_1_5x/public/hero/1800x540_0.png?itok=UJWjqEoy 1.5x" media="(min-width: 481px)" />
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_md_1x/public/hero/1800x540_0.png?itok=-8MOC1hh 1x" media="(min-width: 769px)" />
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_lg_1x/public/hero/1800x540_0.png?itok=rmpQ00pG 1x" media="(min-width: 992px)" />
  <img srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_lg_1x/public/hero/1800x540_0.png?itok=rmpQ00pG w" alt="" />
</picture>

The HTML after DOM updates (after polyfill loaded):


<picture>
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_xs_1x/public/hero/1800x540_0.png?itok=ij3AVCXf 1x, http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_xs_1_5x/public/hero/1800x540_0.png?itok=Z0NPnIEc 1.5x" media="(min-width: 0px)">
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_sm_1x/public/hero/1800x540_0.png?itok=LGxUv28F 1x, http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_sm_1_5x/public/hero/1800x540_0.png?itok=UJWjqEoy 1.5x" media="(min-width: 481px)">
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_md_1x/public/hero/1800x540_0.png?itok=-8MOC1hh 1x" media="(min-width: 769px)">
  <source srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_lg_1x/public/hero/1800x540_0.png?itok=rmpQ00pG 1x" media="(min-width: 992px)">
  <img src="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_xs_1x/public/hero/1800x540_0.png?itok=ij3AVCXf" srcset="http://example.com/sites/default/files/styles/hero2_breakpoints_theme_ucbp_lg_1x/public/hero/1800x540_0.png?itok=rmpQ00pG w" alt="">
</picture>

Notice the difference in IMG src?

Theme name: ucbp

Breakpoints defined in theme info:

breakpoints[xs] = (min-width: 0px)
breakpoints[sm] = (min-width: 481px)
breakpoints[md] = (min-width: 769px)
breakpoints[lg] = (min-width: 992px)

Export of the Picture mappings:


$picture_mapping = new PictureMapping();
$picture_mapping->disabled = FALSE; /* Edit this to true to make a default picture_mapping disabled initially */
$picture_mapping->api_version = 2;
$picture_mapping->label = 'UCBP Mappings: Hero';
$picture_mapping->machine_name = 'ucbp_mappings_hero';
$picture_mapping->breakpoint_group = 'hero';
$picture_mapping->mapping = array(
  'breakpoints.theme.ucbp.xs' => array(
    '1x' => array(
      'mapping_type' => 'image_style',
      'image_style' => 'hero2_breakpoints_theme_ucbp_xs_1x',
      'sizes' => '',
      'sizes_image_styles' => array(
        'thumbnail' => 0,
        'medium' => 0,
        'large' => 0,
        'hero' => 0,
        'hero2_breakpoints_theme_ucbp_lg_1x' => 0,
        'hero2_breakpoints_theme_ucbp_md_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1_5x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1_5x' => 0,
        'hero_lg_1x' => 0,
        'hero_md_1x' => 0,
        'hero_sm_1x' => 0,
        'hero_teaser' => 0,
        'hero_teaser_lg_1x' => 0,
        'hero_teaser_md_1x' => 0,
        'hero_teaser_sm_1x' => 0,
        'hero_teaser_sm_1_5x' => 0,
        'hero_teaser_xs_1x' => 0,
        'hero_teaser_xs_1_5x' => 0,
        'hero_xs_1x' => 0,
        '_empty image_' => 0,
        '_original image_' => 0,
      ),
    ),
    '1.5x' => array(
      'mapping_type' => 'image_style',
      'image_style' => 'hero2_breakpoints_theme_ucbp_xs_1_5x',
      'sizes' => '',
      'sizes_image_styles' => array(
        'thumbnail' => 0,
        'medium' => 0,
        'large' => 0,
        'hero' => 0,
        'hero2_breakpoints_theme_ucbp_lg_1x' => 0,
        'hero2_breakpoints_theme_ucbp_md_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1_5x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1_5x' => 0,
        'hero_lg_1x' => 0,
        'hero_md_1x' => 0,
        'hero_sm_1x' => 0,
        'hero_teaser' => 0,
        'hero_teaser_lg_1x' => 0,
        'hero_teaser_md_1x' => 0,
        'hero_teaser_sm_1x' => 0,
        'hero_teaser_sm_1_5x' => 0,
        'hero_teaser_xs_1x' => 0,
        'hero_teaser_xs_1_5x' => 0,
        'hero_xs_1x' => 0,
        '_empty image_' => 0,
        '_original image_' => 0,
      ),
    ),
  ),
  'breakpoints.theme.ucbp.sm' => array(
    '1x' => array(
      'mapping_type' => 'image_style',
      'image_style' => 'hero2_breakpoints_theme_ucbp_sm_1x',
      'sizes' => '',
      'sizes_image_styles' => array(
        'thumbnail' => 0,
        'medium' => 0,
        'large' => 0,
        'hero' => 0,
        'hero2_breakpoints_theme_ucbp_lg_1x' => 0,
        'hero2_breakpoints_theme_ucbp_md_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1_5x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1_5x' => 0,
        'hero_lg_1x' => 0,
        'hero_md_1x' => 0,
        'hero_sm_1x' => 0,
        'hero_teaser' => 0,
        'hero_teaser_lg_1x' => 0,
        'hero_teaser_md_1x' => 0,
        'hero_teaser_sm_1x' => 0,
        'hero_teaser_sm_1_5x' => 0,
        'hero_teaser_xs_1x' => 0,
        'hero_teaser_xs_1_5x' => 0,
        'hero_xs_1x' => 0,
        '_empty image_' => 0,
        '_original image_' => 0,
      ),
    ),
    '1.5x' => array(
      'mapping_type' => 'image_style',
      'image_style' => 'hero2_breakpoints_theme_ucbp_sm_1_5x',
      'sizes' => '',
      'sizes_image_styles' => array(
        'thumbnail' => 0,
        'medium' => 0,
        'large' => 0,
        'hero' => 0,
        'hero2_breakpoints_theme_ucbp_lg_1x' => 0,
        'hero2_breakpoints_theme_ucbp_md_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1_5x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1_5x' => 0,
        'hero_lg_1x' => 0,
        'hero_md_1x' => 0,
        'hero_sm_1x' => 0,
        'hero_teaser' => 0,
        'hero_teaser_lg_1x' => 0,
        'hero_teaser_md_1x' => 0,
        'hero_teaser_sm_1x' => 0,
        'hero_teaser_sm_1_5x' => 0,
        'hero_teaser_xs_1x' => 0,
        'hero_teaser_xs_1_5x' => 0,
        'hero_xs_1x' => 0,
        '_empty image_' => 0,
        '_original image_' => 0,
      ),
    ),
  ),
  'breakpoints.theme.ucbp.md' => array(
    '1x' => array(
      'mapping_type' => 'image_style',
      'image_style' => 'hero2_breakpoints_theme_ucbp_md_1x',
      'sizes' => '',
      'sizes_image_styles' => array(
        'thumbnail' => 0,
        'medium' => 0,
        'large' => 0,
        'hero' => 0,
        'hero2_breakpoints_theme_ucbp_lg_1x' => 0,
        'hero2_breakpoints_theme_ucbp_md_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1_5x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1_5x' => 0,
        'hero_lg_1x' => 0,
        'hero_md_1x' => 0,
        'hero_sm_1x' => 0,
        'hero_teaser' => 0,
        'hero_teaser_lg_1x' => 0,
        'hero_teaser_md_1x' => 0,
        'hero_teaser_sm_1x' => 0,
        'hero_teaser_sm_1_5x' => 0,
        'hero_teaser_xs_1x' => 0,
        'hero_teaser_xs_1_5x' => 0,
        'hero_xs_1x' => 0,
        '_empty image_' => 0,
        '_original image_' => 0,
      ),
    ),
  ),
  'breakpoints.theme.ucbp.lg' => array(
    '1x' => array(
      'mapping_type' => 'image_style',
      'image_style' => 'hero2_breakpoints_theme_ucbp_lg_1x',
      'sizes' => '',
      'sizes_image_styles' => array(
        'thumbnail' => 0,
        'medium' => 0,
        'large' => 0,
        'hero' => 0,
        'hero2_breakpoints_theme_ucbp_lg_1x' => 0,
        'hero2_breakpoints_theme_ucbp_md_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1x' => 0,
        'hero2_breakpoints_theme_ucbp_sm_1_5x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1x' => 0,
        'hero2_breakpoints_theme_ucbp_xs_1_5x' => 0,
        'hero_lg_1x' => 0,
        'hero_md_1x' => 0,
        'hero_sm_1x' => 0,
        'hero_teaser' => 0,
        'hero_teaser_lg_1x' => 0,
        'hero_teaser_md_1x' => 0,
        'hero_teaser_sm_1x' => 0,
        'hero_teaser_sm_1_5x' => 0,
        'hero_teaser_xs_1x' => 0,
        'hero_teaser_xs_1_5x' => 0,
        'hero_xs_1x' => 0,
        '_empty image_' => 0,
        '_original image_' => 0,
      ),
    ),
  ),
);

There is no error or message anywhere, even in the browser console. Has anyone have a similar issue? At this point I am not sure if it is related with with possible 2.0 glitches or my mis-configuration.

Any thoughts are much appreciated. Cheers,

Comments

osman’s picture

osman
Location San Francisco, CA
CreditAttribution: osman commented
Related issues: +#2222957: picturefill: images always rendered using image style associated with first (mobile) breakpoint
osman’s picture

osman
Location San Francisco, CA
CreditAttribution: osman commented
Status: Active » Needs review

Seems like rearranging breakpoints from largest to smallest (opposite of what has been recommended) fixes the issue.

See https://drupal.org/node/1904690#comment-8823089

Could anyone also confirm this?

attiks’s picture

attiks CreditAttribution: attiks commented
Status: Needs review » Fixed

True, you have to order your breakpoints from the "largest" to the "smallest", but keep in mind that it depends if you use min or max queries, the picture element (and the polyfill) will use the first matching source tag.

ag_design’s picture

ag_design CreditAttribution: ag_design commented

I suggest to change breakpoints order in a screenshots on this page https://drupal.org/node/1904690#warning in a reverse order.
It is misleading now, because is showing from "smallest" to " largest"

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.