John Davidson

Message:

I want to add classes "overlay ratio ratio-landscape" next to "wp-block-image" and "overlay-media" next to "aligncenter size-large is-resized". Also, consider that "aligncenter size-large is-resized" these tags not used for all images.

What is now:

        <div class="wp-block-image">

        <figure class="aligncenter size-large is-resized">

What I want:

        <div class="wp-block-image overlay ratio ratio-landscape">

        <figure class="aligncenter size-large is-resized overlay-media">

---

My Answer:
To achieve this, you can use the following JavaScript code in your WordPress theme's functions.php file or in a custom JavaScript file:

javascript
jQuery(document).ready(function($) {
// Add custom classes to WordPress images
$('.wp-block-image').addClass('overlay ratio ratio-landscape');
$('.aligncenter.size-large.is-resized').addClass('overlay-media');
});


This code uses jQuery to target the specific classes you mentioned and add the custom classes to them. The `addClass()` method is used to add the specified class(es) to the selected elements.

Make sure to enqueue the JavaScript file properly in your theme to ensure that the code is loaded on the front end of your WordPress site.