You do not need to use a special portlet for photos. Photos can be inserted into a basic Content portlet with the rest of your page content.
Click the pencil on the Content portlet where you'd like to add the image to and you will be taken to the Content Editor.
We recommend hitting the Add Paragraph (P+) icon before adding an image, so it does not wrap with text.
There are some instances where it makes sense to wrap an image in text (such as a headshot next to someone's bio and contact information). However, we caution against this, as it often does not resize well on tablet and mobile devices. If you choose to wrap an image, move your cursor to the beginning of the text where you want it to appear.
To insert an image from the Content Editor (not Design Mode), click the Image Manager icon in the toolbar (square with a mountain and sun).
If you are using a photo that is already in the CMS, find and select the right photo in the Image Manager. Skip to Image Properties below.
Upload in Image Manager
To add an image from the Content Editor (not Design Mode), click the Image Manager icon in the toolbar (square with a mountain and sun).
Once the Image Manager pops up, use the left pane to navigate to the proper folder. Folders should be arranged similar to the hierarchy of the site. For example, if you are adding a photo to the "Adopt a Pet" page, you would go to Departments > Public Safety > Animal Services > Adopt a Pet.
If you are adding a photo to a new page or a page that previously had no images, you will need to create a new folder. Navigate to the proper parent folder (in the case above, "Animal Services"). Then click the New Folder icon to create a new folder with the same name as your page.
Once you are in the right folder click the +Upload button (with a green plus sign) and find the file on your computer.
- If you want to replace an old photo with a new photo of the same name, check the "Overwrite if file exists?" box.
Click the Upload button.
Edit Image properties
Make sure you have your new photo selected in the middle pane (you should see a preview on the right). Then click the Properties tab in the right pane. You must fill out the Alt Text field here before inserting a photo. Otherwise, you will get a popup telling you to do so.
- Width
- For most photos, we recommend entering 80%. You must type the %. Using a percentage means the image will resize on all screens. You can use 40-60% if wrapping with text.
- For long vertical photos, we recommend doing a smaller percentage or sizing it at 300px (will be smaller but work on mobile devices).
- Height - If using a percentage for width, delete the number for height.
- This field may keep trying to populate. Click to the chainlink icon to the right of the boxes so it appears "broken" (see image above) and you will be able to delete the height.
- Note: If you come back and edit the image properties, you will need to delete this number again.
- Border Color - Do not change
- Border Width - Do not change
- Alt Text - Enter a description of the image. This is what the visitor will see if the image doesn't load.
- Long Description - Do not enter a description here.
- Image Alignment - Click the drop down arrow to select. We recommend selecting the middle option, unless you are wrapping the image with text.
- Margin - Set all margins to 6. This creates space between your image and surrounding text.
- CSS Class - Do not change
Once you've finished out all the necessary fields. Double click the name of the image in the middle pane to insert it into your page.
How to edit an inserted image
Once you've inserted an image, you can edit its size, alignment, etc. by right clicking on the image in the Content Editor and clicking Properties.
A box will popup where you can make changes. The height field will populate when you open this box to make edits. Delete the number in the Height field if you sized your image with a percentage width. Click OK to save your edits.