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 A New Size
  • Customizing Widget Photos
  • 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)
  • Hero (690×480)
  • Spotlight (700×300)
  • 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.
  • Cover (1200×645)
  • 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 A New Size

Platform Photos

  • In your admin dashboard, navigate to Settings > Appearance

    If you do not have a custom theme already, then select+Add Theme.

  • Select Edit Theme Templates for the theme you are modifying
  • 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

Widget Photos

  • In your Admin Dashboard, navigate to Content > Widgets

    It is suggested to create a new Widget Template based off the Default Widget theme of your choosing. If you don’t already have a Custom Widget Template, then select +Add Template.

  • Select the Widget Template for the Widget you are modifying.
  • 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 for ‘photo’ on the page.

    • List (Classic):  Lines 82 and 89
    • List (Modern):  Edit container for photo beginning on Line 62 and again on Line 71. Change photo size on Line 243 or search for square_300
    • Card: Line 511 or search for square_300

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: 0; } on the specific selector.

A 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.