Featured Images & Thumbnails

(Available for calendars based on Google Sheets; coming soon to all DayBack sources!)

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 are set up in field mapping where you'll find a place to say where in your source DayBack should look for information about your images. Each image needs a field for the URL where the image can be found, and an optional class name(see "Styling..." below). The URL fields should map to a field where you're storing the path to your image on the public internet, something like this: 

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

Note that these image fields are not (yet) exposed in DayBack's popover. So you'll be entering these actual URLs into your backend calendar source: the URLs will go into cells in Google Sheets, or they'll be fields---even formula fields--in Salesforce. Thus, images aren't yet available for sources where you can't add new fields in the backend: featured/thumbnail images are not available to Google Calendar, O365, or Basecamp sources, but that's coming. Please get in touch if you have an urgent use case for featured/thumbnail images in one of these sources.

Guidelines for Images

The following images sizes work best with DayBack. For most images, follow the guidelines for "Basic, Rectangular Images." You don't need to do much besides resizing these images; DayBack will add borders and drop shadows for you. There is no sense making images any bigger than the sizes below since these dimensions are already twice the size at which they'll be displayed in DayBack. Be sure to use a service like TinyPNG or WebsitePlanet (if your original images are very large) as it's important to make your images as small as possible for fast loading.

If your images aren't the same aspect ratio as the guidelines here, just take the largest dimension as your largest dimension. So if you have a vertical image 1500px tall by 1200px wide, you'd want to resize the height to 640 and let the width fall where it will.

Basic, Rectangular Images

Logos

Portraits

Styling Images with Custom CSS

Here are some pointers if you'd like to customize the styles above, or create your own. Customizations are done in DayBack's CSS and if you haven't played with the CSS yet you'll find a nice overview here: Editing DayBack's Appearance.

Turning off the default borders and shadows. This is what we do on in the portrait class since our portrait images aren't square and come with their own shadow. Notice how the class name for your image comes at the end of the DayBack's build-in class names.

.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;
}

Styling for the thumbnail is similar and removes the border and background color.

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

Irregularly shaped images. While CSS can draw irregular drop shadows, it's very processor-intensive and not as widely supported as we'd like. It's also very difficult to draw an irregular border using CSS, so we recommend you add our own borders to images as we've done with our portrait example above. If your images are round, feel free to use the background templates we use, Here's the one for featured images, and here's one for thumbnails.