Wordpress get_post_meta image width for lazy load - wordpress

I'm trying to lazy load a page of images in Wordpress - I've tried the plugins but none of them seem to work(I only want to lazy load image on some pages.)
So I'm now trying to do it with a plugin - http://www.appelsiini.net/projects/lazyload
This plugin requires the image width and height in the img tag.
<img data-original=“img/example.jpg” src=“img/grey.gif” width=“640” height=“480”>
I'm attaching the images from custom fields like
<img src="<?php echo get_post_meta($post->ID, 'img1', true); ?>">
Is it possible get the images width and height from the get_post_meta
I've looked at wp_get_attachment_image_src but I can't see how to use it get_post_meta
======
UPDATE
======
<?php
$attachments = get_children(
array(
'post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => ASC,
'orderby' => 'menu_order ID'
)
);
?>
<?php
foreach ( $attachments as $attachment_id => $attachment ) {
$image_attributes = wp_get_attachment_image_src( $attachment );
?>
<img src="<?php echo $image_attributes[0];?>" width="<?php echo $image_attributes[1];?>" height="<?php echo $image_attributes[2];?>">
<?php
}
?>

Its better to use Wordpress Media Gallery support. You can get all images attached to post with:
<?php $attachments = get_children(
array('post_parent' => $id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => ASC,
'orderby' =>
'menu_order ID') ); ?>
where $id is a current post ID. Then with the ID's of attached images, You can simply use:
<?php foreach ( $attachments as $attachment_id => $attachment ) {
(...)
}?>
to iterate throught image Id's, and
<?php wp_get_attachment_image_src($attachment_id, $size, $icon);>
which is described: http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src, that allows You not only get url of image, but also its width and height.
The whole code can be wrapped in a shortcode function for ease of use ;).

Related

Get all the images from custom post type in Wordpress

I am working on a portfolio WordPress theme and trying to grab and display every image in portfolio-single page.
I am using following code but its not working.
<div class="thumb">
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => 'any',
'post_mime_type' => 'image',
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if($attachments) : ?>
<ul class="portfolio-image-list">
<?php foreach ($attachments as $attachment) : ?>
<li class="box">
<figure>
<?php the_attachment_link($attachment->ID, true); ?>
</figure>
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<div class="box">
<p>No images found for this post.</p>
</div>
<?php endif; ?>
</div>
Please help.
You're trying to retrieve a list of the posts rather than the attachments to the specific post in question. You'd instead need to retrieve the child objects of type 'attachment':
$args = array(
'post_type' => 'attachment',
'posts_per_page' => -1,
'post_status' => 'any',
'post_mime_type' => 'image',
'post_parent' => $post->ID
);
$attachments = get_children( $args );
But you can now use the 'get_attached_media' function to make this even easier. Try replacing the $attachments line with:
$attachments = get_attached_media( 'image', $post->ID );
If that still doesn't work, you can temporarily add die($post->ID); in your template and make sure that it's outputting the post ID correctly. If not, make sure you're running the code within The Loop so that $post->ID is available.

wordpress displaying attachment on single cpt with thumbnail size

I have snippet to displaying atachment in single cpt, but i dont now how to get the atachment image size in the code, lets say.. i want to add a thumbnail size to the image, but i dont know how..
this is the code that i used
<?php $args = array(
'numberposts' => -1, // Using -1 loads all posts
'orderby' => 'menu_order', // This ensures images are in the order set in the page media manager
'order'=> 'ASC',
'post_mime_type' => 'image', // Make sure it doesn't pull other resources, like videos
'post_parent' => $post->ID, // Important part - ensures the associated images are loaded
'post_status' => null,
'post_type' => 'attachment',
);
$images = get_children( $args ); if($images){ ?>
<div id="projectGallery">
<?php foreach($images as $image){ ?>
<img src="<?php echo $image->guid; ?>" alt="<?php echo $image->post_title; ?>" title="<?php echo $image->post_title; ?>" />
<?php} ?>
</div>
<?php } ?>
please help.. thx
Please follow the code below. It will help you.
<?php
$size = thumbnail, medium, large or full
$args = array(
'numberposts' => -1,
'orderby' => 'menu_order',
'order'=> 'ASC',
'post_mime_type' => 'image',
'post_parent' => $post->ID,
'post_status' => null,
'post_type' => 'attachment',
);
$images = get_children( $args );
if($images){
?>
<div id="projectGallery">
<?php
foreach($images as $image){
wp_get_attachment_image($image->ID, 'thumbnail'); //you can give thumbnail, medium, large or full according to your choice
<?php } ?>
</div>
<?php } ?>
You can use
wp_get_attachment_thumb_url( $attachment_id );
as follow:
<img src="<?php echo wp_get_attachment_thumb_url( $image->ID ); ?>" alt="<?php echo $image->post_title; ?>" title="<?php echo $image->post_title; ?>" />

How to get the blog post's featured image, content, last modified date and comments count?

