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.

Note: Images are not yet available on mobile views of DayBack.

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 to make your images as small as possible so they load quickly.

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

Width Height Class Name Notes
Featured Image 640 412 simple-rectangle You don't need any border or drop shadow,
these will be added by DayBack.
Thumbnail 162 85 simple-rectangle DayBack will add a light border to your
image so don't add one yourself.

Logos

Width Height Class Name Notes
Featured Image 400 400 logo Coming soon; "Logo" isn't recognized just yet.
Thumbnail 85 85 logo DayBack will add a light border to your image
so don't add one yourself.

Portraits

Width Height Class Name Notes
Featured Image 696 696 portrait Add your own border and shadow to the image
(see "Styling..." below).
Thumbnail 120 120 portrait Add your own border to the image, but resist
using shadows on


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.

Still need help? Message Us Message Us