Добавление класса к изображениям и видео с помощью виджета Summernote в Django 2 - PullRequest
Новая
       7

Добавление класса к изображениям и видео с помощью виджета Summernote в Django 2

0 голосов
/ 26 сентября 2018

Я ищу способ добавить класс, который я мог бы изменить в CSS, к изображениям и видео как в формах редактора, так и в HTML-шаблонах, отображающих форму.Я использую SummernoteInplaceWidget () из пакета django-summernote и работает нормально, кроме этой функции.Я использую бутстрап 4 с ним.

Есть идеи?Спасибо заранее.

forms.py: 

from django.forms import ModelForm
from django_summernote.widgets import SummernoteInplaceWidget
from .models import Post


class PostFormModel(ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content', 'image', ]
        widgets = {
            'content': SummernoteInplaceWidget(attrs={'class': 'summer-img-class'}),
        }

post_form.html: 

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}

    <div class="content-section">
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Blog Post</legend>
                {{ form|crispy }}
                {% if form.image.errors %}
                    <div class="alert alert-danger">
                        {{ form.image.errors }}
                    </div>
                {% endif %}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Post</button>
            </div>
        </form>
        {% block jquery %}
            {{ form.media }}
        {% endblock %}
    </div>
{% endblock content %}

post_detail.html: 

{% extends "blog/base.html" %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}

  <article class="media content-section">
    <div class="shadow-sm rounded row media-body">
        <div class="col-md-3 col-sm-3 col-3 align-self-center">
          <img class="rounded-circle article-img align-middle mx-auto d-none d-sm-block " src="{{ object.author.profile.image.url }}">
          <img class="rounded-circle article-img-sm align-midle mx-auto d-block d-sm-none " src="{{ object.author.profile.image.url }}"">
        </div>
        <div class="col-md-9 col-sm-9 col-9">
          <div class="article-metadata">
            <a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
            <small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
            {% if object.author == user %}
              <div>
                <a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
                <a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
                </div>
            {% endif %}
          </div>
          <h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ object.title }}</a></h2>
        </div>
    <div class="row media-body pt-3">
      <div class="col-md-12">
        {% if post.image %}

          <a href="{{ object.image.url  }}"><img alt="" src="{{ object.image.large.url }}" class="post_image rounded mx-auto mb-2 d-block"/></a>

        {% endif %}
         <p class="article-content ml-3">{{ object.content|safe }}</p>
      </div>
    </div>
    </div>
  </article>

{% endblock content %}

Iпопытался добавить стиль к .article-content, он не дал никакого эффекта, то же самое для этого класса в css (я думаю, это может быть более эффективно): 

.summer-img-class * {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  margin: auto;
}

Может быть, это должно быть сделано сКаким-то образом, я не знаю.

...