Adding and Replacing Images
Users now have the ability to add and replaces images on their webpages as long as they adhere to the following criteria:
- Images are taken by the campus photographer or preapproved by Public Affairs and Communication
- Images are sized appropriately
Where to get photos
Official Allan Hancock College photographs can be taken by the campus photographer or taken from the college's Flickr site.
To request new photos to be taken by the campus photographer, go to the Employee Resources page on the myHancock portal and select "Photography/Video Request" under "Requests and Work Orders."
Sizing Images for the Website
Images on websites should be sized appropriately so that they don't waste data or slow the pages loading time.
Tools for Resizing images
Photoshop: If you are familiar with using Adobe Photoshop and have it installed on your computer, you can size images using the crop tool.
Online tools: There are various online tools that can be used to size and crop images. View a video tutorial for a simple web-based resize tool, or go on Google and find one that you like!
Web Services Specialist: If you need help resizing and adding images, contact the Web Services Specialist who would be more than happy to size and add the photos for you. Just email or send a link to the photo that you would like to have added to firstname.lastname@example.org.
To add an image onto a page:
See Video Demonstration - Replacing Images
See Video Demonstration - Adding a new Image
- While editing click the "Insert/Edit Image" icon ( or ) in the toolbar.
- In the "Source" field, click the "Browse" icon to search for an image. You can toggle
between a list and a thumbnail view by clicking the icons to the right of the filter
field. Use the breadcrumbs to move to the images folder, and filter by image name or tags if necessary.
- If the image you want isn't available, you can upload it.
- Once you've chosen your image, click "Insert."
- Enter a value in the "Image Description" field. This is required for accessibility reasons.
- You can also enter a "Tooltip," which is the text that displays when someone hovers their cursor over the image.
- If you want, modify the dimensions of the image, and/or add a style from the "Class" dropdown. Use a percentage for responsive image sizing, or a pixel value.
- To justify the photo to the left or right select Custom in the class section and type imgRight or imgLeft in the custom blank
- Click "Insert." Your image is now on the page!
- To replace an image, click on the image you want to replaace and then click the Insert/Edit Image icon and use steps 2-8 above
Appearance TabLink to this section
The "Appearance" tab of the Insert/Edit Image box has some additional options for how your image looks.
- Alignment: Sets the alignment of the image against the text, e.g. left, right, center.
- Dimensions*: Sets the height and width of the image. If "Constrain Proportions" is checked, the image keeps its original height-to-width ratio.
- Vertical Space: Sets the amount of space between the top and bottom sides of the content area and the image.
- Horizontal Space: Sets the amount of space between the left and right sides of the content area and the image.
- Border: Sets the width of the image border. You can modify the color and style of the border in the "Style" field.
- Class*: Adds a style to the image.
- Style: Based on the appearance options you set, the styling code auto-completes in this field. You can also manually edit the styling here.
*In JustEdit, this field is in the "General" tab. In the Classic editor, this field is in the "Appearance" tab.