HELP! Custom fields and thumbnails

Hi

You need to turn your thumbnail display from just displaying an image to a link that has the thumbnail as the link trigger.

If you can adopt a system of naming conventions where the thumbnail and the larger image always have the same name, you won’t need to use a second custom field. In that case I’d put the thumbnails in one folder and the images in another and the code can switch the folder its looking for the image in.

If it will not always be possible for them to have the same names, then use a second custom field. Your code in single.php can look something like this:
<a href="/wp-content/uploads/myfolder/largeimagefilename.jpg><img src="/wp-content/uploads/myfolder/thumbnailfilename.jpg" alt="whatever" /></a>

That will open the large image on a page by itself. After you get it working you can make it fancier by displaying the larger image in a lightbox overlay.

Thanks for your reply but nothing is helping.
This is exactly what I did.
I’m using the Arclite theme.

In a post, I created 2 custom fields: One being Thumbnail #1 and the other being Thumbnail #1 Big, with the URL of each.
The pictures are under a folder in my uploads folder.

When I go to single.php in the theme folder I add the following code before the php endwhile section:
<img src=”<?php echo get_post_meta($post->ID, “Thumbnail #1″, true);?>” />.( i got his from a tutorial)
Now what coding do i add or what must i do, so that the thumbnail can be clicked and this will lead to the opening of a new window or something of the larger image (Thumbnail #1 Big).
I used your coding, but its still not clickable.

what is the content of Thumbnail #1 – just a filename “myfile.jpg” or a full URL? most likely the issue is getting the full file path specified correctly.

In your browser menu, on the View menu, click View Source. That is the HTML the browser is executing when displaying your page. Find the URL’s of the two images in the source code, the thumbnail and the full sized image. If the URL’s start with https://, copy them from the source code and paste them into the browser address bar (one at a time). If the URL is valid you should see the image displayed in the browser when you hit ENTER on the browser address bar. If you don’t see the image (get a 404 page) you are specifying the wrong file path and this needs to be corrected.

this <img src="<?php echo get_post_meta($post->ID, "Thumbnail #1", true);?>" /> is not going to be enough if all it contains is the filename “myfile.jpg” because there is no indication of what folder that image is stored in. The same will be true for the full sized image.

If you are uploading these images using the WordPress media system, the default is that each month a new folder is created under /uploads/ which is not going to work conveniently when you are working with thumbnails in a system like you are creating. If you are using the media uploader and don’t have a large # of images each month on your site, I’d suggest turning off the “Organize my uploads into month- and year-based folders” on the Admin / Settings / Misc page. Then your standard image file location in your tenplates can be
<img src="<?php bloginfo('url'); ?>/wp-content/uploads/myfile.jpg" alt="" />
and the corresponding to the href in the link to the larger image.

<?php bloginfo('url'); ?> equates to the root folder of your WordPress installation.

Again thank you for the effort and patience in replying.
I’m not exactly clued up on coding and all.

Nothing i try seems to be working, unless im doing it all wrong which i think is the case.
All I want is to be able to add thumbnails to my posts underneath the text (like 2 rows of thumbnails kind of effect) and allow them to link to the original sized image when clicked.

Please can you tell me the best way to go ahead and do this. Im gonna forget everything else i read on the net and just hopefully you can give me a step-by-step guide on how to do this because it is truly driving me insane, all i want is to get this right so that i can move on and not only that but this is for the company i work for and Im not getting anywhere.

Thank you…

If every post that you want this effect on has its own images and they are different in each post, why don’t you just include the links in the code at the bottom of each post? Forget about custom fields.

use the builtin WP media library. add the images to the end of your posts. select the thumbnail size, 150 x 150, and add a File URL. That will insert the posts and set up the links to click and display the larger sized image.

Try that on a test post and see if you are happy with the results. It may take a little CSS tweaking to get the thumbnails to display in a horizontal line. First see if you are happy with the effect. If you are, post a URL where I can see your post with the thumbnails and I will help you get them aligned horizontally.