Fluid Theme

maxslug

Has anyone created any "fluid" themes. By fluid I mean where the image and an indexes are automatically sized to the screen?

Take for example Smug Mug : http://cmac.smugmug.com/gallery/5363890_2awbk/#747663493_Nf4hE Resize your browser and watch what happens.

-m

acrylian

All known themes are on the themes section. If you do not care about fake resizing images you can do this with CSS. Otherwise you need to use a little JS for that like this: http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/

maxslug

That's a good tip, thanks.

Ignoring page events (resize/reload) what about just the base case : When you enter a page the elements are sized based on your browser window? So it picks a thumbnail and image size for you based on your screen resolution. Do you know of any themes that do this already?

acrylian

None of the existing themes do this to my knowledge.

You can do this with JS/jQuery but the problem is that you have to pass the browserwindow values to PHP so that Zenphoto can generate the images sized accordingly. And here it gets a little complicated as you can't direclty. PHP is already execute when you call the JS, so you have to pass the values via a form to a intermediate page that in return passes them back to php for the actual display....

Or you could pre generate all possible sizes and change them via jQuery directly.

maxslug

Oh that is tricky. So maybe have a base-setting where everyone defaults to 600px and then if the browserwindow values are available do a dynamic resize? Do any of the themes have dynamic CSS?

I could see having a few presets for common monitor sizes, but a truly dynamic setup would be cool too.

acrylian

As already said, none of the theme is fluid or dynamic in that way (its just easier without...). You will have to work our this yourself.

maxslug

Apparently the "mosaic" theme has a fluid layout, but with fixed image sizes.

http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/ Is what I'ld like to do.

My goal in doing this is to have a theme that looks good on a big monitor and a phone w/out having to click on anything.

Also thinking about making it Ajax so that you can change pictures w/out doing a full page load. I would use this sort of technique : http://stackoverflow.com/questions/1867205/ajax-how-to-change-url-by-content

acrylian

Well, it is all possible. jQuery is already on board.

Note that loading for example image.php via ajax within album.php will not work because of the differences of JS and PHP. JS is executed in the browser environment "on the fly", while PHP is executed on page load only. So everything you want to load without page reload has to be pregenerated in js arrays or such. Or you have to setup a lot of things manually on the loaded page as our PHP contexts will not work as with normal themes.

Let us know when you have something to show.

I am not sure if too much fancy js stuff will work on mobile devices in general. I still think less is more with this.

maxslug

Actually someone beat me to the punch : http://www.zenphoto.org/support/topic.php?id=7437 is doing exactly what I was going to do. He's changing pictures w/out changing pages. I'll have to dig into his code to see how he did it.

acrylian

I know and know that it works as I also did it for a site that even was fully JS on the gallery part. But that site is not even online yet and not available as a theme (I did just the technical implementation on that).

gdodinet

Hi maxslug,

Switching picture dynamically without triggering a page change is actually quite simple and doesn't involve ajax at all (this is rather what we used to call dhtml 10 years or so ago).

You just have to listen for thumbnail click. Your listener will then set the src attribute of your main image container adequately.

For example, suppose your dom structure is as follows:

`

`
Then you just need to add a click listener on #thumbs and assert that the node name of the target of the event is 'img'. Note that i've introduced here a sref attribute: granted it may not pass validators, but it is way easier that way. So using jquery we should have something like this (blind-code):

`
var imgContainer = $('img-container');
$('#thumbs').click(function(e) {
var t = e.target;
if ( t.nodeName == 'img' ) {
var imageUrl = t.attr('sref');
imgContainer.attr('src', imageUrl);
}
});
`
There you should be done. Of course you may also want to add some transition.

However with that you're only half-way. Indeed you may also want your image page to look like your album page (in case the visitor has disabled js).

For this you may want to simply include album.php in image.php (nothing more, nothing less), and in album, set the context accordingly (for instance lookup the correct album page, highlight the correct image, etc.).

That's the way i implemented it anyway. All the work is done in classes/GalleryController (request singleton) if you want to have a look at it.

regards

acrylian

That is why I mean Ajax is problematic (although I know that the term is wrongfully used for a lot of other JS stuff as well).

gdodinet

I'm not too sure to see what is problematic. With or without js enabled, if we want the image page to look exactly like the album page, something, obviously, has to be done (either at zp core level or at the theme level) to correctly set the album context - unless i'm missing something. Javascript candy can be introduced afterwards (actually is should be introduced afterwards to avoid programmatic biases).

acrylian

Sure, if we strictly talk about Ajax that means http requests without loading the entire page, right? If you load a theme page via that into another some context stuff is missing (given you don't want to set up everything manually).

I did not mean it is really problematic it's just some work to do.

You could also just put pregenerate html stuff into js arrays and swap the content from there without directly loading an external file. Seems to work quite well for me when I did the last time (that site is not online). I guess there are different ways to the same solution. And I admit being far from being a real JS wizard.

gdodinet

That would work, yes. The problem with the generation approach is that you would need to generate everything you need. But wouldn't this require to know how deep you navigate without triggering a hard page change?

Another, more agnostic, approach is to blindly rely on what is already present. If you link to a given album page, you could just load this album page passing in a flag (for instance) telling the user requested a page fragment, and not the whole album page. All other relevant information is already embedded in the url. Nothing, then, has to be pre-generated.

But again, as you said, there may be as many solutions to a given problem as there are people trying to solve it.

Regards

acrylian

But wouldn't this require to know how deep you navigate without triggering a hard page change?
Yes, that is a drawback. It is mainly for sites where you really know that or if you just want to do the image.php prev/next stuff.

And we are just discussion a little.