Settings to more closely emulate Google Photos

[nopoz]

I spent some time editing a custom.css to make ImmichFrame more closely emulate the look of the Nest Hub Google Photos screensaver. I thought I would share them here in case others wanted to do the same. Whether it's just for other user's reference or if they can be incorporated into the ImmichFrame code - either way that's fine with me. I assume the current default layout was made with the intention of emulating the look of the Photos Screensaver?

Example:

custom.css:

/* ===========================================
   FONT IMPORT (must be at top)
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap');

/* ===========================================
   GLOBAL CLOCK STYLES
   =========================================== */

/* Apply Google-style font, color, and tighter letter-spacing */
#clock, #photodate {
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.05em;
}

/* Align all clock elements to the left */
#clock {
  text-align: left;
}

/* ===========================================
   CLOCK DATE
   =========================================== */

#clockdate {
  text-align: left;
  margin-left: 0.3rem;            /* Align left edge with clocktime */
  opacity: 0.85;                  /* Slightly transparent like Google's style */
  font-weight: 200;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* ===========================================
   CLOCK TIME
   =========================================== */

#clocktime {
  display: inline-block;          /* Allow time and weather to sit side by side */
  margin-top: -0.25rem;           /* Reduce vertical gap between date and time */
  font-weight: 300;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

/* ===========================================
   WEATHER DISPLAY
   =========================================== */

#clockweather {
  display: inline-block;          /* Sit beside clocktime */
  vertical-align: middle;
  margin-left: -0.5rem;           /* Reduce horizontal gap between time and weather */
}

#clockweatherinfo {
  transform: scale(0.85);         /* Reduce overall scale of weather info */
  font-weight: 300;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hide location text (e.g., "San Francisco,") */
div.weather-location {
  display: none;
}

/* Fine-tune vertical alignment of temperature text */
.weather-temperature {
  position: relative;
  top: 1px;
}

/* Adjust weather icon position (icon has built-in whitespace) */
img.icon-weather {
  margin-right: -0.15rem;         /* Reduce gap between icon and temperature */
  position: relative;
  top: -2px;                      /* Nudge icon up for better alignment */
}

/* Replace "°C" with just "°" */
.weather-unit {
  font-size: 0;                   /* Hide original text */
}

.weather-unit::before {
  content: "°";
  font-size: 1.25rem;
}

/* Responsive font sizes for the degree symbol */
@media (min-width: 768px) {
  .weather-unit::before {
    font-size: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .weather-unit::before {
    font-size: 1.875rem;
  }
}

/* ===========================================
   PHOTO DATE
   =========================================== */

#photodate {
  padding-bottom: 0.98rem;        /* Align baseline with clocktime */
  font-weight: 200;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hide calendar icon */
#photodate .info-icon {
  display: none;
}

settings.yml:

General:
  DownloadImages: false
  RenewImagesDuration: 30
  RefreshAlbumPeopleInterval: 12
  PhotoDateFormat: "LL-dd-yyyy"
  ImageLocationFormat: "City,State,Country"
  UnitSystem: "metric"
  Webhook: null
  Language: en
  Interval: 45
  TransitionDuration: 2
  ShowClock: true
  ClockFormat: "h:mm"
  ShowProgressBar: false
  ShowPhotoDate: true
  ShowImageDesc: false
  ShowPeopleDesc: false
  ShowAlbumName: false
  ShowImageLocation: false
  PrimaryColor: "#FFFFFF"
  SecondaryColor: "#000000"
  Style: none
  BaseFontSize: '17px'
  ShowWeatherDescription: false
  ImageZoom: true
  ImagePan: false
  ImageFill: false
  Layout: splitview

[3rob3]

That looks fantastic!

[nopoz]

That looks fantastic!

Thanks! 😄

[JW-CH]

Thank you very much. We might link to this in the docs. Thank you for sharing!

Btw., instead of color: #FFFFFF; for the clock and photodate, you could set PrimaryColor: "#ffffff" in the config to display all text white :)

[nopoz]

Btw., instead of color: #FFFFFF; for the clock and photodate, you could set PrimaryColor: "#ffffff" in the config to display all text white :)

True! I've updated the example to use PrimaryColor: "#FFFFFF" in the config instead of the custom.css file.

[3rob3]

Just set this up, I dig it! Thanks again!

[3rob3]

I converted this to a discussion so it doesn't get lost. I think you left out ClockDateFormat. What are you using for that?

[nopoz]

