write-with-webiny icon indicating copy to clipboard operation
write-with-webiny copied to clipboard

Build a Photo Gallery with Gatsby and Webiny Headless CMS

Open endymion1818 opened this issue 3 years ago • 4 comments

Introduction

With Webiny Headless CMS you can leverage the best of both worlds: it's a place to store both content and files, making it an ideal way of building a photo sharing app similar to Pinterest, Instagram or Flickr. This tutorial will discuss how to make a photo gallery with Gatsby, using Webiny's internal file manager to store images, and the headless CMS to store posts and comments.

Goals

The goal of this article will be to show how Webiny can be used as both a CMS and a file manager, meaning users don't have to go through the extra step (or expense) of setting up a cloud storage service like Cloudinary or Imgx, rather they can upload images, edit them, and retrieve them via GraphQL on their Gatsby site.

Outline

  • What is a Headless CMS?
  • Why use Webiny CMS?
  • Building a Photo Gallery application -- Installing dependencies -- Add a photo grid -- Add a single photo view -- Adding comments to a single photo view
  • Setting up Webiny CMS -- Content Structure -- Connecting the CMS to the application
  • Creating, Updating, and Deleting Photos
  • Conclusion
  • Resources

Sample articles

No response

endymion1818 avatar Aug 03 '22 15:08 endymion1818

I would like to work on this

am-miracle avatar Aug 03 '22 23:08 am-miracle

Hi @endymion1818, I can work on this if it's available.

icode247 avatar Nov 09 '22 22:11 icode247

Hey @icode247 welcome back! Let's chat in the community about the detail on this one 👍

endymion1818 avatar Nov 10 '22 10:11 endymion1818

Hi @icode247, your draft has received some feedback, looking forward to getting this one in the queue for publication!

endymion1818 avatar Dec 09 '22 13:12 endymion1818