Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Carl Sergile
Carl Sergile
16,570 Points
Posted by 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(); ?>

     <?php
         $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 ?>">
</a>
<?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;
}
</style>

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,149 Points
Kevin Korte
Kevin Korte
28,149 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
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
Carl Sergile
Carl Sergile
16,570 Points

Does that make any sense?

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 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>`