Automatically fitting markdown images inside a div

Question

So I am trying to fit markdown text+image inside a panel. I am integrating flask blogging extension into my website. The issue is that this renders the text containing image links and paragraph at once so I cant individually select images to resize them. Is it possible for me to style the div block in such a way that all the text and images fit inside properly. This is how I am rendering atm,

<p style="width: 100%">{{ post.rendered_text | safe }}</p>

It fits the text okay but the images go out of the div sometimes. I would be grateful if someone could please point me in the right direction.

Code for panel,

<div class="panel panel-default" style="margin-top: 60px; "> <!-- Blog Post -->
            <div class="panel-heading">
              <h3 class="panel-title">{{ post.title }}</h3>
            </div>
            <div class="panel-body" style="width: 100%">
              <p style="width: 100%">{{ post.rendered_text | safe }}</p>         
            </div>

            <div class="panel-footer">Posted by Name on Date</div>

          </div>

Could you add a Snippet or a Fiddle of the part you've worked so far and explain better what results you expect to achieve ? — mattdaspy, May 12 '19 at 11:21

Dragos Vasile · Answer 1 · 2019-05-15T08:49:42.230

To automatically fit markdown inside a div you need to use Attribute lists extention from python-markdown.

Here is a small example:

main.py

# We import the markdown library
import markdown
from flask import Flask
from flask import render_template
from flask import Markup

app = Flask(__name__)
@app.route('/')

def index():
  content = """
Chapter
=======

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: .rounded-corner}

Section
-------

* Item 1
* Item 2
"""
  content = Markup(markdown.markdown(content, extensions=['markdown.extensions.attr_list']))
  return render_template('index.html', **locals())


if __name__ == '__main__':
    app.run(host='0.0.0.0', port='3000')

templates/index.html

<html>
  <head>
    <style>
      .rounded-corner {
  border-radius: 50%;
}
    </style>
    <title>Markdown Snippet</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

You need to insert the class name after each image you insert with markdown, for example rounded-corner:

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: .rounded-corner}

The same way you can insert ids or other keys:

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: #someid alt='dolphin'}

And when you transform markdown to html you need to call the extentsion that you need:

  content = Markup(markdown.markdown(content, extensions=['markdown.extensions.attr_list']))

To add image inside div you need to use python-markdown extra

Automatically fitting markdown images inside a div

1 Answers1