Bootstrap Carousel and web2py

[Hugo Costa]

Hello!

I'm doing a website where I have a carousel in which should be the 3 latest news, going to search for Title, Content and Date to the database but isn't working like I wanted.

The code:

default.py

def index():

    """

    example action using the internationalization operator T and flash

    rendered by views/default/index.html or views/generic.html

    if you need a simple wiki simple replace the two lines below with:

    return auth.wiki()

    """

    if auth.user:

        response.flash = T('Welcome %s %s' % (auth.user.first_name, auth.user.last_name))

    else:

        response.flash = T('Welcome Visitor')

    news = db(db.posts).select(orderby=~db.posts.id, limitby=(0, 3))

    return dict(news=news)

 index.html

{{for post in news:}}

<div id="carousel-example-generic" class="carousel slide">

    <ol class="carousel-indicators">

        <li data-target="#carousel-example-captions" data-slide-to="0" class=""></li>

        <li data-target="#carousel-example-captions" data-slide-to="1" class=""></li>

        <li data-target="#carousel-example-captions" data-slide-to="2" class=""></li>

    </ol>

<div class="carousel-inner">

          <div class="item active">

            <img data-src="holder.js/900x500/auto/#777:#777" alt="900x500" src="http://payload.cargocollective.com/1/0/221/2318/08-Poster-2_900.jpg">

            <div class="carousel-caption">

              <h3><a href="{{=URL(a='hugo', c='default', f='show', args=[post.id])}}" title="{{=post.title}}">{{=post.title}}</h3>

              <p class="text-center">{{=XML(markdown(post.post))}}</p>

              <p class="text-right">{{=post.created_on}}</p>

            </div>

          </div>

          

        </div>

    

  <!-- Controls -->

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left"></span>

  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right"></span>

  </a>

</div>

{{pass}}

If you guys could give me a hand on this I'd apreciate it :)

Thanks,

Hugo

[Roberto Perdomo]

Hi Hugo, I dont know bootstrap carousel, but in the view you are iterating many times the main div "carousel-example-generic".

In your case you need iterate only the dinamic content of the carousel, and the carousel content are divs.

See this example with my comments:

<div id="myCarousel" class="carousel slide">
      <ol class="carousel-indicators">

         <!-- If you have 3 fixed items, you can leave this-->

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
    <!-- Here is where you will perform the iteration of your three elements {{for post in news:}} -->
    <!-- if index == 0 output this line  -->
        <div class="active item"><img  src="your dinamic content for active element" alt="banner1" /></div>
    <!-- else output this -->
        <div class="item"><img  src="your dinamic content" alt="banner2" /></div>
        <!-- end if else -->
    <!-- end iteration -->
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

hope I've helped with this example.

2013/8/7 Hugo Costa <hugon...@gmail.com>

--
 
---
You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Loïc]

Hello Hugo

You sait the carousel is not working as you wanted, but what's is the problem? error message, wrong content, blank field, ...?

For you information, here is an example of a Web2py view with a bootstrap carousel :

https://github.com/espern/tiny_website/blob/master/views/images/photo_gallery.load

[Hugo Costa]

Hey Roberto!

So, I've used your code and this turned out:

index.html

<div id="carousel-example-generic" class="carousel slide">

      <ol class="carousel-indicators">

        <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>

        <li data-target="#carousel-example-captions" data-slide-to="1"></li>

        <li data-target="#carousel-example-captions" data-slide-to="2"></li>

      </ol>

      <div class="carousel-inner">

    {{for post in news:}}

        {{if index==0:}}

           <div class="active item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner1" />

               <h3>{{=post.title}}</h3>

                   <p class="text-center">{{=post.post}}</p>

                   <p class="text-right">{{=post.created_on}}</p>

           </div>

        {{else}}

           <div class="item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner2" /></div>

        {{pass}}

    {{pass}}

      </div>

      <a class="cglyphicon glyphicon-chevron-left" href="#carousel-example-generic" data-slide="prev">&lsaquo;</a>

      <a class="glyphicon glyphicon-chevron-right" href="#carousel-example-generic" data-slide="next">&rsaquo;</a>

    </div>

</div>

I don't understand why, but I'm getting this error:

<type 'exceptions.SyntaxError'> invalid syntax (index.html, line 70)

What could it be?

[Roberto Perdomo]

you forgot the ":" on the else and pass on the if. index var not exist, was my example, you need get the index of the iteration, may be with news.index(post) or using enumerate. Try this two example:

