[Solved] How define template of the picture view ?

409 Posts

Spheerys Reply #1, 19 years, 6 months ago

Hi,

I’m using the lastest MaxiGallery version (0.5)
I want to design title and description when I’m opening the picture view with lightboxv2 embedded type.

On the documentation, it’s talking about the &pictureTpl parameter.
But it’s doesn’t work on my website.
By default, MaxiGallery use the "assets/snippets/maxigallery/templates/picturetpl.html"
However, if I delete all the contenu of this file, the picture viewer still works without any problem, with the default aspect.

I tried to use chunk in place of the default file, but MaxiGallery don’t want to use it....

What’s wrong ?

Thx

PS : excuse for my english undecided

4,213 Posts

doze Reply #2, 19 years, 6 months ago

The embedded display types do not use &pictureTpl, the javascripts generates the html by them self and there is css stylesheets in lightboxv2/slimbox/slidebox/smoothgallery folders to style the output..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

409 Posts

Spheerys Reply #3, 19 years, 6 months ago

OK thx

So I’ll edit the js/css files

409 Posts

Spheerys Reply #4, 19 years, 6 months ago

Can I make a suggestion for a future version of MG : is it possible to make the design of the lightbox image viewer more easy ?
Because I don’t find how to :
- make the title in boldn but not the description
- delete the "-" character after the title

Do you know how to do this ?

4,213 Posts

doze Reply #5, 19 years, 6 months ago

Sorry, but I’m not planning on modifying the scripts any more than I have already done (to make them easier to translate and customize). Lightbox and slimbox both take the description for the image from the link title attribute. The default pictureTpl for lightbox display type is:

<li>
	<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">
	 	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
	</a>
	[+maxigallery.picture.title:isnot=``:then=`
		<p style="width: [+maxigallery.picture_width_thumb+]px;">
		[+maxigallery.picture.title:htmlent+]
		</p>
	`+]
</li>

To get remove the - between title and description, remove it from the link title attribute. If you don’t care about w3c validation errors, you can bold the picture title by setting <b></b> around the placeholder in the title attribute. But according to w3c, title attribute can’t have html code in it and your pages wouldn’t validate.. they still work perfectly well though.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

409 Posts

Spheerys Reply #6, 19 years, 6 months ago

Sorry, but I’m not planning on modifying the scripts any more than I have already done (to make them easier to translate and customize).

I understand

Lightbox and slimbox both take the description for the image from the link title attribute.

Humm... but I’m looking for isolate the title of the description to apply different style on then :/

The default pictureTpl for lightbox display type is:

Euhhhhh... don’t you tell me than the lightbox embedded type doesn’t use the pictureTpl file ?

I’m lost !! help !!! laugh

What is this code and how can I use it with lightbox ?

Thx for your anwser wink

4,213 Posts

doze Reply #7, 19 years, 6 months ago

Sorry, I meant to say galleryPictureTpl and not pictureTpl.. galleryPictureTpl is for the thumbnails.

Anyways, do a chunk "myGalleryPictyreTpl" with this content:

<li>
	<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="<b>[+maxigallery.picture.title:htmlent+]</b><br /><br />[+maxigallery.picture.descr:htmlent+]">
	 	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
	</a>
	[+maxigallery.picture.title:isnot=``:then=`
		<p style="width: [+maxigallery.picture_width_thumb+]px;">
		[+maxigallery.picture.title:htmlent+]
		</p>
	`+]
</li>

Note that I changed:

title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]"

to:

title="<b>[+maxigallery.picture.title:htmlent+]</b>

[+maxigallery.picture.descr:htmlent+]"

in the <a> tag. Now the output won’t validate, but it will look like you wanted.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

409 Posts

Spheerys Reply #8, 19 years, 6 months ago

Hummm... I did a chunk myGalleryPictureTpl with this code :

<li>
	<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="<b>[+maxigallery.picture.title:htmlent+]</b><br /><br />[+maxigallery.picture.descr:htmlent+]">
	 	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
	</a>
	[+maxigallery.picture.title:isnot=``:then=`
		<p style="width: [+maxigallery.picture_width_thumb+]px;">
		[+maxigallery.picture.title:htmlent+]
		</p>
	`+]
</li>

And there, my MaxiGallery call :

[!MaxiGallery?  &lang=`fr`  &view_gallery=`7` &display=`embedded` &embedtype=`lightboxv2` &pics_in_a_row=`4` &order_by=`title` &order_direction=`ASC` &disable_rightclick=`1` &display_picno=`0` &pictureTpl=`myGalleryPictureTpl` !]

But that’s doesn’t work !
What’s wrong ?

4,213 Posts

doze Reply #9, 19 years, 6 months ago

As I said, define it in &galleryPictureTpl parameter. And do you know that &pics_in_a_row is renamed to &pics_per_row and there is no such parameter as &display_picno anymore..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

409 Posts

Spheerys Reply #10, 19 years, 6 months ago

As I said, define it in &galleryPictureTpl parameter.

Indeed, that’s work now.

And do you know that &pics_in_a_row is renamed to &pics_per_row and there is no such parameter as &display_picno anymore..

You’re right again

I had corrected the code.

Thx for your help