Merge pull request #203 from Emilia-Capital/filip/remote-images-fallback

Fallback for remote host images

Author: jdevalk

assets/css/page-widgets/whats-new.css

@@ -57,4 +57,5 @@
 	border-radius: var(--prpl-border-radius);
 	box-shadow: 5px 5px 5px var(--prpl-color-gray-2);
 	border: 1px solid var(--prpl-color-gray-2);
+	background-color: var(--prpl-color-gray-1); /* Fallback, if remote host image is not accessible */
 }

assets/js/web-components/prpl-badge.js

@@ -20,6 +20,9 @@ customElements.define(
 					}"
 					alt="Badge"
 					${ false === complete ? 'style="filter: grayscale(1);opacity: 0.25;"' : '' }
+					onerror="this.onerror=null;this.src='${
+						progressPlannerBadge.placeholderImageUrl
+					}';"
 				/>
 			`;
 		}

classes/admin/class-scripts.php

@@ -102,6 +102,7 @@ public function localize_script( $handle ) {
 					'progressPlannerBadge',
 					[
 						'remoteServerRootUrl' => \progress_planner()->get_remote_server_root_url(),
+						'placeholderImageUrl' => \progress_planner()->get_placeholder_svg(),
 					]
 				);
 				break;

classes/class-base.php

@@ -144,6 +144,18 @@ public function get_remote_server_root_url() {
 			: 'https://progressplanner.com';
 	}
 
+	/**
+	 * Get the placeholder SVG.
+	 *
+	 * @param int $width The width of the placeholder image.
+	 * @param int $height The height of the placeholder image.
+	 *
+	 * @return string
+	 */
+	public function get_placeholder_svg( $width = 1200, $height = 675 ) {
+		return 'data:image/svg+xml;base64,' . base64_encode( sprintf( '<svg width="%1$d" height="%2$d" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="%3$d" height="%4$d" style="fill:#F6F5FB;stroke:#534786;stroke-width:2"/><text x="50%%" y="50%%" font-size="20" text-anchor="middle" alignment-baseline="middle" font-family="monospace" fill="#534786">progressplanner.com</text></svg>', $width, $height, ( $width - 4 ), ( $height - 4 ) ) );
+	}
+
 	/**
 	 * Get the activation date.
 	 *

views/page-widgets/latest-badge.php

@@ -37,6 +37,7 @@
 		alt="<?php echo \esc_attr( $prpl_latest_badge->get_name() ); ?>"
 		width="1200"
 		height="675"
+		onerror="this.onerror=null;this.src='<?php echo \esc_url( \progress_planner()->get_placeholder_svg() ); ?>';"
 	/>
 	<?php if ( 'no-license' !== \get_option( 'progress_planner_license_key', 'no-license' ) && ! \progress_planner()->is_local_site() ) : ?>
 		<?php