/netlify-photo-gallery

Primary LanguageHTML

Netlify Photo Gallery

Netlify Status

This is a photo gallery demo project for Netlify Large Media made with photos from Unsplash and built with Hugo.

This project has two branches:

  • master: A photo gallery that does not have Netlify Large Media enabled yet. You can follow the README instructions to deploy this with your Netlify account and start using Large Media yourself.
  • large-media-sample: A copy of the photo gallery, with Netlify Large Media enabled. You can go to the files in the static/images folder to see how large media assets are managed with Git. This branch is used to deploy the demo site, https://netlify-photo-gallery.netlify.com/.

How to deploy your own photo gallery with Netlify Large Media

  1. Deploy to Netlify with "Deploy to Netlify" button. This will create a new Netlify site and copy the repository to your GitHub account.

    Deploy to Netlify

  2. Find your newly created repository on GitHub and clone it to your local computer with git clone.

  3. Follow the instructions for Enabling Netlify Large Media to enable Large Media for the newly deployed site.

  4. Specify which files to track using the git lfs track command. The following example tracks jpg and png files. Tracking them is required for this photo gallery, so you can start tracking them:

    • To track jpg files: git lfs track "*.jpg".
    • To track png files: git lfs track "*.png".

  5. Find out more about how to configure file tracking in the documentation.

  6. After making sure you git add and git commit your changes, run git push origin master to push your changes to GitHub. It'll be automatically deployed to Netlify using Large Media.

  7. When your deploy is done, try running transformations with the image files. For example, you can tweak the layout file at layouts/photos_s/list.html.

Running the site locally

This site is built with Hugo, and works with Hugo version 0.42 and above. Run hugo version in your teminal to see if you have Hugo installed. If it's not installed, or you have a version below 0.42, follow the Hugo documentation to install the current version.

When Hugo is installed, cd into this repository and run:

hugo server

After building the site, the terminal will output the URL for the local server. It will hot reload when you save changes.

To add photos to the gallery:

  1. Add some images in static/images folder, and the info to data/photos.json.
    • You can check which files/suffix are currently tracked by checking .gitattributes file.
  2. Once it's done, you can git add, git commit, then git push to push them to Netlify Large Media!
  3. By running git lfs ls-files, you can double check which files are managed by Large Media.

Get fancy

With Netlify Large Media, you can do cool things like image transformation. You can visit the documentation for more detail.