WordPress Image Control

Leaving WordPress website on its own for image (AKA media) management is a receipt for disaster that will come back to haunt you. It's best to get it right from the start. That will take a bit of extra work, but in the end it is worth it. So let's start with the basics and how WordPress handles images.

In this article Plugins are denoted with Bold Typeface. Those that have been tested and have been found to be useful are in Bold Italic Typeface.

Built in Functionality and Plugins

Media is considered an Attachment to a Post or a Page (from the database perspective both Posts and Pages are given Post IDs).

The odd thing is that it doesn't have to be "attached" to a Post or Page. It can be "unattached". Its "attached" or "unattached" status is determined by how the image is uploaded to WordPress. If the image is uploaded to a WordPress site via the Media Tab, it is considered "unattached". If an image is uploaded to a WordPress site from within a Post or Page (IE, it's added into what is being written or set as a featured image) it is then "attached" to that Post or Page. If the view of media within the Media Tab is set to list, the "attachment status" can be changed by associating it with a Post or Page or detaching it. Plugins like Timeline Express have Posts that are referred to as "Announcements" (again, from the database perspective, they're considered Posts) and are handled in a similar manner to Posts and Pages. Additionally, there is no "bulk method" to attach or detach an image via the Media Tab. It all has to be done individually.

An Image as Viewed from a User's Perspective

Media is also a bit of an oddity from the view's perspective as it is by default (but can be changed via Plugins like Attachment Pages Redirect) available in a myriad of ways;

Images can be viewed on a Post or Page.*

They can also be viewed via a Permalink. The permalink page is the image as it appears on its "Attachment Page", which includes additional information like the Title, Caption, and Description (only used in this capacity and no other location).*
And they can also be viewed via a direct URL (IE, the actual physical path to the image file). The direct URL (Uniform Resource Locator) is just the image, nothing else.

* The ALT / Alternative information is included in the HTML, but is not displayed in a web page.

On an obscure note, the permalink page also displays additional information such as "previous image" and "next image" (and a Post Comment section too). The image also has the "previous / next image" functionality if the image itself is clicked. This allows a viewer to "scroll" through all the images of a Post or Page.

The size of the image as it is displayed on its permalink page is generally determined and set by a theme.

An Image from the Administrator's Perspective

When editing an Attachment Page, there are a myriad of items to configure. Each one is important for a different reason (SEO, organization, etc.). From experience, start with the Caption and work from there.

Title: Seen in the attachment's permalink page and also in the Head section of HTML in the <TITLE> Element of that same page. It is not seen in the actual Post or Page or the HTML of a Post or Page where it is present
- Recommended Naming Convention: Post Title it is Associated with - Name of Physical File (minus website info and date) - Size**
Permalink*: This is publicly seen in the address bar of a web browser as the URL if the Image is viewed via it's permalink page. It should have similar details from the physical file name (minus the site name, because that's already in the URL) and can be derived from the Caption
- Recommended Naming Convention: Name of Physical File (minus website info) with Date (if any) - Size**
File URL: A set path and file name unless using a Plugin like Phoenix Media Rename that allows a physical file name to be changed (and updated in the WordPress database)). This is included in the HTML as an HREF Attribute. CAPs are permitted by the Phoenix Rename Plugin. It is polite to eliminate spaces, so either use dashes as is the WordPress convention or underscores as a wider convention.
- Recommended Naming Convention: Website Name - Name that matches Title and Permalink (with Caps and dashes) - Date - Size**
Categories: Categories are typically visible to users near the Title of a Post or Page. The Category is also included as an item in the Class Attribute of an HTML Article Element, but only in the attribute's permalink page, not in the Post or Page's HTML.
Caption: Seen in the attachment's permalink only, not used separately in HTML for the Post or Page.
- Recommendations: Start here. Stare at the picture and think of it not only as what it is, but also in the context of the posting. If the image has several items in it, concentrate on the focal point. Then add just a few pertinent / useful / interesting factual details (date, where photo was taken from, who took the photo, etc.). Try to minimize the number of words used.***
ALT / Alternative Text: Used only in the HTML of the Post, Page, or the attachment's permalink page. It is not visible from normal browser view, although there are probably Plugins can display this information.
- Recommendations: A lot of the long winded stuff that got parred down when creating the caption can be used here, plus added details. If there are multiple sizes of the same picture, note it here too.
Description: This field allows for limited formatting of text in addition to the Caption and only appears in the attachment's permalink page. It's just speculation, but based on how it appears in the Media Tab, it really seems like this is something leftover from the original B2Evolution (WordPress's origin)
- Recommended Convention: Use the caption or information from the source of the Image
"Uploaded to" Column of Media File (Attach / Detach / or Title of Post or Page it is attached to): This should be set in case media cleanup Plugins are installed so they don't identify the file as a potential item to "clean up" / delete. It is assigned automatically if the image is inserted into a specific Post or Page. It is not assigned if it is simply uploaded to the Media Library.
- Recommendation: Remember to insert an image directly into a Page or Post so this doesn't have to be done later.

* If using an advanced Permalink Manager, several Permalinks might be present (Current URI, Native Slug, etc.)

** Sizing Conventions: 1K, 4K, 8K, etc., using the horizontal video resolution convention, not file size

*** Since video does not support the ALT Attribute by default, not sure what to do here except to co-opt the Title Attribute and treat it like an ALT Attribute.

Plugins

Plugins can add additional functionality for Media (sometimes available on the Media Tab, other times on a separate Tab)

Phoenix Media Rename: A simple Plugin that adds the ability to change an image's physical file name. It even automatically replaces spaces with dashes ( - ). It also allows for "bulk renaming", but only for manual modifications to the name (IE, it can't add "My Web Site" to the beginning of every file name).
Media Library Assistant: Provides the ability to create a Parent Element (IE, Post, Page, etc.) for Media and Images. It also adds a dedicated (IE, doesn't share with Posts) Categories (named Att. Categories) and Tags (named Att. Tags) to Media and Images. One downside is that it elongates the Media List by making each row thicker.
Redirect (under Tools, Redirection); This Plugin provides the ability to create a list of of redirects.
WP Media Folder: Creates a folder and file structure for media, so very handy for organizing a lot of media. Unfortunately it breaks some features of other Media Plugins like Enhanced Media Library (and vice versa), but the fix is easy: Temporarily disable when other Plugin features are needed. Some other alternatives are listed here: https://colorlib.com/wp/wordpress-media-library-management-plugins/ File Bird Light, among others is an alternative. It adds two fields to the Word Press Media Attachment Editor ("Image Gallery link to" and "Link Target"), both of these fields have no effect on builtin WP functionality, only with the plugin. The _wpmf_gallery_custom_image_link is the field it adds to the PostMeta Table. Depending on Icon or List view, the "details" page of a Media item will be different, with many more options available in the details of a list view. If viewed via Icon view, there is a link towards the bottom that will open the detailed page. There also seems to be an issue if deleting media where the plugin has to be turned off and the media deleted via the normal Wordpress functionality.
Simple CSS: This seems to be the only Plugin available that displays a CSS Field in an Image's "admin page" on the Media Tab. Sadly though, it does nothing at all (IE, enter in your CSS, click Update, and watch it disappear), at least on an Image page)
Upload Url and Path Enabler (Settings Tab, Media): Reinstates the "Store uploads in this folder" setting that was removed in WordPress 3.5 (according to documentation). Sadly after testing, some Plugins (like Magic Zoom) would not work properly, even after checking settings in the Database (it was like the /wp-content/uploads/ Directory was hard coded, checked it and it was). Other

Other Thoughts

Themes can add addition SRCSET information for "responsive" websites for mobile devices.
Creating custom CSS for Image Classes at the Theme level doesn't work (even if one defines custom CSS for the Class Attribute associated with an Image Element)
Depending on the theme, additional information is added via META Tags in the Head Section of HTML.
- The OG (Open Graph) META Property labled as "OG:Description" gets information from the Caption.

Each attachment

This is an important consideration

Items to Consider

Image

The Image
Sizes (Wordpress default generated images is 150x150 "thumnail", 300x300 "medium", and 1024x1024 "large", "medium_large" is halfway between medium and large by default, and of course "full" is the original size. Templates and Plugins can cause other sizes to be generated. Use WP-CLI, wp --allow-root media image-size to see sizes generated)
- How to remove auto generated sizes and prevent them from being generated?
  - A Plugin like Stop Generating Image Sizes (Image Sizes Tab) is great, but what about the WP-CLI or other Plugins that regenerate images? Plus it only seems to control those thumbnails directly created by WordPress, not other utilities
    - Various Plugins have their own image generation sizes, for instance: Cool Timelines (ctl_avatar), United Gallery (ug_big)
    - Themes like Twenty Fourteen also generate images using the set_post_thumbnail_size and add_image_size functions named post-thumbnail (768x768) and twentyforuteen-full-width (1038x576) in the functions.php file
  - Disable Generate Thumbnails (under Settings Tab, Disable Generate Thumbnails):
  - ~~Imsanity~~: Only useful for limiting image size and reducing existing image sizes
- Cleaning: Most utilities use the Attached / Unattached attribute (mostly set by an image being uploaded directly to a post or page) of a media file. This can be changed in bulk via the Media List
  - Thumbnail Cleaner (Under Tools, Thumbnail Cleaner):Did a great job on eliminating all the thumbnails, but got a bunch it shouldn't have. And there's no trash can.
  - Media Cleaner (Under Meow Apps):
  - WPS Cleaner: Does not consider media from Plugins like Timeline Express
  - WP Optimize: Have to buy the Pro version for Images
  - Media Deduper: Deals with duplicate media. Useful to find duplicates
  - Clean Up Media - CUM (under media): Older plugin, but seems to work
  - File Manager: A nice Web GUI, but can do it from the command line. Not much cleaning ability above and beyond what can be done from a command line.
  - DNUI: An older file cleaning utility
  - Other notes: If using plugins like Timeline Express, it may delete files used in the Excerpts Section that are being used.
- Regenerating: Recommend only generating (custom / default) Thumbnail (128x128 / 150x150), Medium (256x256 / 300x300), Large (1024x1024 / 1024x1024), Medium_Large is an unknown source.
  - Regenerate Thumbnails Advanced (Tools Tab, Regenerate Thumbnails): Allows for only specific sizes to be rebuilt, did a great job
  - Regenerate Thumbnails (Tools Tab, Regenerate Thumbnails, yes the same as above, but a different utility): Thumbnail Cleaner uses / references this utility, does not allow for restrictions on which sizes to generate, just does them all, utilities to block different size generations don't seem to work

Title
File Name of Actual File (What is a good naming convention?)
- Make this a Directory Name and put appropriate images in there -> Naming Convention for Size: Use modern Video Resolution terminology; 1K, 2K, 4K, 8K (which refers to horizontal resolution, whereas 1080i, 720p, etc. refer to vertical resolution)
Permalink Current URI (from Permalink Manager) & Native Slug (Permalink name if Permalink Manger were disabled)
Permalink Address Page (https://WhatEverWebSite/PermalinkURI)
URL Page of File (https://WhatEverWebSite/FileName): ALT Attribute of Image Element / Tag is set to the URL
Taxonomy (Categories and Tags) of Images: Useful internal WordPress searches and some SEO indexes
Additional Items for Images (Caption, ALT / Alternate Text, Description)
- Caption is used in META Tags for various items (SEO, Twitter, OG (Open Graph Protocol - https://ogp.me/), etc.) and as the default caption when the image is viewed via a Permalink URI. Oddly Wordpress or some plugin uses it as the OG "description"
- Description is used when image is viewed via a Permalink URL, or whenever the image is used in a Page, Post, etc.
- ALT / Alternative Text is used in the Images ALT Attribute when viewed via a Permalink URL or whenever the image is used in a Page, Post, etc.

Redirection

Redirect from Image Permalink URL to Fragment Location / Anchor / ID on a Page
- And
  - If no explicit Redirect is set up, then go to the Images Parent
  - OR
  - Stay on the Image's Permalink URL

WordPress Functionality

Automatic "Thumbnail" (Resized Image) Generation that are automatically generated by WordPress, Themes, Plugins, etc.: Wordpress sets the SRCSET Attribute

SEO stuff

Canonical URLSs are only useful if an end Image / Item / etc. falls under multiple categories (IE is duplicitous) and a Search Engine needs to know which one is the default.

Plugins (BOLD indicates Plugin, BOLD / ITALICS indicates Plugin "activated, tested, and in use", not BOLD indicates a fairly useless Plugin)

Plugins To Manage Images and Media
- WordPress Built In Ability: It can bulk add to categories.
- Enhanced Media Library: Allows for associating Categories (the same one for Posts, but not other Plugins like Timeline Express, unless Add Category to Pages Plugin is added) with Media and Images, plus utilities for importing and exporting, also adds several tabs to Settings, Media (including allowed file types). This Plugin interferes with WP Media Folders List / Icon View and also elongates the List view by making each row thicker. Media Library Categories (uses the same Categories as Posts and does NOT interfere with WP Media Folders) and WP Media Category Management (has a dedicated, separate Categories from Posts) are alternatives
- Add from Server: A plugin that allows upload of files that otherwise cause the Wordpress Media functionality to cough up a hairball (large files, etc.). Keep in mind that this Plugin adds files from the local server, IE, it doesn't upload them, plus it also leaves them in the original directory they are physically in and just adds it to the WP database.
- Permalink Manager: Enhances the native Permalink Field on Pages, Posts, Media, Images, etc. It also includes a Bulk Updater. Make sure to enable "Native Slug" in Tools, Permalink Manager, Settings, to allow editing of the native Permalink. It also has an issue with the error message it pops up if a media file is deleted and then one tries to rename a permalink to the deleted name (ignore it and rename it anyway, and it should work).
- Media Replace: If moving the physical location of a media or image file, this plugin also updates all the links, etc. in the WP database, only issue is that it puts it back in the same exact physical location.
- Phoenix Media Rename: A simple Plugin that adds a File Name Field to an Image (in administration) that allows changing the File Name. It even automatically replaces spaces with dashes ( - ). It also allows for "bulk renaming", but only for manual modifications to the name (IE, it can't add "My Web Site" to the beginning of every file name). With use, it appears it cannot rename video files like .avi, .mp4, etc.
- Media File Renamer: Similar to Phoenix, but Phoenix is better.
- WP Media Folder: Creates a folder and file structure for media, so very handy for organizing a lot of media. Unfortunately it breaks some features of other Media Plugins like Enhanced Media Library (and vice versa), but the fix is easy: Temporarily disable when other Plugin features are needed. Some other alternatives are listed here: https://colorlib.com/wp/wordpress-media-library-management-plugins/ File Bird Light, among others is an alternative. It adds two fields to the Word Press Media Attachment Editor ("Image Gallery link to" and "Link Target"), both of these fields have no effect on builtin WP functionality, only with the plugin. The _wpmf_gallery_custom_image_link is the field it adds to the PostMeta Table.
- Unite Gallery (from JoomUnited): Oddly, this lightbox plugin, according to a Google search adds two fields to the Word Press Media Attachment Editor ("Image Gallery link to" and "Link Target"), but these are from WP Media Folder
- Plugins that manipulate the built in WordPress behavior related to Media and Images (IE, Attachment Pages, which are created for each image that is uploaded)
- ???Keep in mind this might have a detrimental affect on SEO, since it redirects the base / large image to a smaller image on a page. It might be worth while to go to a Page with a Lightbox that has the FULL sized image and a link at the top that goes to the timeline and additional links if there are other image sizes, maybe a popup too that makes it painfully aware to the end user what is going on, and there is the WordPress SRCSR attribute thing for multiple image sizes too???
  - For most websites, a combination of the below two plugins properly configured will allow Image Permalinks to redirect to another page
    - To redirect all Image Permalinks to the Homepage;
      - Attachment Pages Redirect: A simple Plugin that redirects Attachment Pages (like Media and Images) to the actual file, and if Parent Page (created with Media Library Assistant) and under other circumstances, like 404 (page doesn't exist), etc.
    - To redirect Image Permalinks to a Parent Page;
      - Media Library Assistant: Provides the ability to create a Parent Element for Media and Images. It also adds a dedicated (IE, doesn't share with Posts) Categories (named Att. Categories) and Tags (named Att. Tags) to Media and Images. One downside is that it elongates the Media List by making each row thicker. One upside is that...
    - To redirect Image Permalinks to specific Pages;
      - Redirect (under Tools, Redirection); This Plugin provides the ability to create a list of of redirects.
      - If the redirect for an Image Attachment Permalink includes a "hash" ( # ) to scroll to a specific location on a page, the format is: https://WhatEverWebSite/WhatEverPage/#WhatEverLocation (WordPress manipulates the URL from the "classic" HTML where it is: https://WhatEverWebSite/WhatEverPage#WhatEverLocation (with no forward slash ( / ))
    - ...and from there, and Image could be opened in a lightbox, etc.
    - Yoast and other SEO tools can do this, but it also removes the tools ability to create an indexes from images. Under SEO Tab, Search Appearance, Media Tab, Media & Attachment URLs, (on / off) setting will change the behavior of an Image Post of Attachment type Permalink to redirect to the physical image file.
  - For Plugins like Timeline Express that have delayed rendering which affect Fragment Location / Anchor scrolling, additional steps have to be taken.
    - To redirect Image Permalinks to specific Pages, start with the step from above;
      - Redirect (under Tools, Redirection); This Plugin provides the ability to create a list of of redirects.
    - ...and then insert the below code into a Footer (using Header Footer Code Manager) where the Timeline is configured;
      <script> document.addEventListener('readystatechange', event => { if (event.target.readyState === "interactive") { setTimeout(DelayedFunction, 1000) } } ); function DelayedFunction() { var location_hash = window.location.hash; var location_minus_hash = location_hash.substr(1,); var element = document.getElementById(location_minus_hash); element.scrollIntoView(); } </script>
- Plugin for Image Contents or Index Page or List of Pages or SiteMap (human viewable) (by Category, Other Criteria, etc.): Display Posts
  - Table of Contents, this one does everything on a site, not just images: https://wordpress.org/plugins/easy-table-of-contents/
  - Separate / Individual Indexes for different sized versions of the same image
    - Additional categories might be required to differentiate image sizes.
  - Possible Candidates: List Category Posts,(no settings or GUI by default, but an additional Plugin GUI for List Category Posts is available, but lists Timeline Categories, not Posts Categories) Display Posts - Easy Lists, Grids, Navigation..., List Categories needs some work, along with List Categories
- Plugin that can change ALT information based on existing information (many plugins have this capability, but require buying the PRO version)???
  - Auto Image Attributes: Changes Attributes (ALT, etc.), based on File Name. Useful if there aren't any ALT entries for an image
- A Plugin for default redirection for any 404 (broken links) to redirect to home page???
  - 404page: A plugin that redirects, has some nice options, and doesn't have a PRO version.
  - 404 Redirect to Homepage (under Settings, 404...)
  - 404 Solution would not install, so junk there.
  - Redirect 404, couldn't find the admin section where it said it was, so junk there.
- Plugin that creates a Title for an Image (Media Assistant???)???
- Plugin for custom Image CSS???
  - Simple CSS (Under Appearance, Pages, Posts, Images, etc.): This adds a custom CSS Field to Images (does not work with Permalink URI)
  - ~~Simple Custom CSS is too simple (it's just a single field for the entire website)~~
  - ~~Custom CSS Pro is great for previewing what it will do to a website, but appears to apply site wide to everything~~
- Plugin that will create a default ALT description if there isn't one???
  - This one does everything on a site, not just images: https://barn2.co.uk/wordpress-index-plugin/
- Plugin for dedicated Image SEO (IE, not Yoast)???
  - A list is here: https://blog.hubspot.com/website/best-sitemap-plugins-wordpress
- Other Nice Additions if Possible
  - Search Results just for Images???
  - Custom CSS for Permalink URI??? - see below (Simple CSS offers custom CSS for an Image, but it doesn't show up on Permalink URI)
  - Index and / or Table of Contents (for all of website & only images, so two indexes or table of contents)

WordPress Issues

WordPress does not include a Title for an Image

Other Stuff to Think About

Remove EXIF information for privacy. Read more here: https://www.wpexplorer.com/wordpress-image-management/