I've tweaked the custom.css a bit more as I noticed there was a CSS processing difference between Android/Chromecast vs Desktop Browser. For example, things would look as expected on Desktop Browser, but different on Chromecast and Android TV app. I've tested with Google Nest Hub using Chromecast and NVIDIA Shield using the Google Store ImmichFrame app. Here are my latest settings which work for all devices I've tested:

/* ===========================================
   FONT IMPORT
   Import Google's Inter font (similar to Google Sans)
   Must be at top of file to load before use
   =========================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;600&display=swap');

/* ===========================================
   GLOBAL CLOCK CONTAINER
   =========================================== */
#clock {
  /* Flexbox layout for positioning child elements */
  display: flex;
  flex-wrap: wrap;                /* Allow date to wrap to its own row */
  align-items: baseline;          /* Align time and weather by text baseline */
  justify-content: flex-start;    /* Align content to the left */
  text-align: left;
  
  /* Spacing and typography */
  padding-left: 1rem;             /* Inset from left edge of screen */
  padding-bottom: 1rem;           /* Inset from bottom edge of screen */
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.05em;        /* Tighter kerning for cleaner look */
  
  line-height: 1;                 /* Normalize vertical spacing (fixes Android quirks) */
}

/* ===========================================
   CLOCK DATE (Top Row)
   Displays current date above the time
   =========================================== */
#clockdate {
  width: 100%;                    /* Force date onto its own row */
  margin-left: 0.2rem;            /* Fine-tune left alignment with time */
  
  font-weight: 300;               /* Light weight for subtlety */
  opacity: 0.85;                  /* Slightly transparent (Google ambient style) */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);  /* Soft shadow for legibility */
}

/* ===========================================
   CLOCK TIME (Bottom Row, Left)
   Displays current time, sits beside weather
   =========================================== */
#clocktime {
  margin: 0;                      /* Remove default margins */
  font-weight: 350;               /* Slightly bolder than date */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);  /* Larger shadow for prominence */
  letter-spacing: -0.05em;        /* Tighter kerning */
  
  line-height: 0.9;               /* Reduced line-height (fixes Android rendering) */
}

/* ===========================================
   WEATHER CONTAINER (Bottom Row, Right)
   Wrapper for weather info, sits beside time
   =========================================== */
#clockweather {
  margin-left: 0.75rem;           /* Gap between time and weather */
  line-height: 1;                 /* Normalize line-height */
}

/* ===========================================
   WEATHER INFO
   Contains icon, temperature, and unit
   =========================================== */
#clockweatherinfo {
  display: flex;                  /* Arrange icon and text horizontally */
  align-items: baseline;          /* Align text elements by baseline */
  
  transform: scale(0.85);         /* Shrink weather display to 85% */
  transform-origin: bottom left;  /* Scale from bottom-left to maintain alignment with time */
  
  font-weight: 300;               /* Light weight to match date */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);  /* Soft shadow for legibility */
}

/* Hide location text (e.g., "San Francisco,") */
div.weather-location {
  display: none;
}

/* Reset any inherited positioning on temperature and unit */
.weather-temperature, 
.weather-unit {
  position: static;
  top: auto;
  margin: 0;
}

/* ===========================================
   WEATHER ICON
   =========================================== */
img.icon-weather {
  height: 1.5em;                  /* Scale icon relative to text (50% larger than text) */
  width: auto;                    /* Maintain aspect ratio */
  margin-right: -0.15rem;         /* Pull temperature closer (icon has built-in padding) */
  
  align-self: center;             /* Vertically center icon (ignores baseline alignment) */
  
  position: relative;
  top: 1px;                       /* Fine-tune: nudge down slightly */
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

/* Tablets and larger (768px+) */
@media (min-width: 768px) {
  #clockweather {
    margin-left: -0.25rem;        /* Pull weather closer to time on larger screens */
  }
}

/* ===========================================
   PHOTO DATE (Bottom Right of each photo)
   Displays the date the photo was taken
   =========================================== */
#photodate {
  padding-bottom: 0.65rem;        /* Align baseline with clock time */
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.05em;        /* Tighter kerning to match clock */
  font-weight: 250;               /* Extra light weight */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);  /* Soft shadow for legibility */
  opacity: 0.85;                  /* Slightly transparent (matches clockdate) */
  
  font-size: 0.875rem;            /* Base size: 14px (matches Tailwind text-sm) */
}

/* Tablet size (768px+) */
@media (min-width: 768px) {
  #photodate {
    font-size: 1rem;              /* 16px (matches Tailwind md:text-md) */
  }
}

