Slider with thumbnails

code365 · 2020-12-24 07:45:19

Hi, I hope someone can help or guide me to the right place to build a slider with thumbnails using the article section with multiple images. I believed I am not doing something right.

Thank you,

<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-24 07:46:59)

colak · 2020-12-24 10:15:02

I guess you are talking about the bootstrap carousel, but I admittedly I do not see an option for thumbnails. Also according to the page above

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="6"></li>
  </ol>
<txp:images wraptag="div" class="carousel-inner" limit="6">
<txp:image class="d-block w-100" />
</txp:images>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ps. if you would like to use thumbnails change <txp:image class="d-block w-100" /> to <txp:thumbnail class="d-block w-100" />
Also, you could either have categories for your images, use a custom_field or other method. If it is from a CF replace <txp:images wraptag="div" class="carousel-inner" limit="6"> to <txp:images wraptag="div" class="carousel-inner" limit="6" id='<txp:custom_field name="carousel" />'>

code365 · 2020-12-24 13:51:58

colak, yes I am talking about bootstrap. I customized the carousel indicator to handle the thumbnail images which, would be regular size images controlled with media query for thumbnail. I want to to be able to upload images per article.

Last edited by code365 (2020-12-24 13:55:32)

code365 · 2020-12-24 13:54:48

How would {txp} be able to give data-slide-to a count up number?

colak · 2020-12-24 16:16:28

code365 wrote #327787:

How would {txp} be able to give data-slide-to a count up number?

That is indeed a good question which I cannot answer but let’s try to make things clearer for someone to respond.

The carousel code will be included in the template of a section in either a page or a form.
The ids of the images will be assigned using a custom field, and they will be comma separated.

What you are looking for is a way to

automatically count how many images have been assigned in the CF
use that number to create the following code, which also has an active class that indicates the current slide.

    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
    ...
<txp:images wraptag="div" class="carousel-inner" limit="number of images">

Please confirm or correct my assumptions above and I’m sure that someone will be able to help.

colak · 2020-12-24 17:40:31

I was thinking that some of it could be achieved manually by assigning a custom field where the number of images can appear

So

<txp:images wraptag="div" class="carousel-inner" limit="number of images">

can become

<txp:images wraptag="div" class="carousel-inner" limit='<txp:custom_field name="NoOfImages" />'>

Im actually wondering if the evaluate tag will come to the rescue for this.

code365 · 2020-12-24 18:46:59

Colak, I am thinking this might work using <txp:images id=“integer”/> But I have to figure out how to get the image id to populate.

<txp:images wraptag=“div” class=“carousel-inner” limit=”<txp:images id=“integer”/>”>

code365 · 2020-12-24 18:47:52

This is really challenging.

Thank you for helping me figure this out.

Last edited by code365 (2020-12-24 18:49:27)

colak · 2020-12-25 06:31:45

code365 wrote #327796:

Colak, I am thinking this might work using <txp:images id=“integer”/> But I have to figure out how to get the image id to populate.

This should do it

<txp:images wraptag="div" class="carousel-inner" limit="10" id='<txp:custom_field name="imgs" />'>

pexman · 2020-12-26 09:37:48

Hi, maybe it can help you. Its a slider in css with txp:images. A plugin has made a new customfield in the image-tab, where you upload images. In this field you can write the ID of an article, where this image is displayed. If there is no article matching, it displays only the picture in this example, but it could be any other action. I give you here a template:

<!DOCTYPE html>
<html>
<head>
<style>
.container_h{display:inline;height:225px; overflow:auto;text-align: center;margin: 8px 0 0 18px;}.container_h ul{list-style:none;white-space:nowrap;overflow: auto;width:100%}.container_h li{display:-moz-inline-box;  display:inline-block; }.container_h img{height:200px; border:3px solid #aaa;border-radius:10px;background:#ddd;}
</style>

<!--Plugin: jcr_image_custom 
Adds a single extra custom field of up to 255 characters to the "Content › Images":http://docs.textpattern.io/administration/images-panel panel and provides a corresponding tag to output the custom field.-->
</head>
 <div class="container_h" >
<txp:images   break="li" wraptag="ul"  sort="rand()" limit="64" thumbnail="1" category="category1, category2,3, category4" >
<txp:variable name="has-matching-article" value="" />
<txp:variable name="has-article"><txp:jcr_image_custom /></txp:variable>
<txp:if_variable name="has-article" value=""><txp:variable name="img-link"><txp:image_url /></txp:variable><txp:else /><txp:variable name="img-link"><txp:permlink id='<txp:jcr_image_custom />' /></txp:variable>
</txp:if_variable>
<!--build the link-->
<a href="<txp:variable name="img-link" />" title="<txp:image_info type="alt" />"><img src="<txp:image_url thumbnail="1" />" width="<txp:image_info type="thumb_w" />"  height="<txp:image_info type="thumb_h" />" alt="<txp:image_info type="alt" />" >  
</a>
</txp:images>
         </div>

<body>
</html>

code365 · 2020-12-26 23:21:35

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

colak · 2020-12-27 07:27:42

code365 wrote #327867:

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

So… the custom field does not work for you?

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?

Textpattern CMS

Textpattern CMS support forum

#1 2020-12-24 07:45:19