Make WordPress Core

Opened 2 years ago

Last modified 2 months ago

#56056 new enhancement

Specify a Custom Array of $sizes for `wp_get_attachment_image` to Reduce HTML Bloat

Reported by: xmic's profile xmic Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Post Thumbnails Keywords: has-patch
Focuses: performance Cc:

Description

Plugins and the theme can specify multiple thumbnail sizes. Using wp_get_attachment_image provides a modern solution to responsive image sizes, however, it does not currently account for reducing the bloat to all the registered thumbnail sizes that are added by plugins / theme.

Therefore a proposal is to allow a custom list of thumbnails to use, this can, for example, be specified as:

<?php
wp_get_attachment_image(123, [['thumbnail', [1200, 630], 'medium', 'large'], true]);

Where the true is to identify that we want to enable a specified list of thumbnail sizes, and not use all of the thumbnail sizes registered.

It will only loop through the specified $sizes that were mentioned in the $sizes parameter.

HTML document size is a large factor in determining if a website is to be bloated or not. Therefore it would be beneficial to allow developers to specify specific thumbnail sizes that are to be used for what it is intended for.

Kind regards,
Michael

Change History (2)

#1 @desrosj
2 years ago

  • Version trunk deleted

This ticket was mentioned in PR #6930 on WordPress/wordpress-develop by @geekofshire.


2 months ago
#2

  • Keywords has-patch added; needs-patch removed

### Summary
This PR introduces a new feature to the wp_get_attachment_image function, allowing developers to specify a custom list of image sizes to be included in the HTML output. This helps in reducing HTML bloat by including only the necessary image sizes.

### Changes

  • New Parameter: Added $use_custom_sizes parameter to the wp_get_attachment_image function.
    • Type: bool
    • Default: false
    • Purpose: When set to true and an array of sizes is provided in the $size parameter, only those specified sizes are included.
  • Function Logic: Updated the function to handle custom sizes if $use_custom_sizes is true.
    • If $use_custom_sizes is true and $size is an array, it processes each specified size individually.
    • If $use_custom_sizes is false, it behaves as before, using the single size provided.
  • Documentation: Updated the function docblock to include details about the new parameter and its usage.

### Benefits

  • Reduced HTML Bloat: By allowing selective inclusion of image sizes, the function generates more efficient HTML, leading to faster page load times.
  • Improved Clarity: Separating the custom sizes logic into a distinct parameter makes the function easier to understand and use.
  • Backward Compatibility: Existing functionality remains unchanged for users who do not need custom sizes, ensuring backward compatibility.

### Example Usage

// Default behavior (single size)
echo wp_get_attachment_image(123, 'large');

// Custom sizes usage
$sizes = ['thumbnail', [1200, 630], 'medium', 'large'];
echo wp_get_attachment_image(123, $sizes, false, '', true);
Note: See TracTickets for help on using tickets.