skip to Main Content

I am currently modifying a WordPress theme that happens to be a Divi child theme.

I am experiencing an issue where all images on new products are being replaced with a 400×400 thumbnail. I have disabled thumbnails via Settings->Media and setting everything to 0 and unchecking the option for thumbnails to be auto sized.

My issue is the thousands of images that have been uploaded by the customer are still showing as 400×400. I would like to resize these images by simply removing the “-400×400” substring from the image src via jQuery.

Below is the code that I have written do this; however, I receive no error but it doesn’t correct my problem.

Is anyone aware of how I should be doing this or maybe why my code doesn’t throw an error but doesn’t function either?

var $imgs = $("img.wp-post-image");
$imgs.each(function () {
    if ($(this).attr("src").indexOf("-400x400") >= 0) {
        var $newsrc = $(this).attr("src").replace("-400x400", "");
        $(this).attr("src", $newsrc);
        $(this).attr("width", "304");
        $(this).attr("height", "400");



  1. You need to ensure your custom.js file loads after jquery is loaded.

    Right now, your custom.js is trying to execute some code before jquery is loaded on the page

    Also, there is a typo in $imgs.each(fucntion () {

    It should read (of course) function()

    Other than that, your code is working. See Fiddle

    Login or Signup to reply.
  2. if you look at the head section of your page, you’ll notice custom.js is loaded before jquery.

    <script src="" type="text/javascript"></script>
    <script type='text/javascript' src=''></script>

    try to invert the order

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top