Work in progress : questions and comments

fly.cub

Joined: 2005-03-31
Posts: 30

Posted: Thu, 2005-04-14 22:15

Hello to the community,

Today I really got into customizing G2. First impression is that it is more complex than G1 but with time I'll probably get more comfortable with it.

Here's my work in progress :
http://72.9.244.74/~severyn/gallery2/main.php

Pretty satisfying to change the layout and general look this much, but there's a LOT more work to do.

I have one question : I don't understand what the thick borders are around each album/item cell. I suspect they might be related to this code:

{if $child.canContainChildren}
	  {assign var=frameType value="albumFrame"}
	{else}
	  {assign var=frameType value="itemFrame"}
	{/if}

Am I right ? How do I get rid of them ?

Now, just one comment/suggestion : in G1 we had 2 layouts (albums and view_albums) which was neat in terms of UI when you had nested albums -- i.e. the layout was different depending if you were inside the album or outside. In the case of my site, you can tell that the big cells (250px) are album cover-pages, but once you click on them, it would be much better to have a mosaic of small cell for each single picture.

I don't think it's a possibility with G2, don't you think it's a step backward ?

Cheers

mindless

Joined: 2004-01-04
Posts: 8601

Posted: Thu, 2005-04-14 22:43

that's a great start! i hope you'll consider posting your layout once it is more complete.

not sure about the border you mention, but it doesn't come from that code.. that's related to imageframes.

of course you can have a different look for nested albums in G2! you can either build a different layout (assign one layout to the top album and anywhere else you want to use it, then make the other your site-default layout), or you can make one layout that behaves differently based on some layout parameter.

fly.cub

Joined: 2005-03-31
Posts: 30

Posted: Fri, 2005-04-15 08:41

Sure, I'll post the files. I'm also working on a tutorial for Dummies

Re. the border : I think it comes from :

<td class="{if $child.canContainChildren}giAlbumCell {else}giItemCell{/if}">

I wanted the 1px light grey border around each cell (thumb+caption), so I inserted a table in each cell (1 row for the thumbnail, 1 row for the caption). This is the trick I used in G1. The thick grey border I'm talking about is just outside/around the 1px light border.

I looked for the 'giAlbumCell' and 'giItemCell' css classes but could not find them. That's what I think is tedious about G2 : figuring out in which stylesheet is located a particular style...

Re. nested albums layout : duh ! It was so obvious I didn't see it. Thanks !

While I'm at it, how do I reproduce this G1 code in G2 :

<?php // displays the wide banner -- file called headerphoto.jpg
$galleryname = $gallery->session->albumName;
$gallerybannerurl = "<image src='http://server101.totalchoicehosting.com/~severyn/albums/" . $galleryname . "/headerphoto.jpg'>";
echo $gallerybannerurl;
?>

Thanks for the help !

mindless

Joined: 2004-01-04
Posts: 8601

Posted: Fri, 2005-04-15 14:50

