bloginfo('template_directory') img src

Question

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.net/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?

Answer 1

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].'">';

    ?>

Answer 2

This should work

$so97086_template_directory = get_bloginfo('template_directory');

And replace

bloginfo('template_directory') with $so97086_template_directory;

Answer 3

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