Display content with different images size? WordPress
- SOLVED
I have created all my posts using the full size images that I have uploaded. I have created an extra template based on the single.php template which currently displays my posts and full size images using <?php the_content(); ?>.
On my new template I want to be able to display the_content but instead of retrieving my full size images I want to display the thumbnails?
Answers (4)
Ross Wilson answers:
This was an interesting excercise. Here is your solution
Replace the_content();
with
$attachments = get_children(array('post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order ID'));
$contentdom = new DOMDocument;
$contentdom->loadHTML(get_the_content());
$imgs = $contentdom->getElementsByTagName('img');
foreach($attachments as $att_id => $attachment) {
$image=wp_get_attachment_image($attachment->ID, 'large', false);
$largedom = new DOMDocument;
$largedom->loadHTML($image);
$largeimgs = $largedom->getElementsByTagName('img');
$largeimg = $largeimgs->item(0);
$full_img=wp_get_attachment_image($attachment->ID, 'full', false);
$fulldom = new DOMDocument;
$fulldom->loadHTML($full_img);
$fullimgs = $fulldom->getElementsByTagName('img');
$fullimg = $fullimgs->item(0);
foreach ($imgs as $img){
if( strpos($img->getAttribute('src'),$fullimg->getAttribute('src')) !== false) {
$img->setAttribute('src', $largeimg->getAttribute('src'));
$img->setAttribute('width', $largeimg->getAttribute('width'));
$img->setAttribute('height', $largeimg->getAttribute('height'));
}
}
}
echo $contentdom->saveHTML();
julesphoto comments:
Perfect Ross thanks!
Nilesh shiragave answers:
Where you want to display thumbnail images. Inside post content exactly where they are added in content text.
Or you want to display all images at the top or bottom of the text?
You can retrieve all images attached to post using following code.
<?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'));
foreach($attachments as $att_id => $attachment) {
$full_img_url = wp_get_attachment_url($attachment->ID);
$split_pos = strpos($full_img_url, 'wp-content');
$split_len = (strlen($full_img_url) - $split_pos);
$abs_img_url = substr($full_img_url, $split_pos, $split_len);
$full_info = @getimagesize(ABSPATH.$abs_img_url);
?>
<div class="post_image">
<a href="<?php echo $full_img_url; ?>" title="<?php echo $attachment->post_title; ?>" target="_blank"><img src="<?php echo $full_img_url; ?>" width="100" height="100" /></a>
</div>
<?php
}
?>
Just Add that code inside your single post template just above
<?php the_content(); ?>
julesphoto comments:
I want to retrieve the content as it is and just display a different images size which already exists as it has been created by wordpress. The code above is not really what I want. I actually have a solution that will give me the posts images at the right size but not the text as well.
She Codes answers:
You have to use:
<?php if( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} ?>
However this will display only the thumbnail of the featured image.
If you want the images in the content to be small also, right before you insert an image, you have to choose the thumbnail size.
Jatin Soni answers:
Why dont you try to play with the css?
You can change your content css image size to whatever you want. I know its little dirty solution but it may works.