Bootstrap carousel and getresources

884 Posts

sinbad Reply #1, 13 years, 2 months ago

Hi folks,
First of all I know there are hundreds of carousels out there but I'm trying to keep everything bootstrap. therefore the question

I'm trying to make getresources work with bootstrap carousel like you can see in this jsfiddle http://jsfiddle.net/scottksmith95/rV7GS/
The markup for the carousel is a bit hard, because I need to add the active class to the container holding my 4 thumbnails and that's outside my TPL markup.

anyone have an idea how to make this works?

[ed. note: sinbad last edited this post 13 years, 2 months ago.]

☆ A M B ☆
894 Posts

benmarte Reply #2, 13 years, 2 months ago

I'm not sure I understand what you want to do, how do you want to add the active class under what condition? What prevents you from just adding it yourself in the markup wrapping your tpl?

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

884 Posts

sinbad Reply #3, 13 years, 2 months ago

Ok let me show my markup maybe will make better sense what's the issue.

<div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
              <div class="item">
                    <ul class="thumbnails">
[[!getResources:default=`No results`? &limit=`30` &parents=`52` &tpl=`getResourcesServicesTpl` &includeTVs=`1` &processTVs=`1`]]
                     </ul>
              </div>
           </div><!-- /carousel-inner -->   
      </div>

and my getResourcesServicesTpl is

<li class="span3">
  <div class="caption"><h4><a href="#">[[+pagetitle]]</a></h4></div>
  <div class="thumbnail"><img class="img-polaroid" src="[[+tv.wallOption_thumbnail]]" alt="[[+pagetitle]] thumbnail"></div>
</li>

so in the above scenario nothing will be displayed. but if I add active to the <div class="item"> right before the <ul class="thumbnails"> then I get all my 10 sub-pages displayed.

So ideally I would need some combination of tplWrapper and tpl_N so I can wrap the first 4 results with the active class and the others with tplWrapper without the active.

hope this explains better and not just confusing more.

☆ A M B ☆
1,780 Posts

Frogabog Reply #4, 13 years, 2 months ago

Use MIGX for the carousel. Then, use idx and @FIELD to template the various images that you want templated different from each other.

Want some code? I've MIGX'd a few of these now, it's actually quite a nice way to do it. Plus, your images aren't resources that way.

The MIGX call is wrapped like this:

	<div id="myCarousel" class="carousel slide">
			<div class="carousel-inner">
				[[!getImageList? &tvname=`sliderMIGX` &docid=`[[*id]]` &tpl=`slide-tpl2`]]
			</div>
			<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
			<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
		</div>

Here's part of the slideTpl I'm using on a bootstrap site using idx to create the active class.:

<div class="item [[+idx:eq=`1`:then=` active firstSlide`:else=``]]">
    <img src="[[+image]]" alt="[[+description]]" />
    <div class="container">
        <div class="carousel-caption hero-unit">
          <h2>[[+title]]</h2>
          <p class="lead"><span class="muted">[[+description]]</span></p>

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster