bloginfo(‘template_directory’) img src

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').'"https://wordpress.stackexchange.com/images/img-BG.png" data-original="'.$image_attributes_1[0].'">';

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

        echo '<img src="https://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="https://wordpress.stackexchange.com/images/img-BG.png"

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

How can I output the images correctly?

3 Answers
3

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')."https://wordpress.stackexchange.com/images/img-BG.png" data-original="'.$image_attributes_1[0].'">';

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

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

    ?>

Leave a Comment