Prepare the new UI of the Crop and Gravity Feature

[aatanasov-cloudinary]

Summary:

• The styling of the Crop and Gravity feature was improved in this PR.
• The save/usage functionality remains the same.
• Also, the example images were changed to new ones.

Approach

• Prepared the sizes to work like tabs.
• Each size tab shows either the example images (admin.php?page=cloudinary_image_settings) or the actual asset (post.php?post=4513&action=edit).
• The previous CSS and PHP code was adjusted.

QA notes

Global transformations:

• Go to admin.php?page=cloudinary_image_settings and enable the Crop and Gravity feature.
• Ensure the styling is correct.
• Add some transformations to the sizes.
• Check if the global transformations work using wp_get_attachment_image_src with an example synced asset.

Global transformations:

• Go to the edit page of an asset, and enable the Crop and Gravity feature for it.
• Add some transformations to the sizes.
• Check if the size transformations work using wp_get_attachment_image_src.

Example test code:

echo '<img src="' . wp_get_attachment_image_src( 4513, 'thumbnail' )[0] . '" />';

[gabrielcld2]

just a small typo, but otherwise this looks good and works as expected 👍

[gabrielcld2]

nitpick: This variable has a typo: it should probably be named timeout instead of timout