{"id":1120,"date":"2026-07-31T17:38:09","date_gmt":"2026-07-31T17:38:09","guid":{"rendered":"https:\/\/www.mtsu.edu\/style-guide\/?page_id=1120"},"modified":"2026-08-19T07:59:44","modified_gmt":"2026-08-19T07:59:44","slug":"images-documents","status":"publish","type":"page","link":"https:\/\/www.mtsu.edu\/web-training\/getting-started-with-wordpress\/images-documents\/","title":{"rendered":"Images &amp; Documents"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this module, you&#8217;ll learn how to upload and manage media, add images to your content, write effective alternative text, link to documents accessibly, and understand how media slugs help manage document URLs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Learning Objectives<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After completing this module, you will be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>Upload images and documents to the Media Library<\/li>\n\n\n\n<li>Add images to pages and posts<\/li>\n\n\n\n<li>Write effective alternative text<\/li>\n\n\n\n<li>Link to documents using descriptive link text<\/li>\n\n\n\n<li>Understand the basics of media slugs<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Working with Images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Images can enhance content, support key messages, and improve the user experience when used appropriately.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When selecting images:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>Use high-quality images.<\/li>\n\n\n\n<li>Ensure the image supports the content.<\/li>\n\n\n\n<li>Avoid decorative images that do not add value.<\/li>\n\n\n\n<li>Select images that are relevant to the surrounding content.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Images should support the content on the page, not replace it.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Uploading Images<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Images can be uploaded through the WordPress Media Library or directly from supported blocks within the editor.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Uploading Through the Media Library<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select <strong>Media<\/strong> from the WordPress navigation menu.<\/li>\n\n\n\n<li>Select <strong>Add New Media File<\/strong>.<\/li>\n\n\n\n<li>Upload your image.<\/li>\n\n\n\n<li>Add alternative text and other metadata as needed.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Uploading Through an Image Block<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add an <strong>Image<\/strong> block to the page.<\/li>\n\n\n\n<li>Select <strong>Upload<\/strong>.<\/li>\n\n\n\n<li>Choose an image from your computer.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"496\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/07\/uploadscreen.png\" alt=\"screenshot of the upload pop up\n\" class=\"wp-image-1328\" style=\"aspect-ratio:1.7016544150870967;width:365px;height:auto\" srcset=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/uploadscreen.png 844w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/uploadscreen-300x176.png 300w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/uploadscreen-768x451.png 768w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Updating Existing Documents<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When updating an existing document, use the <strong>Replace Media Files<\/strong> tool whenever possible. This preserves existing file URLs and helps prevent broken links throughout your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits<\/h3>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>Prevents broken document links\\<\/li>\n\n\n\n<li>Preserves existing URLs<\/li>\n\n\n\n<li>Simplifies document maintenance<\/li>\n\n\n\n<li>Ensures visitors access the most current version<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Tip:<\/strong> Before replacing a document, verify that the updated file has been reviewed and approved for publishing.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Alternative Text<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Alternative text (alt text) describes the content or purpose of an image for visitors using screen readers and other assistive technologies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alternative text should clearly communicate the purpose of the image in the context of the page.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-border-color has-gray-border-color has-white-background-color has-background is-layout-constrained wp-block-column-is-layout-constrained\" style=\"border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Good Example<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Student working in a chemistry laboratory.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-gray-border-color has-white-background-color has-background is-layout-constrained wp-block-column-is-layout-constrained\" style=\"border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Poor Example<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u274c image.jpg<br>\u274c photo<br>\u274c picture<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important:<\/strong> MTSU websites use an accessibility tool that requires alternative text for meaningful images before they can be published. For more information about how the tool works and how to write effective alternative text, refer to the <a href=\"https:\/\/service.mtsu.edu\/kb_view.do?sysparm_article=KB0011294\" target=\"_blank\" rel=\"noreferrer noopener\">ServiceNow Knowledge Base article<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Writing Effective Alternative Text<\/h3>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>Describe the image&#8217;s purpose or content.<\/li>\n\n\n\n<li>Keep descriptions concise and meaningful.<\/li>\n\n\n\n<li>Do not begin with &#8220;Image of&#8221; or &#8220;Picture of.&#8221;<\/li>\n\n\n\n<li>Consider how the image supports the surrounding content.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Working with Documents<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Documents such as PDFs, Word files, and spreadsheets can be uploaded to the Media Library and linked throughout your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Common document types include:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>PDF files<\/li>\n\n\n\n<li>Word documents<\/li>\n\n\n\n<li>Excel spreadsheets<\/li>\n\n\n\n<li>PowerPoint presentations<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Uploading a Document<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ol class=\"wp-block-list\">\n<li>Select <strong>Media<\/strong> from the WordPress navigation menu.<\/li>\n\n\n\n<li>Select <strong>Add New Media File<\/strong>.<\/li>\n\n\n\n<li>Upload the document.<\/li>\n\n\n\n<li>Copy the document URL or add it to a page using a link.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"214\" src=\"https:\/\/www.mtsu.edu\/style-guide\/wp-content\/uploads\/sites\/2\/2026\/07\/medialibraryupload-1024x214.png\" alt=\"screenshot of media library upload\" class=\"wp-image-1345\" srcset=\"https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/medialibraryupload-1024x214.png 1024w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/medialibraryupload-300x63.png 300w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/medialibraryupload-768x160.png 768w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/medialibraryupload-1536x321.png 1536w, https:\/\/www.mtsu.edu\/web-training\/wp-content\/uploads\/sites\/2\/2026\/07\/medialibraryupload-2048x427.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Linking Documents<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When linking to documents, use descriptive link text that helps visitors understand what they are about to open or download.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-border-color has-gray-border-color has-white-background-color has-background is-layout-constrained wp-block-column-is-layout-constrained\" style=\"border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Good Example<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Download the Undergraduate Admissions Checklist (PDF)<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-border-color has-gray-border-color has-white-background-color has-background is-layout-constrained wp-block-column-is-layout-constrained\" style=\"border-width:1px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><strong>Poor Example<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u274c Click here<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Linking Best Practices<\/h3>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>Clearly identify the document being linked.<\/li>\n\n\n\n<li>Include the file type when appropriate (PDF, Word document, spreadsheet, etc.).<\/li>\n\n\n\n<li>Avoid vague phrases such as &#8220;Click here&#8221; or &#8220;Read more.&#8221;<\/li>\n\n\n\n<li>Verify the document opens correctly after publishing.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Before Moving On<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before continuing, make sure you can:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7fe1d597 wp-block-columns-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15px\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-2130f694 wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-09d3b6f4 wp-block-group-is-layout-flex\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsublue-color has-text-color has-link-color far fa-circle-check wp-elements-1ee4c62a9b3eb8e7379e24cbf11bf756\" style=\"font-size:1em\"><\/i>\n\n\n\n<p class=\"wp-block-paragraph\">Upload an image or document to the Media Library<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-09d3b6f4 wp-block-group-is-layout-flex\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsublue-color has-text-color has-link-color far fa-circle-check wp-elements-1ee4c62a9b3eb8e7379e24cbf11bf756\" style=\"font-size:1em\"><\/i>\n\n\n\n<p class=\"wp-block-paragraph\">Add an image to a page<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-09d3b6f4 wp-block-group-is-layout-flex\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsublue-color has-text-color has-link-color far fa-circle-check wp-elements-1ee4c62a9b3eb8e7379e24cbf11bf756\" style=\"font-size:1em\"><\/i>\n\n\n\n<p class=\"wp-block-paragraph\">Write effective alternative text<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-09d3b6f4 wp-block-group-is-layout-flex\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsublue-color has-text-color has-link-color far fa-circle-check wp-elements-1ee4c62a9b3eb8e7379e24cbf11bf756\" style=\"font-size:1em\"><\/i>\n\n\n\n<p class=\"wp-block-paragraph\">Link to a document using descriptive link text<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-09d3b6f4 wp-block-group-is-layout-flex\">\n<i class=\"wp-block-mtsu-blocks-icon-block has-mtsublue-color has-text-color has-link-color far fa-circle-check wp-elements-1ee4c62a9b3eb8e7379e24cbf11bf756\" style=\"font-size:1em\"><\/i>\n\n\n\n<p class=\"wp-block-paragraph\">Understand the purpose of media slugs<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-gray-color has-alpha-channel-opacity has-gray-background-color has-background is-style-wide\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Next Module: Accessibility Essentials<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-compact-list\">\n<li>Structure content using headings<\/li>\n\n\n\n<li>Write descriptive link text<\/li>\n\n\n\n<li>Create accessible lists and tables<\/li>\n\n\n\n<li>Identify common accessibility issues<\/li>\n\n\n\n<li>Improve the experience for all website visitors<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.mtsu.edu\/style-guide\/getting-started-with-wordpress\/accessibility-essentials\/\" data-type=\"page\" data-id=\"1122\">\u2192 Continue to Accessibility Essentials<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this module, you&#8217;ll learn how to upload and manage media, add images to your content, write effective alternative text, link to documents accessibly, and understand how media slugs help manage document URLs. Learning Objectives After completing this module, you will be able to: Working with Images Images can enhance content, support key messages, and [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1110,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1120","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":3,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/1120\/revisions"}],"predecessor-version":[{"id":1759,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/1120\/revisions\/1759"}],"up":[{"embeddable":true,"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/pages\/1110"}],"wp:attachment":[{"href":"https:\/\/www.mtsu.edu\/web-training\/wp-json\/wp\/v2\/media?parent=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}