Create Jekyll image path structure

[ItsLaszlo]

Overview

Research how to src image urls using liquid syntax instead of hardcoding the path to avoid incorrect paths with future restructuring of site.

Action Items

• Research how to src image urls using liquid syntax instead of hardcoding the path to avoid incorrect paths with future restructuring of site.
• Make sure nothing breaks
• please include a comment on issue Create a Standard Website Page Template for Wiki #1027 and how you did it
• create new issues to rewrite image paths using liquid syntax if its possible

Resources/Instructions

https://jekyllrb.com/docs/
https://yaml.org/
@alyssabenipayo

[csseu]

Here's one way I found to make it work:

• Update _config.yml to include a custom variable
  imgdir: https://www.hackforla.org/assets/images/
• In the .html or .md files, refer to the new custom variable using e.g., {{site.imgdir}}
  <img src="{{site.imgdir}}/about-us/about-us-header.svg">

I'll poke around a little more and see if we can fold the asset/images/[subdir] part as well.

[akibrhast]

@ruqpyL2 In regards to your solution above. What about a situation when you are adding a new image on a branch that does not exist yet on the live repo/site

Having imgdir: https://www.hackforla.org/assets/images/ will result in :

<img src="https://www.hackforla.org/assets/images/new-page/new-page-image.svg"> .

Which would prevent images from rendering during development because this is not a valid url yet (https://www.hackforla.org/assets/images/new-page/new-page-image.svg). I think you are down the right path tough with the custom variable. Could you please figure out an alternative that would not result in a break in the above situation?

[csseu]

@ruqpyL2 In regards to your solution above. What about a situation when you are adding a new image on a branch that does not exist yet on the live repo/site

Instead of hard coding the root we could
imgdir: assets/images
(this actually gets us back to what Martha originally had IIRC)

[csseu]

Another way to do it, instead of editing _config.yml, would be to define in each page front matter something like
(using about-us.html as an example):

--- layout: default title: About Us imgdir: assets/images/about-us/ ---
Then reference the variable {{page.imgdir}}

FWIW, I wanted to be able to reference the url variable in the imgdir variable, but it seems like there's no way to natively do this.
Stack overflow.

[akibrhast]

Instead of hard coding the root we could
imgdir: assets/images
(this actually gets us back to what Martha originally had IIRC)

Can you apply this change you mentioned in this file/folder
https://github.com/hackforla/website/blob/gh-pages/events/our-locations-content.html

and ensure that everything renders correctly?