Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 12 – Part 5 – Dynamic Content Gallery Settings

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to the fifth part of Lesson 12 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to deal with some of the other settings in the Dynamic Content Gallery. Then we are going to add the images that we uploaded to our Media Gallery to specific posts and then add those posts to the gallery.

Dynamic Content Gallery Descriptions Options

We’ll start at Descriptions. Descriptions are the little section at the bottom here. This is the Description, and so we are going to tell Dynamic Content Gallery how we want to handle these. Again we have three choices. We can pick Auto and then it automatically takes the first 100 characters out of the post itself and then adds some kind of a link and you don’t have to do anything else.

The second choice is Manual which is I think more useful to us. In Manual it will either take a description that you’ve added in the post and page for that specific purpose or it will take a Category Description if one exists, or it will take the default description that we would put down here, or finally it will take an Auto description. In our case we’re not going to specify a default description, we’re going to use the Manual system. If we choose not to enter a description in the post or page then it will default to taking the first 100 characters.

We’re going to save those changes and then come over here to Javascript Options. I happen to prefer the way Mootools displays the gallery so I’m going to leave it as my option. But you could, if you found that Mootools interfered with something else you were doing as it does sometimes, select jQuery instead. There’s not a big difference between the appearance, I just think that the transitions between images is a little smoother and a little nicer with Mootools than it is with jQuery but you can pick either one. I’m going to stick with Mootools for the moment.

Dynamic Content Gallery Carousel

Then we come down to the settings inside of that. First it asks you questions about the carousel. Remember that the carousel is this part right here where it has the images for each of the featured products and then it has this little thing saying Featured Products. You could choose not to show the carousel, right? If we turn that off and Save Changes and go to this site, right now we’ve got this Featured Articles thing which has nothing showing up. Because of our settings if we refresh it now it doesn’t result in any kind of information and the featured content gallery goes away. We’ll have to add pictures to this before we can really see what happens but what would happen is this Featured Products would go away and so would the carousel if we kept that setting.

We’re going to go ahead and say Show Carousel and we’re going to say Featured Products instead of Featured Articles. You could have product specials, this month’s deals or anything that suits you.

Dynamic Content Gallery Slide Pane

The next thing is the Slide Pane. The Slide Pane is this at the bottom where the description happens. You could choose not to show it at all and then no description would ever show up. You could choose not to animate the slide show, or animate the Slide Pane and by that what I mean is this moving up and then moving back down – that’s the animation.

You could adjust the opacity of that Slide Pane. Obviously, you can see through it a bit and that’s because it’s got this opacity of 7. You could have an opacity of 1 and then it would be completely opaque and you wouldn’t be able to see through it at all.

The next section is Show Arrows. On this site the Show Arrows is turned off but there are these little arrows that sit here and here if that Show Arrows is turned on.

Then you’ve got your transitions between each image. You’ve got timed transitions and the default is for 9 seconds. This is actually set at 5 seconds here. I think it’s a little fast but I wanted to be able to cycle through some of these are we’re talking. You have these different fade choices that you can explore.

Then if Mootools is already being installed by some other script then you could check this box so that Mootools isn’t loaded again. So we’ll go ahead and save those changes.

Then we’re going to come over here and we’re going to Load Scripts. Again this is an option for you to reduce the amount of Javascript load that happens. Because we are only going to be on our home page, we only want this code to load on the home page. This applies either to home page or to front page.

Here if we’re going to show it on specific pages we could select this instead and then put the page for the pages that the gallery shows up on.  This Specific Page Template doesn’t really apply to us. We don’t have a specific page template in Thesis like that.

We could also select Other and this would load the Javascript files on every single page. So if you are going to have your Dynamic Content Gallery on every page then you would want this option selected. But because we’re only putting it on our front page we’re going to have the Home page selected and we’re going to hit Save Changes.

Add Images to Posts for the Gallery

That’s wrapped up all of the settings. Now we’re going to go ahead and add images to our post. So let’s go back and take a look at our Product Posts and I’m going to scroll down here to our Apple Ardor product. Hit Edit here and then you will see that this new Metabox has been added to the page. So this is where you enter the image and this is where you enter the description. If you actually want this to link up to a different website you would enter that address here and then since we selected a sort order you would put that here.

I want to open up three tabs at the same time here. I’m going to right click on the Media, Library, Open link in new tab and I’m going to scroll down here to Dynamic Content Gallery and right click on that and I’m going to open it up in a new tab and move that over there.

From our Media Library we’re going to pick this image first. Select Edit and there’s our image address – we can copy that. Come back over to the post and paste it. Then we’ll add some descriptive text for our description. We’re not going to have an external link for the image but let’s give it a Sort Order of 1. Notice here that this is post ID 81. Let’s go ahead and update this, come back over to our Dynamic Content Gallery and go to Gallery Method, scroll down to the one that we selected and our first post is 81.

Come back over and pick our next post and we’ll edit the Currant Crush post, scroll down here, get the next image URL, paste it, add some descriptive text, give it a Sort Order of 2, that’s post 75, come back over here and say 75, update. Hit save changes, come back to our website and refresh it and we have got our images in place. You can see our arrows, you can see our featured products and you can see our description here. All that’s left to us is to style this so it looks right.

That wraps Part 5 of Lesson 12 of the Build Your Own E-Commerce Website tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment