Djangoでcloudinaryでのレスポンシブ対応をしたい

前提・実現したいこと

DjangoでWEBサービスを開発しています。画像の表示をレスポンシブにしたく、cloudinaryを導入いたしました。
テンプレートで、pxでのサイズ指定はできるのですが、それ以外のcropなどの指定ができず、困っています。

＞参考
https://cloudinary.com/documentation/django_image_manipulation

発生している問題・エラーメッセージ

画像ファイルの表示をcloudinaryで行なっているが、サイズ調整以外のパラメータ設定ができない。

該当のソースコード

python
1#views.py
2import cloudinary
3import cloudinary.uploader
4import cloudinary.api
5
6class IndexView(generic.ListView):
7    model = Ex  # 使用するモデル
8    template_name = 'ex/index.html'  
9~~~
10    def get_context_data(self, **kwargs):
11        """ICON_EFFECTSを渡したい"""
12        context = super().get_context_data(**kwargs)
13        context['ICON_EFFECTS'] = dict(
14            format = "png",
15            transformation = [
16              dict(height=95, width=95, crop="thumb", gravity="face", radius=20),
17              dict(angle=10),
18                    ]
19                )
20        return context
21

python
1#index.html
2{% load cloudinary %}
3{% load staticfiles %}
4
5        <div class="">
6          {% if post.image %}
7            {% cloudinary post.image.url ICON_EFFECTS %}
8          {% endif %}
9        </div>
10
11
12ソースコード

試したこと

{% cloudinary post.image.url height=200 %}
と直接記載すると、height,width のみ反映されます。
レスポンシブにしたく、dictを渡したいのですが、反映されません。
（ICON_EFFECTS自体が反映されていない）

補足情報（FW/ツールのバージョンなど）

Django Version: 2.1.4
Python Version: 3.7.2

行動規範の内容に同意します

回答1件

自己解決

公式のサポートにご返答いただきました。
親要素をつけて、max-width設定したところ、できました。

<head> /// <style type="text/css"> .blog-bg img { max-width: 100%; height: auto; width /***/:auto; } </style> /// </head> <body> /// <a class="blog-bg" href="{% url 'excercises:detail' post.pk %}"> {% if post.image %} {% cloudinary post.image width='auto' crop='lfill' responsive='true' height=300 fetch_format="auto" %} {% endif %} </a> /// <script type="text/javascript"> var cl = cloudinary.Cloudinary.new({cloud_name: "hmtmgjlio"}); cl.responsive(); </script> </body>

投稿2019/05/05 08:39

Junichi_A

総合スコア11