Implementing WP’s Responsive Image Capability

  • Greetings. Recently, I researched the excellent responsive image WordPress capability. I understand how it functions and its implementation context both within the HTML and <picture> tags. From what I have read, it is better to use the tag for more universal web browser support.

    Unfortunately, I am missing a critical piece of implementation information, which is how to leverage the responsive image capability using PHP exclusively. Let me explain. WordPress 4.4+ already auto-generates the various alternative images based upon the Media Settings image sizes, along with the option of hard-cropping the “thumbnail” version. I am comfortable with defining & registering custom image sizes in PHP to account both for the auto-generated “srcset” & “sizes” tag attribute values.

    In typical examples, one sees this capability utilized in “the_post_thumbnail()” function, which only works within the WordPress “Loop”. One can add an argument value to the function, as in “the_post_thumbnail(‘my-custom-image-size’)” to select the desired image size. Also, I understand the “get_the_post_thumbnail()” WordPress function, with its own optional argument value, is usable outside the WordPress “Loop”.

    This WordPress capability is suppose to render the HTML tag with a collection of “srcset” and “sizes” attribute values. Suppose I built a WordPress template, say ‘front-page.php’ from scratch using PHP. I create a page in WordPress and assign it to the static home page in the WordPress “Reading Settings”. Furthermore, I do not use the WordPress editor at all to design this page but instead use an external IDE (e.g., Atom) to design the “front-page.php” template. How do I implement the responsive image WordPress capability in this scenario?

    Clearly, I cannot using “the_post_thumbnail()” function. Adding the WordPress “Loop” to the “front-page.php” page is a moot point, since I am not using WordPress to add images within its editor. Next, I tried adding the “get_the_post_thumbnail()” WordPress function into the “front-page.php” template, but no image files are rendered. Incidentally, <?php echo get_the_post_thumbnail(); ?> does not work either.

    I do not want to add HMTL tags with their “srcset” and “sizes” attribute/value pairs in the “front-page.php” template, as this defeats the purpose of using the WordPress responsive image capability.

    Am I missing something obvious? How do I actually implement this responsive image capability in PHP, with neither relying on the WordPress “Loop” nor on the WordPress editor? If I used the WordPress editor, then during the process of adding image media, I can choose the desired custom image size from a dropdown. However, I do not want to take this approach. I am coding this entirely in PHP.

    Your feedback is genuinely appreciated.

Viewing 1 replies (of 1 total)

  • Yes, you are missing something obvious.
    Theme templates don’t control content. They only display what WordPress retrieves from the database for the requested URL. WordPress parses the requested URL to determine what to fetch from the database and also what template file to use to show it. Have you seen the Template Hierarchy?

    Even if you don’t use the WP editor for your content, the theme should use standard core functions to display it. That means “The Loop”, because WP has already retrieved the data before loading the template.

    The editor is not where the responsive image handling happens. The editor simply puts the standard classes on the image. There is a WP function that uses the wp-image-{post ID} class on the image to look up the image information to generate the correct srcset and sizes attributes. This happens just-in-time for output, by WordPress, not the theme, although themes and plugins can filter it.

    So, if you code in your PHP file a hard-coded image and it doesn’t have an entry in the database or the corresponding wp-image-{post ID} class on it, WP won’t affect it.

    You can, and should, use the_post_thumbnail(), since that allows the user to choose the image and the theme doesn’t have to do anything about it. But the image has to be in the database, because WP doesn’t do anything without looking there first.

Viewing 1 replies (of 1 total)
  • The topic ‘Implementing WP’s Responsive Image Capability’ is closed to new replies.