WordPress に Vue.js を スモールスタートで入れてみる その5
とあるサイトでVue.jsで作っていて、公開してからもろもろやったことまとめ その5 今回はモジュールについて
Isotope
レンガ式のレイアウトをするためにnpmモジュールがいろいろあります。
vue-masonry を最初使ってましたが、実行タイミングが早かったり、vue-masonry-css はCSSでレイアウトするので軽いのですがflexboxではレイアウトがうまくいかなかったりで結局 isotope-layout を使いました。
今回の場合は、各投稿のACFギャラリー形式で登録した画像をIsotopeでレイアウトしたい
ACFギャラリー: https://www.advancedcustomfields.com/resources/gallery/
フィールド名は sample_gallery
とする
画像URLとwidth/heightが入っているので、img
に指定しておく
読み込み時にガタガタしないようにするにはもう少し調整が必要
sampleGallery.vue
<template> <ul class="sampleGallery" v-if="sampleGallery"> <li class="grid-sizer"></li> <li class="gutter-sizer"></li> <li class="sampleGallery__image" :key="index" v-for="(image, index) in sampleGallery" > <img alt="" :src="image.sizes.thumbnail" :width="image.sizes['thumbnail-width']" :height="image.sizes['thumbnail-height']" > </li> </ul> </template> <script> import { API_POST_URL } from './../variable'; import axios from 'axios'; const Isotope = require('isotope-layout'); export default { data() { return { sampleGallery: '' } }, mounted() { axios .get(`${API_POST_URL}/POSTTYPE/${POST_ID}/`) .then(response => { this.sampleGallery = this.post.acf.sample_gallery this.layoutGallery() }) }, methods: { // Isotope レイアウト layoutGallery() { this.iso = new Isotope('.sampleGallery', { itemSelector: '.sampleGallery__image', masonry: { columnWidth: '.grid-sizer', gutter: '.gutter-sizer' } }); this.iso.layout(); } } }; </script>
次回はPhotoSwipeのvueモジュール編