Merge pull request #646 from kernvalley/feature/mayor-event-images

Add images to Mayor Events

Author: shgysk8zer0

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v3.0.7] - 2024-01-29
+
+### Added
+- Add image to Whiskey Flat Mayor Events
+
+### Changed
+- Update `@kernvalley/components` to 1.1.4
+
 ## [v3.0.6] - 2024-01-21
 
 ### Added

_config.yml

@@ -2,7 +2,7 @@ author: Chris Zuber
 title: Whiskey Flat Days
 url: 'https://whiskeyflatdays.com'
 markdown: kramdown
-version: 3.0.6
+version: 3.0.7
 timezone: America/Los_Angeles
 lang: en
 dir: ltr

_data/app.yml

@@ -2,7 +2,7 @@
 name: Whiskey Flat Days
 shortName: WFD App
 id: WhiskeyFlatDays
-version: 3.0.6
+version: 3.0.7
 start_url: /?utm_source=homescreen&utm_medium=pwa
 display: standalone
 description: "Map, events, store, and news app for Whiskey Flat Days"

_data/importmap.yml

@@ -10,7 +10,7 @@ imports:
   '@shgysk8zer0/jswaggersheets/': https://unpkg.com/@shgysk8zer0/jswaggersheets@1.1.0/
   '@shgysk8zer0/http-status': https://unpkg.com/@shgysk8zer0/http-status@1.1.1/http-status.js
   '@shgysk8zer0/components/': https://unpkg.com/@shgysk8zer0/components@0.1.6/
-  '@kernvalley/components/': https://unpkg.com/@kernvalley/components@1.1.3/
+  '@kernvalley/components/': https://unpkg.com/@kernvalley/components@1.1.4/
   '@webcomponents/custom-elements': >-
     https://unpkg.com/@webcomponents/custom-elements@1.6.0/custom-elements.min.js
   leaflet: https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js

_layouts/mayor.html

@@ -118,8 +118,10 @@ <h3 class="clearfix">
 								{% else %}
 									<strong class="mayor-event-name underline" itemprop="name">{{ event.name }}</strong>
 									{% endif %}
-								<br /><br />
 							</div>
+							<figure itemprop="image" itemtype="https://schema.org/ImageObject" itemscope="">
+								<img src="{{ event.image | default: page.image }}" class="mayor-event-image" width="640" alt="{{ event.name | xml_escape }} Event Image" loading="lazy" itemprop="url" decoding="async" referrerpolicy="no-referrer" crossorigin="anonymous" />
+							</figure>
 							<div class="mayor-event-datetime">
 								{% include common/icon.html icon="calendar" height="16" width="16" fill="currentColor" %}
 								<time itemprop="startDate" datetime="{{ event.startDate | date_to_xmlschema }}">

css/mayors.css

@@ -38,6 +38,17 @@
 	gap: 1.2rem;
 }
 
+.mayor-event-image {
+	aspect-ratio: 4 / 3;
+	object-fit: cover;
+	object-position: center;
+	display: block;
+	width: 640px;
+	max-width: 95%;
+	height: auto;
+	margin: 2em auto;
+}
+
 .btn.event-share-btn {
 	margin-top: 0.8em;
 	font-size: 1.1rem;

js/mayor-events.js

@@ -26,5 +26,9 @@ customElements.whenDefined('wfd-mayor-events').then(HTMLWFDMayorEventsElement =>
 		events.showDescription = true;
 	}
 
+	if (params.has('image')) {
+		events.showImage =  true;
+	}
+
 	document.body.appendChild(events);
 });

mayors/embed.html

@@ -13,7 +13,7 @@
 		<title>Whiskey Flat Mayor Race Embed</title>
 		<script type="application/javascript" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-h2kgNESJV1KN7BmHtXZv1j5WMcwFojESsbaNydwul3t6bqHOmzVMDaDXAEe6XLC+" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.0/all.min.js" fetchpriority="high" defer=""></script>
 		<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-55L/wO9o0uIVTeubRIDQB4bewfNqyxrj4OXuxlW24NMEk+ioZwMHVw/tFV78mM+k" src="https://unpkg.com/@shgysk8zer0/kazoo@0.3.1/harden.js" fetchpriority="auto"></script>
-		<script type="application/javascript" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-4bvWx90pvspl1OvEHvBxVbktXn9+rfwtUdP3TFfGQllBZhCceb211St4jr5Qr0nF" src="https://unpkg.com/@kernvalley/components@1.1.3/wfd/mayor-events.min.js" fetchpriority="auto" defer=""></script>
+		<script type="application/javascript" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-+BYeso/TV8BKMvLTBhzlz57DM/k1dsohx3ZuETlVvJawmJgvf9HWT0cQJnFEdvBs" src="https://unpkg.com/@kernvalley/components@1.1.4/wfd/mayor-events.min.js" fetchpriority="auto" defer=""></script>
 		<script type="application/javascript" referrerpolicy="no-referrer" src="/js/mayor-events.js" defer=""></script>
 		<link rel="icon" href="/img/favicon.svg" type="image/svg+xml" sizes="150x150" />
 		<link rel="shortcut icon" href="/favicon.ico" />

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "whiskey-flat-days",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "private": true,
   "type": "module",
   "description": "Map, events, store, and news app for Whiskey Flat Days",