Support » Fixing WordPress » Further Improvements for Responsive Images in WordPress

  • Resolved snippet24

    (@snippet24)


    Currently properly setting image sizes via picture tag and srcset is a hassle maybe it should be automated as much as possible, here are some ideas on how it could be improved.

    1. For starters to add a responsive mode to “WISYG” Editor, similar to bootstrap that is adding the following css:
    max-width: 100%;
    height: auto;
    Perhaps with an optional max-width size or setting with/height to be considered as max width/height.

    3. A custom template tag to call for an automated picture with srcsets based an all the library image sizes, with a parameter for max-size such as 100% or in pixels 500px.

    4. Add native retina support/for each “media library size” and apply this accordingly to this template tag.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Joy

    (@joyously)

    Perhaps you shouldn’t be doing it manually.
    See https://developer.wordpress.org/?s=srcset
    Most themes already have the correct CSS for responsive images. It is obvious when reviewing themes for the repository, and we tell theme author to add it.
    The theme doesn’t have to make any extra calls for images to be responsive, but there is also an option for the theme to filter the srcset if it wants to.
    One of the recent WP releases had this ticket: https://core.trac.wordpress.org/ticket/43524

    What version are you running?

    snippet24

    (@snippet24)

    Thank you!! 🙂 So to be clear it must be set in functions.php

    Also I missed to mention that I have many images using custom fields. Should I use the same example codes?

    What version are you running?

    latest 5.4.2

    https://core.trac.wordpress.org/ticket/43524

    Okey I read it all but I didn’t frankly understand everything. What are subsizes vs sub-images? And the idea is to remove name sizes like “large” and instead just add actual sizes like “1024” to options? Maybe I’m just tired will re-read it tomorrow.

    • This reply was modified 1 week ago by snippet24.
    • This reply was modified 1 week ago by snippet24.
    snippet24

    (@snippet24)

    Okey seems like for ACF this should do.
    https://www.awesomeacf.com/responsive-images-wordpress-acf/

    I’m not sure if the above link accounts for retina sizes..
    I think it won’t hurt if you can provide some examples (I want to be really sure I’m doing it well).. either using custom fields or not.

    • This reply was modified 6 days, 22 hours ago by snippet24.

    I think you are wanting something, but I have no idea what.
    Styles don’t go in functions.php.
    I don’t know why you would have images in custom fields or how you are doing your images separately from the main content in the editor (which is handled by core with no effort from the user or theme). If you put the same class on the image as WP does, they will be handled by core. That is the wp-image-{ID} class, as can be seen in the code here: https://developer.wordpress.org/reference/functions/wp_make_content_images_responsive/

    I think you are wanting something, but I have no idea what.

    I want to automatically generate a markup similar to this (example with custom fields below) without having to load it from the_content but simpler to call, to automate it for generation of sizes/retina versions, and setting the max-width in the method something like <?php responsive_image($ID, $max_width); ?>

    Example Code to be generated:

    <picture>
      <?php $image1xretinalarge = wp_get_attachment_image_src(get_field('imagen_ID'), 'large1xretina'); ?>
      <?php $image2xretinalarge = wp_get_attachment_image_src(get_field('imagen_ID'), 'large2xretina'); ?>
      <?php $image1xretinamedium = wp_get_attachment_image_src(get_field('imagen_ID'), 'medium1xretina'); ?>
      <?php $image2xretinamedium = wp_get_attachment_image_src(get_field('imagen_ID'), 'medium2xretina'); ?>
      <?php $image1xretinasmall = wp_get_attachment_image_src(get_field('imagen_ID'), 'small1xretina'); ?>
      <?php $image2xretinasmall = wp_get_attachment_image_src(get_field('imagen_ID'), 'small2xretina'); ?>
      
    <source media="(min-width: 900px)" srcset="<?php echo $image1xretinalarge[0]; ?> 1x, <?php echo $image2xretinalarge[0]; ?> 2x"> 
    <source media="(min-width: 601px)" srcset="<?php echo $image1xretinamedium[0]; ?> 1x, <?php echo $image2xretinamedium[0]; ?> 2x"> 
    <source media="(min-width: 401px)" srcset="<?php echo $image1xretinasmall[0]; ?> 1x, <?php echo $image2xretinasmall[0]; ?> 2x"> 
      <img srcset="<?php echo $image2xretinasmall[0]; ?> 401w, <?php echo $image2xretinamedium[0]; ?> 601w, <?php echo $image2xretinalarge[0]; ?> 900w" src="<?php echo $image2xretinalarge[0]; ?>" alt="image description">
    </picture>
    Joy

    (@joyously)

    Simply put the image in your post as an attachment and WordPress will put the srcset and sizes attributes on it for you. Can’t get more automatic than that.

    Like this?
    wp_get_attachment_image( $attachment_id, $size, $icon, $attr );
    Can you provide an example please
    Edit: Doesn’t seem to support percents like 100% for image size..

    • This reply was modified 6 days, 4 hours ago by snippet24.
    Joy

    (@joyously)

    Well, I meant that you put it into the editor, but if you are doing it with code, then yes, that is the function.
    I have a child theme that filters the_content in order to put all the attachments at the bottom. I made them links so I could use a lightbox. I have just the one line wp_get_attachment_link( $attachment->ID , 'thumbnail', false ); which internally calls wp_get_attachment_image.
    The rendered page has the srcset and sizes for the images.

    No, the size parameter must be a defined image size or a width and height string like 150×200. This function should handle the size (that’s the whole point!) so a percentage has no place here. You shouldn’t use width:100% in CSS for images though, unless you know the parent container is always smaller than the images, and that’s hard to know in CSS without setting some pixel sizes which is not responsive.

    Now I fully understand thank you so much for explaining!! 🙂
    Maybe there are times when the use of percents may be useful like

    width: 100%;
    height: 624px;
    object-fit: cover;

    I didn’t invent it, it comes from Bootstrap in which the class img-fluid adds
    max-width: 100%; and height: auto; like this
    <img src="..." class="img-fluid" alt="Responsive image">
    https://getbootstrap.com/docs/4.4/content/images/#responsive-images
    Or another option may be to use “auto” which I guess is not supported.
    https://wordpress.org/support/topic/using-plugin-within-themes-wp_get_attachment_image-or-the_post_thumbnail/

    No, you are mixing HTML with CSS. The PHP functions are about HTML attributes, not the CSS. If you want to filter the sizes attribute with different numbers, that is totally different, but unnecessary as WP handles it already.
    That CSS you gave is not responsive, especially in browsers that don’t have object-fit and on devices with small windows.
    Every theme should already have
    img {max-width: 100%; and height: auto;}
    because that makes images resize. It shouldn’t be on a class like Bootstrap does it. This is totally separate from srcset and sizes.

    Thanks @joyously for explaining!!! I will start using them 🙂 I have one doubt left: for retina sizes I should use a plugin like wp-retina-2x, unless I create the 2x size versions?
    Kind Regards!!

    Yes, I think a plugin is best for that. You shouldn’t have to create the versions yourself.

    Alright!! Thanks 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.