Can you programmatically set inline images to a new registered image size?

  • Resolved maxellinger

    (@maxellinger)


    2 months, 1 week ago

    I have a WordPress instance that contains the contents of 3 other WordPress instances that got merged in. Each WordPress had its own custom image sizes. When the WordPress CLI Importer did its thing, the attachments were all downloaded and assigned properly but the URLs of the images in the content are for a size variation that doesn’t exist on the new site. When I click into the broken image within the WordPress editor, WordPress automatically finds the image and sets it to the closest corresponding thumbnail size that was generated — which is great. I don’t want to have to click into the broken images for every single post when they number in the thousands, however. Is there a way to get WordPress to set all the embedded images to their new resized URL?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Which editors were used to create the content? Because the dimensions for the images are in its content. Or are they feature images? And which editor are you using now?

    Thread Starter maxellinger

    (@maxellinger)

    Thanks for responding! They were using the TinyMCE (“Classic”) editor.

    There’s clearly more markup in the database than what appears when I view as HTML, because the frontend display contains a reference to the original image while the HTML editor just shows a pretty vanilla tag.

    Here’s an example of the frontend markup, see how the original is referenced and exists in the CDN but the src value is set to a specific, legacy size that didn’t get generated on import.

    How it exists on the frontend:

    <img decoding="async" data-attachment-id="4975" data-permalink="https://news.vumc.org/Hope/meet-the-people-who-bring-hope-to-families-every-day/pioneer1-7/" data-orig-file="https://vumc-reporter.s3.amazonaws.com/uploads/pioneer1-5.jpg" data-orig-size="1417,1416" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;2.8&quot;,&quot;credit&quot;:&quot;Susan Urmy&quot;,&quot;camera&quot;:&quot;Canon EOS 5D Mark IV&quot;,&quot;caption&quot;:&quot;Environmental portrait of Chetan Mukundan, MD, and his dog Brie at Radnor Lake for community pediatricians for Face of Hope profile for Hope magazine.\r\rPhotos by: Susan Urmy&quot;,&quot;created_timestamp&quot;:&quot;1638520211&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;200&quot;,&quot;iso&quot;:&quot;400&quot;,&quot;shutter_speed&quot;:&quot;0.0015625&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}" data-image-title="pioneer1" data-image-description="" data-image-caption="<p>Photo by Susan Urmy</p>
    " data-medium-file="https://vumc-reporter.s3.amazonaws.com/uploads/pioneer1-5-450x450.jpg" data-large-file="https://vumc-reporter.s3.amazonaws.com/uploads/pioneer1-5-790x790.jpg" tabindex="0" role="button" class="size-medium wp-image-4975" src="https://vumc-reporter.s3.amazonaws.com/uploads/pioneer1-5-300x300.jpg" alt="" width="300" height="300">

    How it exists in the editor:

    [caption id="attachment_4975" align="alignleft" width="300"]<img class="size-medium wp-image-4975" src="https://vumc-reporter.s3.amazonaws.com/uploads/pioneer1-5-300x300.jpg" alt="" width="300" height="300" /> Photo by Susan Urmy[/caption]
    Moderator bcworkz

    (@bcworkz)

    Is there a way to get WordPress to set all the embedded images to their new resized URL?

    The easy answer is no, but in theory there would be a way, but it’s not pretty. The extra HTML is generated by the [caption] shortcode. All the data-* attributes are nice, but are ignored by the browser. All that matters is the src attribute with the outdated size reference and that it once was the medium size. The image attachment ID that’s part of class attributes is also useful. In order to update the image file references as saved in the DB, we’d need PHP code to parse through all post content, looking for any img tag references. For each found, the code would need to extract the intended image size, such as “medium”, from the class attributes, as well as the attachment ID, such as “4975”. With that information, PHP code could fetch the proper, current image file URL from the attachment’s post meta and use it to replace the current src attribute.

    PHP code could also determine the new sizes for the height and width attributes and update those as well. Code to do this could be somewhat fragile and subject to possible failure in some cases. It’d also be extremely slow. Its effort would need to be broken up into manageable chunks to avoid time out issues, then be re-run repeatedly until all posts in the DB had been processed.

    I’m unaware of any existing plugin that would do this for you, it’s likely something that would need to be custom coded.

    Thread Starter maxellinger

    (@maxellinger)

    Thanks for the response! Here is the code I wrote to accommodate every, single, darn, case in case it’s helpful to someone down the line:

    https://gist.github.com/mellinger/b337f3eea37601f10701dc45a7af6183

    Moderator bcworkz

    (@bcworkz)

    That was quite the effort! Thanks for sharing.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.