I want to use bootstrap to make a carousel using D.R.Y. methods. my idea (and it may not even be feasible) is to have a list or dictionary and cycle through image locations. Here's what I've written so far.
<div class="carousel-inner">
{% with images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg'] %}
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
{% endwith %}```
Try passing the list from the backend like this -
Views.py The function from where you are rendering your template
def index(request): # Change the name of the function as per your requirements
context = {
"images": ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
}
return render(request, "index.html", context) # Change the path of the template as per your requirements
Now images is a variable with the value of a list containing path of different images which you can use in your template
Now your .html file will look like this -
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
</div>
Pass the images as context from your view
def your_view(request):
images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
return render(request, "your-file.html", {images: images})
Now in your HTML you will have access to your list, so you can do something like so:
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({% static image %})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
Related
I am using the code in my index.html file.
{% for post in blog_posts.items %}
<div class="col-sm-6">
<div class="card" >
<div class="card-body">
<h2><a class="card-title" href=" {{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}">{{ post.title }}</a></h2>
Written By: {{ post.author.username }}
<p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
<p class="card-text">{{ post.text[:100] }}...</p>
Read Blog Post
</div>
</div>
</div>
{% endfor %}
My understanding from bootstrap is that it would create a 6 column grid, however it is just stacking one card below the next. I am sure it is something I am missing. Thank you for your help.
You probably need to use a card deck or card group to achieve this:
I'd lose this div:
<div class="col-sm-6">
Then put the for loop within a card-group div:
<div class='card-group'>
{% for post in blog_posts.items %}
<div class="card" >
<div class="card-body">
...
</div>
</div>
{% endfor %}
</div>
If you want some spacing between the cards, you can change the class of the outer div to card-deck.
See the Card docs for more options.
.col-sm-6{ display: flex } add this css property to the parent that contains all cards.
alternatively you can use floats .col-sm-6 > .card{ float: left}
Given a base.html file containing the following:
<div class="foo some-content">
...content...
</div>
<div class="bar some-content">
...different content...
</div>
I would like to wrap each of the .some-content divs to achieve a nested structure when using base.html in certain places:
<div class="row">
<div class="foo some-content">
...content...
</div>
</div>
<div class="row">
<div class="bar some-content">
...different content...
</div>
</div>
I tried extending base.html to wrap the divs with a .row div:
{% extends base.html %}
{% block wrapper %}
<div class "row">
{{ block.super }}
</div>
{% endblock %}
But that didn't work as I got a TemplateSyntaxError for using block wrapper twice in base.html:
# Throws TemplateSyntaxError
{% block wrapper %}
<div class="foo some-content">
...content...
</div>
{% endblock %}
{% block wrapper %}
<div class="bar some-content">
...different content...
</div>
{% endblock %}
I realize that I could break up the .some-content divs in to their own files, and reuse those in other places, but I would prefer another route. I also looked at Django template macros as suggested in this SO answer, but I think middleware will be overkill in this situation.
Is there any way I can extend or reuse my current base.html file so that the .some-content divs are sometimes wrapped in a .row div?
Could you do something like:
{% with foo as var %}
{% include 'mycontainer.html' %}
{$ endwith %}
{% with bar as var %}
{% include 'mycontainer.html' %}
{$ endwith %}
Then mycontainer.html would be:
<div class="row">
<div class="{{ var }} some-content">
...
</div>
</div>
I have a small problem of CSS and I do not understand where it can come ... I would like to display 3 images per lines under which I can come out of my info base. But nothing goes as planned. Could someone unblock me? I do not know where I made my mistake.
My code :
{% extends 'index.html.twig' %}
{% block body %}
<div id="startchange">
<div class="portfolio-item">
<section id="objets">
<div class ="title">
<p class="titre">List client</p>
</div>
<div class="row">
{% for client in clients%}
<div class="col-xs-4 col-sm-3 col-md-3">
<img class="img-responsive img-circle" src="img/logos/mario.png">
<div class="description">
<p class="nom"> Surname : </p>
<p class="type"> {{client.surname}}</p>
<p class="nom"> First name : </p>
<p class="type"> {{client.firstname}}</p>
</div>
</div>
{%endfor%}
</div>
</section>
</div>
</div>
{% endblock %}
The view with 4 objects :
List of 4 objects
The view with 0 object : 0 object
It seems that all the objects go in the same square of the line and not in 4 different boxes I do not understand why ... An idea?
I have this loop:
{% for div in myHandleHere %}
<div> {{ block.text }} </div>
{% endfor %}
That actually outputs something like:
<div> one </div>
<div> two </div>
<div> three </div>
<div> ... </div>
What I want is, every 2 div, put them in a new container, like:
<div class="container">
<div> one </div>
<div> two </div>
</div>
<div class="container">
<div> three </div>
<div> ... </div>
</div>
Please help
The best solution in this case is to use the great batch filter which allows to process elements in groups:
{% for pair in myHandleHere|batch(2) %}
<div class="container">
{% for element in pair %}
<div>{{ element }}</div>
{% endfor %}
</div>
{% endfor %}
What you want to do is either keep a count of which row you're on, or have a nested loop. Conveniently Twig has a couple of built-in loop variables we can use.
Something like this:
{% for div in myHandleHere %}
{% if loop.index is odd %}
<div class="container">
{% endif %}
<div> {{ block.text }} </div>
{% if loop.index is even or loop.last %}
</div>
{% endif %}
{% endfor %}
Loop over all your blocks. On each iteration, if the loop counter is odd, i.e. blocks 1, 3, 5 etc, start a new <div class="container">.
And if the loop counter is even, i.e. blocks 2, 4, 6 etc, close that </div>.
Also if you're on the last block, make sure and close the parent div too, e.g. in case you only have an odd number of blocks, you want to output HTML like:
<div class="container">
<div> one </div>
<div> two </div>
</div>
<div class="container">
<div> three </div>
<div> four </div>
</div>
<div class="container">
<div> five</div>
</div>
This is a code snippet located in default.html, where it is located in the master folder of the repository.
<body>
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<img src="{{ site.avatar }}" />
<div class="site-info">
<h1 class="site-name">{{ site.name }}</h1>
<p class="site-description">{{ site.description }}</p>
</div>
<nav>
<!-- Test -->
Blog
About
</nav>
</header>
</div>
</div>
<div id="main" role="main" class="container">
{{ content }}
</div>
<div class="wrapper-footer">
<div class="container">
<footer class="footer">
{% include svg-icons.html %}
</footer>
</div>
</div>
{% include analytics.html %}
</body>
As you can see, there's a Liquid tag called {{ content }} in the center <div> tag.
<div id="main" role="main" class="container">
{{ content }}
</div>
I am confused on where that Liquid tag is pointing to. I'm looking around in the tutorial here, but it didn't say anything about {{ content }}, what it does, and how it is used.
Could anyone tell me about this, and if possible, where can I find more info on {{ content }} and how it should be used? Thanks in advance.
This is the content of a page or post or of another layout.
eg :
index.html content is directly injected in _layouts/default.html
about.md is injected in _layouts/page.html with itself is injected in _layouts/default.html
Just read the page/post front matter variable layout to know which layout is used.