python/django/wagtail/puput/hallo/non-responsive_images_under_Bootstrap3.咆哮

Question

我既是编辑又是开发人员，在这两个职业中都没有完全进步。但我只是在进行一个小规模的项目。我在想，在我最近添加到我的 Django 站点（目前仅在开发服务器上）的博客中，使用 Wagtail 和 Puput，我可能想在五年内每周上传两张 ~50KB 图片，之后我会做别的事情。永远不会有大量的读者或需要大量的存储空间。在这种情况下，我特别想知道我正在做什么来克服我在 Puput 博客中遇到的上传图像未调整到小屏幕的问题，非响应式设计，看起来是否可行。或者，我是不是犯了一些愚蠢的错误，比如说，不正确地使用了 Puput/Wagtail 编辑器？

当您单击 Puput 编辑器中的 "body" 文本框以插入图像时，这非常简单。您只需浏览您的文件，为图像命名，然后 select 无论您想要全角还是左对齐或右对齐。这样做之后，您的图片将上传到您之前建立的 "media" 文件夹中，并且数据库将简单地更新以包含您的图片在 "media" 文件夹中的位置。文本正文中的 <img> 标签将被赋予一个 ID 属性，该属性是数据库条目的 link。

然后发生了两件麻烦事：（1）当你进入浏览器的响应式设计模式时，图像比小屏幕大，没有响应；而且，实际上您现在没有 an 图像存储在媒体文件夹中，您有 three--- 原始图像位于名为"original_images" 并且在 "images" 子目录中有两个图像。这两个额外的图像可能与原始图像的像素尺寸不完全相同，这取决于您是否选择全角、图像的纵横比等。

所以这是相当不能容忍的，当然除非你能告诉我我可能犯了什么错误。否则，这就是我为解决这个问题所做的工作，我的问题是这在实践中是否可行，或者您有更好的主意。我在 github 上找到了 this post，特别是 jerel 关于 insert_editor_js 和 wagtail_hooks.py 钩子的评论。这克服了标准 hallo 的富文本限制，并允许打开第二个编辑器 window，您可以在其中查看和输入 HTML.

但是 Wagtail 有这个 Whitelister class 只允许某些属性与某些 HTML 标签一起使用。所以 Wagtail 人也有一个钩子来改变它，here 对此进行了解释。这是我的 wagtail_hooks.py 文件版本：

from wagtail.wagtailcore import hooks
from wagtail.wagtailcore.whitelist import attribute_rule, check_url, allow_without_attributes
from django.utils.html import format_html

# This one is from the esteemable jerel.
@hooks.register('insert_editor_js')
def enable_source():
    return format_html(
        """
        <script>
            registerHalloPlugin('hallohtml');
        </script>
        """
    )

# This is modified from the Wagtail docs example.
@hooks.register('construct_whitelister_element_rules')
def whitelister_element_rules():
    return {
        'blockquote': allow_without_attributes,
        'a': attribute_rule({'href': check_url, 'target': True}),
        'img': attribute_rule({'src': True, 'width': True, 'height': True, 'alt': True, 'style': True}),
        'p': attribute_rule({'style': True, 'class': True}),
    }

请特别注意，对于 img 标记，我用 'src': True 代替了 'src': check_url，这是默认设置（check_url 是一个会拒绝data URI，正如我在下面讨论的那样）。其他对我来说很重要的变化是 a 标签的 'target': True 以及 'style': True 添加。

Puput 原生使用 "mobile first" 的 Bootstrap3，或类似的口号。因此，为了在 Puput 中使用 Bootstap3 实现对图像的响应，我必须做我之前必须做的事情，即在 img 标记中，设置属性 width="100%" 或使用style="width:100%;"（这要感谢 hallohtml 插件）。

所以现在，问题来了：我发现只有在您删除 Puput 或 Wagtail 赋予 img 标签的额外属性时才有效（否则您的更改将被删除）。这是 img 标签直接来自 Puput 编辑器的样子：<img data-embedtype="image" data-id="9" data-format="fullwidth" data-alt="junk" class="richtext-image full-width" src="/home/mike/myproject/public_html/djangoprojectdir/public/media/images/imagename.width-800.png" alt="junk" height="1115" width="596">.

所以如果我扔掉 height 并将 width 更改为 100% 那将不起作用，除非我也删除 data-format，等等。如果我做了所有那，我有响应式设计... 但是，数据库不再涉及。因此，我只是手动 link 将图像文件编辑到 img 标签。

所以我实现响应式设计行为的解决方案消除了页面和图像文件之间的数据库 linkage。我必须说，我不会错过我上传的每一张图片在媒体文件夹中荒谬存在的三张图片。而且我不太喜欢多年来必须毫无故障地保护和备份，不仅是一个数据库，还有一个包含许多图像的文件夹。

所以我尝试的第二件事——它似乎也有效——是将数据 URI 与 Base64 结合使用，我读到了 here。这似乎是可行的，因为我不会使用很多密集图像。我利用 hallohtml 编辑器将图像的 Base64 编码剪切并粘贴到 img 标签中的 src。它并不完全笨拙。

所以，问题又来了，我是否必须做这样的事情（这也是我提出的合理建议）...或者，我是否不知道应该如何上传图像或配置 Puput 和用于响应式设计的 Wagtail（我遵循了他们的所有说明，其他一切正常）？

Answer 1

问题的根源在于您需要一种将样式 width: 100% 应用于所有富文本图像的好方法。理想情况下，您可以使用全局 CSS 规则来做到这一点，这将避免需要 hand-edit 正文字段的 HTML。

Puput 目前似乎没有提供 "official" 自定义基本模板的方法，尽管这里有一些提示：https://github.com/APSL/puput/issues/63。希望以下步骤可以解决问题：

在您的项目中创建一个 blog 应用程序（运行 ./manage.py startapp blog，并将 'blog' 添加到您设置中的 INSTALLED_APPS 列表 确保它在 puput) 之上 - 或者如果您的项目已经有合适的应用程序，请按照剩余步骤使用该应用程序名称代替 blog;
创建一个blog/templates/puput/目录

创建文件 blog/templates/puput/base.html 包含：

{% extends "puput/base.html" %}
{% block content %}
    <style>
        img.full-width {
            width: 100%;
        }
    </style>
    {{ block.super }}
{% endblock %}

python/django/wagtail/puput/hallo/non-responsive_images_under_Bootstrap3.咆哮

python/django/wagtail/puput/hallo/non-responsive_images_under_Bootstrap3.rant

html

python

django

wagtail