Managing images, documents, videos and other media is an important part of creating a website. These tutorials will show you how to source your files properly, prepare them for web use, upload, edit, replace and more.


Videos on this page:


Preparing and Uploading Images

Be sure you have the proper permission to use every image on your site. For optimum page loading performance, you should prep your images for web use by using photo editing software like Photoshop or GIMP first. You can then either upload your images directly into the Media Library or while you are editing pages/posts.

Topics covered:
0:00 – intro
0:08 – copyright considerations – source your images properly!
0:45 – what qualifies for adequate permission
1:37 – sources for public domain or copyright-free images
3:05 – preparing images for web use
3:22 – using Photoshop to resize large images
3:45 – optimizing photos is important for site performance! (esp. on mobile!)
4:35 – changing resolution (should be 72 pixels/inch)
5:42 – adjusting width & height (no larger than 2000 px)
6:40 – exporting options (turn down quality to 80-90%)
8:05 – adding an image to a page/post
8:44 – uploading a new photo
9:20 – alt text field is required to meet accessibility requirements!
9:25 – how does alt text work?
9:45 – how to write good alt text
10:40 – caption and description fields
11:15 – image alignment
11:50 – image sizes
12:15 – insert image into page
12:28 – edit image details (adding caption)

Download step-by-step instructions for preparing and uploading images

 


Editing and Replacing Images

You can change the captions on your images as well as the size they appear on the page. Beyond that, WordPress offers some limited image editing capabilities but as of this writing most of them are unreliable. For best results, you should edit your image using photo editing software like Photoshop or GIMP and then replace the old image in your media library.

Topics covered:
0:00 – intro
0:30 – existing gallery overview
0:55 – how to close lightbox screen while logged in
1:15 – begin gallery example
1:44 – how to create a gallery from Add Media screen
2:00 – image selection
2:20 – edit captions or order of appearance if desired
2:45 – change Link To setting to Media File
2:57 – change Type setting to Tiled Mosaic or Thumbnail Grid
3:30 – gallery view on editing screen is not what it will look like when saved
3:40 – preview changes to review gallery
3:48 – edit gallery to rearrange images to shuffle tiled mosaic display
4:30 – thumbnail grid example
5:20 – save page

Download step-by-step instructions for editing and replacing images

 


The image alignment buttons built into the text editor are not designed to handle complex photo layouts. Using image galleries will allow you to create attractive photo layouts with automatic thumbnail generation, multiple layout options, captions, descriptions and a large-size lightbox feature.

Topics covered
0:00 – intro
0:28 – existing gallery demo
0:55 – how to close the Lightbox mode when logged in (Esc key)
1:14 – begin example
1:44 – how to create a new gallery
2:17 – edit captions or order if desired
2:44 – change Link To setting to Media File
2:56 – change gallery type; recommend Titled Mosaic or Thumbnail grid
3:30 – finish and insert gallery
3:32 – appearance in editor is not how it will look when page is saved
3:42 – preview to see tiled mosaic gallery
3:58 – edit gallery to shuffle order of images
4:30 – see thumbnail grid style
5:15 – update page

Download step-by-step instructions for creating image galleries

 


Uploading Documents for Download

You can either upload your documents directly into the Media Library or while you are editing pages/posts. PDFs are the recommended format for text documents over Word documents (unless you want users to be able to edit them after downloading; usually this is not the case.) Other supported MS Office formats are Excel and PowerPoint.

Topics covered:
0:16 – supported document types
0:26 – recommend converting Word docs to PDFs
1:08 – copyright considerations (do not assume journal reprints are OK)
1:44 – adding a download link
2:05 – uploading a new document file
3:15 – editing link text
4:05 – file type indicator icon added automatically when saved
5:08 – how to replace a document with a new version
5:55 – use the “Just replace the file” option
6:35 – verify (need to refresh browser)

Download step-by-step instructions for uploading documents for download