Add missing thumbnails for new applications

classes/models/FrmApplicationTemplate.php

@@ -41,23 +41,48 @@ public static function init() {
 			'frm_application_data_keys',
 			array( 'key', 'name', 'description', 'link', 'categories', 'views', 'forms' )
 		);
-		self::$keys_with_images = self::get_template_keys_with_local_images();
+		self::$keys_with_images = array_merge(
+			self::get_template_keys_with_local_png_images(),
+			self::get_template_keys_with_local_webp_images()
+		);
 		self::$categories       = array();
 	}
 
+	/**
+	 * Newer templates now use .webp files instead of .png.
+	 *
+	 * @since x.x
+	 *
+	 * @return array<string>
+	 */
+	private static function get_template_keys_with_local_webp_images() {
+		return array(
+			'member-directory',
+			'link-in-bio-instagram',
+			'letter-of-recommendation',
+			'invoice-pdf',
+			'freelance-invoice-generator',
+			'contract-agreement',
+			'charity-tracker',
+			'certificate',
+			'testimonials',
+		);
+	}
+
 	/**
 	 * Return the template keys that have embedded images. Otherwise, we want to avoid trying to load the URL and use the placeholder instead.
 	 *
 	 * @return array<string>
 	 */
-	private static function get_template_keys_with_local_images() {
+	private static function get_template_keys_with_local_png_images() {
 		return array(
 			'business-hours',
 			'faq-template-wordpress',
 			'restaurant-menu',
 			'team-directory',
 			'product-review',
 			'real-estate-listings',
+			'business-directory',
 		);
 	}
 
@@ -153,6 +178,7 @@ function ( $category ) {
 		}//end foreach
 
 		$application['hasLiteThumbnail'] = in_array( $application['key'], self::$keys_with_images, true );
+		$application['isWebp']           = in_array( $application['key'], self::get_template_keys_with_local_webp_images(), true );
 
 		if ( ! array_key_exists( 'url', $application ) ) {
 			$purchase_url = $this->is_available_for_purchase();

js/admin/applications.js

@@ -320,7 +320,7 @@
 
 		function getCardContent() {
 			const thumbnailFolderUrl = getUrlToApplicationsImages() + 'thumbnails/';
-			const filenameToUse = data.hasLiteThumbnail ? data.key + '.png' : 'placeholder.svg';
+			const filenameToUse = data.hasLiteThumbnail ? data.key +  ( data.isWebp ? '.webp' : '.png' ) : 'placeholder.svg';
 			return div({
 				className: 'frm-application-card-image-wrapper',
 				child: img({ src: thumbnailFolderUrl + filenameToUse })

js/src/form-templates/elements/applicationTemplatesElement.js

@@ -60,9 +60,9 @@ export function createApplicationTemplates( applications ) {
  * @return {HTMLElement} Element representing a single application template.
  */
 function createTemplateItem( template ) {
-	const { name, key, hasLiteThumbnail } = template;
+	const { name, key, hasLiteThumbnail, isWebp } = template;
 	const thumbnailURL = hasLiteThumbnail ?
-		`${thumbnailBaseURL}/${key}.png` :
+		( isWebp ? `${thumbnailBaseURL}/${key}.webp` : `${thumbnailBaseURL}/${key}.png` ) :
 		`${thumbnailBaseURL}/placeholder.svg`;
 
 	return tag( 'li', {

tests/cypress/e2e/Form Templates/FormTemplates.cy.js

@@ -211,7 +211,7 @@ describe("Form Templates page", () => {
             .within(() => {
                 cy.get('div.frm-form-templates-item-icon img')
                     .should('have.attr', 'src')
-                    .and('include', 'placeholder.svg');
+                    .and('include', 'business-directory.png');
 
                 cy.get('span.frm-meta-tag.frm-orange-tag')
                     .should('have.text', 'Ready Made Solution');