[SOLVED]Per page variable - how to?

The place to talk about things that are related to CMS Made simple, but don't fit anywhere else.
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

[SOLVED]Per page variable - how to?

Post by jakovbak »

Hello everyone!
I'm trying to implement Supersized jQuery plugin into CMS Made Simple and I could use some help on java scripting. But let's start from the beginning...

Configuration (important parts only):
- CMS Made Simple 1.11.4 Fernandina;
- Gallery Module (latest version).

Here's the script inserted in <head> section of HTML template:

Code: Select all

<__script__ type="text/javascript">
			
	jQuery(function($){
				
	$.supersized({
			
	// Functionality
	slideshow:   1,	// Slideshow on/off
	autoplay:	1,	// Slideshow starts playing automatically
	start_slide:   1,	// Start slide (0 is random)
	stop_loop:	0,	// Pauses slideshow on last slide
	random: 	0,	// Randomize slide order (Ignores start slide)
	slide_interval:   4000,	// Length between transitions
	transition:   6,	// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
	transition_speed:	1000,	// Speed of transition
	new_window:	1,	// Image links open in new window/tab
	pause_hover:   0,	// Pause slideshow on hover
	keyboard_nav:   1,	// Keyboard navigation on/off
	performance:	1,	// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
	image_protect:	1,	// Disables image dragging and right click with Javascript
															   
	// Size & Position						   
	min_width:   0,	// Min width allowed (in pixels)
	min_height:   0,	// Min height allowed (in pixels)
	vertical_center:   1,	// Vertically center background
	horizontal_center:   1,	// Horizontally center background
	fit_always:	1,	// Image will never exceed browser width or height (Ignores min. dimensions)
	fit_portrait:   1,	// Portrait images will not exceed browser height
	fit_landscape:   1,	// Landscape images will not exceed browser width
															   
	// Components							
	slide_links:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
	thumb_links:	1,	// Individual thumb links for each slide
	thumbnail_navigation:   0,	// Thumbnail navigation
	slides:  	[
			// Slideshow Images
			{Gallery dir='album' template='supersized'}
			]
					
		 });
	 });
		    
</__script>
As one can see, the line where images are being called is now hard-coded and related to specific album (in this example it's dir='test') in Gallery Module:

{Gallery dir='album' template='supersized'}

The idea is to build a website based mainly on Supersized plugin: Every page within a website is basically an Gallery Module album presented as slideshow via Supersized plugin.

If used with code from above, it works and no further action is needed. But in this case, user should create a different template for each page with just one line of code rewritten like:

For second page: {Gallery dir='album2' template='supersized'},
for third page: {Gallery dir='album3' template='supersized'},...
and so on.

I'm looking for solution on how to replace 'dir' with a page-dependent variable so the script could be used within a single Global Content Block.
Or, to say it more clearly, how to force script to pick up images from Gallery album named "Album2" if the script itself is called while loading a page named "Page2"?

I believe to do so, the 'dir' should be variable per page but I don't know how to do that. I'm a designer and my knowledge on this topic is very narrow, so if someone out there knows how to achieve this, I would really appreciate any kind of help!

Thanks in advance and best regards!
Last edited by jakovbak on Mon Mar 25, 2013 9:16 am, edited 1 time in total.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Per page variable - how to?

Post by velden »

put somewhere in the body section of the template

Code: Select all

{content block='gallery' assign='gallery_dir' label='Fill in gallery dir-name' oneline='1'}
then in the existing part

Code: Select all

// Slideshow Images
         {Gallery dir="$gallery_dir" template='supersized'}
         ]
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

Hello velden!
Were you waiting for me to post this question in appropriate forum section? ;)
You're really nice guy and I want to thank you again!!!
I'll check it out when I'm back in office and let you know if I succeeded. But I believe I'm very close to writing the definitive tutorial on this topic...
Tnx and have a nice day and best regards from sunny croatian coast!
Jakov
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Per page variable - how to?

Post by velden »

No, not waiting. However, I knew this was coming.

I don't know how your knowledge of the German language is, but I just found a nice article about a dropdown filled with Gallery directories.

Makes use of AdvancedContent module. I don't know whether it is compatible with the latest version of CMSMS

http://www.blattertech.ch/blog/44/84/CM ... -geben.htm
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

I'm not good in German. Funny, I was learning German in school for 8 yrs and I suck. On the other hand, I've never learned English but I'm quite good on it... Must be some "ear-failure"... ;D

However, I'll check it out, maybe I can get something out of that article with a little help from online-translators or something like that.
Tnx!
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

Hello!
Me again...
I did what you wrote but after that I got an error:

"<h4>The directory 'Gallery/$gallery_dir' does not exist. Check your parameters.</h4><p>0 images</p>".

And there's a note above it in WD: "index.php:53SyntaxError: Unexpected Token '<'"
(this one is probably produced by the line above, generated while trying to load nonexisting gallery).

I have checked available params for Gallery Module template (supersized) and there is no param named "label". Maybe that's the catch?

Next: instead of

{Gallery dir="$gallery_dir" template='supersized'}

shouldn't it be

{Gallery dir='$gallery_dir' template='supersized'}?

And one more question: If I put this

Code: Select all

{content block='gallery' assign='gallery_dir' label='test' oneline='1'}
in my template, how will it help me not making another template for another gallery? Because, correct me if I'm wrong, "label='test'" (or whatever my come instead of "label") is a param with a specified value...

However, you can check this out on my test-page if you want. I've left everything as initially was after applying changes as you suggested.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Per page variable - how to?

Post by velden »

Well, forgot to tell you that you need to fill in an existing directory in the field labeled 'test'.

