Get height and width of an image array

• Varilux2k

• July 20, 2022 at 6:33 am

Hello community,

I’m not sure if this is a topic for the ACF forum, since it’s actually a general wordpress question. I would like to output an image dependent on the user’s resolution. The output works so far. However, a check with https://pagespeed.web.dev/ always criticizes that the height and width information of the image is missing. Can you tell me how to pass these in my case? I often use a bootstrap theme and have my wordpress image settings set to thumb: 380×380, medium: 576×576, medium-Large: 768×768 and large 1320x1320px. The image is supplied from an array via ACF.

Here is my code

<?php
  // This example uses image sizes, called large, medium, medium_large, thumbnail
  $imageobject = get_field('custom_image');
  if( !empty($imageobject) ):
    echo '<img src="'. $imageobject['sizes']['large'] . '" srcset="'. $imageobject['sizes']['large'] .' '.  $imageobject['sizes']['large-width'] .'w, '. $imageobject['sizes']['medium_large'] .' '. $imageobject['sizes']['medium_large-width'] .'w, '. $imageobject['sizes']['medium'] .' '.  $imageobject['sizes']['medium-width'] .'w, '. $imageobject['sizes']['thumbnail'] .' '.  $imageobject['sizes']['thumbnail-width'] .'w" alt="' . $imageobject['title'] . '" >';
  endif;
?>

Thank you for support
Arnim

• John Huebner

• July 26, 2022 at 9:27 pm

Sizes are in the return array, here’s an example

Array
(
  [ID] => 6308
  [id] => 6308
  [title] => digitalfantasyart03e
  [filename] => digitalfantasyart03e.jpg
  [filesize] => 156128
  [url] => .../wp-content/uploads/2018/09/digitalfantasyart03e.jpg
  [link] => .../hello-world/digitalfantasyart03e/
  [alt] => 
  [author] => 1
  [description] => 
  [caption] => 
  [name] => digitalfantasyart03e
  [status] => inherit
  [uploaded_to] => 1
  [date] => 2021-09-17 12:44:34
  [modified] => 2021-09-17 12:44:34
  [menu_order] => 0
  [mime_type] => image/jpeg
  [type] => image
  [subtype] => jpeg
  [icon] => .../wp-includes/images/media/default.png
  [width] => 1024
  [height] => 768
  [sizes] => Array
    (
      [thumbnail] => .../wp-content/uploads/2018/09/digitalfantasyart03e-150x113.jpg
      [thumbnail-width] => 150
      [thumbnail-height] => 113
      [medium] => .../wp-content/uploads/2018/09/digitalfantasyart03e-300x225.jpg
      [medium-width] => 300
      [medium-height] => 225
      [medium_large] => .../wp-content/uploads/2018/09/digitalfantasyart03e-768x576.jpg
      [medium_large-width] => 525
      [medium_large-height] => 394
      [large] => .../wp-content/uploads/2018/09/digitalfantasyart03e.jpg
      [large-width] => 525
      [large-height] => 394
      [1536x1536] => .../wp-content/uploads/2018/09/digitalfantasyart03e.jpg
      [1536x1536-width] => 1024
      [1536x1536-height] => 768
      [2048x2048] => .../wp-content/uploads/2018/09/digitalfantasyart03e.jpg
      [2048x2048-width] => 1024
      [2048x2048-height] => 768
      [twentyseventeen-featured-image] => .../wp-content/uploads/2018/09/digitalfantasyart03e.jpg
      [twentyseventeen-featured-image-width] => 1024
      [twentyseventeen-featured-image-height] => 768
      [twentyseventeen-thumbnail-avatar] => .../wp-content/uploads/2018/09/digitalfantasyart03e-100x100.jpg
      [twentyseventeen-thumbnail-avatar-width] => 100
      [twentyseventeen-thumbnail-avatar-height] => 100
    )

)

• Varilux2k

• July 28, 2022 at 11:01 am

Ahh, now I get it. Thank you very much.