• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Draft / WordPress Image Array of Attributes

WordPress Image Array of Attributes

Last updated on September 4, 2018 by Sal Ferrarello

In WordPress we can use wp_get_attachment_image() to get the rendered markup for an image. We can use wp_get_attachment_image_src() to get an array of url, width, height, is_generated (i.e. not original upload).

We also have wp_get_attachment_metadata() to get the attachment meta data. Or for the attributes needed for responsive images we can use wp_get_attachment_image_sizes() and wp_get_attachment_image_srcset().

However, I’ve not found a good way to get an array of the attributes of an image (i.e. I want the same information wp_get_attachment_image() provides but in an array rather than rendered markup).

So I wrote this class.

<?php
/**
* Get WordPress Attachment Image Attributes.
*
* Similiar to running WordPress's wp_get_attachment_image() but
* instead of getting back rendered HTML, we get back an array
* where the key is the attribute name and the value is the attribute value.
*
* This is done by using the `wp_get_attachment_image_attributes` filter.
*
* e.g.
*
* [
* 'width' => '1920'
* 'height' => '1080'
* 'src' => 'https://example.test/wp-content/uploads/2018/08/sal-1920x1080.jpg',
* 'srcset' => 'https://example.test/wp-content/uploads/2018/08/sal-1920x1080.jpg 1920, https://example.test/wp-content/uploads/2018/08/sal-960x540.jpg 960w',
* 'alt' => 'Photograph of Sal.',
* 'sizes' => '(max-width: 1920px) 100vw, 1920px'
* 'class' => 'attachment-fe-hero size-fe-hero'
* ]
*
* @package salcode/wp-get-attachment-image-attributes
*/
declare(strict_types=1);
namespace salcode\WPGetAttachmentImageAttributes;
/**
* Class: GetAttachmentImageAttributes
*/
class GetAttachmentImageAttributes {
const FILTER_PRIORITY = 9999999;
/**
* Image Attributes.
*
* Key/value array.
*
* @var string[]
*/
protected $attributes = [];
/**
* The attachment_id for the image.
*
* @var int
*/
protected $attachment_id;
/**
* WordPress Image Size.
*
* Either a WordPress image size string or an array of [ $width, $height ].
*
* @var string | array
*/
protected $size;
/**
* The image should be treated as an icon.
*
* @var bool
*/
protected $icon = false;
/**
* Attributes to be applied to the image.
*
* @var string | array
*/
protected $attr = '';
public function __construct( int $attachment_id, $size = 'thumbnail', $icon = false, $attr = '' ) {
$this->attachment_id = $attachment_id;
$this->size = $size;
$this->icon = $icon;
$this->attr = $attr;
}
public function get_attributes() {
add_filter( 'wp_get_attachment_image_attributes', [ $this, 'capture_attributes' ], self::FILTER_PRIORITY );
wp_get_attachment_image(
$this->attachment_id,
$this->size,
$this->icon,
$this->attr
);
remove_filter( 'wp_get_attachment_image_attributes', [ $this, 'capture_attributes' ], self::FILTER_PRIORITY );
return ! empty( $this->attributes ) ? $this->attributes : [];
}
public function capture_attributes( $attributes ) {
$this->attributes = $attributes;
return $attributes;
}
static public function get( int $attachment_id, $size = 'thumbnail', $icon = false, $attr = '' ) {
$obj = new static( $attachment_id, $size, $icon, $attr );
return $obj->get_attributes();
}
}
view raw WPGetAttachmentImageAttributes.php hosted with ❤ by GitHub

Which allows us to get this array of information for an attachment (in this case for the attachment with attachment id 114).

$img_attributes = \salcode\WPGetAttachmentImageAttributes\get( 114 );
Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit
Warning! This is a draft, not a finalized post. See full draft disclosure.

Filed Under: Draft, Programming, Solution Tagged With: WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in