Автоматическая подгонка изображений уценки внутри div - PullRequest
Новая
       21

Автоматическая подгонка изображений уценки внутри div

0 голосов
/ 12 мая 2019

Итак, я пытаюсь разместить текст уценки + изображение внутри панели. Я интегрирую расширение блогов для фляг на мой сайт. Проблема в том, что при этом отображается текст, содержащий ссылки на изображения и абзац, поэтому я не могу выбрать изображения по отдельности, чтобы изменить их размер. Могу ли я стилизовать блок div таким образом, чтобы весь текст и изображения вписывались в него должным образом? Вот как я отрисовываю банкомат, 

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

Это хорошо вписывается в текст, но изображения иногда выходят из div. Я был бы признателен, если бы кто-нибудь мог указать мне правильное направление.

код для панели, 

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

1 Ответ

0 голосов
/ 15 мая 2019

Чтобы автоматически разместить разметку внутри div, вам нужно использовать Расширение списков атрибутов из python-markdown .

Вот небольшой пример:

  1. 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>

Вам нужно вставлять имя класса после каждого изображения, которое вы вставляете с уценкой, например rounded-corner: 

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

Точно так же, как вы можете вставить идентификаторы или другие ключи : 

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

И когда вы преобразуете markdown в html, вам нужно вызвать расширение, котороевам нужно: 

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

Чтобы добавить изображение в div, вам нужно использовать python-markdown extra

...