unlockopen / www.unlockopen.com-v4

V4 of the UnlockOpen website
0 stars 1 forks source link

Consider storing images with the articles #32

Closed tobie closed 3 months ago

tobie commented 5 months ago

See article.

madrilene commented 3 months ago

Have you considered this? As I am working on https://github.com/unlockopen/www.unlockopen.com-v4/issues/14, I need the square version, so maybe we could store two images using the same name as the directory, appending "-square" for the second?

tobie commented 3 months ago

Could you estimate how much time setting that up would actually take?

madrilene commented 3 months ago

Maybe an hour?

I'd do that:

Store images and .md in directories by the same name, like

├── developers-apetite
│   ├── developers-appetite.jpg
│   ├── developers-appetite.jpg.yml
│   ├── developers-appetite.md
│   └── developers-appetite-square.jpg

referencing that image path in the article layout, defaulting to jpg (if the file ending differs, I'd set that in the front matter, I think that is most straight forward - if you have another idea let me know! The square image can then be referenced as well for the og-images.njk.

So a front matter that differs from the jpg-standard would look like:

---
title: Behold second-order consequences!
date: 2019-03-05
image:
  extension: ".png"
  caption: "Alexandria Ocasio-Cortez's unique approach to fundraising also allows her to spend more time supporting fellow democrat candidtes like Kerri Evelyn Harris pictured here."
lede: "Alexandria Ocasio-Cortez's unique approach to fundraising not only sets her apart in Congress but also highlights the unexpected benefits of second-order consequences—a concept that proves equally transformative in the realm of open source software, where the true value lies beyond the code itself."
---

I'd also edit image-metadata-index.js so it takes the new dir into consideration. I would still keep the general assets/images folder for other images.

madrilene commented 3 months ago

Referencing the image automatically for the layout would be like:

  {% set imagePath = page.inputPath | replace(".md", image.extension or ".jpg") %}
  {% image imagePath, image.alt, page.data.image.caption, "eager", "featured" %}

So you don't have to set the path anymore, only the extension in case it's not .jpg

tobie commented 3 months ago

Sounds great!

madrilene commented 3 months ago

What about additional images like

![Painting of Gaius Maecenas by Gerard de Lairesse](./assets/images/articles/Lairesse_Maecenas.jpg)

Would you want it to also live in the same place, or keep it in the general assets folder?

tobie commented 3 months ago

With the blog post