[SOLVED]Per page variable - how to?

[jakovbak]

I have noticed that too but "crop" method is not very convenient either (in this particular case) because of original images which have very different placement of "main-point-of interest"... If you take look at "Beauty" page and reveal "thumb-navigator", you'll see the first two thumbs are more or less well re-framed and the others are terrible.
I'm still playing with "crop/scale" options to see what could be the best choice in such galleries with, not only mixed horizontal and vertical images, but totally different focusing in each image.

[velden]

Yes, in those real artistic cases, usually the default/average method won't always fit.

Would it be an option that the customer generates the thumbs him/her self? Offline I mean, and then some way uploads them to the website.

For example, in Gallery, picture 1 is main picture, picture 2 is thumb (base) of pic1, pic4 is thumb of pic3.
Of course that would mean that the customer a. is able to create attractive thumbs and b. is responsible for properly ordering the images in Gallery (which is easy with dragging functionality).

Further, the template would need a slight change to make the magic work. That will be the easy part.

[jakovbak]

Yeah, I knew from the very beginning this would be the best option, even did so when I tested it locally without CMS.
When I started to build the page on server, I gave up on that because: 1) I wanted to see how far can I go with the possibilities and automatization of Gallery Module (you suggested the same thing at some point ), 2) I knew it would take some extra coding to use appropriate custom thumbnails and I wanted to avoid or at least delay that because I didn't know if it's easy or complicated task.

Good part of this solution is the fact I'm the one who's responsible for this part of the job and I know how to do it. Better yet, I won't let my client to do anything about photos except to deliver them to me - she would do even worse job than Gallery Module! Besides, I like to keep control over important parts of any job I do to make sure something won't go wrong. It's my name on it, after all...

So, if you say it would be an easy task, I'll start to build my own thumbs and you can post code changes when you have time.
And we could go back to "Implementing Supersized jQuery plugin in CMS Made Simple" topic because I think we're done with this javascripting issue, right?
Bye for now!

[velden]

Not tested (you will )

Code: Select all

{foreach from=$images item=image name=loop}
{if $smarty.foreach.loop.index % 2 == 0} { image : '{$image->file|escape:'url'|replace:'%2F':'/'}', title : '{$image->titlename}',{else} thumb : '{$image->thumb|escape:'url'|replace:'%2F':'/'}', url : '#' } {if !$smarty.foreach.loop.last},{/if}{/if}
{/foreach}

Note that if you upload the thumbs with the right dimensions you'd change '$image->thumb' to '$image->file'.

Further, of course, order AND count (must be even) are important in this case. Else the JS array will not be finished and JS errors will occur.

[jakovbak]

Should I upload my thumbs in existing GalleryThumbs directory and if I do, should I delete those created by Module?

[velden]

No you should upload your thumbs like normal images in Gallery.

And the the order is important:

-Main Image 1
-THUMB of Main Image 1
-Main Image 2
-THUMB of Main Image 2
-Main Image 3
-THUMB of Main Image 3
etc.

You know that Gallery provides drag and drop to order images.

[jakovbak]

Tested! Passed!
Plus some extra tweaking of CSS... Now it plays like a charm!
I have changed ul#thumb-list li img width and height to match min- width and height because some images are not proportional to thumb size and with this only a couple of pixels are now out of 150x108px (now I don't have to crop horizontal images while making thumbs, just have to set up height to 108px and vertical images are cropped anyway, to get the adequate frame):

Code: Select all

ul#thumb-list li img {
	min-width:150px;
	min-height: 108px;
	opacity:0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter:alpha(opacity=60);
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	-ms-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

Check the test-site and let me know if there's something more to be done - I'm staring in it for days and I can feel I'm a bit out of focus now!
Tnx!

[jakovbak]

This topic is SOLVED and complete tutorial (on topic this issue is reffered to) can be found at:

http://forum.cmsmadesimple.org/viewtopi ... =4&t=65780

Thanks to all contributors, especially to velden! Hope you'll find this useful!
Best regards!
Jakov