I have a wordpress site in which I want to create a blog page which will display the following things.
The blog's featured image in first line
The blog title in the second line
The blog content(text) in the third line
The last update, comments count and posted by in the 4th line.
How will I do this?
Shoud I directly query the database or use some builtin functions?
Any help?
query_posts( );
while ( have_posts() ) : the_post();
if( has_post_thumbnail())
the_post_thumbnail( 'medium' );
else {
$photos = get_children( array('post_parent' => get_the_ID(), 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
if ($photos) {
$photo = array_shift($photos);
echo wp_get_attachment_image($photo->ID, 'medium' );
}
}
echo '<h2 class="entry-title">'.get_the_title().'</h2>';
the_excerpt();
endwhile;
wp_reset_query();

Wordpress - Loop with images from post to

I made an Wordpress theme, with pages and posts.
The loop of posts show me a short brief of post and a Continue reading link.
I like this, but how can I make the theme show in the post brief of the loop image(s) attached to post at beginning, if any.
Thank you!
You can get your attached images by using:
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => 1,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_parent' => $post->ID
);
$images = get_posts($args);
and display it like this:
echo wp_get_attachment_image($images[0]->ID, $size='attached-image');
This for getting all attachement images with your post.
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts( $args );
if ($attachments) {
foreach ( $attachments as $post ) {
$img = wp_get_attachment_image_src($post->ID, 'medium');
$fullsize = wp_get_attachment_image_src($post->ID, 'full');
}
}
You should add in your loop:
<?php
if(has_post_thumbnail()) {
$theimage = wp_get_attachment_image_src( get_post_thumbnail_id ( $post->ID ), 'thumbnail' );
}
?>
<img class="img_class" src="<?php echo $theimage[0]; ?>" />
Where "thumbnail" correspond to the size you want to show.
Remember that there is also a WordPress specific site in StackExchange

How do I show the number of images attached to a post on the image attachment page?

I use the image attachment page to show images attached to a post one by one, in a slideshow sort of affect. I'd like to be able to display the total number of images attached to the parent post and the number of the particular image that's being shown on any given attachment page so you see the picture and the words "Image 3 of 15" for example.
Update... I was able to get the total number to show using this code:
<?php
global $post;
$attachments = get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) );
$count = count( $attachments );
echo $count;
?>
I still can't figure out how to show the number of the current image.
Anyone have any suggestions?
Update 2...
Greenie's answer got me almost there but it's outputting all the numbers at once:
"Image 1 of 8Image 2 of 8Image 3 of
8Image 4 of 8Image 5 of 8Image 6 of
8Image 7 of 8Image 8 of 8"
Here is the code I used:
global $post;
$attachments = get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) );
$count = count( $attachments );
$currentImage = 1;
foreach ($attachments as $attachment) {
// output your image here
echo "Image ". $currentImage . " of ". $count;
$currentImage++;
}
What's going wrong?
Update 3 - THE ANSWER!
global $post;
$attachments = get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) );
$count = count( $attachments );
$specific = array();
$i = 1;
foreach ( $attachments as $attachment ) {
$specific[$attachment->ID] = $i;
++$i;
}
echo "Image {$specific[$post->ID]} of {$count}";
This works:
global $post;
$attachments = get_children( array( 'post_parent' => $post->post_parent, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID' ) );
$count = count( $attachments );
$specific = array();
$i = 1;
foreach ( $attachments as $attachment ) {
$specific[$attachment->ID] = $i;
++$i;
}
echo "Image {$specific[$post->ID]} of {$count}";
Add something like this to the above code:
$currentImage = 1;
foreach ($attachments as $attachment) {
// output your image here
echo "Image ". $currentImage . " of ". $count;
$currentImage++;
}
If you are looking for a plugin to manage image gallery, you can use attachments plugin,
http://wordpress.org/plugins/attachments/
It keeps the gallery separate and does not put the image gallery shortcodes in post content, thus providing you with full hold over image display in your post/page/custom post. You can also change the order of your images by just drag-n-drop
here is a sample code of how to retrieve your gallery images,
<?php $attachments = new Attachments( 'attachments' ); /* pass the instance name */ ?>
<?php if( $attachments->exist() ) : ?>
<h3>Attachments</h3>
<p>Total Attachments: <?php echo $attachments->total(); ?></p>
<ul>
<?php while( $attachments->get() ) : ?>
<li>
ID: <?php echo $attachments->id(); ?><br />
Type: <?php echo $attachments->type(); ?><br />
Subtype: <?php echo $attachments->subtype(); ?><br />
URL: <?php echo $attachments->url(); ?><br />
Image: <?php echo $attachments->image( 'thumbnail' ); ?><br />
Source: <?php echo $attachments->src( 'full' ); ?><br />
Size: <?php echo $attachments->filesize(); ?><br />
Title Field: <?php echo $attachments->field( 'title' ); ?><br />
Caption Field: <?php echo $attachments->field( 'caption' ); ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>

Resources