This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome back to Part 4 of Lesson 12 of the Build Your Own E-Commerce Website tutorial series. In the fourth part of this lesson we are going to deal with image settings in the Dynamic Content Gallery.
Before we do that I want to talk a little bit about the images that we are going to use. You can see that right now this gallery is some dimension wide and some tall and fills up the space that we have for the content. But in its finished form it’s going to be this wide and this tall and the image will fill the entire part of the gallery. So what that means is that we need to know what our website image size should be and make all of our images the same size.
Setting the Image Height and Width for the Gallery
In this case we made this content column 600 pixels wide and I decided that 250 pixels tall was the right height for the gallery. So my images need to be 600 pixels wide and 250 pixels tall. You can use any size you want with this – it doesn’t have to be 600 pixels wide, it could be 320 pixels wide. It just depends on the size that you want the gallery. But whatever that size is, you want to make sure that all of them are the same size.
How Adding Borders Affects Image Size in the Gallery
You could set your image sizes in either in Photoshop, in Paint.net or in some other editing program. I made these 600 by 250 and this gallery doesn’t have any borders around it. If I had added borders to this and I still wanted it to be only 600 pixels wide then the image would have to be narrower than 600 pixels. So that’s one thing to keep in mind; if you want borders and you want your gallery to be a certain width you have to deduct the width of the borders from the image size.
Optimize Your Images for the Web
Please remember to optimize these images for the web. Lately I’ve seen a where folks have used very high resolution images for this and it really slows the website down. Your potential customers won’t appreciate and it doesn’t improve their experience because on a monitor like this they can’t see that increased resolution. So make sure that you have optimized your images for the web. If you don’t know what that means, watch our video on optimizing images in the Start Building Your Website Here tutorial series.
Upload Images to the Media Library
Let’s go ahead and upload some images here to our Media Library because that’s really where this whole thing starts. So we’re going to go ahead and say Add New, Select Files, and now I need to find those files. These are the ones I want. I’m going to go ahead and open those up or upload those. If we look at one of them you can see it is 600 by 250 pixels wide.
Image Management Settings
Let’s go ahead and take care of some of the settings associated with this. Scroll down here to Settings and then Dynamic Content Gallery and we’re going to start off by taking care of Image Management. So if select Image Management we have three choices. The default choice is Auto and what that means is that the gallery will automatically pull the first image attachment from the post. This isn’t going to work for us because we’re using Thesis post images and thumbnails so the Auto really isn’t a useful function in Thesis.
We’re going to go ahead and pick Full URL. What that means is that we are going to copy and paste the URL from the Media Library into the appropriate section so that it knows where to find the image.
A third option is Partial URL and you could certainly use that if you didn’t use the Media Library but you had some other subfolder on your website where you uploaded all the images for this. You could put the address for that subfolder here and then you could use the abbreviated URL or the Partial URL on the pages to indicate which image you want to use. But this is I think, the simplest method of doing it.
So we’re going to go ahead and select Full URL and then under Carousel Thumbnails we are going to select Legacy. This means we don’t have to worry about that thumbnail error problem. We’re going to have Legacy as our choice. Then go ahead and say Save Changes and you can see this little note here about Gallery Method which is the thing we’re going to deal with now.
Gallery Method – Four Settings Options
Select Gallery Method. This provides us with four options but because we don’t have any custom post types it only gives us three. The first one is the Multi Option. This option allows you to select the category that you want to display images from. We could pick Apples for example and then you select the post within that category that you want to select it from. This is a sequential number so it takes the first post of the Apples category. You can come down here and take Apples again and you could put number 2 here if you wanted and that would be the second post and number 3 could be Cherries and you could go back to the first post again. So you could do it this way based on categories and that’s the Multi Option. In this case you have a choice of nine that you could cycle through in that gallery. In addition to that it gives you a place for you to put a URL for a default image. So against the possibility that there was some failure in the display of one of these then it would display the default image. So that’s the Multi Option settings.
The next one is the single category or the One Category settings and in that case, you will be displaying the images from the posts within a single category. You could again pick Apples and then you could say display 5 of the Apples posts and then you could put a default URL in here for any of the posts that were missing an image and it would just cycle through those first five posts. You have a range between 2 and 15 posts for that.
The third method is the ID Method. This method is by far the most flexible because you can just specify the post or the page ID that you want the gallery to select its images from. You can be very specific about what you want – it’s not a general question, it’s not a certain set from a category, and it’s not a specific post within a category but it is the specific post that you want. I don’t believe there’s actually any limitation to the number of posts you can pick in that case and it’s not just posts, it’s posts or pages.
Custom Image Order
Then you have this Custom Image Order. If you select ID Methods settings and use the Custom Image Order then on the pages that you are using to draw the images in, you’ll have a choice which page’s image display first, second, third and so on. Otherwise it’s just going to do it by post ID, so the smallest post ID or page ID will be displayed first and then the next, and the next, and so on. We’ll definitely be using this. At the moment we don’t have any post IDs that we want to add images from. So we’re just going to go ahead and save all changes and we will take care of the rest of that in the next part of this lesson.