Bootstrap carousel for your web2py application image

from os import path



db.define_table('carousel',

    Field('is_enabled', 'boolean', readable=True, writable=True, default=True, label=T('Is Enabled')),

#   Field('page', 'reference page', label=T('Page')),

    Field('name', 'string',length=256, notnull=True, label=T('Name')),

    Field('alt', 'string', length=256, label=T('Alt')),

    Field('description', 'string', length=512, label=T('Description')),

    Field('is_url', 'boolean', readable=True, writable=True, default=False, label=T('Is Url')),

    Field('url', 'string', length=256,label=T('Url')),

    Field('image_file', 'upload', uploadfolder=path.join(

        request.folder,'static','images','carousel'

        ), autodelete=True, label=T('Image File')),

    Field('created_on','datetime',default=request.now,

            writable=False,readable=False, label=T('Created on')),

    format='%(name)s'

)



#db.carousel.page.requires = IS_EMPTY_OR(IS_IN_DB(db, db.page.id, '%(title)s', zero=T('<Empty>')))

def carousel(): 

    MAX_IMAGES=10

    '''

    page variable can be us if you want to display carousel for specific page. 

    For example: one carousel image can be displayed per page basis

    '''

    form=SQLFORM(db.carousel)

    if form.process().accepted:

        request.session='Image uploaded'

    #page = request.vars.id

    q=(db.carousel.is_enabled==True) # & (db.carousel.page==page)

    images = db(q).select(orderby=~db.carousel.created_on,limitby=(0,MAX_IMAGES))

    MAX_IMAGES=db(q).count()

    return dict(enum_images=enumerate(images),MAX_IMAGES=MAX_IMAGES,form=form)

{{extend 'layout.html'}}

<!--Carousel ================================================== -->

<div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">

    {{i=1}}

    {{while  i<= MAX_IMAGES:}}

        <li data-target="#myCarousel" data-slide-to="{{=i-1}}" {{if i==0:}}class="active"{{pass}}></li>

    {{i=i+1}}

    {{pass}}

    </ol>

    <div class="carousel-inner">

    {{for index, row in enum_images:}} 

        <div class="item {{if (index+1)==1:}}active{{pass}}">

            <img class="img-responsive" src="{{=URL('static','images/carousel/%s' %(row.image_file))}}" /> 

            <div class="container">

                <div class="carousel-caption">

                <h1>

                    {{=row.name}}

                </h1>  

                    <p class="center">

                        {{=row.description}}

                    </p>

                    {{if row.url:}}                 

                    <p class="center"><a class="btn btn-lg btn-primary" href="{{=row.url}}" role="button">{{=T('Go')}}</a></p>

                    {{pass}}

                </div>

            </div>

        </div> 

    {{pass}}

    </div>

      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>

      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

    </div><!-- /.carousel -->



<h1>

    Add an image to a carousel

</h1>

<div class="col-md-6">

{{=form}}

</div>    

{{pass}}





<style>



/* GLOBAL STYLES

-------------------------------------------------- */

/* Padding below the footer and lighter body text */

/*

body {

  padding-bottom: 40px;

  color: #5a5a5a;

}



*/



/* CUSTOMIZE THE NAVBAR

-------------------------------------------------- */



/* Special class on .container surrounding .navbar, used for positioning it into place. */

.navbar-wrapper {

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  z-index: 20;

}



/* Flip around the padding for proper display in narrow viewports */

.navbar-wrapper > .container {

  padding-right: 0;

  padding-left: 0;

}

.navbar-wrapper .navbar {

  padding-right: 15px;

  padding-left: 15px;

}

.navbar-wrapper .navbar .container {

  width: auto;

}



/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */



/* Carousel base class  height: 500px; */

.carousel {

  min-height: 300px

  max-height: 500px;

  margin-top: 70px;

  bottom:10px;

}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {

  z-index: 10;

}



/* Declare heights because of positioning of img element */

.carousel .item {

  /*height: 500px;*/



  max-height: 500px

  background-color: #00334a;

  margin-top: 1px;

}



.carousel-inner > .item > img {

/*  position: absolute;

  top: 0;

  left: 0;



  height: 500px;*/

  min-width: 100%;

}



@media screen and (max-width: 800px) {

  div.carousel-caption h1,p {



    font-size: 80%;

  }

  div.carousel-caption h1 {

    padding-top:20px;

    font-size: 16px;

      margin-bottom: 0px;

  }



.carousel-indicators {

    //margin-bottom: -10px;

}



  div.carousel-caption p {

    font-size:10px;

      margin-bottom: 0px;

  }

.carousel {

 min-height: 90px



}



@media screen and (max-width: 480px) {

  div.carousel-caption h1,p {



    font-size: 40%;

  }

  div.carousel-caption h1 {

    padding-top:20px;

    font-size: 11px;

      margin-bottom: 0px;

  }



.carousel-indicators {

    margin-bottom: -10px;

}



  div.carousel-caption p {

    font-size:8px;

      margin-bottom: 0px;

  }

.carousel {

 height: 90px



}



  .carousel-indicators {

    bottom: 0px;

}



}



/* MARKETING CONTENT

-------------------------------------------------- */



/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {

  margin-bottom: 20px;

  text-align: center;

}

.marketing h2 {

  font-weight: normal;

}

.marketing .col-lg-4 p {

  margin-right: 10px;

  margin-left: 10px;

}





/* Featurettes

------------------------- */

.featurette-divider {

  margin: 80px 0; /* Space out the Bootstrap <hr> more */

}



/* Thin out the marketing headings */

.featurette-heading {

  font-weight: 300;

  line-height: 1;

  letter-spacing: -1px;

}

/* RESPONSIVE CSS

-------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */

  .navbar-wrapper {

    margin-top: 20px;

  }

  .navbar-wrapper .container {

    padding-right: 15px;

    padding-left: 15px;

  }

  .navbar-wrapper .navbar {

    padding-right: 0;

    padding-left: 0;

  }



  /* The navbar becomes detached from the top, so we round the corners */

  .navbar-wrapper .navbar {

    border-radius: 4px;

  }

  /* Bump up size of carousel content */

  .carousel-caption p {

    margin-bottom: 20px;

    font-size: 21px;

    line-height: 1.4;

  }

  .featurette-heading {

    font-size: 50px;

  }

}

@media (min-width: 992px) {

  .featurette-heading {

    margin-top: 120px;

  }

}

</style>