/* Desktop/TV size (1024px+) */
@media (min-width: 1024px) {
  #photodate {
    font-size: 1.25rem;           /* 20px (matches Tailwind lg:text-xl) */
  }
}

/* Hide calendar icon next to photo date */
#photodate .info-icon {
  display: none;
}

Settings:

General:
  DownloadImages: false
  RenewImagesDuration: 30
  RefreshAlbumPeopleInterval: 12
  PhotoDateFormat: "LLL yyyy"
  ImageLocationFormat: "City,State,Country"
  WeatherApiKey: "<redacted>"
  UnitSystem: "metric"
  WeatherLatLong: "<redacted>"
  Language: en
  Interval: 45
  TransitionDuration: 2
  ShowClock: true
  ClockFormat: "h:mm"
  ShowProgressBar: false
  ShowPhotoDate: true
  ShowImageDesc: false
  ShowPeopleDesc: false
  ShowAlbumName: false
  ShowImageLocation: false
  PrimaryColor: "#FFFFFF"
  SecondaryColor: "#000000"
  Style: none
  BaseFontSize: '17px'
  ShowWeatherDescription: false
  ImageZoom: true
  ImagePan: false
  ImageFill: false
  Layout: splitview
  TemperatureDecimalDigits: 0
  ShowTemperatureUnit: false

I'm currently using a build with my PRs #553 and #549 - you can test with the docker container package on my fork which has both integrated v1.0.30.1

[szszl0]

how do you use immichframe on google nest hub?

[JW-CH]

You cannot use it on Google Nest Hub, as far as I know. Google does not allow installing custom APK files. cc @3rob3

[3rob3]

I think people are casting to them.

[nopoz]

There a several methods for casting ImmichFrame to Google Hub devices.

1. use catt - probably the easiest and most direct way. Good for quick testing as well.
   For example, catt -d "<google hub device IP>" cast_site "<immichframe url>"

2. Use Home Assistant to create a dashboard that has ImmichFrame in it, then cast that dashboard with a HA Automation.
   This has some problems - like swiping away the ImmichFrame cast on the device doesn't stop it from being streamed. Instructions link from Tim Wilkes blog.

3. Install DashCast third party plugin into Home Assistant, then setup a HA automation to cast to the device based on your automation criteria. This is the method I prefer so far. Swiping the cast away actually stops it. No extra complication of having a Home Assistant dashboard streaming ImmichFrame like in option 2.

Example of Home Assistant automation using option 3:

alias: Show ImmichFrame on Nest Hub (DashCast)
description: Cast ImmichFrame when Nest Hub is idle
triggers:
  - trigger: state
    entity_id: person.<username>
    to: home
  - trigger: time_pattern
    minutes: /5
conditions:
  - condition: state
    entity_id: media_player.nesthub
    state: "off"
actions:
  - action: media_player.volume_mute
    target:
      entity_id: media_player.nesthub
    data:
      is_volume_muted: true
  - delay:
      milliseconds: 500
  - action: dash_cast.load_url
    data:
      entity_id: media_player.nesthub
      url: <immich frame url>
  - delay:
      seconds: 5
  - action: media_player.volume_mute
    target:
      entity_id: media_player.nesthub
    data:
      is_volume_muted: false
mode: single

Caveats: If you use features like ImageZoom in your settings this can cause images on Cast devices to quickly appear and then disappear when they start to move and a new image won't appear until the next image is cycled according to your "RenewImagesDuration" config. This is intermittent and random so I don't know what the problem is exactly. This problem is restricted to Chromecast devices only. If you turn off the image moving settings, this problem goes away.

[3rob3]

I was having a hard time seeing text sometimes so I tweaked this a little.
custom.css

[jimtrout87]

Thanks for this, this is great and looks very clean. If you want to use location\people\ablums then this will make all the text the same. I also commented out the icon hide from the bottom of the file, as when i have a few bits of detail i like having the icons. If you wanted to hide them all, then you would need to update this to include relevant icons.

/* ===========================================
PHOTO META (Date + Location + People + Albums)
=========================================== */
#photodate,
#imagelocation,
#peopledescription,
#imagealbums {
padding-bottom: 0.65rem;
font-family: 'Inter', sans-serif;
letter-spacing: -0.05em;
font-weight: 250;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0.85;

font-size: 0.875rem;
}

/* Optional spacing between metadata lines */
#imagelocation,
#peopledescription,
#imagealbums {
margin-top: 0.2rem;
}


/* Hide calendar icon next to photo date */
/* #photodate .info-icon {
display: none;
}
*/