Changing the height and the source attributes of WordPress images using JavaScript

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.

Codepen: https://codepen.io/astralmemories/pen/yLyEWzE



Leave a Reply

Your email address will not be published. Required fields are marked *