Slider with thumbnails

jakob · 2020-12-27 10:42:32

If you are in an individual article context, e.g. showing a project page, then txp:images should automatically look for image ID numbers in the article image field without you having to specify where they come from (see the paragraph beginning By default… in the docs).

If, for some reason, you need to explicitly tell txp:images where to find the image ID#s, you can use the following trick to specify the article images field as the source:

id='<txp:custom_field name="article_image" />'

(with single quotes for the id attribute to denote “process the contained tag and place the result here”.)

That should bring in image IDs (separated by commas) that you list in the article images field, regardless of whether you are in an article list. In most cases, this isn’t necessary.

To advance a counter, you can set a variable and then advance it using the add attribute of txp:variable. Again, the docs are a great help here: see the docs.

Your code looks very similar to this working codeply from this stackoverflow thread. Your code is missing the data-slide attribute on the actual images so may not work as is. To produce that code you’d need the following:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

	<!-- product images -->
    <div class="carousel-inner">
	<txp:variable name="img_counter" value="0">
	<txp:images break="">
		    <div class="carousel-item<txp:if_first_image> active</txp:if_first_image>" data-slide-number="<txp:variable name="img_counter" />">
		        <txp:image class="img-fluid"/>
		    </div>
	<txp:variable name="img_counter" add="1" />
	</txp:images>
    </div>

	<!-- product thumbs -->
	<ol class="carousel-indicators">
	<txp:variable name="thumb_counter" value="0">
	<txp:images break="">
		<li class="list-inline-item<txp:if_first_image> active</txp:if_first_image>" data-target="#myCarousel" data-slide-to="<txp:variable name="thumb_counter" />">
	         <txp:image thumbnail="1" class="img-fluid"/>
	    </li>
	<txp:variable name="thumb_counter" add="1" />
	</txp:images>
	</ol>

</div>

You’ll also see txp:if_first_image in there for setting the active class on the first image. If, for some reason, you want to set it to show the third image when the carousel loads, you can use <txp:if_variable name="img_counter" value="2"> active<txp:if_variable> (Why “2” and not “3”? Because the counter starts at 0, e.g. 0, 1, 2 = third image). It should show you as many images as you specified in your article image field, i.e. there’s no need to use the limit attribute.

If you want to add the next/prev arrows as well, look at the codeply example linked above.

By way of explanation, that code iterates over the list of image ID#s twice, once for the product images, and again for the product thumbs. A counter is set to zero before starting and the value is output in data-slide for the product image and in data-slide-to for the product thumb. It starts with 0 and at the end of the txp:images loop, the counter is advanced by 1 so that the next iteration of the loop outputs 1, the next iteration thereafter 2 and so on…

code365 · 2020-12-28 01:11:42

Jakob, thank you for sharing your TXP knowledge.
This was really helpful information to better understand TXP variable.

It seems the images are not pulling from the articles.

colak · 2020-12-28 05:14:23

code365 wrote #327872:

It seems the images are not pulling from the articles.

Under which context? In an individual article or an article list? Do you have a url we can see?

jakob · 2020-12-28 17:46:26

code365 wrote #327867:

I am using the articles to display a single product with many different images from the article.

code365 wrote #327872:

It seems the images are not pulling from the articles.

Maybe I made too many assumptions. For the above to work, you need to:

Manage your images in Textpattern’s Content › Images panel.
In your article describing the product, you need to place the image ID numbers in the article image field on the write/article edit panel, ideally as a comma-separated list, e.g. 21,22,25,26,30,31 (just an example).
The above code must be inside an article form that you call using txp:article or txp:article_custom. Only then can Textpattern know you are showing an article’s content and therefore to look in the article image field. It doesn’t matter if it occurs on an individual article, e.g. /products/product-name or in a product list with preview images /products/.

If you’re using another method to identify the images, you need to tell txp:images where to find them. And if you’re not managing the images with Textpattern, you won’t be able to use the txp:images tag.

If you can give us some background, we can perhaps help point you in the right direction.

code365 · 2020-12-30 07:55:46

Background:
I am working on a site called Saint Birch What I am trying to do is when someone click-on the thumbnails the main image changes with the thumbnails. Currently, the site is using <txp:article_image/> to display the images on the page.

<div class="">
<txp:article_image/>
</div>
<div class="row">
<div class="col-lg-12">
<txp:images limit="99" wraptag="ul" class="p-thum" break="">
<li>
<a href="#">
<txp:image height="0" width="0"/>
</a>
</li>
</txp:images>
</div>
</div>

This is the slider with thumbnails I would like to use on the single product page.

