How setup sizes correctly?

  • Resolved Aldo

    (@ab_lu)


    9 years, 8 months ago

    Hello

    I’m a bit confused in how to setup the sizes correctly.

    I have the following setup:

    $rwp_attributes = array(
				'sizes' => array( 'featured-small-image', 'featured-small-image@2x', 'featured-image', 'featured-image@2x' ),
				'media_queries' => array(
					'featured-small-image' 	=> 'min-width: 350px',
					'featured-image'   		=> 'min-width: 600px'
				),
				'retina' => true,
				'attributes' => array(
					'img' => array(
					'class' => 'lazyload img-responsive'
				),
				'ignored_image_formats' => array( 'gif' )
			)
	);

    This is the result:
    <picture ><!--[if IE 9]><video style="display: none;"><![endif]--><source data-srcset="/wp-content/uploads/2015/06/P_0909_titelbild-700x350.jpg, /wp-content/uploads/2015/06/P_0909_titelbild-1400x700.jpg 2x" media="(min-width: 600px)"><!--[if IE 9]></video><![endif]--><img data-srcset="/wp-content/uploads/2015/06/P_0909_titelbild-350x175.jpg, /wp-content/uploads/2015/06/P_0909_titelbild-700x350.jpg 2x" class="lazyload img-responsive"></picture>

    The area where the image is showed is 700px wide. As soon I’m on a retina screen with a with of 568px, the image is not scaled to the full with.
    You can check here, the second device: https://www.responsinator.com/?url=www.schnieperarchitekten.ch%2Fprojekte%2Fneubau-haus-sunnerain-in-hertenstein-bei-weggis%2F

    I just can’t figure out why on retina screen 568px with the 1400px image is not loaded.

    Thanks for any help!

    Cheers
    Aldo

    https://www.ads-software.com/plugins/responsify-wp/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author stefanledin

    (@stefanledin)

    Hi Aldo!
    This happens because featured-small-image only is 350px wide. The retina version, which is 700px, will still render with a width of 350.
    So you’re not doing anything wrong, I think you just have wrong expectations ??

    Btw, you can remove 'featured-small-image' => 'min-width: 350px', from the media_queries array. It won’t be applied to the smallest image, which featured-small-image is in this case ??

    Thread Starter Aldo

    (@ab_lu)

    Thanks for the quick feedback!
    So what would be the best to overcome this?
    add an additional media query with his own size?
    BTW: Can I add another media query with another name than the image sizes defined above?

    thanks!
    Aldo

    Plugin Author stefanledin

    (@stefanledin)

    I’m not sure I understand the question…? ??

    Personally, I don’t care about retina when it comes to photos. I think it’s more important for icons, logos and that kind of graphics.
    One solution is to turn off the retina option, but still take advantage of the “retina” sizes. They will be used as regular images instead.

    $rwp_attributes = array(
	'sizes' => array( 'featured-small-image', 'featured-image', 'featured-image@2x' ),
	'media_queries' => array(
		'featured-image' => 'min-width: 350px',
		'featured-image@2x' => 'min-width: 700px'
	),
	'retina' => false,
	'attributes' => array(
		'img' => array(
		'class' => 'lazyload img-responsive'
	),
	'ignored_image_formats' => array( 'gif' )
);

    featured-small-image@2x and featured-image seems to have the same size, so I removed the first one.

    Thread Starter Aldo

    (@ab_lu)

    So for what is the retina attribute exactly? If HiRes images are still returned for Retina screens without setting retina to “true”?
    Somehow I don’t understand that.

    And as for my previous question:
    You say I’m not doing anything wrong. To return an image bigger than 350px on retina, shall I add another media_query and corresponding size?
    Or different asked, how should my setup look like to have images in the correct size?
    Add an “featured-medium-image” with 450px?

    Plugin Author stefanledin

    (@stefanledin)

    So for what is the retina attribute exactly? If HiRes images are still returned for Retina screens without setting retina to “true”?

    No, I didn’t say that. I’m just using the “retina image sizes” as regular images in the example. Not as retina versions, even though that was their purpose from the beginning.

    To return an image bigger than 350px on retina, shall I add another media_query and corresponding size? Or different asked, how should my setup look like to have images in the correct size?
    Add an “featured-medium-image” with 450px?

    Yeah that sounds right. Or if you switch to featured-image earlier than at 600px.

    'featured-image' => 'min-width: 450px'

    Thread Starter Aldo

    (@ab_lu)

    All clear now, Thanks a lot!

    Plugin Author stefanledin

    (@stefanledin)

    Great! As always, you know where to find me the next time you need me ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How setup sizes correctly?’ is closed to new replies.