WordPress Image Control: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 23: | Line 23: | ||
===An Image from the Administrator's Perspective=== | ===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.) | 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 in the Head section of HTML in the <TITLE> Element | *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 | ||
*Permalink* | **Recommended Naming Convention: Post Title it is Associated with - Name of Physical File (minus website info and date) - 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. | *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. | *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 | *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. | *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) | *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. | |||
<nowiki>*</nowiki> If using an advanced Permalink Manager, several Permalinks might be present (Current URI, Native Slug, etc.) | <nowiki>*</nowiki> If using an advanced Permalink Manager, several Permalinks might be present (Current URI, Native Slug, etc.) | ||
<nowiki>**</nowiki> Sizing Conventions: 1K, 4K, 8K, etc., using the horizontal video resolution convention, not file size | |||
<nowiki>***</nowiki> 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=== | ||
| Line 41: | Line 53: | ||
*'''''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. | *'''''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. | *'''''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. | *'''''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) | *'''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=== | ===Other Thoughts=== | ||
| Line 60: | Line 73: | ||
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. The following plugins allow management or display of 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. The following plugins allow management or display of categories | ||
*'''''Media Library Categories''':'' This Plugin allows the standard Posts Categories to be assigned to Images and other Media. After assigning it to a category or categories, those categories are moved to the top of the list in the Widget for that Media item. | |||
*'''''Media Library Categories''''' | |||
*'''''Add Categories to Pages''''' | *'''''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 | *'''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. It also appears to be case sensitive so use lower case. Wildcards (*) don't work. Categories can be found in the wp_terms Database Table. Documentation is here: https://displayposts.com/docs/parameters/#display-parameters In testing it seems to work fine for Media and Images, but for specialty plugins like Timeline Express that maintains separate categories, it doesn't work quite right. | *'''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. It also appears to be case sensitive so use lower case. Wildcards (*) don't work. Categories can be found in the wp_terms Database Table. Documentation is here: https://displayposts.com/docs/parameters/#display-parameters In testing it seems to work fine for Media and Images, but for specialty plugins like Timeline Express that maintains separate categories, it doesn't work quite right. | ||
Also note that Wordpress always assigns a default category. The default category can be changed under the Settings Tab, Writing | |||
===Image=== | ===Image=== | ||
| Line 70: | Line 84: | ||
*The 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) | *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? | **How to remove auto generated sizes and prevent them from being generated? | ||
***A Plugin like '''''Stop Generating Image Sizes''''' is great, but what about the WP-CLI or other Plugins that regenerate images? | ***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) | ****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 | ****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): | |||
***'''<s>Imsanity</s>''': Only useful for limiting image size and reducing existing image sizes | ***'''<s>Imsanity</s>''': 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 | **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 | ||
| Line 86: | Line 101: | ||
*** | *** | ||
***Other notes: If using plugins like Timeline Express, it may delete files used in the Excerpts Section that are being used. | ***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 | *Title | ||
*File Name of Actual File (What is a good naming convention?) | *File Name of Actual File (What is a good naming convention?) | ||
| Line 122: | Line 141: | ||
**'''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 | **'''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. | **'''''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. | **'''''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. | **'''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). | **'''''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. | **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. | **'''''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. | ||
| Line 140: | Line 159: | ||
*****If the redirect for an Image Attachment Permalink includes a "hash" ( # ) to scroll to a specific location on a page, the format is: <nowiki>https://WhatEverWebSite/WhatEverPage/#WhatEverLocation</nowiki> (WordPress manipulates the URL from the "classic" HTML where it is: <nowiki>https://WhatEverWebSite/WhatEverPage#WhatEverLocation</nowiki> (with no forward slash ( / )) | *****If the redirect for an Image Attachment Permalink includes a "hash" ( # ) to scroll to a specific location on a page, the format is: <nowiki>https://WhatEverWebSite/WhatEverPage/#WhatEverLocation</nowiki> (WordPress manipulates the URL from the "classic" HTML where it is: <nowiki>https://WhatEverWebSite/WhatEverPage#WhatEverLocation</nowiki> (with no forward slash ( / )) | ||
****...and from there, and Image could be opened in a lightbox, etc. | ****...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. | ****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. | ***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; | ****To redirect Image Permalinks to specific Pages, start with the step from above; | ||