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?
You cannot use
bloginfo()
while your are outputting usingecho
because bloginfo it self also out puts string usingecho
. Below will work for you, you also have extra double quote which i have removed….This should work
And replace
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