Tip:
Highlight text to annotate it
X
Okay, I want to talk a little bit about the photo gallery content type and wanted to look
at an existing gallery that's already up online and you can see here from the URL this is
on the admissions site. If you were curious about looking at any of their photo galleries,
you can just go to the main admissions site. The five rotating images that are cycling
through on the home site are all linked to a different gallery. This is just a photo
gallery on spirit. Again, you've got a page title. You've got the ability to put a subhead
in here. You've got a body field where you can put some intro text, and in that body
field, I mean it's like any other page, you can do sort of whatever formatting you might
want, but again you probably don't want to put a whole lot in there because the whole
point is it's a photo gallery page and you don't want to push that content too far down.
Now, what you're seeing is we've got sort of a standard three across display with thumbnail
images. You don't have to have a multiple of three. I mean you could have seven and
these last two spots would be open or you could have eight and that last spot would
be open so don't feel like you have to, you know, be that rigid necessarily. If I scroll
down here to the bottom, as I mentioned we've got five photo galleries in the admission
web site so what you're seeing here is whichever site, whichever page or gallery I'm on, we've
got this promotional element programmed in where it always will show me the other four
galleries or the other galleries in my group. In this case, it's the other four because
I've got five. So if I click on any other any other of these galleries, it's dynamically,
you know, going to take me to that and again, across the bottom, show me the other four
galleries that are available in my group and so that would be a nice feature if you kind
of want to tie those together and let people sort of explore your photo galleries. Scrolling
back up here, just to illustrate, if you click on the image, a light box will appear. Because
of the resolution, it's actually displaying about the same size or maybe even a little
bit smaller here. It's standard resolution. That light box image is going to be larger
than your thumbnail naturally. That's the whole point. Click on it and see a larger
version of the image. I would recommend that you probably want to go about, you know, on
a horizontal image that's 4x3 aspect ratio, probably no bigger than about 800 by 600.
You could maybe bump that up a little bit larger but you know at some point it's going
to be probably a little gratuitous in terms of your screen real estate. Certainly on a
vertical image, I wouldn't go a whole lot bigger than like 600 by 800 because you're
going to wind up with an image so deep you're probably going to have to scroll down to see
the whole thing. As you can see, when we clicked on this, it's cycling through. It's got a
little rotation built in and I guess it's about every eight or ten seconds it's going
to rotate through on its own. You can also go up here and arrow forward or arrow back,
you know as you see through. When you close that out, or before you close that out, you've
got a caption field that will display in the light box mode. You've also got a title field
here that will display, you know, at the thumbnail view. One of the things you want to kind of
be careful of in terms of you know maybe consistently is you know if these headlines end up being
multiple lines the gray box that kind of borders and contains the content isn't really set
up so that it can adjust for those alignments or inconsistencies so basically what's going
to happen is you're kind nice, neat alignment on that array of the thumbnails is going to
be thrown off a little bit if you've got a headline in one case that's one or two lines
and another one that's two or three. I mean keeping those consistent is what's going to
keep this thumbnail view kind of nice and neat and orderly. That's not necessarily that
important but it may just be something you want to consider take a look at as you play
with building these. Alright, I'm going to go in and create a page with gallery which
again is just going to be a content option in your left column and again it's going to
be pretty straight forward. You've got your page title, photo gallery test page. You can
put some content in here, okay, and then it's really going to be as simple as choosing an
image, uploading it, and again you've got your standard description, alternate text
and title fields. Description is simply that caption that's going to display on the light
box view. Okay, alternate text is going to be again, you know, probably a more literal
description of what's going on, students studying in library or whatever this is, and the title.
If I go down here and add another item, again I can just do this as many times as I want.
I want to choose a file, upload a second image, and one of the nice features here and again
it's a little awkward at this resolution but I can grab these and drag them just like I
did with the menu and so that's how you rearrange and reorder the images as you want to display
them, you know top to bottom, left to right. So I have gone in here and added a few additional
images and again what I wanted to show is that you can see what happens when I've got
a three line title here, one line title, two line title. This border is just going to be
a little inconsistent. It doesn't look awful but it may be something you just want to be
aware of. The other thing here to note is that initially we, when we first set this
up, if you had a vertical image, that would actually display a vertical thumbnail image.
So if you were intermixing horizontals and verticals, it was really out of whack and
really inconsistent in terms of the alignment. What we've gone back in and done is introduce
something called a smart crop and it actually may not be quite as smart as we like because
you can see there's, it's cutting off this guy's head a little bit. If I click on this
image, the focus is actually these two girls at the top and again here's sort of the focus
of the guy on the bike so it's a little imperfect on the thumbnail but the tradeoff, and it
works better on this image, the tradeoff though is instead of getting this really disjointed
mix of horizontal and vertical images, it's closer. They're actually and the depth on
this is actually a little bit more than on the straight horizontals, and if I jump over
to another browser, I can show you that real quick. I've got a little measuring tool. So
if I get down here, it's actually 127 pixels deep and on these vertical ones, it's 143
pixels so you can mix and match them and it's going to be a little bit off but maybe again
not quite as bad, obviously, if it were a true vertical. So again you may just want
to be a little weary of the composition images in terms of how they're going to display here
but there's really not going to be sort of a perfect, a perfect fix for this. If we go
back to the way it was before, then you get a very disjointed thumbnail array so this
is kind of the compromise right now. So, that's pretty much it in terms of photo gallery.