Automatically link image blocks to original image file

  • Hi all, hoping someone can help. I’m using the twenty twenty-one theme and the block editor. When I insert an image I choose to display the ‘large’ scaled images, but I want to link all images to the original media file. Problem is there appears to be no default way to set this like there was in the classic editor. I have hundreds if not thousands of posts, across a few blogs and it’s not practical to go through them all manually.
    Is there a way I can add a filter / function to my child theme that will dynamically link all block images, and block galleries, to the original image files, I.E not the resized versions WordPress creates?
    Any help would be gratefully received.

    • This topic was modified 2 years, 4 months ago by Jan Dembowski.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    You’d need to come up with a regexp that can identify the objectionable image links in content and replace the existing filename with the desired one. This search and replace process could be done through “the_content” filter. It’s not very efficient to do this on every page request. It’d be better to seek out the links in database content and permanently update the filenames. The inter.connect search and replace tool is capable of doing regexp search and replace on DB content. It’s important to fully backup your DB before using this tool.

    Thread Starter ashley

    (@ashleycox)

    Thanks for your reply. I’d rather not do it on every page request, as you say – very inefficient. Could you give an example of the regex to achieve this? It would be great to see someone (more experienced than I) wrap up this functionality in a plugin. Something called, perhaps, ‘image link changer’ that could handle the necessary queries to set links to either none, media file or attachment page.

    Moderator bcworkz

    (@bcworkz)

    The correct regexp depends on exactly what you’d need to change in existing content. Use the editor’s code view to see the actual HTML saved in the DB. On my site, I may not even need a regexp. It looks like if I just replaced “-scaled.” with just “.” everywhere in any post content, it’d work. Only because I’m sure all my image links are already to media files. If you have a variety of link types, it may take a few different runs to alter everything.

    To help you compose a good regexp, try regexr.com . Copy representative HTML into the example text area, then toy with the expression until you get the match and capture group you need in order to effect the desired replacement. The site also has a decent regexp reference and cheatsheet to help you come up with the right syntax.

    When you use the inter.connect tool, make use of the dry run feature to ensure it’ll do what you expect of it. I believe inter.connect gives the same warning, but it’s worth repeating: the tool represents a significant security risk. Don’t install it until you’re ready to use it. Once you are finished using it, remove it from the server.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Automatically link image blocks to original image file’ is closed to new replies.