Implement Image and Text Overlays

[aatanasov-cloudinary]

Reworked and enhanced the Transformations attachment page.

Approach

• Followed the existing settings-pages.php approach for adding the additional elements to the asset edit page.
• Fixed the Video preview by creating a new video preview JS module.
• The image and video previews share the same methods. We use the same preview concept as it was before.
• Inserted the text_overlay and image_overlay columns to the db wp_cloudinary_relationships table. There are two main reasons behind that decision:
  • We need to ensure the previous Transformations field isn't affected after releasing this feature.
  • We need to have the data of the new effects separate (JSON format) so we can fill their settings easily.
• Inside the JSON of the new columns, we have a property called transformation -- this is actually used on the front-end, which is built through the other JSON data.
• Created new asset Relate methods to get/update the image and text overlays.
• Updated the edit asset Rest API endpoint to support the image and text overlays data.
• Important: even though we save the effects in different columns, when rendering the URL in the image sources, we combine them. This will ensure that other features, like Cloudinary status, show all the transformations. Also, this reduces the amount of work we need to do when building URLs.
• Each panel has its own Save button so the different types of effects are saved separately, not at once.

QA notes

• During testing, consider image and video types.

• This PR includes a DB upgrade, which happens on plugin install and checks the current and the previous Cloudinary versions.

  • When you check out this PR, change the plugin version to 3.2.15 and reinstall the plugin
  • In the wp_cloudinary_relationships table you should have the text_overlay and image_overlay columns:
    • 

• When those tables are available, go to the Media Library and add effects to an asset using that column:

  • 

• By default, those icons should be empty in the Media Library.

• Try different variations using the edit panels and ensure the preview works. If an invalid transformation is added to the free text, an alert will appear.

• When using different effects, they should be reflected here:

  • 
  • Also, when clicking on that string, a valid URL should be shown with all selected.
  • Please keep in mind that if there is no text or image, all other relevant overlay settings aren't considered in the preview because this will lead to an invalid URL.

• Test the Clear buttons and ensure they remove the added text/image.

• When saved effects, this message should appear for a few seconds.

  • 

• When we apply effects, the relevant icons should be highlighted (example):

  • 

• Test the front-end with assets that have effects and ensure the effects appear.

• Update assets with new effects and ensure they are reflected on the front-end.

• Test if all transformations appear in the Rest API as well. Example:

  • 
  • wp-json/wp/v2/media/4176

• Test the front-end with/without lazy-load enabled.

• Ensure the Cloudinary Status shows all effects and the Edit Effects text link:

  • 

[gabrielcld2]

Some minor things I've noticed, otherwise the code looks really good 👍

[gabrielcld2]

nitpick (if-minor): If I'm understanding this line correctly, it always returns an empty string, so we could change it to simply return '';

Same issue a few lines below

[gabrielcld2]

suggestion (non-blocking): Maybe we could use a variable to store that class name conditionally, that could make this a bit more readable in my opinion. Something like:

<?php $transformation_active_class = ! empty ( $transformations ) ? 'cld_transformations__icon--active' : ''; ?>
<span class="cld_transformations__icon <?php echo esc_attr( $transformation_active_class ); ?>">

The current approach works fine though. I simply find it harder to to read because we're doing multi line PHP within a class names declaration, but it might be a personal preference 🙂

Same thing for the other two <span> elements below

[gabrielcld2]

suggestion (non-blocking): Would it be worth using logical properties e.g. margin-inline-start for the CSS? I assume that would make it easier to potentially support RTL languages.

Note: this doesn't have to be done in this PR as this already an issue on the existing code, but maybe something to consider in the future.