Siriux theme: Adding photo titles to thumbnails

noregt

Joined: 2005-11-09
Posts: 8
Posted: Tue, 2005-12-20 17:10

Dear people,

I've been working around in the Siriux theme to get it adapted.
I want to be able to show the phototitles in the thumbnail view. I could use the classic theme for this, but that just doesn't look like I want to.

I have been able to narrow it down to this code in album.tpl:

Quote:
<div class="gallery-thumb">
<a href="{g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}">
{if isset($child.thumbnail)}
{g->image item=$child image=$child.thumbnail}
{else}
{g->text text="no thumbnail"}
{/if}
</a>
{$theme.item.title|markup}
</div>

As you can see I added the title to it.

Now two things happen:
* Instead of the phototitle, the album title is added
* The text is placed under or next to the photo, depending on the horizontal or vertical orientation of the image

In the theme.css file, this is the holder for the thumbnail:

Quote:
.gallery-thumb {
margin: 5px;
padding-right: 5px;
float: left;
text-align: left;
}

Normally I place the text inside the holder, make it wider, and force the image to the left(in css without tables that is).

I tried to make it wider with:

Quote:
width: 200px;

But nothing happens

Can anyone help me with this:
* How do I get the phototitles instead of the album titles in the thumbnail view?
* How can I make the gallery-thumb wider so that I can place the title next to it (the image should remain on the left)?

The site I'm working on:
http://www.ventoux.nl/fotos/main.php?g2_view=core.ShowItem&g2_itemId=21

Thanks for all your kind help!
 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Wed, 2005-12-21 00:08

{$child.title|markup} instead of $theme.item.title
 
noregt

Joined: 2005-11-09
Posts: 8
Posted: Wed, 2005-12-21 10:29

