...
This works very similarly to our Drupal 7 sites, but it is easier to align images and add captions now.
Note on the Screenshots in this Document
This document shows screenshots from a site using the Franklin Vertical Theme, but the same steps apply to those using the Franklin Bold theme.
Table of Contents
| Table of Contents |
|---|
...
I'm putting this image at the beginning, above my text.
2) Click on the icon that looks like a picture frame.
When you mouse over it, it reads "image."
3) Select a photo from your computer.
...
Modern headshots generally don't require alternative text, because the alt text would not provide any information that is missing to someone who can't see. I would just enter two quotation marks, which signals blank alt text.
5) If desired, align your image and select "caption" for captions.
...
You can add a caption, which is different than the alt text, if you wish. Once we save the image, we will see a place to add a caption beneath the image.
6) Click the save button
You will now see your image with your content.
7) Add a caption beneath the image if you selected that option.
8) Save your page and see what the image looks like with the theme.
The image resizes automatically no matter what device someone views the page with.
...
Remember, for this theme the maximum dimensions are 720x720. I'm going to go to resize my image to be half the size of that.
Inserting and aligning smaller images
...
Again, I put my cursor where I want the image to appear-- this time, beneath the first paragraph-- and click on the picture frame icon.
...
2) Click on the picture frame icon.
3) Select a photo from your computer.
...
This image is less than half the width of the maximum width of 720 pixels.
4) Add alternative text.
5) Align your image and, if desired, click to add a caption.
...
Tip: If you need to go back and edit the photo's alignment or alt text, simply double click the photo within the text editor.
7) Add a caption
8) Save your page and see what the image looks like with the theme.
I've saved everything, and here's how the image looks at a width of 350 pixels instead of the maximum 720.
And here's how it looks compared to the first image I added, which was as large as it could be.
What if I want to insert an image that is already on the website somewhere?
...
I can either use "Choose File" to select a file from my computer, or I can use the "Open File Browser" link to access all images (and files) on the site.
I found the image of Margaret Hamilton that I previously uploaded to the Basic Page in the above examples, and I am using it for this article's thumbnail.
As when I insert images with the text editor, I need to include some alt text.
I've saved my Article with my thumbnail image.
Because this image was uploaded with an image field, there are some automatic alignments placed on the image to make it go to the right.
This image appears cropped and resized in the preview version of the article on the News page.
