How to get featured image size in WordPress? Width or hight.

This article was written by in August 10, 2013, & may not be posted on other sites!
Original source url for this article: How to get featured image size in WordPress? Width or hight.

How to get featured image size in WordPress?
Wondering how to get the post featured image size / post thumbnail image size in WordPress? When working with templates, theme files or functions in WordPress, you might want to fetch the actual size of the featured image / thumbnail image of a post. All upploaded images automatically gets saved to the media library in four different sizes: thumbnail, medium, large and full. Let’s find out how to get the post featured image / post thumbnail in WordPress and how to get the actual size: height, width and also url:

How to get the featured image by size in WordPress. This will get the whole image element ready to print as it is, just choose a size:

get_the_post_thumbnail($post_id, 'thumbnail'); // Thumbnail image
get_the_post_thumbnail($post_id, 'medium'); // Medium resolution image
get_the_post_thumbnail($post_id, 'large'); // Large resolution image
get_the_post_thumbnail($post_id, 'full'); // Original resolution image
get_the_post_thumbnail($post_id, array(100,100) ); // Other resolutions image

//print an image by size like this:
$img = get_the_post_thumbnail($post_id, 'full');
echo($img);

How to get featured image size in WordPress? Width or hight.

How to get the featured image size: width, height and also url in WordPress:

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium' );
$imgUrlThumb = $thumb['0']; //url to featured img thumb
$imgUrlThumb = $thumb['1']; //width to featured img thumb
$imgUrlThumb = $thumb['2']; //height to featured img thumb
$imgUrlThumb = $thumb['3']; boolean: // true if $url is a resized image, false if it is the original.

Understanding the WordPress codex, try it out:

See full code below. This code below is a page-template created for WordPress. Copy and paste the code into a file and save it as featured-image-template.php in your theme or child theme folder > page-templates. Then create a new page in WordPress admin and choose your new template in the template dropdown to the right. This template will print out the url, the image size and the thumbnail image / featured image in WordPress to show you how it works. Make sure you have some posts with a featured image set to them to get this template to work properly.

<?php
/**
* Template Name: Featured image Template
* Author Olivia Hoback
* www.olivia.nu
*/

get_header(); ?>

<div id="primary" class="site-content">
<div id="content" role="main">


<?php wp_reset_query(); ?>
<?php query_posts("showposts=-1"); ?>

<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>

<div class="container">


<?php if ( has_post_thumbnail() ) {


$featuredImgUrl = get_the_post_thumbnail($post->ID, 'thumbnail'); //the full img tag to the thumbnail size featured image


//if you need more info use wp_get_attachment_image_src() instead, like this:
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium' ); //get the medium image information in an array
$imgUrlThumb = $thumb['0']; //the url
$imgWidth = $thumb['1']; //the img width
$imgHeight = $thumb['2']; //the im height


?>

<p>
This is the current post thumbnail url: </br ><?php echo $imgUrlThumb ?></br >
This is the current post thumbnail width: <?php echo $imgWidth ?></br >
This is the current post thumbnail height: <?php echo $imgHeight ?></br >
</p>

<h1>You can also print the Medium images like this:</h1>
<img src="<?php echo($imgUrlThumb); ?>" />
<p>or the thumbnail image like this:</p>
<?php echo($featuredImgUrl); ?>

<?php }?>
</div><!--end of .container-->

<?php endwhile; ?>
<?php endif; ?>


</div><!-- #content -->
</div><!-- #primary -->


<?php get_footer(); ?>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

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