Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


Carl Sergile
Carl Sergile
16,570 Points

Echo Height and Width in CSS using PHP......In WordPress.

I know sounds crazy!! but Im am trying to echo the height and width of an image. Without getting to into it, I'm trying to make this image overlay and I want the element to have the same height and width of the image dynamically without me setting an exact height and width for it. I have successfully created the overlay effect but want it to take the size of the image.

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

         $thumbnail_id = get_post_thumbnail_id($post->ID);
         $featuredImage = wp_get_attachment_image_src( $thumbnail_id, 'medium');
         $thumbnail_id_three = $featuredImage[0];
         list($width, $height) = getimagesize($thumbnail_id_three);
        <div class="row text-center">
    <div class="col-md-6">

    <?php if( has_post_thumbnail() ) : ?>
<a href="">
<span class="roll" style="width:<?php echo $width ?>; height:<?php echo $height ?>;" <?php the_content(); ?></span>
<img class="imgborder" src="<?php echo $thumbnail_id_three ?>">
<?php endif; ?>

<style type="text/css">
span.roll {
    background: center center no-repeat #000;
    height: <?php echo $height ?>;
    position: absolute;
    width: <?php echo $width ?>;
    z-index: 10;
    -webkit-box-shadow: 0px 0px 4px #000;
    -moz-box-shadow: 0px 0px 4px  #000;
    box-shadow: 0px 0px 4px  #000;

SO I did this: list($width, $height) = getimagesize($thumbnail_id_three);

and thought that i can just plug it in to the style?

1 Answer

Kevin Korte
Kevin Korte
28,110 Points

You can do something like this. My suggestion is to minimize all the CSS you can to your template files. Meaning, go ahead and set your height and width with inline styles like you're doing, but move your span.roll attributes to an external css file, and obmit the height and width from that css rule, since you're setting it inline, you don't need it twice.

Just be ready to deal with what if span and with is set to 5000px or 7000px or more each? Can you still gracefully handle the slight possibility of ginormous images?

Carl Sergile
Carl Sergile
16,570 Points

Well thats kind of the idea, the overlay would conform to any image size, thats why I grabbed the height and the width using php and put it in a variable. The problem im having right now is making that into an inline style for the span. I have moved the span.roll in the css style sheet.... HOw to I succesdfully use the height and the width in the inline style?...If that makes sense. I think im messing up my single quotes and double quotes somehow.

Carl Sergile
Carl Sergile
16,570 Points

Does that make any sense?

Kevin Korte
Kevin Korte
28,110 Points

Gottcha, yeah, it makes sense. You're not giving your height and width a unit. You also didn't close the opening span tag.

I have not tested your php code, I'm assuming it works. I just reformatted the html.

<span class="roll" style="width:<?php echo $width ?>. 'px'; height:<?php echo $height ?>.'px';"> <?php the_content(); ?></span>`