Merge pull request #77 from dcooney/feature/image-sizes

Feature/image sizes
dcooney · Nov 22, 2024 · 13259c2 · 13259c2
2 parents dbfb6a6 + dbca42d
commit 13259c2
Show file tree

Hide file tree

Showing 103 changed files with 24,819 additions and 14,743 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,11 @@
+*.min.{js,jsx,ts,tsx,md,html,json,yml}
+!/.*.{js,jsx,ts,tsx,md,html,json,yml}
+.*.{js,jsx,ts,tsx,md,html,json,yml}
+
+build/
+node_modules/
+vendor/
+dist/
+
+README.md
+style.css
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+	singleQuote: true,
+	printWidth: 160,
+};
diff --git a/README.txt b/README.txt
@@ -1,18 +1,17 @@
-=== Instant Images - One Click Image Uploads from Unsplash, Openverse, Pixabay and Pexels ===
+=== Instant Images - One-click Image Uploads from Unsplash, Openverse, Pixabay, Pexels, and Giphy ===
 Contributors: dcooney, connekthq
-Donate link: <https://connekthq.com/donate/>
-Tags: Unsplash, Openverse, Pixabay, Pexels, Stock Photos, photos, stock photo, image upload, upload, free photos
+Tags: Unsplash, Openverse, Pixabay, Pexels, giphy, Stock Photos, photos, free photos
 Requires at least: 5.0
 Tested up to: 6.7
-Stable tag: 6.2.3
+Stable tag: 7.0.0
 License: GPLv2 or later
 License URI: <http://www.gnu.org/licenses/gpl-2.0.html>
 
-One click image uploads from Unsplash, Openverse, Pixabay, & Pexels directly to your WordPress media library.
+One-click uploads from Unsplash, Openverse, Pixabay, Pexels, and Giphy directly to your WordPress media library.
 
 == Description ==
 
-Instantly upload photos from Unsplash, Openverse, Pixabay or Pexels to your website all without ever leaving WordPress!
+Instantly upload photos from Unsplash, Openverse, Pixabay, Pexels, and Giphy to your website all without ever leaving WordPress!
 
 **Instant Images** is the fastest and easiest way to upload high quality **FREE** photos from your favorite stock photo communities directly to your WordPress media library.
 
