GabrielSoft - How to insert and link a photo

If you're 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

1

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.

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.