Adding Titles To Thumbnails

mlmorg

Joined: 2006-10-12
Posts: 9
Posted: Thu, 2006-10-12 18:13

Hi,
I'm new to the forums here and have been looking to add titles below the images in my album. I found RWD's post here:

http://gallery.menalto.com/node/37365

and added this to album.tpl:

<p class="giTitle">{$child.title|markup}</p>

This worked great except sometimes the pictures are moved down a row for some odd reason. For example...page 1 of Necklaces is fine:

http://www.katherinewagnerdesigns.com/gallery/v/Necklaces/Necklaces/

Page 2, however, there is some sort of problem:

http://www.katherinewagnerdesigns.com/gallery/v/Necklaces/Necklaces/?g2_page=2

It seems like what is happening is this: In the last column of either of the middle rows, if the image title row above it is the largest (that is, if it has the most writing in that row) then there is no problem. However, if a column before the last has the largest row of title writing, and the last column isn't as large, then the images before it in the middle row are bumped down below.

I know, that's a long confusing answer but you should be able to understand when you look at the site. Anyway, is there anyway to fix this...maybe make the title rows a fixed height so that it doesn't screw up the rows below it?

Thanks very much for any help, Matt
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Thu, 2006-10-12 19:04

There might be a bettwer way But...Here is what I would do:

In the css you are using (gallery/themes/siriux/theme.css) find:

/* -- Gallery thumbnails ------------------ */

.gallery-thumb {
	margin: 5px;
	float: left;
	text-align: center;
}

and add

.gallery-thumb p {
	text-align: center;
font-size: .9em;
margin: 0px;
}

Play with the margin in both cases and the font size.
Save the css as:
gallery/themes/siriux/local/theme.css
 
mlmorg

Joined: 2006-10-12
Posts: 9
Posted: Thu, 2006-10-12 20:11

Thanks for the post, I tried it but it didn't seem to do anything. I didn't quite know if you meant add that entire thing BELOW the other one, or REPLACE. But, I tried both...when I just added that second bit after it didn't do anything. When I replaced it with the other one, all the pictures lined down in just one column, no titles. Anything else I could try?
 
mlmorg

Joined: 2006-10-12
Posts: 9
Posted: Thu, 2006-10-12 20:20

Ok sorry that was really dumb what I just said...I figured out what you meant just after I posted that. And so yes I've been playing around with the font size and margin etc. but I still keep running into problems even though the amount of space the text is able to take up it a lot. Anyway, take a look back at the second page and you'll see what I mean.

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2006-10-13 03:41

Im a bit confused.
Looking at the page now I don't see any text except for the last row. Do you want to have text under the thumbs?
or is it the titles that are over the page numbers that is a issue?

Can you make a screenshot of what you are seeing?
 
mlmorg

Joined: 2006-10-12
Posts: 9
Posted: Fri, 2006-10-13 17:53

Sorry for the delay...

Ok, I'm looking through IE and you're looking through FF. What you are seeing through FF is wrong also though...but here are screenshots of what I'm seeing. The first screen is of what the first page of necklaces looks like and this is what I want it to look like. However, the second page (the second screenshot) is all off and I want to fix that. But I also want to fix the issue with FF not showing the same thing. Thanks, hope this clears it up. Matt
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2006-10-13 23:06

I can't see if this works without installing your theme and your titles but this works in FF.

.gallery-thumb {
	margin: 5px;
/* add some space to the bottom of the thumb for the title */
margin-bottom: 50px;
	float: left;
	text-align: center;
}

.gallery-thumb p {
	text-align: center;
/* make the tilte a bit smaller*/
font-size: .7em;
/* move the text up to the top of the div */
margin: 0px;
}

This theme was not designed fro text to be added.

I have found 2 tools that are invaluable the firefox browser and the web development tool that allows you to Make live edits to the CSS of a web page..
Once you have them both installed....
select edit css and under the 'information' dropdown check display ID & class details.
Edit your CSS and you will see the results. Once you have this the way you want, upload your edited css to the server.

Dave