Clipkitと言うCMS(コンテンツ・マネジメント・システム)サービスはご存知でしょうか。触る機会があり、構築で悩んだところを1つ、メモしたいと思います。
clipkit公式
https://clipkit.co/
ノーコードでサイト作成ができる！と言う謳い文句サービスですが、近年同じようなサービスが増えています。
テレビのCMをやってるようなところでは、wix.comや、studio.designと言った感じの会社が有名でしょうか。企業のブログページや商品のLPページの作成等々、いろいろな場面で便利に活用できると思います。
SaaS型（Software as a Service）なのでクラウドっぽい感じで、パソコンにインストールせず、いつもインターネットする時に使うブラウザ上でログインして利用できるサービスとなっています。
clipkit構築マニュアル
https://clipkit.co/faq/application/manual/803
最初は、実際に触ってみるとすごく簡単ではないことがわかります。しかし慣れの問題です。使ってると便利だなと感じることでしょう。
本題は「表示される画質が悪い。自動で悪い。」改善方法は？
という内容です。
結論：拡張項目（画像）の画質の操作方法
画質が悪い。自動で悪い。何ででしょう。
改善には2つの方法あり。公式へお問い合わせもしてみました。
1. URLの書き換え
<img src="{{ shop_archive | attribute: 'サイド画像' | replace_first: 'small', 'large' }}" alt="画像">replace_firstを使って、URLのsmallを、largeに差し替えます。この方法は会社のプログラムが得意な同僚が見つけました。
↑1. URLの書き換えの方法は、できなくなっていました。
いつの間にか、シークレットな修正があったかもしれません。
2. 公式の出力方法
<img src="{{ shop_archive | attribute: 'サイド画像_large' }}" alt="画像">下記の5つテキストを、attributeのテキストの後ろにアンダーバーを挟んで追加して、出しわけが可能です。
small, medium, large, square, thumbnail
マニュアルをちゃんと読んでますか。
書いてますよね？多分ですが。
ふぇ、技術系のマニュアルが苦手なんです。
独特な匂いがありませんか。
とりあえずわかってるでしょ的な。
ループして出力する方法は、以下のような感じです。
{% assign shop_archive = site.published_articles | search:'category:"custom/articles"' | order: "last_published_at ASC" %}
<ul>
{% for shop_archive in shop_archive %}
<li>
<img src="{{ shop_archive | attribute: 'サイド画像_large' }}" alt="画像">
</li>
{% endfor %}
</ul>1行目は特定のカテゴリ記事を出力してほしい形です。shop_archiveは自由に変更ください。attribute:は追加したAttributeField（記事拡張項目）の名前で、forで回して<ul>とか<li>は自由に変更してください。
いきさつ
記事のサムネイル画像（アイキャッチ画像）以外に、それ以外にも固有の画像を登録したくなり、「拡張項目」を利用することになりました。しかし、いざ拡張し登録表示をさせると。。画像がとても悪かったのです。
どうも自動リサイズ保存のsmallで表示されているのを出力ソースから読み取れます。
※アイキャッチ画像はキレイに出力され問題なし。
何とか高画質にできないものか！と、半日ほど費やしましたが方法を見つけられず、よくわかりませんでした。
最初いっぱい検索して、resizeがヒットしたので以下のソースで出力させました。
{% assign shop_archive = site.published_articles | search:'category:"custom/articles"' | order: "last_published_at ASC" %}
<ul>
{% for shop_archive in shop_archive %}
<li>
<img src="{{ shop_archive | attribute: "サイド画像" | resize: "width:1000" } }" alt="画像">
</li>
{% endfor %}
</ul>resizeを使っても表示サイズが大きくなりましたが、画質はsmallのままでダメでした。
しかしプログラムの得意な同僚が、URLにあるsmallをlargeに変更したら画質アップするのを見つけたのです。すごいですね。
でもURLを差し替えるって、なんか気持ち悪くないですか？
公式へお問合せをしてみました
AttributeField（記事拡張項目）の画像サイズについてお伺いします。
コミュ障なので電話とか面と向かって話すのは嫌です。webでどこから質問ができるでしょうか。
お問い合わせって緊張します。
なぜって？それは質問力が問われるから。
clipkit公式ページの画面左下から、お問い合わせがデキるところがありました。
大体こういうタイプの、AIぽいお問い合わせは、役に立たないことが多いですよね。役に立たないマニュアルページへ飛ばされます。
質問した内容は以下です。
サイト制作の手伝いをしております。サイガモと申します。
お伺いします。
記事拡張項目で、画像（種類）にて画像登録をして、ページ内へ表示させたさい、smallの画質のURLとなります。
それを、originalやlargeへと切り替える方法を知りたいです。方法を見つけられず。教えてください。
ページへは、以下のように出力しております。
{% assign shop_archive = site.published_articles | search:'category:"custom/articles"' | order: "last_published_at ASC" %}
<ul>
{% for shop_archive in shop_archive %}
</li>
<img src="{{ shop_archive | attribute: "サイド画像" | resize: "width:1000, height:100" }}" alt="画像">
</li>
{% endfor %}
</ul>
今回トライ&エラーで試して、以下の方法でURLを書き換えましたが、オリジナルの対応方法がありますでしょうか。
<img src="{{ shop_archive | attribute: 'サイド画像' | replace_first: 'small', 'large' %}}" alt="画像">
よろしくお願いいたします。1日経とうとするくらいに返信をいただきました。想定より早い！
ご質問いただきました件、
画像サイズの変更につきまして、下記のように記述をお試しいただけますでしょうか。
{% assign data = article | attribute: 'サイド画像_medium' %}
画像サイズの指示は下記がご利用いただけます。
small, medium, large, square, thumbnail
万一解決しない場合は、お手数ですが再度記述いただいた内容や設置箇所をご連絡いただけますと幸いです。ありがとうございます！
総合的なお問い合わせフォームもあるようです。がしかし。
今回はせっかくなので、ホームページの左下にある「お問い合わせ」を利用させていただきました。