Which album template use

[Tracy]

Hello again;
I will be using one of the album templates hopefully if there is one that will fit the bill! This person wants the thumbnail to enlarge with space beside the enlarged image to write a description about the the artwork. Title dimensions, etc, etc. All the albums that I have played with only enlarge the image with barely enough room to write anything. It would be similar to the "tables" template but with the screen  large enough to have text on the side of the image. Any ideas ?? Maybe I can't use an album module after all??

[Russ]

I don't think there is one, but you could write you own CSS based on one or alter the current one? There are plenty of galleries on the web which do this, just get the CSS and alter to fit the Album template?

[Tracy]

thanks again Russ, so in the album css would it be for
/* Big Picture */ 
.bigpicture

I tried a few things for that but didn't really do to much of what I was looking for.
Tracy 

[Tracy]

Russ (or anyone will to help),  I have been looking in the album and my issue with wanting to add more of a text description. I think a way around this is to place a link within my comment at the bottom of the enlarged image to open a popup box. I have managed to make it open on top while the enlarged image is still visable but now I am having problems with the linking itself. It seems even a one word link wants to repeat itself?? here is a link; http://www.birdphotos.ca/index.php?mact ... ge=53  Click on the 1st image and look at the description. 

My second question is this popup box, I would need one for each image. Do I make a new small template and css and then link to the page?

I hope I am being clear enough here. I appreciate your help. I need to use this same method for another site soon as well.

[Russ]

Mmm the box pop's up but no details and probably not a brilliant idea? Pop-up over a pop up. How much text do you want to put in, I'm thinking combine the Title and the Comments from the album into the image title in the album template? So they both show up?

e.g. Bird Name - Comments go here... under the big image

Then depending on how the pop-up (for big images) handles things then it maybe OK? Don't forget to strip the HTML in from your comments/title in your album template.

[Tracy]

Thanks Russ, yes the box pops up but I haven't entered any details yet, I'm wondering how to do that. Is it just a new page for each image I have to make?

I don't need to have the popup over the image pop but I want to have somewhere to enter details about each image because I think the photographer wants to sell his work so he will need somewhere to enter I guess the image title and #, copywrite, name of the photographer ??

Remember when I entered too much details I lost my prev/next buttons. Another thought I had (but of course I am having trouble with it as well) is to have a caption and link from underneath each thumbnail (similar to the text underneath each album) but I don't know how to add that. If I can do that then the popup information can come from that link.

[Russ]

It maybe you have to customise the Javascript that supports that code to allow either more space for your text or for a way to do a proper pop up. Maybe you will have to pass the parameters as text (for the album id/picture id) and then pull the extended comments out from the album database for the images?  Maybe you could just alter the CSS to give you enough space for your comments. Which template are you using?

[Tracy]

I'm getting very confused with the whole thing. I just don't know enough. Most of what you just said is 'greek' to me now. I am using the Thickbox template. Where will I alter CSS for the comments?

[Russ]

Sorry Tracy, I did not mean to be so obtuse there are just several ways to do this.
OK, there are a few important parts to album.

1. The album admin where you manage albums, album images, thumbnails, titles and comments and picture images, thumbnails, titles and comments. (There are three comments fields for each image and one for each album.)

2. Also in admin are the templates for the album display, often now associated with some Javascript/CSS to allow funky popups.

3. In the case of the Thickbox one, it has a template, some CSS for it's display and also the Javascript which gets loaded and some more CSS to display that.

4. You control what data is sent to the page by editing the template

Code: Select all

{* If we look at the core of the picturelist Smarty - note it has been improperly spaced out to make it clearer *}

<a href="{$onepicture->picture}"
rel="{$album->name}" 
class="thickbox" 

{if $onepicture->comment}

{* If there is something in the first comment field then use this and separate from title with a dash 
   These will both be displayed in the big picture: title - comments as the Thickbox JS picks up the image title *}

title="{eval var=$onepicture->name|strip_tags:false} - {eval var=$onepicture->comment|strip_tags:false}">
<img src="{$onepicture->thumbnail}" 
alt="{eval var=$onepicture->name|strip_tags:false} - {eval var=$onepicture->comment|strip_tags:false}" 
title="{eval var=$onepicture->name|strip_tags:false} - {eval var=$onepicture->comment|strip_tags:false}" />

{else}

{* If there is nothing in the first comments field then just use the title *}

title="{eval var=$onepicture->name|strip_tags:false}">
<img src="{$onepicture->thumbnail}" 
alt="{eval var=$onepicture->name|strip_tags:false}" 
title="{eval var=$onepicture->name|strip_tags:false}" />

{/if}
</a>

To add extra comments in from the other comments fields, (comment field 2 in this example), you could use:

Code: Select all

