Bootstrap carousel for your web2py application

This example is simplified as it doesn't include pages from where carousel could be loaded. i.e. using LOAD(). Copying and pasting this app should work on any web2py using bootstrap3. This carousel is responsive to different media sizes if css is included. Image size used on this website are 1400x400px. 

Different sizes might work better, but I haven't tested them yet.

URL: https://127.0.0.1/yourapp/default/carousel.load

Model db_test.py


Don't forget to import path. Reference field is commented out because this is a simplified carousel example. Also, do not forget to create carousel folder in /static/images/. 
Note, image is displyed without download function and this makes it public. If publicly accessible files is an issues, use download option.



















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>')))

Controller default.py


with MAX_IMAGES  you can set how many carousel images should be displayed and it is used for carousel controls.














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)

View default/carousel.load


If you are loading this page with LOAD, you don't have to include  layout.html. CSS is optional, but recommended.








































































































































































































































{{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>

Result

image

loading...

loading...

Tag Cloud

accepted Acces Control access rights actions_disabled admin allowed_attributes allowed_schemes App apps args auth authentication B bar chart BEAUTIFY begin BODY BR carousel CAT CENTER chart check CLEANUP client request client_side CMS CODE COL COLGROUP comment compute contact form crud.create crud.delete crud.read crud.select crud.tables CRUD custom attributes custom form DAL data define_table deletable depriciated DIV doctype dot dspval EM embed64 enable_record_version end error_message example extension Field types Field FIELDSET file filename form.accepted form.accepts form.process form.validate FORM format Forms Grid H1 H2 H3 H4 H5 H6 hash_vars Hello helper helpers highchart hmac_key host hosting HTML image images inpval ip address ip IS_DATETIME IS_DATETIME_IN_RANGE IS_DECIMAL_IN_RANGE IS_EMPTY_OR IS_EQUAL_TO IS_EXPR IS_FLOAT_IN_RANGE IS_IMAGE IS_INT_IN_RANGE IS_IN_DB IS_IN_SET IS_IPV4 IS_LIST_OF IS_NOT_EMPTY IS_NOT_IN_DB IS_NULL_OR is_slug IS_STRONG IS_TIME IS_UPLOAD_FILENAME IS_UPPER IS_URL lable lambda lang lastdot linkto li_class li_first li_last login_methods maximum maxip maxlen MENU min minimum minip mobile mode module multiple permitted_tags pie chart placeholder plugin prepend_scheme pythonanywhere query rating reCaptcha redirect request.now routes.py salt sanitize scheme services settings slug sortable special SQLFORM() SQLFORM.grid SQLFORM SSL submit table constructor TAG test text TinyWebsite ul_class update upper URL rewrite URL validator value vars Views widget XML xmlescape _class _common_fields


Powered by
Web2py

Hosted on
www.pythonanywhere.com
(affiliated link)