I wanted to change the resolution of the generated thumbnails images located in my posts section page of my personal WordPress site (http://www.astralmemories.com/mywork/).
The original images have square-shaped resolutions while the generated thumbnail images had rectangle-shaped resolutions that cut some portions of the images.
I needed to generate new square-shaped thumbnails for all my posts feature images, for this, I used the “AJAX Thumbnail Rebuild” WordPress module: https://wordpress.org/plugins/ajax-thumbnail-rebuild/
Then, I used the following JavaScript code to change the resolution and the image source of the thumbnails to use the new generated square-shaped thumbnails:
<script>
/* Define function for escaping user input to be treated as
a literal string within a regular expression */
function escapeRegExp(string)
{
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
/* Define functin to find and replace specified term with replacement string */
function replaceAll(str, term, replacement)
{
return str.replace(new RegExp(escapeRegExp(term), 'g'), replacement);
}
/* Change the Height and the source image address */
var i;
for (i = 0; i < document.querySelectorAll('.wp-post-image, img').length; i++)
{
/* Change the Height */
document.querySelectorAll('.wp-post-image, img')[i].height = 200;
/* Change the address of the source image */
/* Use our replaceAll() function */
var myStr = document.querySelectorAll('.wp-post-image, img')[i].src;
var newStr = replaceAll(myStr, '200x133', '200x200')
document.querySelectorAll('.wp-post-image, img')[i].src = newStr;
}
</script>
I saved this code in a Custom HTML widget without a title that gets rendered on the blog page where all the posts are shown.