Atlas: thumbnails linked to separate enlargement gallery images WordPress
- SOLVED
I am working with the Atlas theme and I want to be able to use certain thumbnail images that link to different enlargement images.
This is because I am finding it too difficult co-ordinating portrait images into the thumbnail format. if I can use two different images, I can control my cropping of the images more accurately - one thumbnail and one enlargement.
The theme currently uses timthumb to resize gallery image, however I'm not happy with how they display as thumbnails. I want to specify my own thumbnails that I've cropped myself. And my own enlargements that I've cropped myself.
Can you please provide me with the code required and instructions to implement this?
Cheers, Pete
Answers (3)
Arnav Joy answers:
can you send me your theme at my email : [email protected]
and let me know in which page/pages you want to overwrite the default functionality .
home page
category page
archieve page
...
etc..
Abdelhadi Touil answers:
Hi.
Can you give us your website link please?
pete comments:
I'm currently working on the site in a sandbox on my computer so unfortunately it is not live.
Can I send you any other information?
Cheers
Pete
Abdelhadi Touil comments:
Ok no problem. I'd like to understand what you mean by croping thumbnails by yourself, do you mean crop it on your computer then upload it to website? Or after uploading it?
(Sorry for my bad English)
pete comments:
Crop it on my computer (with Photoshop) then upload it.
I want to be able to crop two different versions of the same image. One of these cropped versions goes in to my thumbnail and is cropped according to the formatting limitations there. And the other cropped version goes into my enlargement gallery.
Does this makes sense?
Abdelhadi Touil comments:
Ok. What is the size of each one of them? I mean the thumbnail and enlargement sizes?
pete comments:
Thumbnail is 252 x 220px.
Enlargement is 400 x 600px.
Abdelhadi Touil comments:
The most interesting thing with images is preserving aspect ratio, so that's why sometimes scripts like timthumb when they are cropping images they display just a part of images, that's to preserve aspect ratio, so to make images like you want after beeing croped by timthumb (or ever wordpress), you should uplaod an image that can be resized without losing any part of it, I'll explain you with an example:
If you upload an image wich the size is 400x349, it will be cropped without losing any part of it, beacause to resize it from 400x349 to 252x220 this can be done by script without losing th original aspect ratio of the image. So if you can make the enlargement size to 400x349, then timthumb will resize your image without cropping it, and you'll love the result.
I think it's difficult to have a thumbnail with 252x220 size and the enlargement with 400x600 size without cropping the bigger one, because 400x600 isn't in aspect ratio with 252x220. I hope you understand what I want to say.
What do you think?
pete comments:
I understand you point and this is precisely my problem! I am not happy at all with the way that the aspect ratio takes control of the way my images look in the thumbnail.
This is why I need to have complete control over the thumbnail as well as the enlargement.
Unfortunately this doesn't answer my question.
Do you have any other ideas?
Abdelhadi Touil comments:
You can overwrite the timthumb code in you theme (I don't know exactly where), by the code that displays the wordpress thumbnail image like so:
<?php the_post_thumbnail(); ?>
and then after uploading your 400x600px image you can crop its thumbnail as you wish from wordpress, like described in this tutorial:
[[LINK href="http://www.wpbeginner.com/beginners-guide/how-to-crop-rotate-scale-and-flip-images-in-wordpress/"]]http://www.wpbeginner.com/beginners-guide/how-to-crop-rotate-scale-and-flip-images-in-wordpress/[[/LINK]]
I don't know if you are using the free Atlas theme, or a premium theme with the same name.
Good luck.
Christianto answers:
Hi PeteJohnson,
If you mean by atlas theme is this
http://www.gallyapp.com/tf_themes/?theme=Atlas
then I think the thumbnail is generated with the_post_thumbnail() not timthumb,
since the src of the thumbnail not pointing to timthumb.php file
for example "timthumb.php?src=castle1.jpg"
you can add your manually cropped image, rename it,
and find the images on "uploads" folder under the same directory with the same name,
and replace the thumbnail manually, without change any code..
for example the big image url:
www.yoursite.com/wp-content/uploads/2011/06/Image1.jpg
wordpress will automatically create thumbnail image under same directory, but add different name for example:
www.yoursite.com/wp-content/uploads/2011/06/image1-<strong>252x220</strong>.jpg
so you can cropped Image1.jpg, rename it to Image1-252x220.jpg,
and upload to same directory to replace the thumbnail created by wordpress.
Or if you need to change all thumbnail images with different name with suffix added for example
full version image url:
<strong>www.yoursite.com/wp-content/uploads/2011/06/Image1.jpg</strong>
thumbnail url:
<strong>www.yoursite.com/wp-content/uploads/2011/06/Image1-thumbnail.jpg</strong>
you can use this on functions.php:
function thumbnailURL($postID){
$suffix = '-thumbnail';
if(!$postID){
global $post;
$postID = $post->ID;
}
$imageURL = wp_get_attachment_url( get_post_thumbnail_id($postID) );
$extension = pathinfo($imageURL);
$imageName = explode('.'.$extension['extension'], $imageURL);
echo '<img class="thumb" src="'.$imageName[0].$suffix.'.'.$extension['extension'].'" />';
}
and need to change the_post_thumbnail() with:
thumbnailURL();
on your gallery page code..
That if the theme use the_post_thumbnail();
or Javascript solution:
jQuery(document).ready(function($){
var galleryIframe = $('#iframe').contents();
galleryIframe.find('#thumbnails_wrapper .content a').each(function(){
var suffix = '-thumbnail',
imageURL = $(this).attr('href'),
extension= imageURL.substr( (imageURL.lastIndexOf('.') +1) ),
imageName = imageURL.split('.'+extension);
$('img', $(this)).attr('src', imageName[0]+suffix+'.'+extension);
});
});
then you can cropped the image, rename it (with "-thumbnail" suffix added), and upload it.
you can change the suffix if you want.
let me know if you need help with this..