use Flask and Jinja2 templates to create a responsive 1×3 grid of images

Share

how you could use Flask and Jinja2 templates to create a responsive 1×3 grid of images using Bootstrap, with a text label field and download button for each image:

Creating Dynamic responsive 1×3 grid of images using Bootstrap,dynamic Bootstrap Image grid

Related  How to add new images in the bootstrap grid of images

How To Create a Responsive Image Grid Using Bootstrap


Here is an example of a responsive 1×3 grid of images using Bootstrap:

# in app.py

from flask import Flask, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///image_data.db'
db = SQLAlchemy(app)

class ImageData(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    img_url = db.Column(db.String, nullable=False)
    name_text = db.Column(db.String, nullable=False)
    created_at = db.Column(db.DateTime, default=datetime.utcnow)

@app.route('/')
def index():
    img_list = ImageData.query.all()
    return render_template('Dynamic_image_grid.html', img_list=img_list)
# in Dynamic_image_grid.html

<div class="container">
  <div class="row">
    {% for img in img_list %}
    <div class="col-sm-4">
      <img src="{{ img.img_url }}" class="img-fluid" alt="{{ img.name_text }}">
      <div class="form-group">
        <label for="{{ img.name_text }}">{{ img.name_text }}</label>
      </div>
      <a href="{{ img.img_url }}" download class="btn btn-primary">Download</a>
    </div>
    {% endfor %}
  </div>
</div>

In this example, an ImageData class is defined with 3 columns: img_url, name_text, and created_at. The img_list variable is set to the result of querying all the rows in the ImageData table. This variable is then passed to the Dynamic_image_grid.html template, where a responsive 1×3 grid of images is created using the Bootstrap grid system and the img-fluid class. For each image, the name_text column is used to display a label and the img_url is used to create the image and the download button. Jinja2 is used for the templating engine in this example, where the for loop iterates over the img_list to create the grid of images.

Related  can we use JavaScript function inside jinja2 for loop block

Please note that, you need to have the bootstrap css and js added in your html file for it to work as expected.

Here is an example of a responsive 1×3 grid of images using Bootstrap

Source Code in Bootstrap, Having Responsive 1 x 3 grid of images With images name text field and a download image button to that image

Grid system – Bootstrap

Here is an example of a responsive 1×3 grid of images using Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <img src="image1.jpg" class="img-fluid" alt="Image 1">
      <div class="form-group">
        <label for="image1name">Image 1 Name:</label>
      </div>
      <a href="image1.jpg" download class="btn btn-primary">Download</a>
    </div>
    <div class="col-sm-4">
      <img src="image2.jpg" class="img-fluid" alt="Image 2">
      <div class="form-group">
        <label for="image2name">Image 2 Name:</label>
      </div>
      <a href="image2.jpg" download class="btn btn-primary">Download</a>
    </div>
    <div class="col-sm-4">
      <img src="image3.jpg" class="img-fluid" alt="Image 3">
      <div class="form-group">
        <label for="image3name">Image 3 Name:</label>
      </div>
      <a href="image3.jpg" download class="btn btn-primary">Download</a>
    </div>
  </div>
</div>

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

Top 5 Most Expensive Domains Ever Sold 4 Must-Try ChatGPT Alternatives: Perplexity AI, BardAI, Pi, and More! Types of Trading Techniques in the Stock Market. ChatGPT app now available in India this AI chatbot can help you make your life more productive. What is wrong with following function code?