Looking for advice for a photo portfolio with a hierarchy of themes

[nhoizey]

Hi Zach,

I'm trying to use Eleventy to replace this website currently managed by Adobe Portfolio:
http://photosynthese.net/

I want to show my photos in several galleries, which have a hierarchy.

For example (with only the slugs) :

- in-the-city
 - street-photography
 - architecture
 - urban-landscape
- travel
 - europe
  - france
  - italy
   - venice
   - rome
 - north-america
  - united-states-of-america
   - new-york-city
- portraits
 - studio
 - outdoor
 - urban
- …

For each theme, I want to be able to show:

• a title
• a description
• a list of sub-themes (with manual order)
• a list of photos attached directly to this theme, not to sub-themes, with chronological order

I've started creating folders for the themes in my new project based on eleventy-base-blog (and visible on Netlify), but I would like to be able to "attach" photos to multiple themes. For example, a photo can be both a "urban landscape" and be in "new york city". So the folders option looks not so adequate.

I started thinking about a data file to list the hierarchy, but then I don't know how to generate all pages, with the hierarchy "visible" in the clean URLs.

So I'm looking for advice, before I do anything that I could regret later… ;-)

Thanks!

[zachleat]

Interesting! Sounds like you want to attach metadata to your images and add (one or more) tags to image files to make them part of a collection? I think I’d need to think about that a little bit more—but technically it should be somewhat trivial to get working in Eleventy. I’d have to make template-specific data files (new in 0.2.14) work with pass-through copy files (images). See https://github.com/11ty/eleventy/blob/master/docs/data.md#template-and-directory-specific-data-files

Alternatively, you can make a small template for each image that contains the markup to render that image. Technically you couldn’t put them in _includes because front matter is not processed on those files, so they’d need to be in your input directory. This would probably work best with #61. Then, you could iterate over the collection and output the image markup from the templates. They’d be fake-includes, kinda.

BUT, ignoring all that bikeshedding, this is something that pagination is built for, if I understand your use case correctly? A main data file that drives creation of a bunch of different templates.

https://github.com/11ty/eleventy/blob/master/docs/pagination.md

Lemme know if I’m way off here 😎

[zachleat]

I think the thing that confused me when reading your report was the relationship between themes and galleries, can you elaborate more there?

[nhoizey]

Maybe the confusion comes from the "theme" term. I didn't mean "theme" as a graphical interface theme, but more as a "topic".

For example, I want to publish each photo from my trips in Hong Kong in several places:

1. its own page, with large image and a few metadata: title, description, EXIF
2. the geographical "Hong Kong" topic, which is a sub-topic of the "Asia" one, which is a sub-topic of the "Travel" one
3. the "street photography" topic, and/or the "architecture" topic, etc.

About solutions:

1. is obvious: I can make a .md with the metadata and image filename in front matter, put both in a /photos/travel/asia/hong-kong/ folder, and create a layout for such pages
2. is a little less obvious: I want to list all Hong Kong photos like in this page, choosing the sorting of the photos in the page, and adding a description that might be different from the one on the photo's page, because I want to be able to tell a story. I can make another .md for this page, with all descriptions and use an include for the image, maybe. But it means I have to manually sync available Hong Kong photos and this page.
3. Exactly the same as 2, but with chronological sorting

---

Just thinking about a way, easier if the description is the same everywhere.

Let's imagine I write this symphony-of-lights-from-peak.md for the photo in the /photos/travel/asia/hong-kong/ folder:

---
title: The Hong Kong Symphony of Lights from The Peak
image: hk-symphony-from-peak.jpg
location_rank: 2
other_topics:
  - urban-landscape
  - long-exposure
---

[A Symphony of Lights](http://www.tourism.gov.hk/symphony/english/details/details.html)
is staged every night at 8:00 p.m. in Hong Kong.

The best place to enjoy the show is the
[Avenue Of The Stars](http://www.avenueofstars.com.hk/eng/home.asp), but the view from
[The Peak](http://www.discoverhongkong.com/eng/see-do/highlight-attractions/top-10/the-peak.jsp)
is really nice too, even if the music doesn't come so far.

You can find
[this place on Locationscout](http://www.locationscout.net/hong-kong/1578-the-peak-tower-above-hong-kong).

Location comes from the parent folder if the second level folder in the path is travel/.

I want this photo to be visible in these pages:

• photos/travels/asia/hong-kong/symphony-of-lights-from-peak.html
• photos/travels/asia/hong-kong/index.html (at second place)
• photos/in-the-city/urban-landscape.html
• photos/long-exposure.html

For photos that don't require any location, like studio portraits, I can put their .md and image file in one of their topics folder: /photos/portraits/studio/. But it would also be visible on other topics present in the front matter.

Maybe the mapping between topics and locations and actual folders can be automated, but I can also create data files for this: _data/locations.json and _data/topics.json.

Does it make sense?

[zachleat]

Hmm, after a re-read of this it sounds like the missing piece you’re looking for is just tagging!

You create symphony-of-lights-from-peak.md and then add tags to this file’s front matter for where you want it to appear.

---
tags:
  - hong-kong
  - urban-landscape
  - long-exposure
---

Then in each of photos/travels/asia/hong-kong/index.html photos/in-the-city/urban-landscape.html and photos/long-exposure.html you’d just iterate over the collections provided for those tags.

---

Not to overcomplicate things but just as an FYI you may also be interested in the Configuration API’s addCollection method.

See this example:

eleventyConfig.addCollection("onlyMarkdown", function(collection) {
  return collection.getFilteredByGlob("**/*.md");
});

You can manually add a group of template files to your custom collection and then iterate over them however you want. It’s kind of a bulk way of faking tags.

Does that help?

[zachleat]

More info on that last part here: https://github.com/11ty/eleventy/blob/master/docs/collections.md

[nhoizey]

I understand what you mean, but can I generate multiple pages for the same Markdown source?

I would like to have these pages:

• photos/travels/asia/hong-kong/symphony-of-lights-from-peak.html
• photos/in-the-city/urban-landscape/symphony-of-lights-from-peak.html
• photos/long-exposure/symphony-of-lights-from-peak.html

Of course, I would use one as a canonical. The one where the *.md file is.

I want to be able to "hack" the URL to get one level up.

Because if I don't do that, people will go to the photos/in-the-city/urban-landscape.html page, click on the symphony-of-lights-from-peak link and go to another section of the site. I feels strange.

---

Or maybe I should do it another way, much simpler, with all images in photos/ directly, with one single URL, and only folders for topics and locations…

I'll do some tests like that.

[zachleat]

Huh, finally re-reading this and I think I see what you’re going for.

Check out this njk template:

---
pagination:
  data: fileOutputs
  size: 1
  alias: filePath
fileOutputs:
  - photos/travels/asia/hong-kong/symphony-of-lights-from-peak/
  - photos/in-the-city/urban-landscape/symphony-of-lights-from-peak/
  - photos/long-exposure/symphony-of-lights-from-peak/
permalink: '{{ filePath }}/index.html'
---
You can use the alias in your content too {{ filePath }}.

Output:

Writing _site/photos/travels/asia/hong-kong/symphony-of-lights-from-peak/index.html from ./test.njk.
Writing _site/photos/in-the-city/urban-landscape/symphony-of-lights-from-peak/index.html from ./test.njk.
Writing _site/photos/long-exposure/symphony-of-lights-from-peak/index.html from ./test.njk.
Processed 3 files in 0.27 seconds

Gonna close this—please reopen if you have more questions!

[nhoizey]

Looks like #955 could help here! 😍