diff --git a/content/Blog/adding-photo-galleries.md b/content/Blog/adding-photo-galleries.md new file mode 100644 index 00000000..afe9172a --- /dev/null +++ b/content/Blog/adding-photo-galleries.md @@ -0,0 +1,179 @@ +--- +date: 2024-04-13T10:02:31-07:00 +title: Adding photo galleries to my site +type: posts +tags: + - Web Development + - Coding + - Photography + - Hugo +techfeatured: true +description: I wanted to show off my photos, but it meant building a whole new set of pages onto my site +--- +I mostly talk about work on this site, but I do have other interests! While I do a few different things, I have one main hobby, and that’s photography. I take courses in it, I spend too much money on it, I travel places with photos in mind, and I’ve ended up with 100s of photos that I really like. So, for years I’ve wanted to post these pictures online (beyond just Instagram) but creating an online photo gallery that I’d be happy with is a bit of work. + +The gold standard for personal online photo galleries is [Paul Stamatiou’s huge collection]( https://paulstamatiou.com/photos/), a beautifully curated web experience that is both aesthetically and technically impressive. I’m not trying to emulate that experience, in fact I never even looked at the source of those pages, but it was certainly an inspiration. + +A couple of weeks ago, I took a Saturday afternoon (in between dog walks and doing laundry) and started digging into this project, starting with writing up my list of requirements: + +- Part of my existing site (Hugo, static web site, hosted on Azure). +- Image sets (multiple resolutions). +- Image data pulled from EXIF (Title == Caption, Caption == ALT Text). +- Images uploaded to blob storage, accessed through a CDN. +- Images *not* stored in GitHub … thumbnails though maybe? +- Lightbox/zoom. +- Built off of my Lightroom (Adobe image editing and organization app) albums. + +> Why not images in GitHub? It will work to do this, and for a small repo like mine it would be fine, but Git is not great at handling binaries. It bloats the repo, and since my source of truth is elsewhere (Lightroom/Adobe in my case) I don’t gain any value in storing them there. When I worked on Microsoft Docs, we checked images for all the documentation into Git, and it wasn’t long before the GitHub engineers were emailing us asking us to please stop. 7 GB repositories are a pain for their infrastructure. + +Phase 2 (I originally thought I’d get to this later, but I’ve done it already. More on that below) + +- Create a feature to embed a nice album link into other pages. +- Create a feature to embed an image from an album into other pages (with all the same functionality). + +On top of all of that, I have certain *opinions* about the web, which added some other requirements: + +- JavaScript should be kept to a minimum, ideally not required at all. +- The pages should be fast, with no visual jank (layout shift). +- Everything should be accessible. +- If a new domain is required, it [should be using my own primary one]( https://www.duncanmackenzie.net/blog/domain-names/). + +With all that in mind, I started researching (also known as much Googling). First, I was curious if I could use an API to, at build time, pull photos and information from my Adobe Lightroom albums. I’m already using Lightroom and the organizational grouping matches what I wanted to do on my own site, so it seemed like a good option. Unfortunately, I couldn’t figure this out at all. [APIs exist]( https://developer.adobe.com/lightroom/lightroom-api-docs/api/#tag/Albums/operation/readAlbum), but it wasn’t just a matter of authenticating with my Adobe account, the Lightroom APIs said “Adobe review required” … and so I dropped this path and decided to work with folders of files on my local machine. This had the side benefit of removing a dependency on a 3rd party, so I could manage my photos in some other system in the future without impacting this process. + +## Creating my album data + +I originally thought a good path forward would be to use the [Data file feature of Hugo](https://gohugobrasil.netlify.app/templates/data-templates/), creating a JSON file with all my album data and then using that information to generate pages at build time. That’s not where I ended up, but regardless I jumped into Visual Studio and created a console app to take a folder full of files and create the data structures I wanted. This console app takes a directory path, pointing to images exported at full quality out of Lightroom, and using [Magick.NET](https://github.com/dlemstra/Magick.NET) (a .NET wrapper library around [ImageMagick](https://imagemagick.org/)), generate 4 sizes of each image (220, 540, 1080, and 2160 pixels wide), pull out the EXIF and other metadata, and produce a JSON file with all that information. Next I upload those images to my [Azure blob storage container](https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blobs-introduction), which I do manually at the moment, but I could automate it in the future. + +The app, which could be replicated in bash, node, or whatever you like to work with (since ImageMagick has a CLI it would be easy to automate with nearly anything), [is available in GitHub if you are interested](https://github.com/Duncanma/GalleryMaker). The output file, with some empty fields that I haven’t decided to use yet, looks like this: + +```json +{ + "Title": "pets", + "Description": "", + "BaseURL": "https://photos.duncanmackenzie.net/images/pets", + "Featured": 0, + "Pictures": [ + { + "Title": "Loki bursting through snow", + "Caption": "Yellow lab running through snow that is up to his body", + "Latitude": "", + "Longitude": "", + "Camera": "Canon EOS REBEL T3", + "Lens": "EF-S18-55mm f/3.5-5.6 IS II", + "FocalLength": "47", + "fStop": "11", + "DateTimeOriginal": "2016-12-30T10:46:24-08:00", + "Links": [ + { + "Url": "https://photos.duncanmackenzie.net/images/pets/pets-01-2160.jpg", + "Width": 2160, + "Height": 1440 + }, + { + "Url": "https://photos.duncanmackenzie.net/images/pets/pets-01-1080.jpg", + "Width": 1080, + "Height": 720 + }, + { + "Url": "https://photos.duncanmackenzie.net/images/pets/pets-01-540.jpg", + "Width": 540, + "Height": 360 + }, + { + "Url": "https://photos.duncanmackenzie.net/images/pets/pets-01-220.jpg", + "Width": 220, + "Height": 147 + } + ] + } + ] +} +``` + +## Building the albums list and single pages + +With the available data figured out, I moved onto the HTML side of things. When working with Hugo, I usually build out a partial or a template in pure HTML, with hardcoded data, so that I can get it looking just the way I want. Having all this image data, enabled me to build this HTML with real photos and metadata, instead of using or placekitten.com (now gone?). I started out thinking I would use an existing Hugo template, so I found [this one by Nico Kaiser -- Hugo Theme Gallery](https://nicokaiser.github.io/hugo-theme-gallery/). As I worked through my plan, first thinking I was going to use data files, and then eventually moving my json data into the frontmatter of individual markdown files (which looks really odd in the source, but works just like having YAML there), I stole Nico’s CSS and the rough shape of his HTML, but not much of his actual Hugo implementation (there are some bits in there for sure). Nothing wrong with that code, but it is based around [resources](https://gohugo.io/content-management/page-resources/) (a Hugo concept of assets attached to your content, but depends on them being stored with your markdown) and does a bunch of work with EXIF that I had decided to do in my .NET generation app. + +I also ended up using the same lightbox implementation as Nico, [PhotoSwipe](https://photoswipe.com/), because I liked the look and functionality of it. Turns out Paul’s site uses it too, so that’s two recommendations, if you are considering using it. This is the only JavaScript piece to all of this, but it’s not required, clicking an image without JS will fall back to linking to the full-size file. + +![Lightbox in zoomed in mode](/images/photo-gallery/lightbox.png) + +The Hugo theme was using [a cool image layout library](https://flickr.github.io/justified-layout/), but it was based around absolute positioning and I thought I could get a pretty good layout just using CSS. A bit of searching later, I found yet another bit of code I could ~~steal~~leverage, [“Adaptive Photo Layout with Flexbox” by Tim Van Damme]( https://css-tricks.com/adaptive-photo-layout-with-flexbox/). Super easy to implement, copying the CSS as-is to start, then messing with it over time, it produced a nice responsive layout that handles different aspect ratio images. I take too many landscape orientated photos, but I’m trying to mix it up, so I want a variety of photos to look great together. + +![the gallery view, showing landscape and portrait images sized and positioned together](/images/photo-gallery/flexGallery.png) + +All of this, done first in HTML, then in Hugo, turns into two ‘layouts’ in my theme. A List template, which is used when showing [the homepage for my albums](/albums), and then a Single template that handles [an individual album](/albums/flowers). I built these first without any partials, but when I was building a later feature, I ended up moving the album card out of the list view into its own file and then doing the same with the individual image code. All of the templates, partials, css, etc. are included in [my blog repository](https://github.com/Duncanma/Blog). + +## Supporting multiple image resolutions + +The original resolution of one of my photos is over 7,000 pixels wide and could be 15+ megabytes in size, neither of which is that useful on the web. My .NET app generates various sizes and compresses the photos a bit, so it is a huge improvement, but I need to setup the html so that visitors get the right image for the width they are viewing. I knew that was possible using the `` element, but after [yet another bit of research](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/), I settled on another approach, the `srcset` attribute on ``. The short explanation is that, while both will work, `` is better suited for when you have multiple image formats (like jpg *and* webp) or mixed aspect ratios of the same photo. `srcset` is specifically for providing multiple sizes of the same image in the same format, which is exactly what I’m doing. Each image, based on the URLs available in my json data, ends up with HTML like this (I removed the domain and path on the images to simplify the HTML code): + +```html +yellow cornflowers in focus + with grass in the background +``` + +I’ll run through each part of that tag to explain what it does and why it is important. + +- The `loading=”lazy”`, which tells the browser it can defer loading this image until it is in view (within the viewport as the user scrolls, or right from the start for the first few), which defers that bandwidth use and request hit if the user doesn’t need the image yet. +- The dimensions (width and height), which gives the browser enough information to leave the right space on the page before the image is loaded, which prevents jank or layout shifts as images are retrieved. +- The standard `src` attribute, which will act as the fallback for any browser that doesn’t support the `srcset` attribute (which would be surprising, but [possible](https://caniuse.com/srcset)). There’s an argument that I should provide a smaller image here, if someone is on IE11 are they also likely on a slower internet connection? +- ALT text for screenreaders, in this case pulled from the EXIF data on the photo. +- Next is the exciting bit, `srcset` with a list of image paths and widths (2160w, 1080w and so on). This tells the browser the width of each available image, and then we let it determine what should be shown to the user. The srcset feature is a bit more complex, we could provide hints and guidance, but with this usage of it, we are saying to Chrome or another browser “I have these 4 images, with widths of 2160px through 220px, please use them as you see fit”. A user could be viewing my site and a variety of widths, but also at different pixel densities (retina screens or other kinds of high-DPI monitors are a thing), and I don’t have to worry about it at all. + +It's a fun exercise to test out these responsive images (ok, fun for some of us), by firing up your browser’s devtools, starting out with a narrow window and watching the network panel as you stretch it out wider and wider. Make sure you have 'disable cache' selected and do a full reload. + +At the narrow width, the browser decides on the 540px images. + +![Starting narrow, the network panel shows the 540px images being loaded](/images/photo-gallery/540px_loaded.png) + +Stretching the browser wider, we see the browser switch to the 1080px wide images. + +![Network panel shows the 1080px images being loaded](/images/photo-gallery/1080px_loaded.png) + +Going out even wider, the 2160px images are loaded, but we also see the impact of lazy loading, as only the first few images are loaded (the rest load in as I scroll down). + +![Network panel showing a few 2160 px images being loaded](/images/photo-gallery/2160px_visible_loaded.png) + +You should try it, it’s fun! Also, you may see different behavior, based on your display settings, or if you happen to be using IE11, you’ll see just the 2160px images being loaded (as that's the fallback, and IE11 doesn't support srcset). + +## Creating shortcodes + +I’d like to write about my photos, and the trips they were taken on, here on this blog and if I do that, I’ll want to include links to the album and individual images in my post. To make that easier, I created two shortcodes, one to include an album: + +``` +{{%/* album flowers */%}} +``` + +Which produces this result: + +{{% album flowers %}} + +And I created another one to display a single image: + +``` +{{%/* albumImage flowers 1 */%}} +``` + +Which produces this result + +{{% albumImage flowers 1 %}} + +Having these available, instead of just using the regular markdown image syntax means I benefit from all the nice multi-resolution code as well as the existing ALT text and caption. + +## What's left to do? + +There's always more I *could* do, but for the moment the main task is to create more of these album pages, which involves curating photos and writing alt text. Beyond that, I am thinking of: + +- how I could use tagging and grouping to associate albums together, +- associating blog posts with albums, +- bringing in GPS data where I have it, and +- trying to make my camera/lens info look more appealing! diff --git a/content/Blog/domain-names.md b/content/Blog/domain-names.md index d81a0125..7b1b8312 100644 --- a/content/Blog/domain-names.md +++ b/content/Blog/domain-names.md @@ -10,7 +10,7 @@ techfeatured: true description: If your company has a core domain, leverage it for all your sites, instead of making new ones. --- -If you are an established company or organization, you probably have a main second domain. Microsoft has 'microsoft.com' for example, Washington state has wa.gov, and the UK government has gov.uk. There is both a perceived and real value to these domains, and any domains that leverage that value can be inherently trusted. A random third-party can’t create a new foo.gov.uk site, only the owners of the main domain can do that. +If you are an established company or organization, you probably have a primary domain. Microsoft has 'microsoft.com' for example, Washington state has wa.gov, and the UK government has gov.uk. There is both a perceived and real value to these domains, and any domains that leverage that value can be inherently trusted. A random third-party can’t create a new foo.gov.uk site, only the owners of the main domain can do that. At Microsoft, this means we should leverage 'Microsoft.com' whenever we launch a new site. Instead of something like 'MicrosoftDocs.com' we used 'docs.microsoft.com' for example. Many users will not be aware of the difference, which could lead you to believe it doesn’t matter, but it is still a good practice. Anyone can register a domain like MicrosoftDocs.com, and with some careful design, they could trick users into thinking this is an official site. diff --git a/content/albums/seattle-night-workshop.md b/content/albums/seattle-night-workshop.md index 36f78c18..f7484e19 100644 --- a/content/albums/seattle-night-workshop.md +++ b/content/albums/seattle-night-workshop.md @@ -469,4 +469,4 @@ } ] } ---- \ No newline at end of file +--- diff --git a/static/images/photo-gallery/1080px_loaded.png b/static/images/photo-gallery/1080px_loaded.png new file mode 100644 index 00000000..a504fa25 Binary files /dev/null and b/static/images/photo-gallery/1080px_loaded.png differ diff --git a/static/images/photo-gallery/2160px_rest_loaded.png b/static/images/photo-gallery/2160px_rest_loaded.png new file mode 100644 index 00000000..0121d170 Binary files /dev/null and b/static/images/photo-gallery/2160px_rest_loaded.png differ diff --git a/static/images/photo-gallery/2160px_visible_loaded.png b/static/images/photo-gallery/2160px_visible_loaded.png new file mode 100644 index 00000000..bceed8f3 Binary files /dev/null and b/static/images/photo-gallery/2160px_visible_loaded.png differ diff --git a/static/images/photo-gallery/540px_loaded.png b/static/images/photo-gallery/540px_loaded.png new file mode 100644 index 00000000..754f137b Binary files /dev/null and b/static/images/photo-gallery/540px_loaded.png differ diff --git a/static/images/photo-gallery/flexGallery.png b/static/images/photo-gallery/flexGallery.png new file mode 100644 index 00000000..0ff3eefc Binary files /dev/null and b/static/images/photo-gallery/flexGallery.png differ diff --git a/static/images/photo-gallery/lightbox.png b/static/images/photo-gallery/lightbox.png new file mode 100644 index 00000000..0f84b4c0 Binary files /dev/null and b/static/images/photo-gallery/lightbox.png differ diff --git a/static/images/photo-gallery/listPage.png b/static/images/photo-gallery/listPage.png new file mode 100644 index 00000000..4d859300 Binary files /dev/null and b/static/images/photo-gallery/listPage.png differ diff --git a/static/images/photo-gallery/singlePage.png b/static/images/photo-gallery/singlePage.png new file mode 100644 index 00000000..f25a999f Binary files /dev/null and b/static/images/photo-gallery/singlePage.png differ diff --git a/themes/hello-friend-ng/assets/scss/_style.scss b/themes/hello-friend-ng/assets/scss/_style.scss index 465610e8..4e3c239f 100644 --- a/themes/hello-friend-ng/assets/scss/_style.scss +++ b/themes/hello-friend-ng/assets/scss/_style.scss @@ -43,6 +43,7 @@ td, th { display:block; margin-right: auto; margin-left: auto; + max-height: none; } .post-content video { diff --git a/themes/hello-friend-ng/assets/scss/galleries/_styles.scss b/themes/hello-friend-ng/assets/scss/galleries/_styles.scss index 9eb1262f..47e919fd 100644 --- a/themes/hello-friend-ng/assets/scss/galleries/_styles.scss +++ b/themes/hello-friend-ng/assets/scss/galleries/_styles.scss @@ -1,7 +1,12 @@ -section.featured a.card, section.galleries a.card { +section.featured a.card, section.galleries a.card, section.embedded a.card { text-decoration: none; } +section.embedded .card { + max-width: 220px; + margin:auto; +} + .pswp__dynamic-caption { .cameraInfo { font-size: x-small; @@ -140,74 +145,6 @@ body > main { height: 100%; } -body > footer { - margin-right: auto; - margin-left: auto; - color: var(--text-2); - font-size: 0.875rem; - line-height: 1.25rem; - - section:last-of-type { - display: grid; - grid-auto-flow: column; - gap: 1rem; - padding: 2.5rem; - - a:hover { - text-decoration-line: underline; - } - } -} - -hgroup { - display: flex; - flex-direction: column; - align-items: center; - gap: 1.5rem; - margin: 3rem auto 4rem; - padding-right: 1.5rem; - padding-left: 1.5rem; - max-width: 1024px; - text-align: center; - - h1 { - font-weight: 700; - font-size: 1.875rem; - line-height: 2.25rem; - } - - h2 { - font-weight: 700; - font-size: 1.5rem; - line-height: 2rem; - } - - p { - color: var(--text-2); - } - - @media (min-width: 640px) { - width: 83.3333%; - } - - @media (min-width: 768px) { - h1 { - font-size: 2.25rem; - line-height: 2.5rem; - } - - h2 { - font-size: 1.875rem; - line-height: 2.25rem; - } - - p { - font-size: 1.125rem; - line-height: 1.75rem; - } - } -} - main > section { margin: 3rem auto 4rem; padding-right: 1.5rem; diff --git a/themes/hello-friend-ng/layouts/albums/list.html b/themes/hello-friend-ng/layouts/albums/list.html index 11c0f772..10dfc841 100644 --- a/themes/hello-friend-ng/layouts/albums/list.html +++ b/themes/hello-friend-ng/layouts/albums/list.html @@ -27,21 +27,7 @@

{{ .Title }}

{{- range after 1 .Pages }} - {{- $gallery := . }} - {{- with $gallery }} - {{- $photoCount := len .Params.Pictures }} - {{- $thumbnailIndex := .Params.Featured }} - {{- $thumbnail := index .Params.Pictures $thumbnailIndex }} - {{- $thumbnailLink := index $thumbnail.Links 0 }} - - {{ .Title }} -
-

{{ .Title }}

- {{ $photoCount }} photos - {{ with .Description }}

{{ . }}

{{ end }} -
- - {{- end }} + {{ partial "albumCard.html" . }} {{- end }}
diff --git a/themes/hello-friend-ng/layouts/albums/single.html b/themes/hello-friend-ng/layouts/albums/single.html index e52512ec..73f82e79 100644 --- a/themes/hello-friend-ng/layouts/albums/single.html +++ b/themes/hello-friend-ng/layouts/albums/single.html @@ -9,47 +9,8 @@

{{ .Title }}

{{ .Content }}
{{- end }}
- {{ $colLength := len .Params.Pictures }} {{- range .Params.Pictures }} - {{ $image := . }} - {{ $full := index ($image.Links) 0 }} - {{ $alt := $image.Caption }} - {{ if not $alt}} - {{ $alt = $image.Title }} - {{ end }} - {{ $srcset := "" }} - {{ range $image.Links }} - {{ $srcset = printf "%s %s %vw," $srcset .Url .Width }} - {{ end }} - - {{ $srcset = trim $srcset ","}} - - {{ $alt }} -
- {{ with .Title }} -

{{ . }}

- {{ end }} -
- {{ with .DateTimeOriginal }} -

{{ dateFormat "Jan 2, 2006" . }}

- {{ end }} - {{ with .Camera }} -

- {{ . }}

- {{ end }} - {{ with .Lens }} -

{{ . }}

- {{ end }} - {{ with .FocalLength }} -

{{ . }}mm

- {{ end }} - {{ with .fStop }} -

ƒ/{{ . }}

- {{ end }} -
-
- - + {{ partial "singleImage.html" . }} {{- end }}
diff --git a/themes/hello-friend-ng/layouts/index.html b/themes/hello-friend-ng/layouts/index.html index 624bc71a..ee6bd95a 100644 --- a/themes/hello-friend-ng/layouts/index.html +++ b/themes/hello-friend-ng/layouts/index.html @@ -9,6 +9,7 @@

{{ .Site.Title }}

{{- end }} +

Posts on Engineering Management

    {{- range where .Site.RegularPages ".Params.tags" "intersect" (slice "Engineering Management") -}} diff --git a/themes/hello-friend-ng/layouts/partials/albumCard.html b/themes/hello-friend-ng/layouts/partials/albumCard.html new file mode 100644 index 00000000..0d10484e --- /dev/null +++ b/themes/hello-friend-ng/layouts/partials/albumCard.html @@ -0,0 +1,15 @@ +{{- $gallery := . }} +{{- with $gallery }} +{{- $photoCount := len .Params.Pictures }} +{{- $thumbnailIndex := .Params.Featured }} +{{- $thumbnail := index .Params.Pictures $thumbnailIndex }} +{{- $thumbnailLink := index $thumbnail.Links 0 }} + + {{ .Title }} +
    +

    {{ .Title }}

    + {{ $photoCount }} photos + {{ with .Description }}

    {{ . }}

    {{ end }} +
    +     +{{- end }} diff --git a/themes/hello-friend-ng/layouts/partials/singleImage.html b/themes/hello-friend-ng/layouts/partials/singleImage.html new file mode 100644 index 00000000..a78037dc --- /dev/null +++ b/themes/hello-friend-ng/layouts/partials/singleImage.html @@ -0,0 +1,39 @@ +{{ $image := . }} +{{ $full := index ($image.Links) 0 }} +{{ $alt := $image.Caption }} +{{ if not $alt}} + {{ $alt = $image.Title }} +{{ end }} +{{ $srcset := "" }} +{{ range $image.Links }} + {{ $srcset = printf "%s %s %vw," $srcset .Url .Width }} +{{ end }} + +{{ $srcset = trim $srcset ","}} + + {{ $alt }} +
    +{{ with .Title }} +

    {{ . }}

    +{{ end }} +
    + {{ with .DateTimeOriginal }} +

    {{ dateFormat "Jan 2, 2006" . }}

    + {{ end }} + {{ with .Camera }} +

    + {{ . }}

    + {{ end }} + {{ with .Lens }} +

    {{ . }}

    + {{ end }} + {{ with .FocalLength }} +

    {{ . }}mm

    + {{ end }} + {{ with .fStop }} +

    ƒ/{{ . }}

    + {{ end }} +
    +
    + +     \ No newline at end of file diff --git a/themes/hello-friend-ng/layouts/partials/toc.html b/themes/hello-friend-ng/layouts/partials/toc.html index 23a3c8ad..0c0df108 100644 --- a/themes/hello-friend-ng/layouts/partials/toc.html +++ b/themes/hello-friend-ng/layouts/partials/toc.html @@ -8,6 +8,9 @@

    In this post

      {{ range $i, $header := $headers }} + {{ if strings.Contains $header "albumCardTitle" }} + {{ continue }} + {{ end }} {{ $currentHeaderLevelString := index (findRE "[2-4]" $header 1) 0 }} {{ $currentHeaderLevel := len (seq $currentHeaderLevelString) }} {{ $anchorId := (replaceRE "[’/_]" "-" ($header | htmlUnescape | plainify | htmlEscape)) | urlize }} diff --git a/themes/hello-friend-ng/layouts/shortcodes/album.html b/themes/hello-friend-ng/layouts/shortcodes/album.html new file mode 100644 index 00000000..04846caf --- /dev/null +++ b/themes/hello-friend-ng/layouts/shortcodes/album.html @@ -0,0 +1,7 @@ +{{ $albumName := print "/albums/" (index .Params 0) ".md" }} +{{ $album := .Site.GetPage $albumName }} +{{ with $album }} +
      +{{ partial "albumCard.html" . }} +
      +{{ end }} \ No newline at end of file diff --git a/themes/hello-friend-ng/layouts/shortcodes/albumImage.html b/themes/hello-friend-ng/layouts/shortcodes/albumImage.html new file mode 100644 index 00000000..7886ba62 --- /dev/null +++ b/themes/hello-friend-ng/layouts/shortcodes/albumImage.html @@ -0,0 +1,9 @@ +{{ $albumName := print "/albums/" (index .Params 0) ".md" }} +{{ $imageIndex := index .Params 1}} +{{ $album := .Site.GetPage $albumName }} +{{ $image := index $album.Params.Pictures $imageIndex }} +{{ with $image }} +
      + {{ partial "singleImage.html" . }} +
      +{{ end }} \ No newline at end of file