support images

examples/bootstrap5/app.py

@@ -287,6 +287,11 @@ def new_message():
     return 'Here is the new message page. Return to <a href="/table">table</a>.'
 
 
+@app.route('/image')
+def test_image():
+    return render_template('image.html')
+
+
 @app.route('/icon')
 def test_icon():
     return render_template('icon.html')

examples/bootstrap5/templates/image.html

@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% from 'bootstrap5/utils.html' import render_image %}
+
+{% block content %}
+<h2>Image</h2>
+<pre>{% raw %}{{ render_image(url_for('static', filename='rectangle-256x64.png'), alt='url_for') }}{% endraw %}</pre>
+Output: {{ render_image(url_for('static', filename='rectangle-256x64.png'), alt='url_for') }}
+
+<h2>Thumbnail</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='thumb', corner='thumbnail') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='thumb', corner='thumbnail') }}
+
+<h2>Image fluid</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='fluid', fluid=True) }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='fluid', fluid=True) }}
+
+<h2>Centered image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='center', center=True) }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='center', center=True) }}
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='mx-auto', mx_auto=True) }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='mx-auto', mx_auto=True) }}
+
+<h2>Rounded image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='rounded', corner='rounded') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='rounded', corner='rounded') }}
+
+<h2>Float image</h2>
+<pre>{% raw %}{{ render_image('static/rectangle-256x64.png', alt='float-start', float='start') }}
+{{ render_image('static/rectangle-256x64.png', alt='float-end', float='end') }}{% endraw %}</pre>
+Output: {{ render_image('static/rectangle-256x64.png', alt='float-start', float='start') }}{{ render_image('static/rectangle-256x64.png', alt='float-end', float='end') }}
+{% endblock %}

examples/bootstrap5/templates/index.html

@@ -10,6 +10,7 @@ <h1>Bootstrap-Flask Demo Application</h1>
     <li><a href="{{ url_for('test_pagination') }}">Pagination</a></li>
     <li><a href="{{ url_for('test_flash') }}">Flash Messages</a></li>
     <li><a href="{{ url_for('test_table') }}">Table</a></li>
+    <li><a href="{{ url_for('test_image') }}">Image</a></li>
     <li><a href="{{ url_for('test_icon') }}">Icon</a></li>
     <li><a href="{{ url_for('test_icons') }}">Icons</a></li>
 </ul>

flask_bootstrap/templates/bootstrap5/utils.html

@@ -38,3 +38,22 @@
     {% endif -%}
     {% endwith -%}
 {% endmacro -%}
+
+
+{% macro render_image(src, alt, fluid=False, corner=None, center=False,
+    float=None, mx_auto=None) -%}
+    {%- if center -%}
+    <div class="text-center">
+    {%- endif -%}
+    <img src="{{ src }}" alt="{{ alt }}"
+    {%- if fluid or float or mx_auto or corner %} class="
+        {%- if fluid %} img-fluid{% endif -%}
+        {%- if float %} float-{{ float }}{% endif -%}
+        {%- if mx_auto %} mx-auto d-block{% endif -%}
+        {%- if corner == 'thumbnail' %} img-thumbnail
+        {%- elif corner == 'rounded' %} rounded{% endif -%}"
+    {%- endif %}>
+    {%- if center -%}
+    </div>
+    {%- endif -%}
+{%- endmacro -%}