Getting Gallery snippet to output and count up?

197 Posts

jonahnaylor Reply #1, 11 years, 2 months ago

Hi I'm looking to output the following with Gallery using &thumbTpl as I normally would for a Gallery album:

		<ul>
			<li class="i">
				<img src="[[+image]]" width="76" height="100" class="page-1">
				<span>1</span>
			</li>
			<li class="d">
				<img src="[[+image]]" width="76" height="100" class="page-2">
				<img src="[[+image]]" width="76" height="100" class="page-3">
				<span>2-3</span>
			</li>
			<li class="d">
				<img src="[[+image]]" width="76" height="100" class="page-4">
				<img src="[[+image]]" width="76" height="100" class="page-5">
				<span>4-5</span>
			</li>
			<li class="d">
				<img src="[[+image]]" width="76" height="100" class="page-6">
				<img src="[[+image]]" width="76" height="100" class="page-7">
				<span>6-7</span>
			</li>
			<li class="d">
				<img src="[[+image]]" width="76" height="100" class="page-8">
				<img src="[[+image]]" width="76" height="100" class="page-9">
				<span>8-9</span>
			</li>
			<li class="d">
				<img src="[[+image]]" width="76" height="100" class="page-10">
				<img src="[[+image]]" width="76" height="100" class="page-11">
				<span>10-11</span>
			</li>
			<li class="i">
				<img src="[[+image]]" width="76" height="100" class="page-12">
				<span>12</span>
			</li>
		<ul>

BUT somehow also if possible add class="i" to just the first and last image, make all the others double image <li> entries AND also add the "page-1", page-2 and <span>1</span>, 2, 3 etc depending on how many images are in a gallery... Is this possible please? I was going to use &thumbHeight/Width to get the sizes right so that should be ok...

Thanks for any help with this.

Yorkshire UK based hosting provider: https://www.simulant.uk

22 Posts

kctechsoln Reply #2, 11 years, 2 months ago

Does each gallery item not have an [[+idx]] and a [[!+total]] (or [[!+gallery.total]]) property?

That'll allow you to do page-[[+idx]]

And them compare, so [[+idx:eq=`1`:or:eq`[[+total]]`:then`i`]]

197 Posts

jonahnaylor Reply #3, 11 years, 2 months ago

Quote from: kctechsoln at Aug 11, 2015, 04:39 AM

Does each gallery item not have an [[+idx]] and a [[!+total]] (or [[!+gallery.total]]) property?

That'll allow you to do page-[[+idx]]

And them compare, so [[+idx:eq=`1`:or:eq`[[+total]]`:then`i`]]

Hi thanks so I've now put this as my Tpl:

			<li class="[[+idx:eq=`1`:or:eq`[[+total]]`:then`i`]]">
				<img src="[[+thumbnail]]" width="76" height="100" class="page-[[+idx]]" />
				<span>[[+title]]</span>
			</li>

which nearly works. The li class is just counting up and showing the number 1, 2, 3 etc rather than 'd' or 'i'. The page class for the img is working great. But I also have the problem of getting the first and last li to be a single one as above but the middle ones to be two images, is this possible? Such as:

			<li class="[[+idx:eq=`1`:or:eq`[[+total]]`:then`i` else`d`]]">
				<img src="[[+thumbnail]]" width="76" height="100" class="page-2" />
				<img src="[[+thumbnail]]" width="76" height="100" class="page-3" />
				<span>[[+title]]</span>
			</li>

Thanks again for any help.

Yorkshire UK based hosting provider: https://www.simulant.uk

22 Posts

kctechsoln Reply #4, 11 years, 2 months ago

Apologies jonahnaylor, there was a typo in my last comment... missing a couple of "=", so it wouldn't have quite worked correctly.

[[+idx:eq=`1`:or:eq=`[[+total]]`:then=`i`:else=`b`]]

Regarding trying to make the middle templates have 2 images I doubt if that's possible. The thumbTpl is per individual image.

197 Posts

jonahnaylor Reply #5, 11 years, 2 months ago

Quote from: kctechsoln at Aug 11, 2015, 08:18 AM

Apologies jonahnaylor, there was a typo in my last comment... missing a couple of "=", so it wouldn't have quite worked correctly.
[[+idx:eq=`1`:or:eq=`[[+total]]`:then=`i`:else=`b`]]
Regarding trying to make the middle templates have 2 images I doubt if that's possible. The thumbTpl is per individual image.

Hi thanks a lot.

For some reason though now I've updated to the new if/else statement I'm getting this output:

			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F1.jpg" width="76" height="100" class="page-0" />
				<span></span>
			</li>


			<li class="i">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F3.jpg" width="76" height="100" class="page-1" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F2.jpg" width="76" height="100" class="page-2" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F4.jpg" width="76" height="100" class="page-3" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F5.jpg" width="76" height="100" class="page-4" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F6.jpg" width="76" height="100" class="page-5" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F8.jpg" width="76" height="100" class="page-6" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F9.jpg" width="76" height="100" class="page-7" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F7.jpg" width="76" height="100" class="page-8" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F11.jpg" width="76" height="100" class="page-9" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F10.jpg" width="76" height="100" class="page-10" />
				<span></span>
			</li>


			<li class="b">
				<img src="/assets/components/gallery/connector.php?action=web/phpthumb&ctx=web&w=76&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fgallery%2F1%2F12.jpg" width="76" height="100" class="page-11" />
				<span></span>
			</li>

but it should be i,d,d,d,d,d,d,i etc?

As for putting two images in, would this be possibly with some kind of extra snippet or another if/else? I realise normally Gallery only outputs one at a time though...

Yorkshire UK based hosting provider: https://www.simulant.uk

22 Posts

kctechsoln Reply #6, 11 years, 2 months ago

In the <span></span> tag you have, put the [[+idx]] and [[+total]] variables in, so you can see what they are when you're testing, then you can adjust the if/else accordingly.
I have a feeling the [[+total]] placeholder needs to be prefixed, so [[+gallery.total]] by default.

I'm afraid I can't think of any logical way to fetch 2 album images per li

197 Posts

jonahnaylor Reply #7, 11 years, 2 months ago

Hi thanks again for helping. It seems to be the +gallery.total that isn't working for me. I've tried [[+total]] and also [[+gallery.total]] as well as 'gallery.total' etc but none are working and pulling in the actual total...

Yorkshire UK based hosting provider: https://www.simulant.uk

22 Posts

kctechsoln Reply #8, 11 years, 2 months ago

What's you actual snippet call?

197 Posts

jonahnaylor Reply #9, 11 years, 2 months ago

here is the Gallery snippet call:

<!-- Thumbnails -->
<div class="thumbnails">
	<div>
		<ul>
[[!Gallery? &album=`1` &thumbTpl=`bookgallerythumbtpl` &thumbWidth=`76` &thumbHeight=`100` &thumbZoomCrop=`1` ]]
		<ul>
	<div>	
</div>

and here is the thumbTpl=

			<li class="[[+idx:eq=`1`:or:eq=`[[+gallery.total]]`:then=`i`:else=`b`]]">
				<img src="[[+thumbnail]]" width="76" height="100" class="page-[[+idx]]" />
				<span>[[+name]]</span>
			</li>

Yorkshire UK based hosting provider: https://www.simulant.uk