chore: Refactor images patterns

_config.yml

@@ -3,6 +3,11 @@ analytics:
   provider: google-gtag
   google:
     tracking_id: GTM-KMVB8C2
+assets:
+  css: /css/
+  img: /images/
+  js: /scripts/
+  thumbs: /images/thumbs/
 author:
   en: Digital Transformation Office
   fr: Bureau de la transformation numérique

_includes/components/gc-complex-img.html

@@ -1,6 +1,6 @@
 {%- assign file = site.static_files | where: "lang", page.lang | find_exp: "item", "item.path contains include.file" -%}
 <figure class="gc-complex-img" role="group">
-	<img alt="{{ include.alt }}" src="{{ file.path | remove_first: '/' | remove_first: page.lang }}">
+	<img alt="{{ include.alt }}" src="{{ file.path | absolute_url }}">
 	<figcaption>
 		{%- if include.summary -%}
 			{%- if include.caption != "" -%}

_includes/components/gc-simple-img.html

@@ -1,6 +1,6 @@
 {%- assign file = site.static_files | where: "lang", page.lang | find_exp: "item", "item.path contains include.file" -%}
 <div class="panel panel-default">
 	<figure class="panel-body">
-		<img class="img-responsive center-block" alt="{{ include.alt }}" title="{{ include.alt }}" src="{{ file.path | remove_first: '/' | remove_first: page.lang }}">
+		<img class="img-responsive center-block" alt="{{ include.alt }}" title="{{ include.alt }}" src="{{ file.path | absolute_url }}">
 	</figure>
 </div>

_includes/metadata.html

@@ -37,16 +37,21 @@
 <meta property="twitter:title" content="{{ page.title }}" />
 {%- endif -%}
 <meta property="og:locale" content='{{ page.lang | append: '_CA' }}' />
-<meta property="og:url" content="{{ site.urlalt[ page.lang ] }}{{ page.url | remove_first: '/' | remove_first: page.lang }}" />
+<meta property="og:url" content="{{ page.url | absolute_url }}" />
 {%- if page.image -%}
-	{%- capture ogimage -%}{{ page.lang | prepend: '/' }}/images/{{ page.date | date: "%F" | prepend: "og-" }}.png{%- endcapture -%}
-	{%- assign file_exists = site.static_files | where: "path", ogimage -%}
-	{%- if file_exists[0].path -%}
-<meta property="og:image" content="{{ site.urlalt[ page.lang ] }}{{ ogimage | remove_first: '/' | remove_first: page.lang }}" />
-<meta property="twitter:image" content="{{ site.urlalt[ page.lang ] }}{{ ogimage | remove_first: '/' | remove_first: page.lang }}" />
+	{%- capture ogimage -%}{{ site.assets.img }}{{ page.date | date: "%F" | prepend: "og-" }}.png{%- endcapture -%}
+	{%- capture twitterimage -%}{{ site.assets.img }}{{ page.date | date: "%F" | prepend: "og-twitter-" }}.png{%- endcapture -%}
+	{%- assign og-file = site.static_files | where: "lang", page.lang | find_exp: "item", "item.path contains ogimage" -%}
+	{%- assign og-twitter-file = site.static_files | where: "lang", page.lang | find_exp: "item", "item.path contains twitterimage" -%}
+	{%- if og-file.path -%}
+<meta property="og:image" content="{{ og-file.path | absolute_url }}" />
 	{%- else -%}
-<meta property="og:image" content="{{ site.urlalt[ page.lang ] }}/images/thumbs/{{ page.date | date: "%F" }}.png" />
-<meta property="twitter:image" content="{{ site.urlalt[ page.lang ] }}/images/thumbs/{{ page.date | date: "%F" }}.png" />
+<meta property="og:image" content="{{ site.assets.img }}{{ page.date | date: "%F" }}.png" />
+	{%- endif -%}
+	{%- if og-twitter-file.path -%}
+<meta property="twitter:image" content="{{ og-twitter-file.path | absolute_url }}" />
+	{%- else -%}
+<meta property="twitter:image" content="{{ site.assets.img }}{{ page.date | date: "%F" }}.png" />
 	{%- endif -%}
 	{%- if page.image.height -%}
 <meta property="og:image:height" content="{{ page.image.height }}" />

