How To Add/Format Images

How To Add/Format Images

Choose the image block from the “+” icon on the left sidebar. Choose a photo or image you’d like to insert, and save the photo or image as a file on your computer. Do not use a copyrighted photo or document from another source. Just because you find something on the Internet doesn’t mean it’s free to use. Use of copyrighted materials, including photos or text, can land you in trouble and can be a costly mistake. Just don’t do it!


Make sure the photo is sized appropriately for uploading. High resolution photos are large files that take longer to upload, take up more space in your library, and are inefficient in providing a positive end-user experience.


Quick Tip: Best practice is to presize your image to the final size you want to display on your website.This will make inserting images easier and faster. Resolution of 400-420 pixels wide or tall works well for a primary image in a Page or Post




FOUR WAYS TO ADD AN IMAGE

  1. Drag and drop it onto the page. The photo will appear on the Page or Post.
  2. Click the Upload button, navigate to the folder where the image is stored and click Open. The photo will appear on the Page or Post.
  3. Click the Media Library button and click on the image you want to add. Click Select. The photo will appear on the Page or Post.
  4. Paste or type the URL of the image. The photo will appear on the Page or Post.

Quick Tip: You can upload .jpg, .png, and .gif image files to the Media Library. Acceptable audio files include .mp3, .m4a, .ogg, and .wav. Video files can be uploaded as well, but consider using a host like YouTube and embed the video in the website.


Quick Tip: The Media Library contains images you’ve uploaded. You only need to upload an image once, even If you want to use it in multiple places. Do not delete an image from the media library that is displayed on a Post or Page. If you delete it from the Media Library, the image will be removed from the Post and Page as well.

TO FORMAT IMAGES

Once an image is inserted on the page, formatting options appear above the image block. You can change alignment, link to a url, or replace the image. For more editing features like writing a caption, image title, and adding alt text, please see the Add Alt-Text section.
At the right sidebar, you can change the size of the photo or link the photo. You can change the size of the photo by grabbing a blue circle on its edge and dragging in or out.


The advanced options for the Image Block are alignment controls plus “wide width” and “full width.”



TO MOVE AN IMAGE


Click on the image you want to move, and click on the Align Center icon above the photo. The image will move to the center of the Page or Post, and Move Up and Move Down arrows will appear to the left of the image. Click the Up or Down Arrow until the image is placed where you want it to be.


TO ADD ALT TEXT

Alt Text is important because it informs search engines what the image is and assists any sight-impaired Internet users who visit your website. Access the Alt Text box on the right sidebar. As an alternative, you can add Alt Text on the Image Details page. To access Image Details, click on your photo and click the Edit Pencil icon above the photo. Type your keyword or phrase into the Alternative Text box and Save.





Type Alt Text that describes your image and incorporates your keyword or key phrase.


    • Related Articles

    • How to Add Alt Tags to Images

      There are many ways to add alt tags to images. The main way is to login to your dashboard then go to Media -> Library on the left black navigation menu. Once you are in the Media Library, click on the image you want to add the alt tag or description ...

    • How To Add/Edit Text With The Paragraph Block

      Click inside the block. Copy and paste your text from a document saved on your computer or type new content inside the paragraph block. Click the Save Draft button on the right sidebar. As a back-up, Gutenberg will auto-save your work. To edit the ...

    • How To Add More Space Between Blocks

      A Spacer Block will add space between blocks. The right sidebar has space to enter the height in pixels, or you can click the blue dot at the bottom edge of the space box and drag it to the desired size. TO ADD SPACE BETWEEN SENTENCES When you type ...

    • How To Add A Separator Line

      You can separate text and photos by placing a line between them. In the Classic Editor, this was known as an HR or spacer line. Place your cursor where you want to add a line, and click the plus sign “+” icon. Select the Separator block from the ...

    • How to Add A List With The List Block

      This block is useful when you want to add bulleted or numbered lists to your page. The options are unordered and numbered lists. Click on the page where you want to insert the list. Click the add block plus sign, and choose List. Type or paste your ...