Thanks mindless, that works. I solved the css issue myself, so here it is for anyone who is looking for the same thing (I found the same question on Nico Kaiser's site and also one here)

With the web-developer plugin from Firefox I noticed that the width of the .gallery-thumb is set inline (and therefore overwrites the attached theme.css)
This property is done in the theme.tpl document:

Quote:
.gallery-thumb {ldelim} width: {$thumbCellSize}px; height: {$thumbCellSize}px; {rdelim}

I changed it in
.gallery-thumb {ldelim} width: {$thumbCellSize+120}px; height: {$thumbCellSize}px; {rdelim}
And that solves the problem.

Last I had to make some more adjustments to the theme.css file to make it perfect, and also adjust the album.tpl for the main album overview page.

The result is here:
http://www.ventoux.nl/fotos/main.php?g2_view=core.ShowItem&g2_itemId=294
 
samuurai

Joined: 2006-01-03
Posts: 15
Posted: Sun, 2006-01-15 01:54

Hi! I've followed along with this and similar threads but i'm stuck.

I'm a total newbie when it comes to coding, so please go easy :)

I'd like two things to happen... I want my images to align at the bottom edge rather than the top (when viewing all of my thumbnails) then my captions will all line up when a line has one or more portrait oriented pictures. The other thing I want is a bit more of a gap between my caption and the photo underneath it.

Please take a look at THIS.

Thanks people!
 
noregt

Joined: 2005-11-09
Posts: 8
Posted: Mon, 2006-01-16 09:51

I only can find the time to give you a few hints.

If you want the image to appear aligned at the bottom, then you have to give them a css bottom property. also, you need to give the thumb a bottom margin, in order to keep the text away from the image. In theme.css:

Quote:
.gallery-thumb {
margin: 5px;
padding-right: 5px;
float: left;
text-align: left;
bottom: 100px;
margin-bottom: 20px;
}

In the theme.tpl doc you need to change the total height of the image holder:

Quote:
.gallery-thumb {ldelim} width: {$thumbCellSize}px; height: {$thumbCellSize+100}px; {rdelim}

Note that this is just guesswork, so you have to take a close look at how you work with css. I didn't test this.
 
sethu

Joined: 2006-01-16
Posts: 1
Posted: Mon, 2006-01-16 09:57

kindly send me your pics.
 
samuurai

Joined: 2006-01-03
Posts: 15
Posted: Mon, 2006-01-16 18:33

Hi!

Thanks very much, there's now ample space for the captions below my photos..

It looks pretty good as is, so I might not change it, but aligning the photos by the bottom edge didn't work using this:

Quote:
.gallery-thumb {
margin: 5px;
padding-right: 5px;
float: left;
text-align: left;
bottom: 100px;
margin-bottom: 20px;
}

It's ok if you don't have time.. I like the way my gallery looks now.

Many thanks!

Beren
 
noregt

Joined: 2005-11-09
Posts: 8
Posted: Mon, 2006-01-16 19:20

In theme.tpl:

Quote:
.gallery-thumb {ldelim} width: {$thumbCellSize}px; height: {$thumbCellSize+130}px; {rdelim}

Gives you a little bit of extra space for your text.

I don't know why bottom:20px; won't work, just tried it, but no respons.
 
samuurai

Joined: 2006-01-03
Posts: 15
Posted: Mon, 2006-01-16 20:05

Hey there..

It's at 55px now... the reason it was cramped was because I messed something up in theme.css.

It's displaying nicely now. - It would be ideal if siriux detected how much space the captions took up and adjusted accordingly.

Oh well, can't have everything :)

Thanks for all your help!!

B
 
samuurai

Joined: 2006-01-03
Posts: 15
Posted: Wed, 2006-01-18 14:50

Sorry, one last thing..

My site is behaving funny when using the links at the bottom when i'm on the last page of an album

Check this out

See how if you expand the DHTML down the bottom, the page number moves down one line which moves everything else down?

Sorry, i'm still very vanilla with web dev stuff... any ideas people?
 
noregt

Joined: 2005-11-09
Posts: 8
Posted: Wed, 2006-01-18 15:17

My site does the same, I took it for granted. You could try to change the alignment of the div block-core-navigator. Something like
right: 20px;

maybe that will help?
 
samuurai

Joined: 2006-01-03
Posts: 15
Posted: Thu, 2006-01-26 16:43

Sorry for the long gap between posts. I've been on holiday..

That didn't help unfortunately... I'll keep working on it any post again if I come up with a solution.
 
scullygirl818

Joined: 2004-04-01
Posts: 29
Posted: Wed, 2006-07-12 01:39

I have been having this problem but still have not been able to fix it with this. When I added the code {$child.title|markup} on the album page (seems like with this I finally got it in the write place on the page) it is putting the summary under the main page which is not what I want. I want it on the page with the thumbnails of the photos (not the main albums).

This is what I mean for my structure I have:
main page has links to album 1. Open album 1 and you get all the thumbnails for the photos in the album. this is where I want the captions.
 
thesainter

Joined: 2007-01-18
Posts: 5
Posted: Tue, 2007-02-06 19:38

If any one has scullygirl818's problem. You need to replace the code with the second <div class="gallery-thumb">
in album.tpl Looks the same.
 
getsumbaby

Joined: 2007-11-13
Posts: 18
Posted: Fri, 2007-12-07 16:14

Here is what I changed to get it to work.
** create a local folder and copy album.tpl Then change the following. I added whats in bold.

Quote:
<div class="gallery-thumb">
<a href="{g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}">
{if isset($child.thumbnail)}
{g->image item=$child image=$child.thumbnail}
{else}
{g->text text="no thumbnail"}
{/if} </a> <br>
{$child.title|markup}
</div>

Ed
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Gallery version (2.2.3)
WPG2 (3.0.2)
wordpress (v2.3.1)
PHP version (5.2.4 apache)
Webserver (Apache)
Database (mysqlt 4.1.22-standard)
Activated toolkits (ImageMagick, Thumbnail)
Operating system (Linux)