Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

Slider with thumbnails

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)

Offline

#2 2020-12-24 10:15:02

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,451
Website

Re: Slider with thumbnails

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" />'>


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#3 2020-12-24 13:51:58

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

Re: Slider with thumbnails

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)

Offline

#4 2020-12-24 13:54:48

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

Re: Slider with thumbnails

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

Offline

#5 2020-12-24 16:16:28

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,451
Website

Re: Slider with thumbnails

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

  1. automatically count how many images have been assigned in the CF
  2. 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.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#6 2020-12-24 17:40:31

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,451
Website

Re: Slider with thumbnails

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.


Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#7 2020-12-24 18:46:59

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

Re: Slider with thumbnails

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”/>”>

Offline

#8 2020-12-24 18:47:52

code365
Member
From: California
Registered: 2009-08-16
Posts: 93

Re: Slider with thumbnails

This is really challenging.

Thank you for helping me figure this out.

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

Offline

#9 2020-12-25 06:31:45

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 8,451
Website

Re: Slider with thumbnails

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" />'>

Yiannis
——————————
neme.org | hblack.net | State Machines | NeMe @ github
I do my best editing after I click on the submit button.

Offline

#10 2020-12-26 09:37:48

pexman
Member
Registered: 2016-02-27
Posts: 40

Re: Slider with thumbnails

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>

Offline

Board footer

Powered by FluxBB