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