This topic was raised by a member who would like to create a Dynamic Content Gallery and add it to her header. We discuss how large the images in the banner should be. Take a brief detour to view the Firefox add-on called “MeasureIt”. Next we look at the configuration of the Dynamic Content Gallery. Finally we discuss the code needed to add it to the Thesis Header.
[This post contains video, click to play]
Select the link below to watch a high definition version of this video
Please visit website to view premium content
Video Transcript
Now what was your question about putting in the dynamic content gallery?
So the question was how do I put the code in to put it in where and then when I’d asked you in the forum the other day, you had asked about doing a mock up. I found myself quatwith how to even determine what size things should be in the banner or in the header. So essentially, I just want my title and tagline in the left side and this on the right side. But I don’t even know how to determine what height and width to use for that.
Well, I guess what I would do would be to start off with how big the stuff that these banners are then. What’s contained inside these banners?
Well, they’re just pictures. They’re pictures that I’vedownloaded Dreamstimeand another free picture websites, image websites. And I’m just going to move captions from them that are going to be advertising my you know, what I’m offering…the services that I’m offering. And so there’ll just be a couple of lines in the bottom of them. But it’s not primarily the picture that I want to be shown. I don’t want them to be all that you can see. I want it to be a complement.
Well so, I mean I guess I would…I guess the place to start… I still think that’s the place to start then. I mean, you can see an example here of where I have Google ad banner in the header, right? So the Google ad banner is a specific height and width and so I had to construct the header so that it accepted… you know, it could do what I want it to do on the left hand side and still do what I want it to do on the right.
Okay.
And so figuring that out was really dependent upon figuring out the right hand side. So the trick here will be… I think, for you to… I’m going to go over to your site right now.
It’s c o h n.
There you go. Okay so right now, you’ve got this header right here.
Okay so then we’ve got to go to the blog, yeah.
Oh okay so we go to the blog and that’s /blog.
Yeah, /blog. This is Dreamweaver.
Okay. We’ve got this banner… I mean essentially, you’ve got this space right here and how much room do you want this image to take up?
Well, I’d like it maybe above the side columns would be sufficient maybe across the 2 of them and then I would want to have the 2nd part of my name on the 2nd line or my title on the 2nd line. Can you just do that? Would it just move down or move over if I was to insert the gallery on that right side?
Ultimately, it would, yes but you need to make sure that the css lets it. I think… I might be the case that there’s a css designation for that. This is overflow hidden and if there is then you need to make a little flow visible so that it would wrap. But if we, for example, just measure this you know, if we… so right now, if you…
To try it out…
Yeah, well I just wanted to try… out of this, in my mind part of its measuring, right? So you’ve got about 410 pixels or so… 408 pixels and 103 pixels tall, right? So if you wanted your image to fill that entire space and then inside this image was this you know, text then it could be that this gets taller. Or it could be that if Sex Therapy Wisconsin came there and then Sex Edition Therapy came below that… you know, in fact you end up with more height and so…you know, maybe it’s 150 pixels tall by 480 pixels wide or something like that. So once you had… and so that’s what you really need to… you need to start off with a decision about the size of this element.
Can I see that in Firebug? If I was to go in Firefox, is that how you’re doing that?
I’m actually using a tool called MeasureIt which is an add-on to Firefox.
Okay.
So if you search for let’s see…Firefox add-on and MeasureIt… yeah MeasureIt right there, you know, you just download it and…Firebug and then once you’ve done that, you can see down here, this little button that looks like a little ruler. If you click on that, it brings up this measuring thing that you can use to measure elements on your site. And this little square…
It’s much better than holding the ruler to the screen as I was doing.
Oh yes, it’s definitely a lot better than that.So if you started off with say, well… once you did this then what you would do is let’s see… I’m looking at…okay, so I’ve got one more question… email opt in in a video and then Kim is asking, “Why can’t that be a gallery of images?” Yeah you know, Kim has got a site that she’s working on called Globe Trotter Grants… must be globetrottergrant.org. Must not be Globe Trotter Grant. Well, in any case, she’s got a site that she’s working on that has a slideshow and very similar to the slideshow here. Let’s see, where is that? Mean cherry…so this is a slideshow and this slideshow could certainly be placed in the header and you could use this slideshow instead of Dynamic Content Gallery. It is certainly the case. I don’t have any directions on how to use this slideshow though I do have directions on how to use the Dynamic Content Gallery. This is quite a bit simpler than Dynamic Content Gallery but at the moment, you’d have to figure out how to do it yourself.
Yeah and I like… your directions were very helpful and I was really looking forward to using every one of them because it really helps especially if I don’t know what I’m doing.
Okay. I think…okay, well that’s definitely… well, it’s a workable solution. To accomplish that, what you’d need to do then…go ahead. Go ahead, Sherri.
The question is what php code I would need to put in to put it into the header than one side to side? And then also, can I have a link to pages in the external website, the Dreamweaver website rather than inside of WordPress?
Oh absolutely because the Dynamic Content Gallery lets you link whatever you want to link to.
So I just put the pages in when I go through this?
Yes so… let’s see… 16.byobtutorial.com/wp-admin and then byobrick… gallery. Scroll past it, there we go, gallery. In Image Management, when you select this… oh it’s not Image Management. Pardon me. Must be gallery method. Okay, images are pulled from specific posts and then I want you to get those images. Let’s see, you know what? That’s actually not the case.
Did you have to go outside of WordPress?
Yeah, it’s actually not the case that you can link outside of the internal site. However, what you can do is you can set up a 301 redirect from that page. So for example, you know, I actually have this on… well, you could have it set to go to you know, what did I pick? I picked category. I picked the ID. So I want to set specific IDs to be linked to 8175 and 70. I could just easily take that post id 81 and I could add a 301 redirect to it to direct off to a different page anywhere I want it using the Thesis 301 redirect system. And that would actually be very simple to make that work. In fact, that’s probably a great idea because that way, you can put your image and your text in this post or page, whenever you’re… into a page, actually instead of a post…into a page then redirect that page to the other page and you’d be able to keep your gallery content separate from real pages but you’d still be able to have it linked off to the offsite page that you want. And you know, as you get closer to that, we can talk about it further. You know, tomorrow I will post a little piece of code for you on the forum in this conversation, assuming that what you’re using is an image that is you know, 150 pixels tall and 400 pixels wide. So I’m going to assume that the Dynamic Content Gallery is going to go there at that size and then I’ll post code for you so you can see what happens or you can see what code to put in.
And because you taught me how to do it in the earlier lesson, I know how to optimize the pictures to fit there.
Sure, that’s right.
So thank you.
Okay, well you’re welcome and just look for it sometime tomorrow.