Addendum — Jan 2022
- The advice given on this page was prepared and intended for use with the Classic Editor.
- Some of this content may not be applicable to editing with the Gutenberg (block) editor but some of the knowledge gained will be useful when using Gutenberg.
- Refer to Gutenberg Block Editor – First Steps
Page Contents
Intro – Media Tips
In this set of tips we discuss using media, e.g., images, PDFs, in RiderwoodLife web pages. Topics covered include,
- Accessing the Media Library
- Inserting media into a page
- Uploading media into the Media Library
- Styling and other attributes for media, e.g., alignment, resizing, and alt-tags.
- Organizing Media with Folders
The Media Library – Accessing Media
Access media by clicking on Media and selecting Library.
This reveals the contents of the Library.
- In some views of the library, the grid icon is shown, circled in red, is darker black and indicates the view is in gallery mode.
- To view as a list, click the List mode icon to the right of the gallery icon.
- To ADD a media item to a page, click on the image to be added. A bold, blue border appears around the selected image.
- Fill-in the All Text block. Make it short, e.g., “image illustrating selection and insertion.”
- Alt-tags enable description of an object by screen readers for sight impaired viewers.
- Do not use them in place of text; even simple styling of text is not honored by a screen reader, not even capitalization.
- If a caption for media is desired, fill-in the Caption Box before inserting the image into a page.
- Complete the insertion by clicking on Insert into page
Leaving Media View Safely
Use the leftward-pointing while arrow to leave the Media Library. Leaving by other methods, including clicking on Pages in the black menu, may result in loss of edits. Some recovery is possible – see: Tips for Writers.
Adding and Justifying Images – Detailed Example
Image Appearance – Edit vs. Live Page
Images may appear “fuzzY” or have a “ratty” appearance when viewed while editing. This is an artifact. View the live page or
Adding Images
In this example we illustrate adding and justifying an image on a WP page. In this example, we use an image of the icon for paragraph mode – an image which was previously created from a screen shot and saved. (Do not confuse these images with actionable buttons to click – they are illustrative.)
While editing, place the cursor where the image is to appear in the document and click. Then go to the Media Library and find the image to be chosen. Select it by clicking and proceed with insertion. We demo placing an image to the right of this paragraph, beginning at the start of this paragraph. I have placed my cursor before the “W” and clicked. Now we have filler text . . . Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Insert Image
While editing, place the cursor where the image is to appear in the document and left-click. In this example, I’ve placed the cursor immediately in front of “W” at the beginning of the above paragraph. Then, went to the Media library and clicked on the image to be added followed by clicking 
Select the image to be added (the copyright image in this example) by clicking on it.
Click on Insert into page – yielding this:
Notice that the image is too large and appears in an odd place. Fix that by right-justifying and shrinking the image.
Image Alignment / Resizing
Click on the image. Image attributes and resizing handles appear.
- Hover over the justify selectors to view actions.
- Align right. The image jumps to the right of the paragraph.
- Resize by “grabbing” the sizing handles. Left-click and hold the left mouse button down. then drag the handle to adjust the size of the image.
- Now the image is right-justified and text wraps around it on the left, as shown in this illustrative image.
- Note that using handles to re-size may result in oddly shaped images because aspect ratios are not preserved.
Image Re-sizing
Display Settings Adjustment
Edit image attributes by clicking on an image to reveal the attribute selector.
Click on the pencil icon. This reveals the Image details screen.
Click on the Size drop-down arrow ▼ and start with Full size.- Assign a preferred alignment while adjusting Display Settings.
- Close this window with the Update icon at the bottom of the screen.
Resizing with Handles (referred to above)
- Not recommended because unpredictable changes can result, e.g., oddly shaped images due to unintended changes in aspect ratio.
- RECOVERY: if all efforts fail, delete the image from the page and re-Add to the page.
Adding Alt-text – Click on the pencil icon to add alt-text; this can be done when uploading an image. Click elsewhere in the document and the tools disappear. This can also be done on the Display Settings screen.
Hint -Adding Images At The Bottom of A Page / Middle of Page
- Adding an image at the bottom of a page is sometimes confusing because there is not space for it. So, hit <enter> a couple of times and move the cursor back one line. This provides space to work in after the image is inserted.
- It also sometimes helps to add some <enter>s, starting new, blank paragraphs to provide room for insertion and viewing results.
Linking to Media – Example: PDF
Why? Writers may wish to provide additional info about activities and clubs in PDF format, This is useful for Posters, large documents other materials not amenable to rendering in a WP page.- Caution: Uploading of spread sheets and word processing documents is strongly discouraged because they can serve as vectors for malicious content, e.g., execute-on-open macros. Create a PDF instead.
- How-to: Upload a document using the tools previously discussed.
- Open the Add Media tool, shown on the right.
- When the media is Added to a page, the URL comes with it.
- Alternatively, use the URL to create text that names the attachment:
- Copy the URL to the clipboard for use in text in the editing pane.
DISMISS the Media Pane
- Add descriptive text for the media, using the link captured above.
- Example (using a mock link): Click the link to get a PDF of the movie poster. (Remember that links will look different in edit mode than on a live page.)
- This method is preferred over the “Link To Media File” option as some readers may understand the meaning of a object assigned a weird name by WP.
Adding New Media to the Library
- Those who have assigned pages to update during the migration from RiderwoodLife.org to the new, RiderwoodLife.com will see images in the Media Library associated with a Page.
- Images,and other media for newly created pages must be uploaded to the library before they can be used. These may have been created by a Writer or obtained from another source.
- Do NOT use images which are copyrighted.
Steps to Upload Media
Open the Media Library / Select Media for Upload
To upload an image, go to the Media Library.
Click on Add New.
This Media addition options screen opens. Select Files opens the file manager on ones PC. Alternatively, one can drag-and-drop from the source, usually a file manager, provided the browser is not covering the whole desktop. Your “tipster” prefers Upload files. In either case, more than one item can be uploaded.
In either case, a file manager should open.
If Select Files has been chosen, highlight the media to be uploaded and click on the “Open” button in the file manager to initiate the upload.
In the case of drag-and-drop, open the file manager in a new window on the desktop.
Highlight the media to be uploaded. Drag and drop onto the upload window.
The image on the above-right illustrates the drag-and-drop method. (A Windows file manager will look different from this illustration.
Closing the Media Library
One may open the Media Library to add media and decide not to. To exit gracefully, just close the Library by clicking on the “close x.”
Folders – Organize Media
Writers with a large amount of media can use Folders to organize content. Writers responsible for several pages might create folders named after each page for storage of media related thereto. This will also help others who take on writer duties for a page.
Accessing Media Folders
Go to the Media Library.
Expand the view to see a list of folders by clicking on the white Expand arrow.
A list of folders appears.
Click on the folder to be accessed – see image on the right.
Click on New Folder to create a new one – see next image on left, below.
Notice the new folder with be in a hierarchy. In this example, we clicked first on the “Tips” folder.
Then, clicking on New Folder reveals a box to enter a name for the new folder.
Save it or Cancel if a new folder is not wanted.
Additions to Folders / Moving Between Folders
When uploading media, it will be added to the folder / sub-folder selected in the folder list.
Media may be moved from one folder to another. Example: maybe several items were moved into “Tips.” It may be more logical to put them into the Sub-folder, “Media Guidance.”
While view media in one folder, click the check boxes next to media to be moved.
Drag the selected items to the destination folder by hovering over the selected list, right-click and drag to the destination folder in the left pane. Release the mouse button.
Individual media files can be drag-dropped from one folder to another.
More Tips
Return to top-level page: Tips for Writers of RiderwoodLife
The End