<div id="carouselExampleIndicators5" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<txp:images limit="1">
<txp:image class="d-block w-100"/>
</txp:images>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators5" data-slide-to="0" class="active">
<txp:images limit="6">
<txp:image class="d-block w-100"/>
</txp:images>
</li>
</ol>

Last edited by code365 (2020-12-30 08:02:25)

colak · 2020-12-30 08:17:25

<txp:images limit="99" wraptag="ul" class="p-thum" break=""> has no way of identifying images, as you already identified. How do you load the thumbnails under the main images?

Also according to bootstraps’s instructions, you need a class="carousel" and a unique id. Having said that, I cannot see an example in their page using your particular slide presentation.

ps… very clean site, but in need of html validation.

Edited to add that the particular page you linked to returned a 404 so I have checked this page, which does not have an id named carouselExampleIndicatorsxxx in the source code.

Last edited by colak (2020-12-30 08:22:25)

code365 · 2020-12-30 10:05:56

I load the images from images section of txp then enter the ID number in article image.

jakob · 2020-12-30 10:14:08

It looks like you’re going in the right direction. If the first block of code you posted already works, then I’m guessing you have a list of image id#s in the Article image field of your article (e.g. 889,886,887,888,890,891,892,893) and txp:article_image is showing you the main image and txp:images is producing the thumbnails like in your page that colak linked to. You’ll be replacing that code with your new carousel code.

I’ve not used the bootstrap carousel myself before, but as far as I can see if you want the thumbnails to control the display of the main image you need to tell the thumbnails what image to change. To do that:

Make sure the id attribute of the main image and the data-target attribute of the thumb image match, e.g. id="product-carousel" and data-target="#product-carousel (with the # in front for this one). You can call it anything you like as long as they match.
If you use multiple carousels on one page (e.g. on an article list), you need, as colak mentioned, to ensure that each pair of image + thumbs have their own id name, e.g. id="carousel-id<txp:article_id />".
That tells the thumbnails where the main images are to be found (i.e. the target to switch).
Make sure that the data-slide-number attribute of the carousel-item in the main image matches the data-slide-to attribute of the thumbnails list items. That tells the thumbnail which main image to switch to.
Make sure you load all the main images, not just one (i.e. don’t use limit="1"). If the rest aren’t there, the script won’t be able to switch to it. The bootstrap carousel javascript will hide the images that shouldn’t show.
Set an “active” class on the image and thumbnail that should show first. In my post above, I set that to the first image, which is probably easiest.

The code I posted above should do all of that, but have a look at the working codeply example I linked to above and see if you can recreate that structure in your code. Once you have bootstrap javascript loaded and initiated, it should make the links between the two work.

EDIT: Actually, looking at this jsfiddle from the stackoverflow thread linked above, it seems that data-slide-number is not necessary, only the data-slide-to, so you could do without the first counter and do:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

	<!-- product images -->
    <div class="carousel-inner">
	<txp:images break="">
		    <div class="carousel-item<txp:if_first_image> active</txp:if_first_image>">
		        <txp:image class="img-fluid" />
		    </div>
	</txp:images>
    </div>

	<!-- product thumbs -->
	<ol class="carousel-indicators">
	<txp:variable name="thumb_counter" value="0">
	<txp:images break="">
		<li class="list-inline-item<txp:if_first_image> active</txp:if_first_image>" data-target="#myCarousel" data-slide-to="<txp:variable name="thumb_counter" />">
	         <txp:image thumbnail="1" class="img-fluid"/>
	    </li>
	<txp:variable name="thumb_counter" add="1" />
	</txp:images>
	</ol>

</div>

code365 · 2021-01-01 05:44:59

Thank you Jakob and TXP community for your time and help. Happy New Year

Textpattern CMS

Textpattern CMS support forum

#13 2020-12-27 10:42:32

Re: Slider with thumbnails

#14 2020-12-28 01:11:42

Re: Slider with thumbnails

#15 2020-12-28 05:14:23

Re: Slider with thumbnails

code365 wrote #327872:

#16 2020-12-28 17:46:26

Re: Slider with thumbnails

code365 wrote #327867:

code365 wrote #327872:

#17 2020-12-30 07:55:46

Re: Slider with thumbnails

#18 2020-12-30 08:17:25

Re: Slider with thumbnails

#19 2020-12-30 10:05:56

Re: Slider with thumbnails

#20 2020-12-30 10:14:08

Re: Slider with thumbnails

#21 2021-01-01 05:44:59

Re: Slider with thumbnails

Board footer