{eval var=$onepicture->comment2|strip_tags:false}

in the appropriate place in your template, remembering that to get it to display it has to be in the title of the image, otherwise the Thickbox JS won't pick it up. (The strip stuff removes HTML tags - you cannot have them in image titles.)

a. So the simplest way to try and fix long title text would be to alter the Thickbox CSS (not the album). What you would want to alter is the area that displays the current title below the large image. Limit it's width so it doesn't overwrite the navigation and give it some more space for height to allow some line wrapping. OK, it might work but maybe is not brilliant. No line breaks or HTML tags as you cannot have them in image titles!

b. Perhaps the best way would be to look at how Thickbox picks up the image title and see if you can get it to pick up some other stuff from the page as well e.g comments or multiple comments separated by a line breaks or some such. It shouldn't be that hard as Thickbox is itself based on the very nice Javascript framework jQuery. You will still probably have to manipulate the CSS as in 'a' above to provide space and to stop overwriting the navigation. I'd also test on quite a few browsers!

To find out more about Thickbox and how it works try:  http://jquery.com/demo/thickbox/
These is also a 'very' useful forum for Thickbox here: http://codylindley.com/thickboxforum/
To find out more about jQuery try: http://jquery.com/

I hope this is all clear and helps you get the results you want, it should be good! I look forward to seeing it in action and perhaps you could provide some examples for others when you are done.

Russ

[Tracy]

I appreciate your reply again and again Russ; I have to study your post to get my head around it and then I'll go testing again. I'm going to let you know how I make out if that is alright. 

[Russ]

I was thinking whilst driving to work, that maybe you could use the longdesc part of an image tag?

[Tracy]

So, I managed to increase the white space a bit by changeing the height in the album CSS from 25px to 100px. I made my image slightly smaller as well. This gives me just enough room to write 2 small lines  using a inside 1 The problem now is that when hovering over the image it shows the or etc. I don't really like that. http://www.birdphotos.ca/index.php?page=western-grebe

#TB_caption{
height:100px;
padding:5px 30px 5px 25px;
float:left;
}

I tried the long descripton tag you mention (I think) Nothing changed. Unless I didn't understand you. Do you mean the long description link in the advanced tab that you use to link?

[Russ]

Mmmn Tracy you are getting a lot of HTML errors again?
I don't think you are allowed to put html tags even like this "<dl><dt>adult</dt><dt>" into the title tag of an image
It seems to work, sort of, but I can't help thinking this is the wrong way to go about this.

The Thickbox JS code picks up the whole of the image link I imagine and parses it to the elements it requires. You would need to add another parsing element to this JS code to parse a longdesc. (The longdesc would also need to added in your template and populated with one of the comments fields, for example. (Normally in the longdesc you can put a link to you long picture description. To be honest I think this could just be text, or some other stuff linked to your comments.) You could then have this included in the popup by again altering the Thickbox JS?

[Tracy]

Thanks Russ; I've just about had it!  I think / or I know my problem is that I do know html/css but I don't know php and js. The code errors are because I used a 'definition term' tag to get the lines closer together but it was in the comment field not the title field.

I am also not getting anywhere with the comment field I would like to have just below each picture inside the albumns??

[Russ]

Getting a comment under an image is quite easy? What have you got in you template

Something like this for the picture list bit of the template should do it...

Code: Select all

<ul class="picturelist">
{foreach from=$pictures item=picturesrow}{foreach from=$picturesrow item=onepicture}
<li class="thumb"><a href="{$onepicture->picture}" rel="{$album->name}" class="thickbox" {if $onepicture->comment}title="{eval var=$onepicture->name|strip_tags:false} - {eval var=$onepicture->comment|strip_tags:false}"><img src="{$onepicture->thumbnail}" alt="{eval var=$onepicture->name|strip_tags:false} - {eval var=$onepicture->comment|strip_tags:false}" title="{eval var=$onepicture->name|strip_tags:false} - {eval var=$onepicture->comment|strip_tags:false}" /></a>{else}title="{eval var=$onepicture->name|strip_tags:false}"><img src="{$onepicture->thumbnail}" alt="{eval var=$onepicture->name|strip_tags:false}" title="{eval var=$onepicture->name|strip_tags:false}" /></a>{/if}

{* START Remove this section to remove a pictures title and comments
or don't add then to the pictures in the first place and they won't appear! *}
{if $onepicture->name}<span class="picturename"><br/>{eval var=$onepicture->name|strip_tags:false}</span>{/if}
{if $onepicture->comment}<span class="picturecomment"><br/>{eval var=$onepicture->comment|strip_tags:false}<br/></span>{/if}
{* END Remove this section to remove Picture title and comments *}
</li>
      
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
{/foreach}
{/foreach}
</ul>