Full Size Image Custom Code

  • Resolved Anonymous User 14978628

    (@anonymized-14978628)


    7 years, 4 months ago

    Hey Stefan,

    In the plugin settings there is an option to specify custom media queries and you can set the full sized image to display at a given breakpoint. Is it possible to do this with custom code for manual insertion?

    I would have thought I add “full” with my image size names, but i’m not sure what i put for the “sizes” attributes as normally you specify the image size for the breakpoint but different images will have different full sized dimensions.

    Not sure if i’ve explain that well, but here’s what i want to do in the code:

    <?php
    $thumbnail_id = get_post_thumbnail_id( $post->ID );
    echo rwp_img( $thumbnail_id, array(
    ‘sizes’ => array(‘FULLSIZE IMAGE‘, ‘featured-desktop’, ‘featured-tablet-p’, ‘featured-phone-l’, ‘featured-phone-p’ ),
    ‘attributes’ => array(
    ‘sizes’ => ‘(min-width: 1024px) THEN SHOW FULLSIZE IMG, (min-width: 768px) 1036px, (min-width: 568px) 900px, 507px’,
    ‘alt’ => get_post_meta( $thumbnail_id, ‘_wp_attachment_image_alt’, true)
    )
    ));
    ?>

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

    (@stefanledin)

    Hi marty!
    I think:
    (min-width: 1024px 100vw), (min-width: 768px...
    …would work?

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    Magic, it’s working! I’ve put the code like this, is it ok written like such? Basically i just mean i’ve put “full” for the default fullsize image, this isn’t an image size i created just the default full image:

    <?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
    'sizes' => array('full', 'featured-tablet-p', 'featured-phone-l', 'featured-phone-p' ),
    'attributes' => array(
        'sizes' => '(min-width: 1024px 100vw), (min-width: 768px) 1036px, (min-width: 568px) 900px, 507px',
        'alt' => get_post_meta( $thumbnail_id, '_wp_attachment_image_alt', true)
)
));
?>

    Could you explain why (min-width: 1024px 100vw) produces the full size image please?

    Plugin Author stefanledin

    (@stefanledin)

    Looks good!
    What you’re saying with (min-width: 1024px 100vw) is that when the screen is at least 1024px wide, the image should be 100vw (100% of the viewport with). This means that the browser will pick the larges image avaliable in the srcset. Well, at least the one that is big enough to fill the screen. If the viewport is 1440px wide and you have a 1500px and a 1600px image, the 1500px image would be selected. If it’s a retina display, the 1600px will be selected since it’s the largest available.

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    What happens if the largest image size is less than the viewport width? Does it just select the largest size of that image anyway?

    I’ve sent you an email also.

    Thanks

    Plugin Author stefanledin

    (@stefanledin)

    It would just load the largest image available in that case.
    Yes I’ve seen that, I’m back at the office now so I’ll try to reply soon.

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    That’s great, thanks a lot Stefan.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Full Size Image Custom Code’ is closed to new replies.