@@ -22,6 +21,7 @@ Instantly upload photos from Unsplash, Openverse, Pixabay or Pexels to your webs
 - [Openverse](https://wordpress.org/openverse/)
 - [Pixabay](http://pixabay.com)
 - [Pexels](http://pexels.com)
+- [Giphy](http://giphy.com)
 
 [youtube <https://www.youtube.com/watch?v=s6Q7Kfi2f1c>]
 
@@ -51,9 +51,12 @@ Enhance the Instant Images experience with a suite of premium features and added
 
 **What's Included:**
 - Search History & Autocomplete.
-- Instant Images Gutenberg Block.
+- Instant Images as a WordPress Block.
 - WordPress CLI Imports.
 - Batch Image Imports.
+- I'm Feeling Lucky WordPress Block.
+- Image Size Generator.
+- Instant Featured Images
 - Images Filters (Instagram).
 - Maintain current search term while switching image providers.
 - And more...
@@ -124,6 +127,9 @@ No, we provide an API for you to use, however you can get your own by signing up
 = Do I need an account at Openverse? =
 No, an Openverse account is not required.
 
+= Do I need an account at Giphy? =
+No, we provide an API for you to use, however you can get your own by signing up for a free account at [Giphy](https://developers.giphy.com/). When you sign up be sure to choose the "Select API" option and choose the "Giphy API" option.
+
 == Installation ==
 
 How to install Instant Images.
@@ -160,6 +166,17 @@ How to install Instant Images.
 
 == Changelog ==
 
+= 7.0.0 - November 22, 2024 =
+* NEW: Added Giphy integration!
+* NEW: Added Image Size functionality to Instant Images settings.
+* NEW: Added required functionality to add image size with the Extended add-on.
+* FIX: Fixed potential issue with image file extensions being incorrect for png and jpeg files.
+* FIX: Fixed issue with Extended add-on search history and indexing `ID` searches.
+* FIX: Fixed issue with new WooCommerce product screens throwing JS errors and causing the page to load as a white screen.
+* UPDATE: Updated Unsplash image filters as their API was updated recently.
+* UPDATE: Updated all plugin NPM dependencies and packages.
+* UPDATE: Various UI and UX improvements.
+
 = 6.2.3 - November 8, 2024 =
 * HOTFIX: Removed .wp-block styles in Instant Images CSS.
 

diff --git a/admin/admin.php b/admin/admin.php
@@ -309,9 +309,15 @@ function instant_images_display_licenses() {
 	<?php
 	if ( ! $installed ) {
 		?>
-		<div class="license-settings--empty">
-			<p><?php esc_attr_e( 'You do not have any Instant Images add-ons installed.', 'instant-images' ); ?></p>
-			<p><a class="button button-primary" href="<?php echo esc_url( INSTANT_IMAGES_ADDONS_URL ); ?>" target="_blank"><?php esc_attr_e( 'Browse Add-ons', 'instant-images' ); ?></a></p>
+		<div class="license-settings--empty instant-images-callout">
+			<p>
+				<?php esc_attr_e( 'You do not have any Instant Images add-ons installed.', 'instant-images' ); ?>
+			</p>
+			<p>
+				<a class="button button-primary" href="<?php echo esc_url( INSTANT_IMAGES_ADDONS_URL ); ?>" target="_blank">
+					<?php esc_attr_e( 'Browse Add-ons', 'instant-images' ); ?>
+				</a>
+			</p>
 		</div>
 		<?php
 	}

diff --git a/admin/includes/settings/image-sizes.php b/admin/includes/settings/image-sizes.php
@@ -0,0 +1,81 @@
+<?php
+/**
+ * Image Sizes template.
+ *
+ * @package InstantImages
+ */
+
+$extended_active = InstantImages::instant_images_addon_valid_license( 'extended' ) && defined( 'INSTANT_IMAGES_EXTENDED_PATH' );
+$extended_url    = INSTANT_IMAGES_ADDONS_URL . 'extended/?utm_source=WPAdmin&utm_medium=InstantImages&utm_campaign=image-sizes'
+?>
+<section class="settings-entry" id="image-sizes">
+	<div class="settings-entry--title">
+		<i class="fa fa-file-image-o" aria-hidden="true"></i>
+		<h2><?php esc_attr_e( 'Image Sizes', 'instant-images' ); ?></h2>
+		<p><?php esc_attr_e( 'Create, manage, and view your active WordPress image sizes.', 'instant-images' ); ?></p>
+	</div>
+	<div class="settings-entry--action instant-images-extended-image-sizes">
+		<!-- Add Sizes -->
+		<div class="instant-images-extended-image-sizes--add<?php echo ! $extended_active ? ' not-installed' : ''; ?>">
+			<h3><?php esc_attr_e( 'Add Image Size', 'instant-images' ); ?></h3>
+			<p><?php esc_attr_e( 'Enter a name, width, and height for your custom image size.', 'instant-images' ); ?></p>
+			<?php if ( ! $extended_active ) { ?>
+			<form>
+				<div class="instant-images-callout-cta">
+					<div>
+						<p>
+						<?php
+						// translators: Add-on URL.
+						echo sprintf ( __( 'Adding custom image sizes is available with the %1$s<strong>Extended add-on</strong>%2$s.', 'instant-images' ), '<a href="' . $extended_url . '" target="_blank">', '</a>' ); ?>
+						</p>
+						<p>
+							<a class="button button-primary" href="<?php echo esc_url( $extended_url ); ?>" target="_blank">
+								<?php esc_attr_e( 'Upgrade Now', 'instant-images' ); ?>
+							</a>
+						</p>
+					</div>
+				</div>
+				<div class="instant-images-extended-image-sizes--elements">
+					<div>
+						<label for="instant-images-image-size-name"><?php _e( 'Name', 'instant-images' ); ?></label>
+						<input type="text" id="instant-images-image-size-name">
+					</div>
+					<div>
+						<label for="instant-images-image-size-width"><?php _e( 'Width (px)', 'instant-images' ); ?></label>
+						<input type="number" min="0" id="instant-images-image-size-width" value="1600">
+					</div>
+					<div>
+						<label for="instant-images-image-size-height"><?php _e( 'Height (px)', 'instant-images' ); ?></label>
+						<input type="number" min="0" id="instant-images-image-size-height" value="900">
+					</div>
+					<div>
+						<label for="instant-images-image-size-crop"><?php _e( 'Crop', 'instant-images' ); ?></label>
+						<select id="instant-images-image-size-crop">
+							<option value="0"><?php _e( 'No', 'instant-images' ); ?></option>
+							<option value="1"><?php _e( 'Yes', 'instant-images' ); ?></option>
+						</select>
+					</div>
+				</div>
+				<div class="instant-images-extended-image-sizes--controls">
+					<button class="button button-primary" id="instant-images-add-image-size"<?php echo !$extended_active ? ' disabled' : ''; ?>>
+						<?php esc_attr_e( 'Add Image Size', 'instant-images' ); ?>
+					</button>
+				</div>
+			</form>
+			<?php } else { ?>
+				<div id="instant-images-extended-image-sizes--app"></div>
+			<?php } ?>
+		</div>
+
+		<!-- Current Sizes -->
+		<div class="instant-images-extended-image-sizes--current-sizes">
+			<h3><?php esc_attr_e( 'Current Image Sizes', 'instant-images' ); ?></h3>
+			<p><?php esc_attr_e( 'Image sizes listed below are currently enabled on your site.', 'instant-images' ); ?></p>
+			<div>
+				<div class="scroll-section scroll-section--small" id="instant-images-image-sizes">
+					<?php echo InstantImages::instant_images_display_image_sizes(); ?>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/admin/src/js/admin.js b/admin/src/js/admin.js
@@ -1,26 +1,22 @@
-import "./licenses";
+import './licenses';
 
 const instant_images = instant_images || {};
 jQuery(document).ready(function ($) {
-	"use strict";
+	'use strict';
 
 	// Media Uploader Modal
 	instant_images.setEditor = function (frame) {
 		const Parent = wp.media.view.Router;
 		wp.media.view.Router = Parent.extend({
 			addNav() {
 				// Button
-				const $a = $(
-					'<a href="#" class="media-menu-item"><i class="fa fa-bolt" aria-hidden="true"></i> ' +
-						instant_img_localize.instant_images +
-						"</a>"
-				);
+				const $a = $('<a href="#" class="media-menu-item"><i class="fa fa-bolt" aria-hidden="true"></i> ' + instant_img_localize.instant_images + '</a>');
 
 				// Click event
-				$a.on("click", function (e) {
+				$a.on('click', function (e) {
 					e.preventDefault();
 					// Set active state of #instant_images_modal
-					frame.addClass("active");
+					frame.addClass('active');
 				});
 
 				this.$el.append($a); // append
@@ -34,79 +30,75 @@ jQuery(document).ready(function ($) {
 		});
 
 		if (frame.length) {
-			$(".close-ii-modal").on("click", function (e) {
+			$('.close-ii-modal').on('click', function (e) {
 				e.preventDefault();
-				frame.removeClass("active");
+				frame.removeClass('active');
 			});
 		}
 	};
 
 	if (wp.media) {
-		const frame = $("#instant_images_modal");
+		const frame = $('#instant_images_modal');
 		if (frame.length) {
 			instant_images.setEditor(frame);
 		}
 	}
 
 	// Close Modal.
-	$(document).on("click", ".media-modal-backdrop", function (e) {
+	$(document).on('click', '.media-modal-backdrop', function (e) {
 		e.preventDefault();
-		frame.removeClass("active");
+		frame.removeClass('active');
 	});
 
 	// Save Settings Form.
-	$(".instant-images-settings form.settings").on("submit", function () {
+	$('.instant-images-settings form.settings').on('submit', function () {
 		const form = $(this);
-		form.addClass("saving");
-		$(".save-settings .loading", form).addClass("active");
-		$(".save-settings #submit", form).prop("disabled", true);
+		form.addClass('saving');
+		$('.save-settings .loading', form).addClass('active');
+		$('.save-settings #submit', form).prop('disabled', true);
 		$(this).ajaxSubmit({
 			success() {
-				$(".save-settings .loading", form).removeClass("active");
+				$('.save-settings .loading', form).removeClass('active');
 				setTimeout(function () {
-					$(".save-settings .saved", form).addClass("active");
+					$('.save-settings .saved', form).addClass('active');
 					setTimeout(function () {
-						$(".save-settings .saved", form).removeClass("active");
-						form.removeClass("saving");
-						$(".save-settings #submit", form).prop("disabled", false);
+						$('.save-settings .saved', form).removeClass('active');
+						form.removeClass('saving');
+						$('.save-settings #submit', form).prop('disabled', false);
 					}, 2000);
 				}, 250);
 			},
 			error() {
-				form.removeClass("saving");
-				$(".save-settings .loading", form).removeClass("active");
-				$(".save-settings #submit", form).prop("disabled", false);
-				alert("An error occured and the settings could not be saved"); // eslint-disable-line no-alert
+				form.removeClass('saving');
+				$('.save-settings .loading', form).removeClass('active');
+				$('.save-settings #submit', form).prop('disabled', false);
+				alert('An error occured and the settings could not be saved'); // eslint-disable-line no-alert
 			},
 		});
 		return false;
 	});
 
 	// Settings anchor links.
-	const settings = document.querySelectorAll(
-		".settings_page_instant-images-settings .settings-entry"
-	);
+	const settings = document.querySelectorAll('.settings_page_instant-images-settings .settings-entry');
 	if (settings) {
 		const hash = window.location.hash;
 		if (hash) {
 			scrollToSection(hash);
 		}
-		const nav = document.querySelector(
-			".settings_page_instant-images-settings nav.jump-nav"
-		);
+		const nav = document.querySelector('.settings_page_instant-images-settings nav.jump-nav');
 		settings.forEach(function (setting) {
-			const anchor = setting.getAttribute("id");
-			const icon = setting.querySelector(".settings-entry--title .fa");
-			const text = setting.querySelector(".settings-entry--title h2").innerText;
+			const anchor = setting.getAttribute('id');
+			const icon = setting.querySelector('.settings-entry--title .fa');
+			const text = setting.querySelector('.settings-entry--title h2').innerText;
 
-			const button = document.createElement("button");
-			button.setAttribute("data-anchor", anchor);
+			const button = document.createElement('button');
+			button.setAttribute('data-anchor', anchor);
 			button.innerHTML = icon.outerHTML + text;
 			nav.appendChild(button);
 
 			// Scroll to section.
-			button.addEventListener("click", function () {
-				scrollToSection("#" + anchor);
+			button.addEventListener('click', function () {
+				scrollToSection('#' + anchor);
 			});
 		});
 	}
@@ -120,10 +112,10 @@ jQuery(document).ready(function ($) {
 function scrollToSection(hash) {
 	const target = document.querySelector(hash);
 	if (target) {
-		history.replaceState({}, "", hash);
+		history.replaceState({}, '', hash);
 		window.scrollTo({
 			top: target.offsetTop - 20,
-			behavior: "smooth",
+			behavior: 'smooth',
 		});
 	}
 }