sorry, the CSS has to be that way to separate layout from theme.
to build a "good" layout that fits into the layout/theme system you should be using classes like gcBackground1,2,.. gcBorder1,2.. so the theme can set these colors (ie, you'll want to build a layout and theme together, then try switching the theme and make sure it still looks ok). Borders are a little tricky because the theme defines the color/style, but the layout css determines the border width.
of course you can just build your layout to look the way you want and try to fit it into the theme system later.. most of the existing G2 layouts were done that way, though mostly because the theme system wasn't ready.
in the case of your cell border.. try:
<td class="{if $child.canContainChildren}giAlbumCell {else}giItemCell{/if} gcBorder2">
then in your layout.css put:
.giAlbumCell, .giItemCell { border-width: 1px; }

for the image thing, try this..
<img src="{g->url href="images/`$layout.item.pathComponent`/headerphoto.jpg"}"/>

fly.cub

Joined: 2005-03-31
Posts: 30

Posted: Fri, 2005-04-15 16:23

I understand the split between layout css and theme css : it makes sense and once understood it becomes easy. I was just thinking that maybe there were other css files somewhere because I couldn't find some css classes in the 2 files.

Thanks a lot for your code suggestions. I'll try them today.

fly.cub

Joined: 2005-03-31
Posts: 30

Posted: Fri, 2005-04-15 18:39

Mindless, I'm scratching my head : the border thing isn't working...
In layout.css, I put :

.giAlbumCell{
	width:250px;
	border-width:1px;
}

.giItemCell{
    width:78px;
	border-width:1px;
}

Doesn't make sense :cry:

Re. the image thing, it works only with parent albums. In the case of nested albums, it's missing the parent's name :

For example, when I use the code :
<img src="{g->url href="http://72.9.244.74/~severyn/g2data/albums/`$layout.item.pathComponent`/headerphoto.jpg"}"/>

but it returns (html source) :

<img src="http://72.9.244.74/~severyn/g2data/albums/Californie/headerphoto.jpg?g2_GALLERYSID=822a30b6664199b81719c347ff67a497"/>

it's missing the directory 'aero' between 'albums' and the sub-album 'Californie'.

Am I missing something ? Also, what are all these numbers after the url ?

mindless

Joined: 2004-01-04
Posts: 8601

Posted: Mon, 2005-04-18 14:00

don't know what you mean by "border thing isn't working"..

for the headerphoto thing, i gave you the equivalent of that G1 code.. ie, just the albumname in the path, not the full path including parents (of course, G1 didn't nest album directories like G2). you can call fetchPath in your layout.inc and put that in your template data if you like, or store the header photos using a different technique; maybe g2data/headerphoto/`$layout.item.id`.jpg

ozgreg

Joined: 2003-10-18
Posts: 1378

Posted: Mon, 2005-04-18 14:10

When it comes to CSS style sheet my suggestion would be to get your hands on Firefox (if you are not already using it) and the Edit CSS plugin.

The plugin will allow you to edit your CSS on the fly so you can see the changes in realtime and then make the changes to the CSS sheet.

The one thing I have noticed is that Gallery has more than one stylesheet active at any one time which can and does lead to confusion when editing. I am hoping as the beta's develop the developers will clean up the multiple style sheet and instead just have the one.

valiant

Joined: 2003-01-04
Posts: 32509

Posted: Mon, 2005-04-18 14:14

ozgreg, there's a reason why G2 has mutliple stylesheet. it's hierarchical. general layout settings, specific layout settings and finally theme relevant settings. first use the general layout css for the very coarse tasks, etc.

ozgreg

Joined: 2003-10-18
Posts: 1378

Posted: Mon, 2005-04-18 14:35

valiant wrote:

ozgreg, there's a reason why G2 has mutliple stylesheet. it's hierarchical. general layout settings, specific layout settings and finally theme relevant settings. first use the general layout css for the very coarse tasks, etc.

Completely understand all that and so was not having a go at the developers however it makes it a little hard to edit the stylesheets, personally I like the one stylesheet fits all approach that say (Wordpress) utilises, you only have one place to go to make any changes..

fly.cub

Joined: 2005-03-31
Posts: 30

Posted: Mon, 2005-04-18 14:35

Mindless, I apologize if I wasn't clear enough re. the border issue. Here's a picture to illustrate the problem. On the left, this is what I have now; on the right, is what I'm trying to get. It should be super simple, however I can't find what I'm doing wrong...

On the other matter, I'll try a couple things tonight (on another thread I'm getting help with custom thumbnails which could be a solution).

Thanks again.

mindless

Joined: 2004-01-04
Posts: 8601

Posted: Mon, 2005-04-18 15:29

hm.. where are you setting the background color? albumBody.tpl for matrix layout adds gcBackground1 class on table cells for album items.. maybe you want to remove that in your layout?

fly.cub

Joined: 2005-03-31
Posts: 30

Posted: Mon, 2005-04-18 20:11

Found it !!!
There was a td.giAlbumCell with padding set at 1em in layout.css.
I guess the confusion came that the color is set in one stylesheet, the border-width in another and the padding in a third one...
I'll have to do a little bit of clean up someday.
Thanks again for your time and help.

fly.cub Joined: 2005-03-31 Posts: 30	Posted: Thu, 2005-04-14 22:15
	Hello to the community, Today I really got into customizing G2. First impression is that it is more complex than G1 but with time I'll probably get more comfortable with it. Here's my work in progress : http://72.9.244.74/~severyn/gallery2/main.php Pretty satisfying to change the layout and general look this much, but there's a LOT more work to do. I have one question : I don't understand what the thick borders are around each album/item cell. I suspect they might be related to this code: {if $child.canContainChildren} {assign var=frameType value="albumFrame"} {else} {assign var=frameType value="itemFrame"} {/if} Am I right ? How do I get rid of them ? Now, just one comment/suggestion : in G1 we had 2 layouts (albums and view_albums) which was neat in terms of UI when you had nested albums -- i.e. the layout was different depending if you were inside the album or outside. In the case of my site, you can tell that the big cells (250px) are album cover-pages, but once you click on them, it would be much better to have a mosaic of small cell for each single picture. I don't think it's a possibility with G2, don't you think it's a step backward ? Cheers
	XUser login Username: * Password: * Create new account Request new password
mindless Joined: 2004-01-04 Posts: 8601	Posted: Thu, 2005-04-14 22:43
	that's a great start! i hope you'll consider posting your layout once it is more complete. not sure about the border you mention, but it doesn't come from that code.. that's related to imageframes. of course you can have a different look for nested albums in G2! you can either build a different layout (assign one layout to the top album and anywhere else you want to use it, then make the other your site-default layout), or you can make one layout that behaves differently based on some layout parameter.

fly.cub Joined: 2005-03-31 Posts: 30	Posted: Fri, 2005-04-15 08:41
	Sure, I'll post the files. I'm also working on a tutorial for Dummies Re. the border : I think it comes from : `<td class="{if $child.canContainChildren}giAlbumCell {else}giItemCell{/if}">` I wanted the 1px light grey border around each cell (thumb+caption), so I inserted a table in each cell (1 row for the thumbnail, 1 row for the caption). This is the trick I used in G1. The thick grey border I'm talking about is just outside/around the 1px light border. I looked for the 'giAlbumCell' and 'giItemCell' css classes but could not find them. That's what I think is tedious about G2 : figuring out in which stylesheet is located a particular style... Re. nested albums layout : duh ! It was so obvious I didn't see it. Thanks ! While I'm at it, how do I reproduce this G1 code in G2 : <?php // displays the wide banner -- file called headerphoto.jpg $galleryname = $gallery->session->albumName; $gallerybannerurl = "<image src='http://server101.totalchoicehosting.com/~severyn/albums/" . $galleryname . "/headerphoto.jpg'>"; echo $gallerybannerurl; ?> Thanks for the help !

mindless Joined: 2004-01-04 Posts: 8601	Posted: Fri, 2005-04-15 14:50
	sorry, the CSS has to be that way to separate layout from theme. to build a "good" layout that fits into the layout/theme system you should be using classes like gcBackground1,2,.. gcBorder1,2.. so the theme can set these colors (ie, you'll want to build a layout and theme together, then try switching the theme and make sure it still looks ok). Borders are a little tricky because the theme defines the color/style, but the layout css determines the border width. of course you can just build your layout to look the way you want and try to fit it into the theme system later.. most of the existing G2 layouts were done that way, though mostly because the theme system wasn't ready. in the case of your cell border.. try: `<td class="{if $child.canContainChildren}giAlbumCell {else}giItemCell{/if} gcBorder2">` then in your layout.css put: `.giAlbumCell, .giItemCell { border-width: 1px; }` for the image thing, try this.. <img src="{g->url href="images/`$layout.item.pathComponent`/headerphoto.jpg"}"/>

fly.cub Joined: 2005-03-31 Posts: 30	Posted: Fri, 2005-04-15 16:23
	I understand the split between layout css and theme css : it makes sense and once understood it becomes easy. I was just thinking that maybe there were other css files somewhere because I couldn't find some css classes in the 2 files. Thanks a lot for your code suggestions. I'll try them today.

fly.cub Joined: 2005-03-31 Posts: 30	Posted: Fri, 2005-04-15 18:39
	Mindless, I'm scratching my head : the border thing isn't working... In layout.css, I put : .giAlbumCell{ width:250px; border-width:1px; } .giItemCell{ width:78px; border-width:1px; } Doesn't make sense :cry: Re. the image thing, it works only with parent albums. In the case of nested albums, it's missing the parent's name : For example, when I use the code : <img src="{g->url href="http://72.9.244.74/~severyn/g2data/albums/`$layout.item.pathComponent`/headerphoto.jpg"}"/> but it returns (html source) : `<img src="http://72.9.244.74/~severyn/g2data/albums/Californie/headerphoto.jpg?g2_GALLERYSID=822a30b6664199b81719c347ff67a497"/>` it's missing the directory 'aero' between 'albums' and the sub-album 'Californie'. Am I missing something ? Also, what are all these numbers after the url ?

mindless Joined: 2004-01-04 Posts: 8601	Posted: Mon, 2005-04-18 14:00
	don't know what you mean by "border thing isn't working".. for the headerphoto thing, i gave you the equivalent of that G1 code.. ie, just the albumname in the path, not the full path including parents (of course, G1 didn't nest album directories like G2). you can call fetchPath in your layout.inc and put that in your template data if you like, or store the header photos using a different technique; maybe g2data/headerphoto/`$layout.item.id`.jpg

ozgreg Joined: 2003-10-18 Posts: 1378	Posted: Mon, 2005-04-18 14:10
	When it comes to CSS style sheet my suggestion would be to get your hands on Firefox (if you are not already using it) and the Edit CSS plugin. The plugin will allow you to edit your CSS on the fly so you can see the changes in realtime and then make the changes to the CSS sheet. The one thing I have noticed is that Gallery has more than one stylesheet active at any one time which can and does lead to confusion when editing. I am hoping as the beta's develop the developers will clean up the multiple style sheet and instead just have the one.

valiant Joined: 2003-01-04 Posts: 32509	Posted: Mon, 2005-04-18 14:14
	ozgreg, there's a reason why G2 has mutliple stylesheet. it's hierarchical. general layout settings, specific layout settings and finally theme relevant settings. first use the general layout css for the very coarse tasks, etc.

ozgreg Joined: 2003-10-18 Posts: 1378	Posted: Mon, 2005-04-18 14:35
	valiant wrote: ozgreg, there's a reason why G2 has mutliple stylesheet. it's hierarchical. general layout settings, specific layout settings and finally theme relevant settings. first use the general layout css for the very coarse tasks, etc. Completely understand all that and so was not having a go at the developers however it makes it a little hard to edit the stylesheets, personally I like the one stylesheet fits all approach that say (Wordpress) utilises, you only have one place to go to make any changes..

fly.cub Joined: 2005-03-31 Posts: 30	Posted: Mon, 2005-04-18 14:35
	Mindless, I apologize if I wasn't clear enough re. the border issue. Here's a picture to illustrate the problem. On the left, this is what I have now; on the right, is what I'm trying to get. It should be super simple, however I can't find what I'm doing wrong... On the other matter, I'll try a couple things tonight (on another thread I'm getting help with custom thumbnails which could be a solution). Thanks again.

mindless Joined: 2004-01-04 Posts: 8601	Posted: Mon, 2005-04-18 15:29
	hm.. where are you setting the background color? albumBody.tpl for matrix layout adds gcBackground1 class on table cells for album items.. maybe you want to remove that in your layout?

fly.cub Joined: 2005-03-31 Posts: 30	Posted: Mon, 2005-04-18 20:11
	Found it !!! There was a td.giAlbumCell with padding set at 1em in layout.css. I guess the confusion came that the color is set in one stylesheet, the border-width in another and the padding in a third one... I'll have to do a little bit of clean up someday. Thanks again for your time and help.

Work in progress : questions and comments

XUser login