【Python/Django】Cloudinaryで画像をレスポンシブ表示させる【初心者】
DjangoでWEBサービス開発中、長期間に渡りハマったポイントがあったので、記載しておく。WEBサービスを開発している方々の一助になれば幸い。他記事に、Cloudinaryの導入についての記載はしてあり、その続き。
ハマったところ
前記事に記載の通り、
①画像をアップロードして、
②WEBページにサイズを指定して表示させる
まではできたのだが、レスポンシブが出来ていなかった。
最終的には、オフィシャルサポートの丁寧な対応により解決したので、日本語で記事に残しておく。
【結論】これでうまくいったコード
# xx.html
{% load cloudinary %}
<head>
<!--cloudinary -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.min.js"></script>
<style type="text/css">
.blog-bg img {
max-width: 100%;
height: auto;
width :auto;
}
</style>
</head>
<body>
<a class="blog-bg" href="">
{% cloudinary post.image width='auto' crop='lfill' responsive='true' height=280 fetch_format="auto" %}
</a>
<!--cloudinary -->
<script type="text/javascript">
var cl = cloudinary.Cloudinary.new({cloud_name: "yourname"});
cl.responsive();
</script>
</body>多少過不足があるかもしれないが、これで実現したかったことは出来た。
もちろんheadの中にstyleを書く必要はない。
デザインに合わせて、heightやcropは調整していただきたい。
いいなと思ったら応援しよう！