<div id="carousel-example-generic" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-captions" data-slide-to="1"></li>
        <li data-target="#carousel-example-captions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">

    {{for index, post in enumerate(news):}}

        {{if index==0:}}
           <div class="active item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner1" />
               <h3>{{=post.title}}</h3>
                   <p class="text-center">{{=post.post}}</p>
                   <p class="text-right">{{=post.created_on}}</p>
           </div>

    {{pass}}

        {{else:}}
           <div class="item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner2" /></div>
        {{pass}}
    {{pass}}
      </div>
      <a class="cglyphicon glyphicon-chevron-left" href="#carousel-example-generic" data-slide="prev">&lsaquo;</a>
      <a class="glyphicon glyphicon-chevron-right" href="#carousel-example-generic" data-slide="next">&rsaquo;</a>
    </div>
</div>

or:

<div id="carousel-example-generic" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-captions" data-slide-to="1"></li>
        <li data-target="#carousel-example-captions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
    {{for post in news:}}

        {{if news.index(post)==0:}}

           <div class="active item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner1" />
               <h3>{{=post.title}}</h3>
                   <p class="text-center">{{=post.post}}</p>
                   <p class="text-right">{{=post.created_on}}</p>
           </div>

    {{pass}}

        {{else:}}
           <div class="item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner2" /></div>
        {{pass}}
    {{pass}}
      </div>
      <a class="cglyphicon glyphicon-chevron-left" href="#carousel-example-generic" data-slide="prev">&lsaquo;</a>
      <a class="glyphicon glyphicon-chevron-right" href="#carousel-example-generic" data-slide="next">&rsaquo;</a>
    </div>
</div>

Is an example, this was not tested

2013/8/7 Hugo Costa <hugon...@gmail.com>

[Hugo Costa]

Sorry about the delay.

The first one works fine, but only works for the first and the second.

The code I used is:

index.html

<div id="carousel-example-generic" class="carousel slide">

      <ol class="carousel-indicators">

        <li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>

        <li data-target="#carousel-example-captions" data-slide-to="1"></li>

        <li data-target="#carousel-example-captions" data-slide-to="2"></li>

      </ol>

      <div class="carousel-inner">

    {{for index, post in enumerate(news):}}

        {{if index==0:}}

           <div class="active item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner1" />

               <h3>{{=post.title}}</h3>

                   <p class="text-center">{{=post.post}}</p>

                   <p class="text-right">{{=post.created_on}}</p>

           </div>

    {{pass}}

        {{else:}}

           <div class="item"><img  src="{{=URL('static','images/carousel/%s' %(post.image))}}" alt="banner2" />

                <h3>{{=post.title}}</h3>

                   <p class="text-center">{{=post.post}}</p>

                   <p class="text-right">{{=post.created_on}}</p>

           </div>

        {{pass}}

    {{pass}}

      </div>

      <a class="glyphicon glyphicon-chevron-left" href="#carousel-example-generic" data-slide="prev">&lsaquo;</a>

      <a class="glyphicon glyphicon-chevron-right" href="#carousel-example-generic" data-slide="next">&rsaquo;</a>

    </div>

</div>

What could it be? 

[Roberto Perdomo]

Good news!

You really have three post?

Can you print the three posts in a .html without carousel?

You have checked the source of your index.html (in the browser) and search the three div inside "carousel-inner"?

2013/8/8 Hugo Costa <hugon...@gmail.com>

[Hugo Costa]

Yeah, I have. 3 is the magic number :)

I did not understand this question.

The third is missing 

<div class="carousel-inner">

    

        

           <div class="active item"><img src="/diogo/static/images/carousel/carousel3.jpg" alt="banner1">

               <h3>Azeite Vinaldo</h3>

                   <p class="text-center">Guache sobre Tela, 75x30 cm.</p>

                   <p class="text-right">2013-08-07 18:03:38.774240</p>

           </div>      

           <div class="item"><img src="/diogo/static/images/carousel/carousel1.jpg" alt="banner2">

                <h3>Bezegaio Frito</h3>

                   <p class="text-center">Acrilico sobre Tela, 45x40 cm</p>

                   <p class="text-right">2013-08-07 17:52:27.399172</p>

           </div>

        

    

      </div>

The code in the source in browser.

[Roberto Perdomo]

The {{pass}} of the if is not needed :-S

2013/8/8 Hugo Costa <hugon...@gmail.com>

[Hugo Costa]

You sir, made my day.

Thanks a lot Roberto! :)

[Roberto Perdomo]

dont worry, it's a pleasure for me. ;-)

Kind Regards.

2013/8/8 Hugo Costa <hugon...@gmail.com>