Featured Images & Thumbnails

Overview

You can associate a featured image and a thumbnail with each event in DayBack. The featured image shows up behind the popover when you click on an event (like Alice Paul's portrait below), and the thumbnails show up beside the event before you've clicked on it (like the small portraits and flags below). Thumbnails are only available on Horizon view. Featured images are available on all views.

Adding Images

Images in DayBack are configured through field mapping, where you specify where DayBack should look for image information. Each image requires a URL field, where the image can be found, and an optional class name for styling purposes (see "Styling..." below). The URL fields should point to the location of your image on the public internet, such as:

https://bucketname.s3.amazonaws.com/imagename.png

Important Note: These image fields are not currently exposed in DayBack's popover. Therefore, you need to enter these URLs directly into your backend calendar source. For example, you would enter the URLs into cells in Google Sheets or fields in Salesforce (which can include formula fields). As a result, images are not yet available for sources where you can't add new fields in the backend, such as Google Calendar, O365, or Basecamp. This feature is in development, so please contact us if you have an urgent need for featured/thumbnail images in one of these sources.

Guidelines for Images

For optimal display in DayBack, adhere to the following image size guidelines. These recommendations ensure your images are resized appropriately and load quickly without unnecessary large dimensions.

Basic, Rectangular Images

• Size: Resize your images to the dimensions specified below. There's no benefit in making images larger, as these sizes are already twice the display size in DayBack.
• Optimization: Use services like TinyPNG or WebsitePlanet to reduce image file sizes, ensuring they load quickly.

Image Size Recommendations

• Aspect Ratio: If your images don't match the suggested aspect ratio, resize the largest dimension to fit the recommended size, allowing the other dimension to scale proportionally. For instance, if you have a vertical image that's 1500px tall and 1200px wide, resize the height to 640px and let the width adjust accordingly.

By following these guidelines, you'll ensure your images are optimized for both display quality and loading speed in DayBack.

Basic, Rectangular Images

Logos

Portraits

Styling Images with Custom CSS

If you'd like to customize the default styles for images in DayBack or create your own, follow the guidelines below. Customizations are done in DayBack's CSS. If you're new to editing the CSS, you can find a useful overview here: Editing DayBack's Appearance.

Turning off Default Borders and Shadows

In some cases, such as portrait images that aren't square and come with their own shadow, you may want to disable the default borders and shadows. The class name for your image should be placed at the end of DayBack's built-in class names. Here's how to do it:

.dbk_popover .featured-image.portrait {
    min-width: 400px;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none; 
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
}

For thumbnails, the styling is similar, and you can remove the border and background color as shown below:

.featured-image-thumbnail.portrait {
    max-height: 50px;
    z-index: 9090;
    border: none;
    background-color: transparent;
}

Irregularly Shaped Images

While CSS can create irregular drop shadows, it is very processor-intensive and not widely supported. Drawing irregular borders using CSS is also challenging. Therefore, we recommend adding your own borders to images, similar to our portrait example above. If your images are round, you can use the background templates provided. Here are the links for featured images and thumbnails:

• Featured Image Background Template
• Thumbnail Background Template