Upload Photo, Crop Thumbnail, and Display Both Images

I actually built something almost identical for a client: https://www.aimeehoover.com/gallery/dog-gallery/

There’s two parts of it: the backend (inputting the gallery data) and the frontend (displaying the images). I’m going to only cover the backend because I’m assuming you can figure out how to do the frontend with galleriffic.

The easiest way to do it is to create additional image sizes, so WordPress wil automatically resize it for you. Take a look at Mark’s post for more info: https://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/

So in your functions.php file:

add_image_size( ‘gallery-thumbnail’, 100, 100, true); // this is the thumbnail, hard cropped to 100×100
add_image_size( ‘gallery-full’, 600, 9999); // fullsize, scaled down to a max width of 600px

Then when you’re building the sidebar navigation, use the_post_thumbnail(‘gallery-thumbnail’); to display the thumbnail size.

On the main content area where the full image is, use the_post_thumbnail(‘gallery-full’);

I’d also recommend installing the Regenerate Thumbnails plugin ( https://www.ads-software.com/extend/plugins/regenerate-thumbnails/ ). While you’re building it, you might decide to change the dimensions of the images. This will go through and rescale/recrop all of the uploaded images.

Awesome site, Billerickson! I’ll take a look at your approach and see if I can come up with something.

OK, quick question.. I’ve added these few lines at the end of my functions.php file in my theme:

// enables the UI in WordPress to allow thumbnails
add_theme_support( 'post-thumbnails' );

// 50 pixels wide by 50 pixels tall, hard crop mode
// crops from side to side or top to bottom
set_post_thumbnail_size( 50, 50, true ); 

add_image_size( 'volcom-thumbnail', 50, 60, true); // this is the thumbnail, hard cropped to 50 x 60
add_image_size( 'volcom-full', 500, 9999); // fullsize, scaled down to a max width of 600px

Am I supposed to see these image size options in the media upload on each page/post.. because I don’t see anything new with the Media Upload after adding those lines into my functions.php

No, WordPress will just automatically generate new thumbnails of those size. The only way you can access them is through the_post_thumbnail(), get_the_post_thumbnail() …

@billerickson

So, I’ve created a new Page and uploaded a few images. Using a specific page template, I’ve got a sidebar pulling the thumbnails (the_post_thumbnail(‘gallery-thumbnail’) and the main content area pulling the full sized images (gallery-full).

From what I understood, when I upload images on the page, I won’t see the thumbnail and full sizes.. only when I use the_post_thumbnail() will I be able to pull those images.

However, the page is not pulling any of the images.. Only when I set an image to be a “Featured Image” will it pull that single image’s thumbnail and full size. How do I approach trying to get all images on a page for a gallery?

Correct, while WordPress will resize all images uploaded, the_post_thumbnail() will only return the Featured image.

There’s two ways you can approach it:

Make each image a post. This is what we did at AimeeHoover.com. I created a custom post type called Galleries. The top level posts in there were the individual galleries (dogs, cats…) and each image is a subpage to that. This gives us the ability to easily change the order of the images (just change page order); give them a title, description, and metadata; and associate a featured image with each of them. Then I created a template page (single-gallery.php) that builds the gallery by querying all the children pages of the current page.

OR, you could use WordPress’ built-in gallery tool. I don’t have much experience with this I’m afraid. WordPress stores these images as posts in the “attachment” post type, with the image being the featured image. If you can get an array of post ID’s for the attachments, you could then use get_the_post_thumbnail($id, ‘gallery-thumb’);

BAckend? This assumes there is only one user. What about for classifieds websites like https://www.myfunplanet.com?