How to insert and link a photo

If you are typing paragraphs of text and want to break them up a bit, inserting a photo into a Text/HTML module is a wise option. You can easily choose to have your text "wrap" around the photo and can also set the photo to be a link. (This would allow users to click on the photo and be directed to a specific URL.)

How to insert and link a photo using the Text/HTML module

Drag and drop a Text/HTML module onto the page

• Log in to your site, then navigate to the page on which you'd like the photo to appear. Once there, click Add Content > Core Modules > then click to drag the Text/HTML module onto the page.

Add text to the module

• It's usually best to type or paste your text into the module before adding any photos.

Upload a photo

• The next step is to use the Image button in the toolbar to add an image to the module.

• Click to position your cursor approximately where you'd like the photo to appear.
• Click the Image button in the toolbar (pictured above), which will open the File Source dialog.
• Select the File Source for your image.
  • Upload - Select an image file from your computer's hard drive
  • Site Files - Select an image that has already been uploaded to your eCatholic website's File Manager
  • Stock Photos - Select an image from the eCatholic Stock Photos library*
  • ( *This option will only appear if you have an eCatholic Stock Photos subscription.)
• Once you've selected the file you'd like to add, the photo will display within the text where you indicated.

NOTE: It's best to upload images that are less than 100KB in size. Larger images will take longer to upload to your site.

Resize the photo

• Adjust the size of your photo by dragging the blue handles in the corner of the image and resize your photo (illustrated below).

INSERT VIDEO HERE OF RESIZING PHOTO

Set the image's alignment

• After you have resized your photo, the photo editing menu displays.
  • Crop - Alter the photo by changing its dimensions.
  • Text Wrapping - Determine if your photo becomes a part of the text flow (Wrap Text) or if the photo separates the text (Break Text).
  • Replace - Change the image/photo you have selected.
  • Remove - Delete the photo.
  • Link - Add a link to the photo so that your visitor is directed to a specific URL if they click or tap on the image.
  • Align - Select which edge the photo should be aligned to: the left, right, or centered within the module.
  • Image Caption - Add a caption to the image.
  • Alternate Text - Add additional descriptive text about this image. This is useful with accessibility readers.
  • Change Size - Allows you to alter the size of the photo with numeric measurements, rather than by dragging the blue sizing handles. Enter the value for your adjustment in either the Width or Height box. Enter Auto in the opposite box to keep the scale of your image at 100%. Make sure to select Update to save your changes.

Set the image to be a link (optional)

• You can also create a link within the image. (i.e., When visitors click or tap the image, they will be directed to a specific URL.) Follow these steps:
  • Click the image itself within the Text Module so that it is selected/highlighted.

• Then, click the Link icon in the image toolbar (pictured above) to open the Link dialog.
• In the Link dialog, type or paste the link address (e.g., http://www.ecatholic.com) in the URL field.
• Check the box to specify if you want the link to Open in a new tab (optional).
• Once finished, click Update. Finally, it's a good idea to log out and test the link.

2

Add text to the module

It's usually best to type or paste your text into the module before adding any photos.

3

Upload a photo

The next step is to use the Image button in the WYSIWYG toolbar to add an image to the module.

1. Click to position your cursor approximately where you'd like the photo to appear.
2. Click the Image button in the WYSIWYG toolbar (pictured above), which will open the Image Properties dialog.
3. Click the Add Picture button in the Image Properties dialog.

   

4. Select the File Source for your image.
   1. Upload - Select an image file from your computer's hard drive
   2. Site Files - Select an image that has already been uploaded to your eCatholic website's File Manager
   3. Stock Photos - Select an image from the eCatholic Stock Photos library*
      ( *This option will only appear if you have an eCatholic Stock Photos subscription.)

   

   Once you've selected the file you'd like to add, the photo will open in the Image Cropper.

   NOTE: It's best to upload images that are less than 100KB in size. Larger images will take longer to upload to your site.

4

Crop the photo

Use the tools in the Crop Image dialog to crop and resize your photo (illustrated below). Once finished, click the green Save button at the bottom of the Crop Image dialog.

5

Set the image's alignment

You will then return to the Image Properties dialog. Use the Alignment drop-down menu to select which edge of the content area you'd like the photo to "snap" to.

EXAMPLE: If you select Right, the image will snap to the right edge of the content area; the text will wrap around the left edge of the photo.

Once finished, click the green OK button. Your image will then appear in the Text module!

6

Set the image to be a link (optional)

You can also create a link within the image. (i.e., When visitors click or tap the image, they will be directed to a specific URL.) Follow these steps:

1. Click the image itself within the Text Module so that it is selected/highlighted.
2. Then, click the Link icon in the WYSIWYG toolbar (pictured above) to open the Link dialog.
3. In the Link dialog, use the Link Type drop-down menu to select the type of link you want to create.
4. In the URL field, type or paste the link address (e.g., http://www.ecatholic.com)
5. Use the Target tab to specify if you want the link to open in a new window (optional)

Once finished, click the green OK button. Finally, it's a good idea to log out and test the link.