We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Revo 2.2.8 MIGX Bootstrap Carousel TV Display templating with GetImageList - Need some ideas or examples

    • 44353
    • 10 Posts
    epic-web Reply #1, 13 years, 3 months ago
    I'm stumped - partly because of lack of experience with MIGX I'm sure. Here's my dilemma. I've created a MIGX TV to store the inner carousel items (images, caption, links etc.) I pretty much understand how to use GetImageList and tpl chunks to get the carousel inner, though I'm not sure how to add an "active" class to only the first item. The formatting required is like this:
     <!-- Carousel items -->
      <div class="active item">
    	<img src="http://placehold.it/1170x400"/>
		<div class="carousel-caption">
                      <h4>First Thumbnail label</h4>
                      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    </div>
	</div>


    The next thing I can't wrap my head around is how to generate the carousel navs in the outer tpl wrapper. I'm sure there must be a way to nest an instance of GetImageList. The wrapper needs to be formatted like this:
    <div id="myHomeSlider" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myHomeSlider" data-slide-to="0" class="active"></li>
    <li data-target="#myHomeSlider" data-slide-to="1"></li>
    <li data-target="#myHomeSlider" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">


    Perhaps there are some examples of similar functionality that I've missed. Any input would be appreciated!

    Aubrey

    This question has been answered by Bruno17. See the first response.

    • discuss.answer
      • 4172
      • 5,888 Posts
      Bruno17 Reply #2, 13 years, 3 months ago
      to have the first item active try:

      [[+_first:is=`1`:then=`class="active item"`:else=``]]


      use allways else with conditional output-filters, also when nothing in it, because it can result in performance-issues, if you don't!

      you will need a second getImageList - snippet - tag for the indicators

        <ol class="carousel-indicators">
    [[getImageList? &tvname=`yourMIGXtv` &tpl=`tplCarouselIndicator`]]
  </ol>
<!-- Carousel items -->  
   [[getImageList? &tvname=`yourMIGXtv` &tpl=`tplCarouselItem`]]


      [Edit]
      Fixed some typos


      [ed. note: Bruno17 last edited this post 13 years, 3 months ago.]
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 44353
        • 10 Posts
        epic-web Reply #3, 13 years, 3 months ago
        Quote from: Bruno17 at Jul 12, 2013, 01:03 PM

        use allways else with conditional output-filters, also when nothing in it, because it can result in preformance-issues, if you don't!

        Helpful tip Bruno17! I didn't know that and have been using "elseless" conditions a lot.

        Using the second getImageList snippet makes perfect sense now too. For some reason it just hadn't clicked. Greatly appreciate your efforts.

        Aubrey