Add URL input to fetch image from external source

static/scripts/imagesModal.js

@@ -19,13 +19,23 @@ export function imagesModal(modal) {
 
 		// Check/Mark the current image in the gallery
 		const currentImage = allCheckInputs.filter((el) => el.value == hiddenInput.value)
-		currentImage[0].checked = true
+		if (currentImage.length) {
+			currentImage[0].checked = true
+		} else {
+			const urlRadio = modalBody.querySelector(".input-group-text").firstElementChild
+			urlRadio.checked = true
+			const urlInput = modalBody.querySelector(".input-group").lastElementChild
+			urlInput.value = hiddenInput.value
+		}
 	})
 
 	let selectedImage
 	modalBody.addEventListener("change", (event) => {
 		if (event.target.classList.contains("form-imagecheck-input")) {
 			selectedImage = event.target.value
+		} else {
+			const urlInput = modalBody.querySelector(".input-group").lastElementChild
+			selectedImage = urlInput.value
 		}
 	})
 

views/admin/components/modals/faviconModal.html

@@ -20,6 +20,19 @@ <h5 class="modal-title" id="faviconModalLabel">Select</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
+				<small>Enter an https:// URL of an image:</small>
+				<div class="input-group mb-3">
+					<div class="input-group-text">
+						<input class="form-check-input mt-0" type="radio" name="modalSelectedFavicon" />
+					</div>
+					<input
+						type="url"
+						class="form-control"
+						placeholder="https://an-image-url.com"
+						pattern="https://.*"
+						aria-label="URL input with radio button"
+					/>
+				</div>
 				<div class="row g-2">
 					<div class="col-2">
 						<label class="form-imagecheck mb-2">

views/admin/components/modals/pageImageModal.html

@@ -20,6 +20,19 @@ <h5 class="modal-title" id="pageModalLabel">Select</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
+				<small>Enter an https:// URL of an image:</small>
+				<div class="input-group mb-3">
+					<div class="input-group-text">
+						<input class="form-check-input mt-0" type="radio" name="modalSelectedPageImage" />
+					</div>
+					<input
+						type="url"
+						class="form-control"
+						placeholder="https://an-image-url.com"
+						pattern="https://.*"
+						aria-label="URL input with radio button"
+					/>
+				</div>
 				<div class="row g-2">
 					<div class="col-2">
 						<label class="form-imagecheck mb-2">

views/admin/components/modals/postImageModal.html

@@ -20,6 +20,19 @@ <h5 class="modal-title" id="postModalLabel">Select</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
+				<small>Enter an https:// URL of an image:</small>
+				<div class="input-group mb-3">
+					<div class="input-group-text">
+						<input class="form-check-input mt-0" type="radio" name="modalSelectedPostImage" />
+					</div>
+					<input
+						type="url"
+						class="form-control"
+						placeholder="https://an-image-url.com"
+						pattern="https://.*"
+						aria-label="URL input with radio button"
+					/>
+				</div>
 				<div class="row g-2">
 					<div class="col-2">
 						<label class="form-imagecheck mb-2">

views/admin/components/modals/postPreviewFallbackImageModal.html

@@ -27,6 +27,23 @@ <h5 class="modal-title" id="postPreviewFallbackImageModalLabel">Select</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
 			<div class="modal-body">
+				<small>Enter an https:// URL of an image:</small>
+				<div class="input-group mb-3">
+					<div class="input-group-text">
+						<input
+							class="form-check-input mt-0"
+							type="radio"
+							name="modalSelectedPostPreviewFallbackImage"
+						/>
+					</div>
+					<input
+						type="url"
+						class="form-control"
+						placeholder="https://an-image-url.com"
+						pattern="https://.*"
+						aria-label="URL input with radio button"
+					/>
+				</div>
 				<div class="row g-2">
 					<div class="col-2">
 						<label class="form-imagecheck mb-2">

views/themes/default/components/head.html

@@ -1,16 +1,16 @@
 <head>
-	<% /* Metadata */ %>
+	<!-- Metadata -->
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<meta name="description" content="<%= it.data.description %>" />
 
-	<% /* Favicon */ %>
-	<link rel="shortcut icon" href="<%= `/static/${it.data.favicon}` %>" type="image/x-icon" />
-
-	<% /* Title */ %>
+	<!-- Favicon -->
+	<link rel="shortcut icon" href="<%= it.data.favicon.startsWith("https") ? it.data.favicon :
+	`/static/${it.data.favicon}` %>" type="image/x-icon" />
+	<!-- Title -->
 	<title><%= it.siteTitle %> | <%= it.data.title %></title>
 
-	<% /* Stylesheets*/ %>
+	<!-- Stylesheets -->
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss/build/pure-min.min.css" />
 	<link rel="stylesheet" href="/static/styles/styles.min.css" />
 	<% if (it.mdRoute) { %>

views/themes/default/layouts/index.html

@@ -25,7 +25,7 @@
 		<div
 			class="photo"
 			style="
-				background-image: url('<%= postFeaturedImage.startsWith(`https://`) ? postFeaturedImage : postFeaturedImage.startsWith(`images/`) ? `/static/${postFeaturedImage}` : `/static/${it.postPreviewFallbackImage}` %>');
+				background-image: url('<%= postFeaturedImage.startsWith(`https://`) ? postFeaturedImage : postFeaturedImage.startsWith(`images/`) ? `/static/${postFeaturedImage}` : it.postPreviewFallbackImage.startsWith(`https://`)	? it.postPreviewFallbackImage : `/static/${it.postPreviewFallbackImage}` %>');
 			"
 		></div>