見出し画像

【Python/Django】Cloudinaryで画像をレスポンシブ表示させる【初心者】

Jun_python_Django

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は調整していただきたい。

スタートアップ支援と、社内スタートアップをしながら、実務未経験から独学でプログラミング勉強中。主にpython。スクレイピング、機械学習から始めて、最近はDjangoを学習し、WEBサービス作成中。独学されている初心者の方向けに、技術の記事を中心に書いていきます。