Using imagery or photography on your webpages can help guide users through your content - and show off our students, faculty, and their work!
General Tips and Best Practices
Candids and common campus locations are searchable by all, for example type in “LOVE” and the Love statue will come up. Type in “candids” and we have pre-populated the library with candids.
Even if you only plan to use a small version on your page!
The image manager will easily let you resize and move your images to fit in the various areas of your page. As more computers and devices come standard with high-resolution displays, it’s a good habit to keep those original image sizes large! That also makes it easier for you (or the web team) to reuse your images in a slideshow format later.
Aim for at least 2000px on the longest side, if you are able.
Example: Biology Ice Cream Social Fall 2019
For the Ursinus event widgets and news widgets, the photo is almost a square, so keep that in mind when uploading a photo that is rectangular in shape. It will primarily focus on the mid section of a vertical OR horizontal photo.
It is best practice to use a photo or simple graphic rather than a flyer or image with text on it. Images with heavy text will compete with the title and description thatis part of the widget display.
if you have a flyer or TV slide with the graphic and text, simplify the image that you upload to the event or news story. It is NOT the same size as the flyer and will most certainly be cut off. Text will not be readable. Suggestion: select one image from the flyer and use that as the uploaded image.
Images can be made into links by clicking to highlight the image, and then pushing the link button in the toolbar.
You can choose whether or not to display the caption below your photo, but regardless of what you choose, always enter a caption, in fact, you will be required to do so. This helps our users who may be using screen-readers or other assistive devices, or who are accessing the site from low-bandwidth locations.
The best captions are usually one or maybe two short sentences - be descriptive, but succinct!
As more and more people view the site on a multitude of devices, we can more easily control their experience by using these handy guides. Plus you’ll always be certain that your images aren’t stretched or distorted!
An image collection is a tool that you manage within LiveWhale - they aren’t visible to your users. Consider Image Collections to be internal libraries of photos. A good example of an image collection might be “Staff Headshots”.
Galleries are located within the Images tab. Galleries are intended to be shown publicly. Galleries are a set of more curated images, with captions, that are displayed to your users. So your image gallery might be called “Biology Major Ice Cream Social” - and it would only use the best of the uploaded photos from the Image Gallery from that event, complete with a caption. Galleries are synomonous with Slideshow under the Insert element on the Edit Page toolbar.
If you cannot locate an image in our image library in the dashboard (by searching the word candid for instance), and want to search the web for imagery, start with places like Flickr or Pixabay, which will allow you to search for images that are licensed for reuse by Creative Commons. Also, Google Images allows you to filter by non-commercial reuse, under Images - Tools - Usage Rights.
Wikipedia typically offers one photo per topic that can be commonly used.
Do NOT upload photosthat are copyrighted and require permission. Permission must be explicitly granted by the owner of that image. Legal action has been taken by photographers for illegal use of photos. It is essential that Livewhale editors adhere to this policy.
Inline Images
This image is added to the editable page region. Use the image button in the toolbar to add an image, then select the image and choose half column or full column. Add a short, descriptive caption to the image, and choose whether to display the caption below the image.
This is the photo caption with the following link: this is a link and this text is part of the caption.
Large Image Call to Action Option
The 2019 Large image CTA widget works in both a full width page such as a Specialized landing page, Core Site Landing Page or the Homepage OR it works just as nicely in a full-column width content area on inner pages.
How to do it:
Upload an image to the images manager, in the LiveWhale dashboard. Tag the image with “CTA” and any other tags to identify this particular image. The image title and caption will appear over the image.
To add a red button over the image, include a link on the last line of the caption, then make it bold.
Next, go to the page where you’d like to include this image. Go to the “Insert” option in the toolbar and add a widget to the page. Then choose the 2019 Large Image CTA widget from the list of global widgets. It will show a random image from this group tagged with CTA. You can add a widget tag to filter a particular image.
<div class="widget featured-item"><div class="widget-details"><div class="widget-image" role="presentation"><a href="/live/image/gid/6/width/650/30821_cta.jpg" class="lw_preview_image lw_disable_preview" tabindex="-1"><picture class="lw_image lw_image30821"><source media="(max-width: 500px)" type="image/webp" srcset="/live/image/scale/2x/gid/6/width/500/height/253/crop/1/30821_cta.rev.1570815902.webp 2x" data-origin="responsive"/><source media="(max-width: 500px)" type="image/jpeg" srcset="/live/image/scale/2x/gid/6/width/500/height/253/crop/1/30821_cta.rev.1570815902.jpg 2x" data-origin="responsive"/><source media="(max-width: 800px)" type="image/webp" srcset="/live/image/gid/6/width/800/height/406/crop/1/30821_cta.rev.1570815902.webp 1x" data-origin="responsive"/><source media="(max-width: 800px)" type="image/jpeg" srcset="/live/image/gid/6/width/800/height/406/crop/1/30821_cta.rev.1570815902.jpg 1x" data-origin="responsive"/><source media="(max-width: 1200px)" type="image/webp" srcset="/live/image/gid/6/width/1200/height/608/crop/1/30821_cta.rev.1570815902.webp 1x" data-origin="responsive"/><source media="(max-width: 1200px)" type="image/jpeg" srcset="/live/image/gid/6/width/1200/height/608/crop/1/30821_cta.rev.1570815902.jpg 1x" data-origin="responsive"/><source media="(min-width: 1201px)" type="image/webp" srcset="/live/image/gid/6/width/1440/height/730/crop/1/30821_cta.rev.1570815902.webp 1x" data-origin="responsive"/><source media="(min-width: 1201px)" type="image/jpeg" srcset="/live/image/gid/6/width/1440/height/730/crop/1/30821_cta.rev.1570815902.jpg 1x" data-origin="responsive"/><img src="/live/image/gid/6/width/1440/height/730/crop/1/30821_cta.rev.1570815902.jpg" alt="This is the caption. Eget nullam dictum vel dolor consectetuer. Faucibus tristique vitae. Blandit varius elit ultrices nullam wisi. Liber..." width="1440" height="730" data-max-w="1440" data-max-h="730" data-optimized="true"/></picture></a></div><div class="widget-content"><h3 class="title"> Large Image CTA Title </h3><div class="summary"> This is the caption. Eget nullam dictum vel dolor consectetuer. Faucibus tristique vitae. Blandit varius elit ultrices nullam wisi. Libero scelerisque vel ut lobortis faucibus purus per tempor. Fringilla ut praesent.<br/><br/><strong><a href="#0" target="_blank" rel="noopener">Take action now</a></strong></div></div></div></div>