Skip to main content

Adding Images

Concrete5 allows you to insert images in a few different ways.

Image Block

One way of adding an image is by using the Image block.

AddBlockMethod.jpg

When the Add Image dialog window opens, click on Choose Image. Concrete5's File Manager will open; this is where you can preview images that have already been uploaded. If need be, you can upload an image if it doesn't already exist.

Please keep in mind that the image formats supported by Concrete5 are JPG, GIF and PNG.

Once the image has been located or uploaded, click the image and click Choose.

AddBlockMethod1.jpg

The image will then be inserted into your page.

If you click the Image block again and click on Edit, you will then be able to further customize the image: such as linking to internal pages or external URL's, altering the image's width and height dimensions, and adding further adjustments to the image's scaling.

AddBlockMethod2.jpg

Heads-up!

When you add an image to your page, the block may have the option to enter an Alt Text/Caption.

Alt Text is descriptive text that appears when you hold your mouse over an image in a web page (or when the image does not appear). Using Alt Text is important for web site visitors with visual or audio impairments who might use special readers to explore your page. It may also be used by search engines indexing your site.

Content Block

There are two different methods of inserting images using the Content block.

ContentBlockMethod-I.jpg

If you're already familiar with the Content block, then you probably already know that it is a WYSIWYG (What-You-See-Is-What-You-Get) editor - which has similar, yet basic functions of Microsoft Word.

One method of inserting images using the Content block is to click Add Image.

ContentBlockMethod-Ia.jpg

Like the Image block, the File Manager in Concrete5 will open, allowing you to use either an image that has already been uploaded or one you upload yourself.

ContentBlockMethod-Ib.jpg

After you have chosen the image you want to insert, it will appear in your Content block.

ContentBlockMethod-Ic.jpg

The second way to insert an image using the Content block is by clicking on the "Insert/edit image" icon that appears in your Content editor's tools.

ContentBlockMethod-II.jpg

Using this option can be somewhat more flexible, especially if you're wanting to link to an image outside of PPCC's website (usually a third-party image host, such as TinyPic, Imgur, Photobucket, or ImageShack). You can resize the image's width and height dimensions, especially if the image you are linking is too large, and you can adjust the alignment to where you want the image to appear.

ContentBlockMethod-IIa.jpg

Heads-up!

When you add an image to your page, the block may have the option to enter an "Insert description" or Alt Text/Caption.

These descriptive texts will appear when you hold your mouse over an image in a web page (or when the image does not appear). Using image descriptions (especially Alt Text) is important for web site visitors with visual or audio impairments who might use special readers to explore your page. It may also be used by search engines indexing your site.

ContentBlockMethod-IIb.jpg

HTML Block

If you're more technically inclined and can understand HTML, using the HTML block would be another method - either by writing or copying and pasting the code. This can also be done by editing the HTML source code if you're using the Content block.

Heads-up!

When using HTML code to insert an image, make sure the alt=" " and/or title=" " tags is present within the code. Alt Titles can be used to provide a brief description of the image, while Title tags are used to give the image a title as used in the two images shown above.

Example:

<img src="janedoe.jpg" alt="Jane Doe Portrait Photo" title="Jane Doe" width="100" height="120">

Descriptive texts appear when you hold your mouse over an image in a web page (or when the image does not appear). Using image descriptions (especially Alt Text) is important for web site visitors with visual or audio impairments who might use special readers to explore your page. It may also be used by search engines indexing your site.

For more in-depth and updated information about Images in Concrete5, refer to documentation at Concrete5's website.