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

Question

私はパートエディターでありパートディベロッパーであり、いずれのキャリアでも全く進歩していません。しかし、私は小規模プロジェクトだけを実施しています。私は最近、WagtailとPuputを使ってDjangoのサイト（開発サーバーのみ）に最近追加したブログで、5年後には週あたり2〜50KBの画像をアップロードしたいと思っていますそれは私が何か他のことをすることになるでしょう。膨大な数の読者や膨大なストレージの必要はありません。そういう状況の中で、Puputブログの小さな画面にサイズ変更されていないアップロードされた画像、非応答性のデザインで遭遇した問題を克服するために私が何をしているのかが具体的に分かります。あるいは、私はいくつかのばかげた過ちを犯したのですが、Puput/Wagtailエディタを間違って使用していましたか？

Puputエディタの「本文」テキストボックスをクリックして画像を挿入すると、非常に簡単です。ファイルを参照し、画像に名前を付けて、全幅にするか左右に並べるかを選択するだけです。これを行うと、イメージは以前に確立された "media"フォルダにアップロードされ、データベースは単に "media"フォルダ内のイメージの場所を含むように更新されます。テキスト本文の<img>タグには、データベースエントリへのリンクであるID属性が与えられます。

2つの問題が起こります。（1）ブラウザーのレスポンシブデザインモードに入ると、画像は小さな画面より大きく応答性がなくなります。実際にイメージがメディアフォルダに保存されていない場合、3つの ---オリジナルは "original_images"というサブディレクトリにあり、 "images"サブディレクトリには2つのイメージがあります。 2つの追加画像は、あなたの全幅の選択、おそらくは画像の縦横比などによっては、元の画像と全く同じピクセルサイズを持たない場合があります。

これはもちろん耐えられないあなたは私が間違いを犯したかも知れません。そうでなければ、これを過ぎるために私がやったことがここにあります。そしてまた、私の質問は、これが実際にうまくいくのか、それとも良いアイデアがあるのでしょうか。私はthis postをgithubに見つけました。特に、insert_editor_jsとwagtail_hooks.pyフックに関するjerelのコメントが見つかりました。これは、標準的なhalloのrichtextの制限を克服し、HTMLを表示し、入力できる第2のエディタウィンドウを開くことができます。

しかし、Wagtailには、特定のHTMLタグで特定の属性のみを使用できるようにするこのクラスがあります。だから、Wagtailの人々はまた、それを変更するためのフックを持っています、それはhereと説明されています。

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}), 
    } 

私が述べるように、特に、デフォルトで私は'src': check_urlの代わりに'src': Trueを入れているimgタグ、のためのノート（check_urlは、データURIを拒否し関数である。ここではwagtail_hooks.pyファイルの私のバージョンです以下）。私にとって重要なその他の変更点は、aタグには'target': True、さらには'style': Trueの追加が含まれています。

Puputは、「モバイルファースト」の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を投げると、私もdata-formatを削除しない限り動作しません100%にwidthを変更した場合など、私はそれのすべてを行う場合、私は応答デザイン... しかしを持って、データベースがノーでありますより長い関わり。代わりに、画像ファイルを手動でimgタグにリンクしただけです。

レスポンシブなデザインの動作を実現する私のソリューションは、ページとイメージファイルの間のデータベースリンケージを無効にします。私は、私がアップロードしたすべてのメディアの3つのイメージがメディアフォルダに存在しているという馬鹿げた存在を逃すことはないと言わざるを得ない。そして、私は、何年もの間、データベースだけでなく、多くのイメージのフォルダにも関わらず、失敗することなく保護しバックアップすることをあまり好きではありません。

私が試したもうひとつのこと---うまくいくようです--- Base64でのデータURIの使用です。これは約hereです。私は多くの高密度画像を使用しないので、実行可能なようです。 hallohtmlエディタを使って、画像のBase64エンコーディングを切り取り、imgタグのsrcに貼り付けました。それはまったく扱いにくいものではありません。

もう一度、このようなことをする必要がありますか（私が妥当なものを提案していますか）...または、どうやって暗闇の中で画像をアップロードするか、プップとワグテールレスポンシブなデザイン（私はすべての指示に従いました。

Answer 1

根本的な原因は、すべてのリッチテキストイメージにスタイルwidth: 100%を適用する良い方法が必要なことです。理想的には、bodyフィールドのHTMLを手作業で編集する必要性を避けるグローバルなCSSルールを使用します。

Puputは現在、基本テンプレートをカスタマイズするための「公式」な方法を提供していないようですが、ここにはいくつかのポインタがあります：。 - あるいはすでにあなたのプロジェクトであれば

• プロジェクト内部blogアプリを（./manage.py startapp blogを実行し、はそれがpuput上だ確認して、あなたの設定でINSTALLED_APPSリストに'blog'を追加）を作成します。次の手順は、うまくいけば、トリックを行う必要があります適切なアプリを持っている場合は、そのアプリ名の残りのステップをblogの代わりに実行します。
• 含むファイルblog/templates/puput/base.htmlを作成blog/templates/puput/ディレクトリ

• を作成します。

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