I am lazy loading some images with URLs which are added via custom fields.

The lazy load plugin I'm using requires a place-holder image in the src attribute and the actual image in data-original.

I need the image height and width as well, so I've been using wp_get_attachment_image_src().

My problem is using bloginfo('template_directory') to get the place-holding image.

The first image here doesn't show the place-holder images but does output the url to the page.

    <?php   

        $attch_id_1 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img1', true));
        $image_attributes_1 = wp_get_attachment_image_src( $attch_id_1, 'full'); 

        $attch_id_2 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img2', true));
        $image_attributes_2 = wp_get_attachment_image_src( $attch_id_2, 'full');

        $attch_id_3 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img3', true));
        $image_attributes_3 = wp_get_attachment_image_src( $attch_id_3, 'full');

        echo '<img src="'.bloginfo('template_directory').'"/images/img-BG.png" data-original="'.$image_attributes_1[0].'">';

        echo '<img src="http://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_2[0].'">';

        echo '<img src="http://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_3[0].'">';

    ?>

The source for the page looks like this.

http://localhost/wordpress-cd/wp-content/themes/cd<img src="/images/img-BG.png"

Why can't I use bloginfo('template_directory') here?

How can I output the images correctly?

I am lazy loading some images with URLs which are added via custom fields.

The lazy load plugin I'm using requires a place-holder image in the src attribute and the actual image in data-original.

http://www.appelsiini/projects/lazyload

I need the image height and width as well, so I've been using wp_get_attachment_image_src().

My problem is using bloginfo('template_directory') to get the place-holding image.

The first image here doesn't show the place-holder images but does output the url to the page.

    <?php   

        $attch_id_1 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img1', true));
        $image_attributes_1 = wp_get_attachment_image_src( $attch_id_1, 'full'); 

        $attch_id_2 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img2', true));
        $image_attributes_2 = wp_get_attachment_image_src( $attch_id_2, 'full');

        $attch_id_3 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img3', true));
        $image_attributes_3 = wp_get_attachment_image_src( $attch_id_3, 'full');

        echo '<img src="'.bloginfo('template_directory').'"/images/img-BG.png" data-original="'.$image_attributes_1[0].'">';

        echo '<img src="http://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_2[0].'">';

        echo '<img src="http://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_3[0].'">';

    ?>

The source for the page looks like this.

http://localhost/wordpress-cd/wp-content/themes/cd<img src="/images/img-BG.png"

Why can't I use bloginfo('template_directory') here?

How can I output the images correctly?

• templates
• directory
• bloginfo

Share Improve this question edited Apr 24, 2013 at 21:12 t31os 18.8k33 gold badges5656 silver badges6868 bronze badges asked Apr 24, 2013 at 14:46 Simon CooperSimon Cooper 37733 gold badges99 silver badges1919 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 8

You cannot use bloginfo() while your are outputting using echo because bloginfo it self also out puts string using echo. Below will work for you, you also have extra double quote which i have removed....

<?php   

        $attch_id_1 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img1', true));
        $image_attributes_1 = wp_get_attachment_image_src( $attch_id_1, 'full'); 

        $attch_id_2 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img2', true));
        $image_attributes_2 = wp_get_attachment_image_src( $attch_id_2, 'full');

        $attch_id_3 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img3', true));
        $image_attributes_3 = wp_get_attachment_image_src( $attch_id_3, 'full');

        echo '<img src="'.get_bloginfo('template_directory').'/images/img-BG.png" data-original="'.$image_attributes_1[0].'">';

        echo '<img src="http://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_2[0].'">';

        echo '<img src="http://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_3[0].'">';

    ?>

This should work

$so97086_template_directory = get_bloginfo('template_directory');

And replace

bloginfo('template_directory') with $so97086_template_directory;

Please note that get_template_directory_uri() is preferred over get_bloginfo('template_directory').

Please refer to this for more information: get_template_directory() vs bloginfo( 'template_directory' ) vs TEMPLATEPATH