0

I am wondering if there is an easier/more efficient way to print a post thumbnail without the width/height attributes.

I like to control my image sizes with CSS, so I can do things like: width: 30% and then let the height adjust automatically based on the aspect ratio of the image.

I've been looking through the codex for hours, and every function I can find seems to print both a width and a height attribute, which breaks my intended CSS. The CSS property overrides the width defined on the image, but the height is unchanged --see this fiddle.

I can get around this with the following:

$image = wp_get_attachment_image_src( 
    get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail'
);

if ($image) {
    echo "<img src='" . $image[0] . "' />";

}

Ultimately, I've written my own function to achieve this in a way that (sort of) mimics what the_post_thumbnail does:

function oct_getPostThumbnail($postId = null, $attributes = array()) {

    $postId = ( null === $postId ) ? get_the_ID() : $postId;
    $thumbnailId = get_thumbnail_id( $postId );

    if ( $thumbnailId ) {

        $defaultAttributes = array(
            'id' => 'postThumbnail-' . $thumbnailId,
            'class' => 'postThumbnail',
            'width' => null,
            'height' => null,
            'alt' => get_the_title($postId) . " thumbnail image"
        );


        $attributes = array_merge($defaultAttributes, $attributes);
        /* This works, but it feels wrong. Is there a better way to default values
            not passed into the function? */

        $image = wp_get_attachment_image_src($thumbnailId, 'single-post-thumbnail');

        if ($image) {
            $src = $image[0];
            $id = $attributes['id'];
            $class = $attributes['class'];
            $width = $attributes['width'];
            $height = $attributes['height'];
            $alt = $attributes['alt'];

            $html = "<img src='$src'";
                if (!empty($id)) {
                    $html = $html . " id ='$id' ";
                }

                if (!empty($class)) {
                    $html = $html . " class='$class' ";
                }

                if (!empty($width)) {
                    $html = $html . " width='$width' ";
                }

                if (!empty($height)) {
                    $html = $html . " height='$height' ";
                }

                if (!empty($alt)) {
                    $html = $html . " alt='$alt' ";
                }
            $html = $html . " />";

            echo $html;
        } else {
            return;
        }
    }
}

This should accomplish what I want it to, but I'm wondering if there's a more efficient way to do it. There are a few points in this function that feel overly complicated, but I'm not 100% sure how to streamline it.

4
  • 1
    see if it helps setting your css height to auto.
    – gdaniel
    Jul 30, 2015 at 21:10
  • as @gdaniel said, setting height to auto fix that, actually jsfiddle.net/c3Ltt4bh/1
    – gmazzap
    Jul 30, 2015 at 21:14
  • I can't believe I didn't think of that. I've been so consumed with learning all the WordPress functions that I never thought to play with the CSS. That solved the problem. Thanks
    – Mike
    Jul 30, 2015 at 21:16
  • @gmazzap I'll need to play around a bit, but at a glance, it looks like that !important isn't necessary. Just height: auto; did the trick.
    – Mike
    Jul 30, 2015 at 21:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.