[{"data":1,"prerenderedAt":117},["ShallowReactive",2],{"post-image-gallery-gridsome":3},{"id":4,"title":5,"body":6,"date":102,"description":103,"extension":104,"image":49,"meta":105,"navigation":106,"path":107,"seo":108,"slug":109,"stem":110,"summary":111,"tags":112,"__hash__":116},"posts\u002Fposts\u002Fimage-gallery-gridsome.md","Simple Image Gallery Using Gridsome",{"type":7,"value":8,"toc":99},"minimark",[9,21,24,40,50,57,64,70,85,96],[10,11,12,13,20],"p",{},"This portfolio site I'm building needs a gallery of lettering images. I haven't found a specific tutorial for this use case. After googling for a while I found this ",[14,15,19],"a",{"href":16,"rel":17},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F54095215\u002Fhow-to-get-all-the-image-files-in-a-directory-using-vue-js-nuxt-js",[18],"nofollow","Stackoverflow answer",", it's for Nuxt but I tought it might work for Gridsome too.",[10,22,23],{},"So I'm documenting the process and sharing it with others who might want to do similar thing. Note this is a simple implementation that utilizes Webpack feature instead of GraphQL.",[10,25,26,27,31,32,35,36,39],{},"In my case, I'll be making the gallery under ",[28,29,30],"code",{},"\u002Flettering"," URL, so I'm making new file on ",[28,33,34],{},"\u002Fpages\u002FLettering.vue",". There's two part of this: the page itself, and gallery of images. I'll be putting the image on ",[28,37,38],{},".\u002Fstatic\u002Fimages\u002Flettering\u002F...",". It looks like this in directory structure: (other files ommited)",[41,42,47],"pre",{"className":43,"code":45,"language":46},[44],"language-text","📦project-name\n ├─📂src\n │ └─📂pages\n │ │ └─📜Lettering.vue\n │ └─...\n ├─📂static\n │ └─📂images\n │ │ └─📂lettering\n │ │ │ └─ (image files goes here)\n ├─ ...\n","text",[28,48,45],{"__ignoreMap":49},"",[10,51,52,53,56],{},"I also introduce name template for the image files here: ",[28,54,55],{},"image-name_YY-MM-DD.jpg",". I'm doing this so I can sort the images by Date later. You can change the name template to your liking.",[10,58,59,60,63],{},"Here's what goes into actual page ",[28,61,62],{},"Lettering.vue",":",[41,65,68],{"className":66,"code":67,"language":46},[44],"\u003Ctemplate>\n  \u003CLayout>\n    \u003Ch1 class=\"mb-4 text-4xl leading-none uppercase lg:text-6xl\">Lettering\u003C\u002Fh1>\n    \u003Cdiv class=\"flex flex-wrap pb-20 -mx-3\">\n      \u003Cdiv class=\"w-full sm:w-1\u002F2 md:w-1\u002F3 lg:w-1\u002F4\" v-for=\"(image, index) in sortedImages\" :key=\"index\">\n        \u003Cdiv class=\"px-3 my-3\">\n          \u003Cdiv class=\"relative shadow-lg\" style=\"padding-bottom: 100%\">\n            \u003Cg-image class=\"absolute object-cover w-full h-full\"\n              :src=\"image.pathLong\" :title=\"`20${image.year}-${image.month}-${image.day}`\"\u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  metaInfo: {\n    title: 'Lettering'\n  },\n  data() {\n    return {\n      images: []\n    }\n  },\n  mounted() {\n    this.importAll(require.context('..\u002F..\u002Fstatic\u002Fimages\u002Flettering\u002F', true, \u002F\\.jpg$\u002F))\n  },\n  computed: {\n    sortedImages() {\n      return this.images.sort((a, b) => (\n        new Date(`20${b.year}`, b.month, b.day) -\n        new Date(`20${a.year}`, a.month, a.day)\n      ))\n    }\n  },\n  methods: {\n    importAll(r) {\n      r.keys().forEach(key => (this.images.push({\n        pathLong: r(key),\n        pathShort: key,\n        year: key.split('_').pop().replace('.jpg', '').split('-')[0],\n        month: key.split('_').pop().replace('.jpg', '').split('-')[1],\n        day: key.split('_').pop().replace('.jpg', '').split('-')[2],\n      })))\n    }\n  },\n}\n\u003C\u002Fscript>\n",[28,69,67],{"__ignoreMap":49},[10,71,72,73,76,77,80,81,84],{},"To import all the images, we are utilizing webpack ",[28,74,75],{},"require.context"," inside the image directory. Then for each image, we put them into ",[28,78,79],{},"images"," array as an object with few attributes: ",[28,82,83],{},"pathLong, year, month, day",". You can optimize or change the code to your liking, but for now it works okay.",[10,86,87,88,91,92,95],{},"I'm also using tailwind CSS here, with a minor rule breaking inline style for ",[28,89,90],{},"padding-bottom"," trickery to get that square ",[28,93,94],{},"div"," ratio.",[10,97,98],{},"Hope this helps! Thanks for reading.",{"title":49,"searchDepth":100,"depth":100,"links":101},2,[],"2020-07-18","This portfolio site I'm building needs a gallery of lettering images. I haven't found a specific tutorial for this use case. After googling for a while I found this Stackoverflow answer, it's for Nuxt but I tought it might work for Gridsome too.","md",{},true,"\u002Fposts\u002Fimage-gallery-gridsome",{"title":5,"description":103},"image-gallery-gridsome","posts\u002Fimage-gallery-gridsome","Tutorial on building simple image gallery in Gridsome with Webpack require.",[113,114,115],"development","gridsome","tutorial","Xy0IHwQV9BAtHS_f6BE0x4QM6Qj4EoPdk_tzRkpWpEE",1789547444441]