Advice for creating photography portfolio

[kaviars]

Hello,

Not sure how to tackle the Eleventy to structure the content. Hopefully someone can give advice.
Photographs are divided into groups (tags): interior, portraits, miscellaneous. Each has seperate page, f.ex. website.com/miscellaneous/ where photographs are stacked one after other. My concern is pages, which has inner pages with multiple photographs. F.ex. website.com/interior/cottage-house/ which is accessed from website.com/interior/ that just like website.com/miscellaneous/ has photos stacked one after another.

If I would not have the inner pages, I could get my website done by JSON file stored in _data, but since some photographs have links "see more", I dismiss the idea using JSON.

To describe the desired result, see raw sketch:

[btrem]

I'm not sure I follow what you're asking. Like why having sub pages mean you can't use json. Can you provide an example of the json you would use if there weren't sub pages? Just a small example should suffice. With that, maybe I can see your problem more clearly.

[kaviars]

Most difficult is to get the rock moving, once in motion, task is progressing. Thanks for looking into the post!

[zachleat]

Howdy! Sorry about this but I really think this would be better suited on the Discussions board! https://github.com/11ty/eleventy/discussions

I’m going to try Converting it, we’ll see if that works.

[kaviars]

Turns out this aint difficult. My approach was to have seperate directory for each category. F.ex. architecture related content goes into "arch". Within "arch", creating arch.json that points to layout. The rest are .md files for each photo set. F.ex. house.md:

---
title: house
tags:
  - architecture
image: "../images/architecture/arch-1.jpg"
hasLink: true
permalink: "architecture/{{ title | slug }}/"
---
of one project
![Benjamin Bannekat](https://octodex.github.com/images/bannekat.png)
[link text](http://dev.nodeca.com)

To wrap all architecture galleries, .njk template outside "arch" directory.

architecture.njk:

    ---
    layout: 'base.njk'
    ---
    <div class="container-right">
        <div>
    {% for architecture in collections.architecture -%}
        <img src="{{ architecture.data.image }}" alt="" />

            {% if architecture.data.hasLink %}
            <a href="{{ architecture.url }}">
                <h4>{{ architecture.data.title }}</h4>
            </a>
            {% else %}
            <h4>{{ architecture.data.title }}</h4>
            {% endif %}
    {% endfor -%}
        </div>
    </div>

Sure it can be done more effective, but Eleventy is flexible enough to get even absolute Javascript novice like me rolling.