how to get image width and height

• pagol

• July 8, 2017 at 1:36 am

Hello,

i need to get image width and height from my gallery images. bellow is my code. my code query random image from gallery and maximum 10 images.

      <?php $the_query = new WP_Query( 'page_id=10' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post();  ?>
<?php $images = get_field('gallery_image');
if( $images ):
        shuffle($images); // randomizes the image array
        $max = 10; // set the max here;
        $count = 0; // current count
 ?>

         <?php foreach( $images as $image ):
		 
		   $count++; // increment count
                // if count is greater than limt, stop showing images
                if ($count > $max) {
                    break;
                }
		  ?>
         <div class="swiper-slide"><img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>"  width="224" height="168" /></div>
        <?php endforeach; ?>
 <?php endif; ?>

     <?php endwhile;?>

• John Huebner

• July 9, 2017 at 5:13 am

Using your example, the width and height of the above images will be at
$image['sizes']['medium-width'] and $image['sizes']['medium-height']

here is that output of all values from an example gallery with one image

Array
(

  [0] => Array
    (
      [ID] => 389
      [id] => 389
      [title] => atomic-bomb-explosion
      [filename] => atomic-bomb-explosion.jpg
      [url] => .../wp-content/uploads/jpg/atomic-bomb-explosion.jpg
      [alt] => 
      [author] => 1
      [description] => 
      [caption] => 
      [name] => atomic-bomb-explosion-2
      [date] => 2017-06-14 16:20:25
      [modified] => 2017-06-14 16:20:25
      [mime_type] => image/jpeg
      [type] => image
      [icon] => .../wp-includes/images/media/default.png
      [width] => 1400
      [height] => 1050
      [sizes] => Array
        (
          [thumbnail] => .../wp-content/uploads/jpg/atomic-bomb-explosion-150x150.jpg
          [thumbnail-width] => 150
          [thumbnail-height] => 150
          [medium] => .../wp-content/uploads/jpg/atomic-bomb-explosion-300x225.jpg
          [medium-width] => 300
          [medium-height] => 225
          [medium_large] => .../wp-content/uploads/jpg/atomic-bomb-explosion-768x576.jpg
          [medium_large-width] => 474
          [medium_large-height] => 356
          [large] => .../wp-content/uploads/jpg/atomic-bomb-explosion-1024x768.jpg
          [large-width] => 474
          [large-height] => 356
          [post-thumbnail] => .../wp-content/uploads/jpg/atomic-bomb-explosion-672x372.jpg
          [post-thumbnail-width] => 672
          [post-thumbnail-height] => 372
          [twentyfourteen-full-width] => .../wp-content/uploads/jpg/atomic-bomb-explosion-1038x576.jpg
          [twentyfourteen-full-width-width] => 1038
          [twentyfourteen-full-width-height] => 576
        )

    )

)