WordPress Image Control

Wiki.TerraBase.info
Jump to navigation Jump to search

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.)

  • Title: Seen in the attachment's permalink page and in the Head section of HTML in the <TITLE> Element, but nowhere in the actual Post or Page or the HTML of a Post or Page
  • Permalink*
  • 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.
  • 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
  • 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.
  • 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)

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

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.
  • 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)

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

Categories

In WordPress,Categories are by default associated with Posts. According to documentation, each Post must be assigned to a Category. If one isn't purposely chosen, a default Category is assigned. This default Category can be set in the Settings Tab under Writing. Other Plugins like Media Library Categories makes the same Categories used with Posts available under the Media Tab and as a Widget on the Edit Media administration page. Another Plugin, Add Categories to Pages, adds that same capability to the Pages Tab and as a Widget on the administration page for Pages.

Plugins

  • Add Category to Pages
  • Media Library Categories
  • Add Categories to Pages
  • List Categories, List Category Posts & GUI for List Category Posts: Each of these Plugins displays Category Information about Posts, but so far haven't figured out how to make them do Images or Pages that are in Categories
  • Display Posts: This one allows for displaying Categories for Posts, Pages, and other custom fields (post, page, revision, attachment (AKA image or media), te_announcements). Post status can be publish, pending, draft, auto-draft, future, private, inherit, trash, any

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 from being generated?
      • A Plugin like Stop Generating Image Sizes is great, but what about the WP-CLI or other Plugins that regenerate images?
        • 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
      • 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.
  • 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.
    • 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).
    • 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.
      • 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 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 for Image Contents or Index Page or List of Pages or SiteMap (human viewable) (by Category, Other Criteria, etc.)???
      • 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 will create a default ALT description if there isn't one???
    • Plugin for dedicated Image SEO (IE, not Yoast)???
    • 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/



Retrieved from "https://wiki.terrabase.info/index.php?title=WordPress_Image_Control&oldid=434"