Home

Customizing Photos

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 will find: 

  • Display vs. Sizing
  • Implementing the New Size
  • Modifying the Display with Custom CSS
  • Customer Examples

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) — Listings
  • Big (200×150)
  • Big_Square (200×200) — Landing Pages and Featured Events 
  • Square_300 (300×300)
  • Big_300 (300×225)
  • Huge (up to 750) – this 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 — this size is the untouched, un-cropped photo that was initially uploaded.

 

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.

 

Photo Cropper

Changing the photo size or applying custom CSS will not change the cropper tool in the event formThis 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.

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.

Customer Examples