en/index.md

@@ -1,6 +1,9 @@
 ---
 altLangPage: /index
-page: 2019-01-29
+breadcrumbs:
+  - title: "About Canada.ca"
+    link:  "https://www.canada.ca/en/government/about.html"
+date: 2019-01-29
 dateModified: 2021-05-10
 description: Evidence and insights from the Canada.ca team.
 layout: default
@@ -22,12 +25,14 @@ title: Canada.ca blog
 {%- assign posts = site.posts | where: "lang", page.lang -%}
 {%- if posts.size > 0 -%}
 	{%- for post in posts limit:3 -%}
+    {%- assign thumbnail = post.date | date: "%F" | prepend: "/thumbs/" -%}
+    {%- assign file = site.static_files | where: "lang", page.lang | find_exp: "item", "item.path contains thumbnail" -%}
 	<div class="col-md-4">
 		<div class="hght-inhrt">
 			<div class="hidden-xs hidden-sm">
-				<img src="/images/thumbs/{{ post.date | date: "%F" }}.png" alt="{{ post.title }}" class="img-responsive mrgn-bttm-md thumbnail">
+				<img src="{{ file.path | absolute_url }}" alt="{{ post.title }}" class="img-responsive mrgn-bttm-md thumbnail">
 			</div>
-			<h3><a href="{{ post.url | remove_first: '/' | remove_first: page.lang }}" class="stretched-link">{{ post.title }}</a></h3>
+			<h3><a href="{{ post.url | absolute_url }}" class="stretched-link">{{ post.title }}</a></h3>
 			<p>{{ post.description }}</p>
 			<p class="small"><time datetime="{{ post.date | date: "%F" }}" class="nowrap">[{% include locale-date.html date=post.date format="%-d %B %Y" %}]</time></p>
 		</div>

fr/index.md

@@ -1,5 +1,8 @@
 ---
 altLangPage: /index
+breadcrumbs:
+  - title: "A propos de Canada.ca"
+    link:  "https://www.canada.ca/fr/gouvernement/a-propos.html"
 date: 2019-01-29
 dateModified: 2021-05-10
 description: Validations et perspectives de l’équipe Canada.ca.
@@ -22,12 +25,14 @@ title: Blogue de Canada.ca
 {%- assign posts = site.posts | where: "lang", page.lang -%}
 {%- if posts.size > 0 -%}
 	{%- for post in posts limit:3 -%}
+    {%- assign thumbnail = post.date | date: "%F" | prepend: "/thumbs/" -%}
+    {%- assign file = site.static_files | where: "lang", page.lang | find_exp: "item", "item.path contains thumbnail" -%}
 	<div class="col-md-4">
 		<div class="hght-inhrt">
 			<div class="hidden-xs hidden-sm">
-				<img src="/images/thumbs/{{ post.date | date: "%F" }}.png" alt="{{ post.title }}" class="img-responsive mrgn-bttm-md thumbnail">
+				<img src="{{ file.path | absolute_url }}" alt="{{ post.title }}" class="img-responsive mrgn-bttm-md thumbnail">
 			</div>
-			<h3><a href="{{ post.url | remove_first: '/' | remove_first: page.lang }}" class="stretched-link">{{ post.title }}</a></h3>
+			<h3><a href="{{ post.url | absolute_url }}" class="stretched-link">{{ post.title }}</a></h3>
 			<p>{{ post.description }}</p>
 			<p class="small"><time datetime="{{ post.date | date: "%F" }}" class="nowrap">[{% include locale-date.html date=post.date format="%-d %B %Y" %}]</time></p>
 		</div>