At present, my image files appear within the following URL structure:
www.example/wp-content/uploads/year/month/image-file-name.jpg
These image files, contain the following Body Tag
<body style="margin: 0px; background: #88888;">
I would now like to modify this Body Tag, so that it becomes:
<body <?php body_class();?> style="margin: 10px; background: #01010;">
Performing the modifications, within the Core Files, is obviously not great as the alterations would be overridden after each WordPress update. Therefore, I am looking to be able to make the changes via the theme's functions.php file.
Is anyone able to give any pointers on how this can be achieved? I am assuming I am going to need to make use of the add_filter filter hook?
At present, my image files appear within the following URL structure:
www.example/wp-content/uploads/year/month/image-file-name.jpg
These image files, contain the following Body Tag
<body style="margin: 0px; background: #88888;">
I would now like to modify this Body Tag, so that it becomes:
<body <?php body_class();?> style="margin: 10px; background: #01010;">
Performing the modifications, within the Core Files, is obviously not great as the alterations would be overridden after each WordPress update. Therefore, I am looking to be able to make the changes via the theme's functions.php file.
Is anyone able to give any pointers on how this can be achieved? I am assuming I am going to need to make use of the add_filter filter hook?
1 Answer
Reset to default 2You can't, WP doesn't generate that markup, Google Chrome/Chromium does. There is no way to influence this from the server via PHP or JS or any other technology. It's just how browsers display images on their own directly.
As far as the web server is concerned, WP isn't even loaded, and no HTML is sent, just the image data.
Firefox does something similar, but it adds some HTML classes to the img tag and lads a stylesheet from a chrome:// URL to center the image.
Safari adds a margin of 0 on the body tag, and adds inline styling rules.
You can prove it's the browsers by making the raw request via curl on the command line and inspecting the raw HTTP. You'll see HTTP headers indicating an image is about to arrive, followed by the image file. No HTML markup.
You can also prove it by dragging and dropping an image from a folder on your computer on to a new tab page. You'll see it too has an auto-generated DOM tree with basic browser styling.