That is of course in the cms where you can edit page content. An extra field should be there. Every page that has your template attached will show that extra field.

DO NOT enclose the variable in SINGLE quotes. Try with double quotes or use no quotes.
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

Wow! Seems like I begin to understand this a little better! Still don't know how to deal with it by myself but I was on the right track! I'm driving home from work (I'm not actually driving while I'm writing, I'm beeing driven!) and I'll try to make it work later today if I catch some time... I'll get back to you with results...
Have a nice day!
Jakov
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

GOT IT!
Didn't have time yesterday so I've tried first thing this morning and it works perfectly! Just like everything you suggested so far, as a matter of fact!
Now, before I call this topic "Solved", there's just one more thing...

Gallery Module creates image thumbs at first visit to page which contains specific album. In my "supersized" gallery template I have specified thumb size to be 150 x 108 px, like it was defined in original CSS. Also "zoom & crop" option was used to get better-looking thumbs.
I have created a content page named "thumbs-create" which contains nothing but {Gallery} tag and it's not visible in the main menu. I used this page just for visiting that page so that Gallery Module could create thumbs.
After setting up the javascript as you told me to yesterday, that "thumbs-create" page is not showing images anymore - now it shows:

thumbs-create

{ image : 'uploads/images/Gallery/test/advertising001.jpg', title : 'test', thumb : 'uploads/images/GalleryThumbs/11-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/test/advertising003.jpg', title : 'test', thumb : 'uploads/images/GalleryThumbs/13-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/test/advertising005.jpg', title : 'test', thumb : 'uploads/images/GalleryThumbs/14-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/test/advertising002.jpg', title : 'test', thumb : 'uploads/images/GalleryThumbs/10-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/test/advertising006.jpg', title : 'test', thumb : 'uploads/images/GalleryThumbs/12-8.jpg', url : '#' }
{ image : 'uploads/images/Gallery/beauty/beauty005.jpg', title : 'beauty', thumb : 'uploads/images/GalleryThumbs/16-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/beauty/beauty004.jpg', title : 'beauty', thumb : 'uploads/images/GalleryThumbs/20-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/beauty/beauty002.jpg', title : 'beauty', thumb : 'uploads/images/GalleryThumbs/17-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/beauty/beauty001.jpg', title : 'beauty', thumb : 'uploads/images/GalleryThumbs/18-8.jpg', url : '#' } ,{ image : 'uploads/images/Gallery/beauty/beauty003.jpg', title : 'beauty', thumb : 'uploads/images/GalleryThumbs/19-8.jpg', url : '#' }
Guess I need another few lines of javascript to make this work again without screwing everything good we have done so far, right?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Per page variable - how to?

Post by velden »

It's not clear to me why you should create a page for that.

After you/your customer uploads some new images, I would expect you/customer to check the website once at least. Then, the thumbs are created.

If you don't check it yourself, the first visitor of the website might notice a minor delay the first time.

The Gallery indeed spits out the lines in your example. That is the only thing your pages need; a javascript array with image information.
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

At first I didn't create that page.
But when I checked Gallery Thumbs directory I've noticed it was empty. So I thought there was no trigger for creating thumbs because visiting the page where Supersized plugin is running (.../itstest) is not what Gallery Module needs to start creating thumbs.
And then I came to idea of creating this page as a sort of "create-thumbs-trigger"... I used to visit that page after uploading images in exact same reason you've mentioned in earlier post - to create thumbnails. And nothing else.
If you check thumbs on initial page (Advertising) and then on second page (Beauty), you'll notice thumbs for "Beauty" were very roughly cropped. That's because visiting "thumbs-create" page no longer shows and creates thumbs but spits javascript array. So now thumbnails in slideshow are created by CMS ImageManager and not by GalleryModule and it's prefs. I don't know if there's any way to control the output of ImageManager.
It would obviously take another step, most likely to 'supersized' gallery template so it's preferences for creating thumbs would be used and executed if {Gallery} tag is used on page without Supersized plugin running.
Sounds complicated... Sorry.
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Per page variable - how to?

Post by velden »

I honestly don't believe that Gallery will behave different depending on the contents of the template. Of course, you need to configure the thumbnail sizes and type (crop, zoom/crop etc).

Further, looking at the output: your thumb li's have a width of 150px, the thumb images 200px (both bij css), however the thumb image has a real width of 150px...

Code: Select all

ul#thumb-list li {
    background: none repeat scroll 0 0 #111111;
    display: inline;
    float: left;
    height: 108px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    width: 150px;
}
ul#thumb-list li img {
    height: auto;
    opacity: 0.5;
    transition: all 100ms ease-in-out 0s;
    width: 200px;
}
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

This part of CSS was copied from Supersized demo CSS without editing. I haven't noticed 200px thou... I'll dig a little bit further on creating thumbs and let you know what I came up with.
jakovbak
Forum Members
Forum Members
Posts: 234
Joined: Thu Dec 13, 2012 2:54 pm

Re: Per page variable - how to?

Post by jakovbak »

Hello velden!
I've been playing around with Gallery module and thumbs and it seems it really produces thumbs after all. Not quite as I expected in a matter of quality but, hey, if I can't live with that...
Anyway, I'll tweak CSS to get better positioning of those thumbs within their divs and that's just about everything I could do.
Still, I won't call this topic "solved" yet, maybe something comes up.
Regards,
Jakov
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: Per page variable - how to?

Post by velden »

I recently noticed that the 'Zoom & crop' option might not be the best choice regarding thumbs quality. Try the 'Crop' option and let Gallery generate new thumbs.
Post Reply

Return to “The Lounge”