VirtueにはデフォルトでPortfolio機能が備わっている。が、この設定がとてもややこしい。以前作ったサイトを参照しながらやっとほぼ思い通りに設定できた。投稿の際の画像設定ルールや導入プラグインについてのメモ。
アイキャッチ画像
FIFUでFlickrからアイキャッチ画像を取得するとワーニングが出る。メディアにアップロードするしかないのか？他のプラグインとバッティングしているのかも。Flickrのアルバムをギャラリーとして表示できるPhotonicが怪しいと思ったけれど、関係なかった。
その後外部画像もアイキャッチに変換してくれるプラグインXO Featured Imageを試す。日本語のシンプルなプラグインでなかなか良いんだけれど、アイキャッチとして取り込む際にメディアライブラリに自動で画像が生成されてしまう。これでは外部から取り込む意味がない。
Featured Image by URL を試してみた。FIFUと同様の働きをしてくれてよさそう。メディアライブラリに勝手にアップもされない。
当初横長にリサイズされなかったので、投稿ページのアイキャッチ用に（ポップアップ時に少し拡大されるように）900×420pxでアップしようと思った。が、後々CSSで切り抜きを指示できることがわかった（後述）。これでいつもの縦横4：3の画像でOKとなると、切り抜きの際混乱しなくて済む。
Featured Image by URLの設定で、Display Resized Images にチェックを入れたら、サイドバーのサムネールもリサイズ（比率はそのままだけど）された。リサイズの幅がなぜか90×50とテーマの横幅より10px大きくなるも、その後CSSで調整できた。
Portfolioにもアイキャッチ800×600をURLで入れてみる。OK。
実際のPortfolioページにアイキャッチは出ず、サムネールにだけ利用される。そのため、ページトップの画像はエンベッドのタグ800×600のコードを入れ、下記と同様余分なコードは削除し、画像URLを修正する。表示サイズは変更しなくてもカラム幅にぴったり収まり具合が良い。
HOMEのAlbumのカルーセル画像は同比率となるが問題ない。投稿のサムネールも当初同比率だったけれど、こちらはその後CSSでスクエアに設定。
アイキャッチ以外
一枚の画像はFlickrから共有埋め込みタグを取得する。その際スクリプトは削除。
更にdata-flickr-embed=”true”を削除し、href のURLをsrcのURLに置き換える。これを行うことによりFancyBoxが機能し、クリックした際にFlickrに飛ばずにポップアップ画像が開く。
複数の画像をギャラリーで見せたい場合はFlickrで新たにアルバムを作成し、Photonicで取り込む。
Portfolio
親タイプ（カテゴリー）をalbumとし、街角アルバムとMyアルバムを配下に二つ作った。ただし、カテゴリーのように階層化はされず。
ポートフォリオのトップは固定ページでタイトルAlbum、属性をポートフォリオグリッドで作成。
テーマオプション＞Home Layout＞Home Portfolio Carousel Settings＞Portfolio Carousel Category TypeでAlbum（上記固定ページ）を選択。これでHOMEにアルバムのサムネールが設定数カルーセルで出るようになった。
投稿ページのサイドバーには、ウィジットでVirtue:Image Gridを挿入。ChoiceでPortfolioを選択、サムネール画像が規定数出るようになった。
プラグインPhotonicの設定については以下のサイトを参照。
Flickrも使い方を忘れている。
ポートフォリオとアイキャッチ、ポップアップ等3日ほどかかってしまった（その後も少しづつ修正）。他のサイトでFIFUで設定していたのがこちらではできず。同じテーマなのに。それでずいぶん足踏みしてしまった。が、これでやっと本仕事（多肉でもサイト関連でもない）にとりかかれる（はず）！
CSSでサムネール表示を修正
当初、Featured Image by URLでアイキャッチをFlickrから読み込むと、HOMEのサムネールはその画像がチが利用され、テーマがミドルサイズのアイキャッチ画像を用意できないため、スクエアに切り抜かれなかった。横長サイズでも問題はないし、その分同スペースにより多い画像が出るわけで、むしろ良いかと思った。
が、真ん中がスクエアに切り取られると画像事態がすっきりするし、インパクトも高まる。調べた結果CSSで設定できるというので試してみた。以下のように追加でOKとなった。
.col-md-5 img {
width: 335px;
height: 335px;
object-fit: cover;
}
もうひとつ、投稿ページのアイキャッチが、幅900pxを入れてもなぜか800pxになってしまう。このカラムの最大幅は848pxなのでPCで幅広にウィンドウを広げた場合、テキスト幅や日付枠とそろわない。これもCSSで再定義。ついでに切り抜きも指定。
img.kt-slider-image {
width: 100%;
max-height: 400px;
object-fit: cover;
}
ただしこれだとスマホのアイキャッチ画像が少し縦長になってしまう。HOMEのサムネールも。heightの指定サイズが保持されてしまうため。別にレスポンシブ用にCSSを書かなければいけないのか。このままでもそれほどおかしくはないけれど…。要検討。
参考サイト
ルールまとめ
投稿ページ
- アイキャッチ画像は修正する場合、通常のWeb用サイズ（1200×900）に切り抜き、［多肉Web］フォルダにWeb用（Photoshop）で保存。Flckrに自動でアップロードされるので、Featured Image by URLでラージ幅の1024のURLをアイキャッチに指定。
修正が必要ない場合はFlickrから1024サイズのURLをそのまま指定。 - 記事中に挿入したい画像は1200×900に切り抜き、同様に保存。Flickrの共有から800×600の埋め込みコードを挿入。その際スクリプトとdata-flickr-embed=”true”を削除し、href のURLをsrcのURLに置き換える。また、表示サイズは400×300（もしくは500×375）に変更。
- 投稿編集画面で画像タイトル、代替テキスト、キャプチャを適宜編集する。
Portfolio
- アイキャッチは1200×900で作成。同様に保存し、Featured Image by URLでFlickrの800×600のURLをアイキャッチに指定。
これだけではPortfolioページには画像が出ないので、Flickrの共有から800×600の埋め込みコードを取得してテキストエリアトップに挿入し、不要なタグを削除する。表示サイズはそのまま。 - Albumとして見せたい画像をFlckrでアルバムにまとめ、Add/Edit Photonic Gallery ボタンで挿入する。画像はリサイズしなくても問題なさそうだけれど、表示を軽くするには1200×900くらいにしておくほうが良いのかも。
いずれの場合もプラグインのボタンで挿入の際＞Configure Your Layout＞で幅を800に設定する。
※画像修正はPhotoshopで行い、リサイズしあ上でWeb用に保存するほうがサイズダウンされるしベター。ただしFlickr上でもリサイズや簡単な修正は可能。バックのぼかしなども簡単にできる。
その後…8月15日
サイトは当初、サーバーデフォルトのサブドメインで作成。Google Analytics の設定に制約があったりするので、独自ドメインにサブドメインを追加し、引っ越した。
wpxの管理画面からデータベースのエクスポート・インポートを試す。データの移行は問題なさそう。でもこれだと管理画面が元のURLにリダイレクトされてしまう。config.phpでURLを追加すれば良かったのかもしれないが、再度エクスポート・インポートすると、サイト画面が真っ白になり、うまくいかない。
phpAdminからデータベースを移行する方法もあるけれど、WP管理画面のエクスポート・インポートでしこしこやることにした。Portfolioは移行できず、手作業で再登校した。Virtueはテーマオプションをエクスポート・インポートできるので、テーマの再設定はかなり楽。
モリサワのWebFontが反映されず、wpxサーバーの許容数オーバーだったみたいで、最初作ったデフォルトドメインの利用を辞めたら表示されるようになった。
元サイトにリダイレクトのプラグインを導入。
Google Analytics はAll in One SEOが勝手に入れたプラグインでうまくいかず、手動で設定。一日仕事になってしまった。
コメントを残す