gaiety/gaiety-art
1
0
Fork 0
Code Activity

Small content and nav changes

Browse source
This commit is contained in:
Jessica Parsons 2019-02-28 22:18:01 -08:00
parent 0b023a044b
commit 104023f2c9
3 changed files with 45 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
README.md
View file

@ -2,24 +2,46 @@
[![Netlify Status](https://api.netlify.com/api/v1/badges/4d853017-7159-4520-b9ee-cc9951715434/deploy-status)](https://app.netlify.com/sites/netlify-photo-gallery/deploys) [![Netlify Status](https://api.netlify.com/api/v1/badges/4d853017-7159-4520-b9ee-cc9951715434/deploy-status)](https://app.netlify.com/sites/netlify-photo-gallery/deploys)
This is a photo gallery demo project for Netlify Large Media made with the photos from [Unsplash](https://unsplash.com/) and built with [Hugo](https://gohugo.io/). This is a photo gallery demo project for Netlify Large Media made with photos from [Unsplash](https://unsplash.com/) and built with [Hugo](https://gohugo.io/).
This project has two branches: This project has two branches:
* **master:** A photo gallery that _doesn't use_ Netlify Large Media feature. You can go to [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) to see how you can deploy this with your Netlify account and start using Large Media feature. * **master:** A photo gallery that does _not_ have Netlify Large Media enabled yet. You can follow the [README instructions](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md/#how-to-deploy-your-own-photo-gallery-with-large-media) 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](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/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/](https://netlify-photo-gallery.netlify.com/).
* **large-media-sample:** A photo gallery that uses Netlify Large Media feature. You can go to a [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is deployed as [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/) demo page. ## How to deploy your own photo gallery with Netlify Large Media
## How to deploy your own photo gallery to play with it 1. Deploy to Netlify with "Deploy to Netlify" button. This will create a new Netlify site and copy the repository to your GitHub account.
1. Deploy to Netlify with "Deploy to Netlify" button. This will create a new Netlify site and copy the repo to your GitHub account.
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-photo-gallery) [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-photo-gallery)
2. Clone a newly created repo to your local computer with `git clone`. 2. Find your newly created repository on GitHub and clone it to your local computer with `git clone`.
3. Follow the step of [Enabling Netlify Large Media](https://www.netlify.com/docs/large-media/#enabling-netlify-large-media) to enable Large Media for the newly deployed site. 3. Follow the instructions for [Enabling Netlify Large Media](https://www.netlify.com/docs/large-media/#enabling-netlify-large-media) to enable Large Media for the newly deployed site.
4. Tweak the LFS settings with the `git lfs` commands. The following example tracks `jpg` and `png` files. Tracking them is required for this photo gallery, so you can start tracking them: 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 jpg files: `git lfs track "*.jpg"`.
* To track png files: `git lfs track *.png`. * To track png files: `git lfs track "*.png"`.
5. Explore more for how to configure the tracking in [the documentation](https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration). 5. Find out more about how to configure file tracking in [the documentation](https://www.netlify.com/docs/large-media/#large-media-file-tracking-configuration).
7. After making sure you `git add` changes, run `git push origin master` to push your changes to GitHub. It'll be automatically deployed to Netlify utlizing Large Media. 7. 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.
8. Try transformations with image files. For example, you can tweak the layout file with `layouts/photos_s/list.html`. 8. 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](https://gohugo.io/getting-started/installing) 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](https://www.netlify.com/docs/image-transformation/) for more detail.

6
config.toml
View file

@ -5,13 +5,13 @@ title = "Netlify photo gallery"
[menu] [menu]
[[menu.main]] [[menu.main]]
identifier = "top" identifier = "top"
name = "top" name = "Home"
url = "/" url = "/"
[[menu.main]] [[menu.main]]
identifier = "photos_m" identifier = "photos_m"
name = "photo gallery (masonry)" name = "Photo gallery (masonry)"
url = "/photos_m/" url = "/photos_m/"
[[menu.main]] [[menu.main]]
identifier = "photos_s" identifier = "photos_s"
name = "photo gallery (square)" name = "Photo gallery (square)"
url = "/photos_s/" url = "/photos_s/"

24
content/_index.md
View file

@ -3,25 +3,13 @@ title: "All the cool photos live here"
date: 2019-02-11T18:25:55-08:00 date: 2019-02-11T18:25:55-08:00
--- ---
This is a photo gallery demo project for Netlify Large Media made with the photos from [Unsplash](https://unsplash.com/) and [Hugo](https://gohugo.io/). This is a photo gallery demo project for Netlify Large Media made with photos from [Unsplash](https://unsplash.com/) and built with [Hugo](https://gohugo.io/).
You can browse the code for this site on [GitHub](https://github.com/netlify/netlify-photo-gallery/). This project has two branches: This project has two branches:
**[master](https://github.com/netlify/netlify-photo-gallery/)**: A photo gallery that _doesn't use_ Netlify Large Media feature. You can go to [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) to see how you can deploy this with your Netlify account and start using Large Media feature. - **master:** A photo gallery that does _not_ have Netlify Large Media enabled yet. You can follow the [README instructions](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md/#how-to-deploy-your-own-photo-gallery-with-large-media) 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](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/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/](https://netlify-photo-gallery.netlify.com/).
**[large-media-sample](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample)**: A photo gallery that uses Netlify Large Media feature. You can go to a [static/images](https://github.com/netlify/netlify-photo-gallery/tree/large-media-sample/static/images) folder to see how large media assets are managed with Git. This branch is deployed as [https://netlify-photo-gallery.netlify.com/](https://netlify-photo-gallery.netlify.com/) demo page. ### What can I do with this?
### How to start using this? If you want to try deploying your own photo gallery with Netlify Large Media, please go to the [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) for how to do it.
If you want to try deploying your photo gallery, please go to the [README](https://github.com/netlify/netlify-photo-gallery/blob/master/README.md) for how to do it.
If you want to contribute to the existing photo gallery site _that you have an access to (note: you don't have an access to https://netlify-photo-gallery.netlify.com/ unless you work for Netlify!)_, you can check out [Contributing to a repository with Large Media enabled](https://www.netlify.com/docs/large-media/#contributing-to-a-repository-with-large-media-enabled) documentation for how to prepare.
Here is how to add some 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.
With Netlify Large Media, you can do a cool thing like image transformation. You can see the [documentation](https://www.netlify.com/docs/image-transformation/) for more detail.