Website Editing: Adding Documents and Images – PBHS Support

Uploading & Linking a PDF Document
PDF Settings
ADA Compliance
Adding an Image
Image Alt Text
Image Alignment
Image Slideshow
Adding a Title Tag/Description/Caption to Images

Adding a PDF Document

Go to "yourdomain.com/admin" to login
From there navigate to the page you would like to edit and select the "Edit" button located on the side of your page.
Click on the page where you would to insert your PDF Document

Once your cursor is blinking on the page (see below):

Select the "Insert Media" icon on your toolbar (located to the side of the editable area)
A media window will appear to upload your new document
**You must have this document saved down to your computer
Select the "Upload Files" tab
On this tab, towards the center of your screen select "Select Files", as seen below:
This will connect you to your computer, from here navigate to your saved document and select it with your cursor:
Select the "Open" option located at the bottom of this window once your document is selected...
Once it is uploaded, your document will have a blue check mark next to the top/right hand corner of the selected document (as seen below):

Title: To the far right you will see a text field labeled "Title". Use this field to type exactly what you want displayed as the link to your document (this title will be seen live on your site).
In my example. I use "Click Here to view our financial policy."
Select "Insert into post" to complete this link to your document.

Your final link should be a different color and/or stand out from your normal page font:

PDF Settings

By default, the PDF once clicked will open in the same browser window replacing your website page. You can change this and have the PDF document open in its own tab. This will allow your patients to close out of the PDF document and easily get back to the tab they were previously viewing your website from.

Highlight the link you have created for your document:
While highlighted, select the "Insert/Edit Link" icon on your toolbar (located to the side of your page)

Target: Change the "Target" drop-down menu to "New Window"

The American's With Disabilities Act (ADA) requires all website elements to be compatible with screen reader interpretation. Scanned documents will not meet this requirement, so we advise that all uploaded documents be original source files. All images added to the site should have a descriptive "alt" tag so that screen readers know what the image is showing.

Adding an Image

Go to "yourdomain.com/admin" to login
From there navigate to the page you would like to edit and select the "Edit" button located on the right or left-hand side of your page.
Put your cursor on the page where you would like to insert your image
Select the "Insert Media" icon on your toolbar (located to the side of your page)
A media window will appear to upload your new image
**You must have this image saved on your computer
Select the "Upload Files" tab
On this tab, towards the center of your screen select "Select Files", as seen below:
This will connect you to your computer, from here navigate to your saved image and select it:
Select the "Open" option at the bottom once your image is selected...
Your image will have a blue check mark next to the top/ right-hand corner of the image as seen below:
On the right-hand side you will see "Attachment Details":

Alt Text:
For ADA Compliance, a descriptive Alt Tag must be added. While ALT tags need to be descriptive, they also need to be brief. They should not be full sentences or paragraphs. With a limit of about 125 characters, an ALT tag should provide enough detail for users and search engines to relate the image to the context of the page.

Alignment:

LEFT: Will align the image to the LEFT, and the text will wrap around to the right:

RIGHT: Will align the image to the right, and the text will wrap around to the left:

CENTER: Will align the image in the center, the text will wrap around the top and bottom:
Once you have your alignment set, select "Insert into Post". This will add your image to your webpage.
Select the "Save Changes" icon, to publish this change live!

Image Slideshow

Editing existing slideshow, click here.

This will allow you to create a slideshow of your images just like this example below:

Go to "yourdomain.com/admin" to login
From there navigate to the page you would like to edit and select the "Edit" button located on the side of your page.
Put your cursor on the page where you would like to insert your slideshow
Select the "Insert Media" icon on your toolbar (located to the side of your page)
A media window will appear, select "Create Gallery" on the LEFT hand side
You will now see two tabs labeled "Upload Files" & "Media Library"

Upload Files Tab:

This will allow you to upload any images you don't already have uploaded in your Media storage:

Select the "Upload Files" tab
Select "Select Files" Button to navigate through your computer to find the image
**You must have the images saved locally to your computer...
Once the editor uploads your image(s), it will bring you back to your "Media Library", where you can select multiple images to be displayed in your slideshow.

Media Library Tab:

This will allow you to select multiple images you have uploaded to use within your slideshow:

Select each image you would like within your slideshow by clicking directly on the image
A check mark will appear in the upper right-hand corner of the image. This will allow you to identify all images selected.
To remove a selected image:
- Move your cursor directly over the checked icon of the image you do not want in your slideshow
- LEFT click directly on the check mark to remove the check mark- now this image will no longer be included with your slideshow.
Once images are selected, select "Create a new gallery" button in the bottom right hand corner:
This will bring you to your final slideshow settings before you upload this onto your page
- You may re-order the images within your slideshow by LEFT clicking on the image and holding down with your mouse - drag the image with your mouse to where you want the image ordered within the slideshow.

Ignore the "Gallery Settings" defined in the red box example below- these settings will have no affect on your slideshow
Random Order: This will display your selected images randomly
**If this is not selected, it will go in the order you see on the screen
Remove Image: You will see a X next to each image selected- select that X to remove the selected photo from your slideshow.
Reverse Order: This will auto arrange your images from last to first
*button located in upper right hand corner, next to "Gallery Settings"

To change current order of selected images:

Once your settings are in place, select "Update Gallery" button (located in the bottom RIGHT hand corner).
This will upload your gallery to your webpage!!
Select the "Save Changes" icon, to publish this change live! *Note: you will not see your gallery until you save the changes as they do not display while in editing mode

Editing a Existing Slideshow

Go to "yourdomain.com/admin" to login
From there navigate to the page you would like to edit and select the "Edit" button located on the side of your page.
If you have a slideshow, within edit mode it will look similar to this:
Click on the square box labeled "Generated Content"
You should see a toolbar directly above the box (upper left hand corner)- select the "image" icon:

To ADD New Images:

Select "Add to Gallery"
You will see the same two tabs as before "Upload Files" and "Media Library"
Select the "Upload Files" tab
Select the "Select Files" button to upload your images
**remember you need to have these images saved locally to your computer in order to upload them here!
Once you select your image to upload, it will bring you back to the "Media Library" with the image(s) you just uploaded selected.
Now select "Add to gallery"
This will take you to your final setting screen- all new images are automatically added to the very end of your slideshow.

To change the order of selected images:

LEFT click on the image and hold down with your mouse- now you can drag this with your mouse where you want the image ordered within the images selected.
Once your order is set- select "Add to gallery" to complete this update
Select the "Save Changes" icon, to publish this change live!

Adding a Title Tag, Caption and/or Description to Existing Images

Caption: This allows you to set a small caption on each inserted image which will show only when captions are activated on your gallery. If you have included them on each uploaded image and do not see captions showing live on the page, please contact PBHS Support for help activating this setting on your gallery.

Alt Text: The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Title: Should provide additional information regarding the image. It should be relatively short, but descriptive and/or catchy. This title will pop up when you hover over an image (for some web browsers).

Go to "yourdomain.com/admin" to login
From there navigate to the page you would like to edit and select the "Edit" button located on the right or left hand side of your page.
Select the image you would like to add a title tag or description tag
Once selected, select the "image" icon located directly above the image:
A window will appear (below), scroll down on this page to enter your Image Title and Alt. Text!
The Title Tag (only some browsers will display this) will show a pop up once your patient is hovering over the image (see example below):
The Alt Text is how the image will be described to a visually impaired person using a screen reader.

Select the "Save Changes" icon, to publish this change live!

Comments