0

In Drupal, you can use the following in a field--field-image.tpl.php file to output an image as a URL using a particular image style:

<?php foreach ($items as $delta => $item): ?>
<?php echo image_style_url('thumbnail', $item['#item']['filename'] ); ?>    
<?php endforeach; ?>

This will output all images as a URL with the Thumbnail style.

I would like to get the width and height values of that image (with the thumbnail style). How can I do it?

I would like to do it without having to install any extra modules.

  • Is your goal to create an <img> tag that has dimensions attributes set? Or are you looking to get the width/height of each image for another purpose? – Clive Dec 6 '12 at 13:54
  • It's for another purposes: I am out putting uploaded images as CSS backgrounds and need the width/height so the backgrounds display correctly. Dinesh's solution works. – big_smile Dec 6 '12 at 18:07
3

image_get_info() is the function that will get you the details. But it accepts uri as the param (Not sure about url). You can try passing the argument. If you manage to get the path of the images then this function return the following ,

  • "width": Width, in pixels.
  • "height": Height, in pixels.
  • "extension": Commonly used file extension for the image.
  • "mime_type": MIME type ('image/jpeg', 'image/gif', 'image/png').
  • "file_size": File size in bytes.
  • 3
    As you suspected, image_get_info doesn't work with a URL. However, after lots of searching, I found a different function to use in place of image_style_url: image_style_path. This is how the finished look just in case anyone else needs to use it: <?php $imgprops = image_get_info(image_style_path('thumbnail', $item['#item']['uri'] )); ?> width: <?php echo $imgprops['width']; ?>px; height: <?php echo $imgprops['height']; ?>px; Thanks for your help!! – big_smile Dec 6 '12 at 18:05
1

The correct API your looking for is imagestyle_transform_dimensions.

Determines the dimensions of the styled image.

Applies all of an image style's effects to $dimensions.

Parameters

$style_name: The name of the style to be applied.

$dimensions: Dimensions to be modified - an array with components width and height, in pixels.

I have used this in code to specify CSS width values in field templates (I also used imagecache_proportions which is a pretty cool module).

For example from a field template file. This code in better placed in a preprocess theme function, i was in a hurry :)

// file field--field-aux-images.tpl.php
#dpm($items, 'items');
#dpm($item_attributes, 'image_attributes');
#dpm($attributes, 'attributes');

// my field cardinality was 1.
$dimensions = array(
  'width' => $items[0]['#item']['image_dimensions']['width'],
  'height' => $items[0]['#item']['image_dimensions']['height'],
);
#dpm($dimensions, 'default image dimensions');

$dim1 = $dimensions;
$dim2 = $dimensions;
$dim3 = $dimensions;
// $dim1 .. $dim3 contain the final dimensions of the original image
// having been virually run through the named image style.
image_style_transform_dimensions('ccs_news_events_teaser_square', $dim1);
image_style_transform_dimensions('ccs_news_events_teaser_wide', $dim2);
image_style_transform_dimensions('ccs_news_events_teaser_tall', $dim3);

// ... some other code
$computed_width_style = 'style="width: '.$dim1['width'].'px;"'
  • Thanks for your help. I marked Dinesh Kumar as the correct solution, as it was more compact (and he was first). However, your code was also helpful, so I have upvoted it. Thanks again! – big_smile Dec 6 '12 at 18:06
  • im pretty sure his answer wont work for styled images, unless maybe you pass the image_style uri? ....imagecache_transform_dimensions() gives you the final styled dimensions. – tenken Dec 6 '12 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.