Photo Customizations

It’s possible to change the size and shape of photos on your Localist platform by using the Theme Editor (HTML) and Custom CSS.

In this article you’ll find:

  • Photo Display Locations
  • Display vs Sizing
  • How to Choose a Size
  • Implementing the New Size
  • Modifying the Display with Custom CSS
  • Photo Cropper

Photo Display Locations

If you’re looking at an Event, Place, Group, or Department, its photo will show up in four places:

1. Listings (80×80)

Screen Shot 2016-12-07 at 9.02.04 AM

2. Landing Pages (200×200)

Screen Shot 2016-12-07 at 9.04.17 AM

3. When clicked on a landing page (originally uploaded size up to 750px)

Screen Shot 2016-12-07 at 9.06.24 AM

4. Featured Events (200×200)

Screen Shot 2016-12-07 at 9.55.30 AM


Display vs. Sizing

Display = the size image a user sees when a photo displays upon page load

Sizing = the actual size of the image as referenced by Localist’s code

  • Example: The size can be 300×300, but the display is set to 250×250

Available Sizes (WxH)

Tiny (20×20)

Small (50×50)

Medium (80×80)

Big (200×150)

Big_Square (200×200)

Square_300 (300×300)

Big_300 (300×225)

Huge (up to 750)

Default Sizes

Listings = Medium (80×80)

Landing Pages = Big Square (200×200)

Landing Page pop-up = Huge

Featured Event = Big Square (200×200)

  • The huge size varies per image. If one or both  dimensions exceed 750px, the longest side will be scaled down to 750px. If neither dimension is over 750px, the will instead remain at its “original” size–it will not be scaled larger.
  • “Original” is the untouched, un-cropped photo that was initially uploaded.
  • The largest specified sizes we offer are “Big 300” (300×225) or “Square 300” (300×300).

Choosing a Size to Use

If you would like to choose dimensions other than the standard choices,  then select the next largest size and use CSS to modify the display.

For example, if you’d like to display a square 250×250 image, you will need to use the “Square 300” (300×300) size and apply CSS to display a smaller image. If instead you select a smaller image than what you would like to display, your images will become distorted when applying CSS to enlarge the display.


Implementing the New Size 

1. In your admin dashboard, navigate to Settings > Appearance 

If you do not have a custom theme already, then follow these steps:

  • Select the +Add Theme button
  • Enter a name and keep the Copy From set to Default
  • Back on the Appearance landing page, select the new theme’s name

2. Select Edit Theme Templates for the theme you are modifying

3. Modify the following files for each of the ways photos are displayed. If the file is unedited, then you can follow along according to the noted lines. If your file has been edited (the file name is turquoise), then search the default image size on the page.

  • Example: Change event.photo.big_square to event.photo.big or event.photo.big_300

Event Landing Pages: Events > Page Shell > lines 7, 44 & 47 or search big_square

Group & Department Landing Pages: Groups > Page Shell > lines 7, 31 & 34 or search big_square

Place Landing Pages: Places > Place Page Shell > lines 7, 31 & 34 or search big_square

Group, Department & Place Listings: Search Results & Month Views > _result_block > line 25 or search size:medium

Event Listings: Shared Among Multiple Views > event_item > lines 7 & 38 or search size:small and size:medium

Featured Event: Shared Among Multiple Views > _featured_section > line 6 or search size:big_square


Modifying the Display with Custom CSS

CSS Selectors

  • All Listings = .item>.box_left img
  • Featured Event = .featured_carousel .featured_item_wrapper .item img
  • Landing Pages = .content-top .box_image img

Border Radius

The default circular images are set with CSS using the border-radius rule. To display sharp, square or rectangular images then set {border-radius: 0px; } on the specific selector.

  • Note: The circular border radius is just for display. When a user selects the photo, it will still display the original photo without cropping or display modifications.

Photo Cropper

Changing the photo size or applying custom CSS will not change the cropper tool in the event form. This is a universal tool that does not change when the photo display is altered. Since photos can be displayed at varying sizes and shapes, we chose a 1:1 cropper to best accommodate all shape options. For example, the tool can be used to focus on the center of a photo to adapt to all displays.


Customer Examples

http://calendar.colgate.edu/

http://events.exploregwinnett.org/

http://calendar.northlandchurch.net/

http://calendar.visitwallawalla.com/

http://events.cmc.edu/