Image Handling

Image Handling A Guide to using Images 1 The Frequency pla0orm uses specific image sizes and automa:cally does a lot imaging handling for you. This saves you :me and effort while keep your site consistent and smart looking! Most content types require a Cover or Hero Image (large image at the top of the page). Frequency then uses “Smart Cropping” to “automagically” create all the other needed image sizes for you! For example, the cover image for a blog is also used as the thumbnail image in the latest blog lis:ng widget. The Smart Cropping tool uses a complex algorithm to determine the most interes:ng part of the image and chooses that for each addi:onal needed image size. While it is computer smart, there’s nothing like the discernable human eye, so some:mes you may wish/need to manually crop images, which this guide will cover. Always start with the largest size image for the best results – the two largest sizes used are Hero Tall (1170x515) and Delta (775x515). All other image sizes will be automa:cally generated when needed from these cover images uploaded, provided that the uploaded image meets the minimum size requirements for each placement. All images are responsive, so each size listed here is for the largest possible presenta7on of the image style. Let’s start with an overview of the images and how/where they are used. The common image sizes used are: 2 • 
• 
• 
• 
• 
• 
• 
• 
• 
• 
Tall Hero = 1170x515 → this is the default size for Blog posts and Show or Host cover images. Delta = 775x515 → this is the default size for Ar?cle and Event cover images. This size is also used for the Homepage Carousel, Image Galleries and Promo?ons. Hero = 1170x150 → this is the default size for Content Page cover images. Byline thumbnail = 55x55 → used when a blog is associated with a show or host. Lis?ng thumbnail = 250x250 → used in lis:ng view panes Teaser thumbnail = 268x178 → used in teaser view panes On-­‐Air Now thumbnail = 133x133 → used in the on-­‐air now widget. Alpha = 380x250 → used for Call to Ac:on (CTA 1/3) boxes (mainly intended for homepage 1/3 columns or sidebar) Beta = 775x250 → used for Call to Ac:on (CTA 2/3) boxes (mainly intended for homepage 2/3 column) Gamma = 380x515 → this is the size for Call to Ac:on Tall (CTA 1/3 Tall) boxes. These are mainly intended for homepage 1/3 columns or sidebars. 3 Hero Tall 1170x515 Byline Thumbnail 55x55 On Air Now Thumbnail 133x133 Lis:ng Thumbnail 250x250 4 Homepage Carousel and Promo:ons = Delta 775x515 Ar:cle = Delta 775x515 Image Galleries = Delta 775x515 Events = Delta 775x515 5 Teaser thumbnail = 268x178 Used on landing pages such as Hosts, Contests, Blog landing pages, etc.. Gamma = 380x515 Used on Homepage next to Carousel 6 Alpha = 380x250 Used on homepage 1/3 columns or sidebar 7 Hero = 1170x250 Used on Content Page 8 Manual Image Cropping If you are unhappy with a automa:cally cropped image, you can manually crop any image used for other sizes (for example the blog cover image use as the Lis:ng Thumbnail). Find your content item and click on New Drah and scroll down to the Manual Crop op:on under the Cover Image. Using the dropdown choose the image size you wish to change the crop on and select. 9 Manual Image Cropping In the modal window that opens you’ll see the chosen area for that image cropping. Simply move the box to the area you want to use and click save. You can also click on Maximize Selec:on and it will automa:cally choose the largest area of the picture you can use and you can adjust from there if desired. 10 Image Handling in the WYSWYG When crea:ng content for a page you can add images to the body of your ar:cle, blog and other content types. By using the Add Media bulon in the WYSWYG you can upload an image or choose an exis:ng image already loaded to your library. (See Adding Files Types to Frequency for the laler). Aher loading or choosing your image, Frequency will ask you how you want to display the image in the body: Original, Full Width, Quarter, Thumbnail and Link. 11 Original 12 Full Width Quarter Thumbnail Link 13