additional configuration options for backdrops

README.md

@@ -68,7 +68,7 @@ GET /{api_key}/{id_type}/logo-default/{id_value}.png
 GET /{api_key}/{id_type}/backdrop-default/{id_value}.jpg
 ```
 
-- Returns JPEG with rating badges stacked vertically in the top-right corner
+- Returns JPEG with rating badges overlaid on the backdrop (configurable position and direction)
 - Uses TMDB (default) or Fanart.tv as the image source
 
 ### Episode
@@ -106,13 +106,13 @@ GET /{api_key}/isValid
 - `?label_style={t|i|o}`: label rendering — `t` (text), `i` (icon), `o` (official provider logos)
 - `?badge_size={xs|s|m|l|xl}`: badge scale — extra-small, small, medium, large, extra-large
 - `?image_source={t|f}`: image source — `t` (TMDB, default), `f` (Fanart.tv). Applies to all image types. The non-selected source is used as fallback
-- `?badge_direction={d|h|v}`: badge stacking direction (poster only) — `d` (default), `h` (horizontal), `v` (vertical)
-- `?position={bc|tc|l|r|tl|tr|bl|br}`: badge anchor position (poster only)
+- `?badge_direction={d|h|v}`: badge stacking direction — `d` (default), `h` (horizontal), `v` (vertical). Applies to poster, backdrop, and episode endpoints
+- `?position={bc|tc|l|r|tl|tr|bl|br}`: badge anchor position. Applies to poster, backdrop, and episode endpoints
 - `?textless={true|false}`: prefer textless images when available (poster only). Works with both TMDB and Fanart.tv sources
 - `?blur={true|false}`: apply Gaussian blur for spoiler protection (episode only). Badges remain sharp over the blurred still image
 - RPDB-compatible — use `http://localhost:3000` as the base URL (drop-in replacement for `https://api.ratingposterdb.com`). Old parameter names `?poster_source=` and `?fanart_textless=` are accepted as aliases
 
-Poster/episode parameters (`badge_direction`, `position`) are silently ignored on logo and backdrop endpoints. `textless` is poster-only. For shared parameters (`ratings_limit`, `badge_style`, `label_style`, `badge_size`, `image_source`), the override is applied to the correct image-type-specific setting (e.g. `?badge_style=h` on the poster endpoint sets `poster_badge_style`, on the logo endpoint sets `logo_badge_style`).
+`textless` is poster-only. `blur` is episode-only. `badge_direction` and `position` are silently ignored on logo endpoints. For shared parameters (`ratings_limit`, `badge_style`, `label_style`, `badge_size`, `image_source`), the override is applied to the correct image-type-specific setting (e.g. `?badge_style=h` on the poster endpoint sets `poster_badge_style`, on the logo endpoint sets `logo_badge_style`).
 
 Management endpoints (auth, keys, settings) are under `/api/` and return JSON.
 
@@ -278,11 +278,16 @@ Cache keys uniquely identify a rendered image. They are used as keys in the in-m
 {id_type}/{id_value}{variant}{ratings_suffix}{pos_suffix}{style_suffix}{label_suffix}{direction_suffix}{badge_size_suffix}{size_suffix}
 ```
 
-**Logo / Backdrop:**
+**Logo:**
 ```
 {id_type}/{id_value}{kind_prefix}{variant}{ratings_suffix}{style_suffix}{label_suffix}{badge_size_suffix}{size_suffix}
 ```
 
+**Backdrop:**
+```
+{id_type}/{id_value}{kind_prefix}{variant}{ratings_suffix}{pos_suffix}{style_suffix}{label_suffix}{direction_suffix}{badge_size_suffix}{size_suffix}
+```
+
 ### Suffix Reference
 
 | Suffix | Format | Example | Description |
@@ -364,8 +369,8 @@ imdb/tt0111161_l_t_en@mil.sh.lt.bm.zm
 # Logo from Fanart.tv with English language
 imdb/tt0111161_l_f_en@mil.sh.lt.bm.zm
 
-# Backdrop from TMDB with vertical badges, official labels, extra-large badge size, large image
-imdb/tt0111161_b_t@mil.sv.lo.bxl.zl
+# Backdrop from TMDB with top-right position, vertical direction, vertical badges, official labels, extra-large badge size, large image
+imdb/tt0111161_b_t@mil.ptr.sv.lo.dv.bxl.zl
 
 # Episode with 1 rating, top-right position, vertical direction, vertical badges, official labels, medium badge size, blur enabled
 imdb/tt0959621_e@i.ptr.sv.lo.dv.bm.blur.zm

api/src/entity/api_key_settings.rs

@@ -23,6 +23,8 @@ pub struct Model {
     pub poster_badge_size: String,
     pub logo_badge_size: String,
     pub backdrop_badge_size: String,
+    pub backdrop_position: String,
+    pub backdrop_badge_direction: String,
     pub episode_ratings_limit: i32,
     pub episode_badge_style: String,
     pub episode_label_style: String,

api/src/handlers/admin.rs

@@ -131,6 +131,8 @@ pub struct GlobalSettingsResponse {
     pub poster_badge_size: BadgeSize,
     pub logo_badge_size: BadgeSize,
     pub backdrop_badge_size: BadgeSize,
+    pub backdrop_position: BadgePosition,
+    pub backdrop_badge_direction: BadgeDirection,
     pub episode_ratings_limit: i32,
     pub episode_badge_style: BadgeStyle,
     pub episode_label_style: LabelStyle,
@@ -176,6 +178,8 @@ pub async fn get_settings(
         poster_badge_size: settings.poster_badge_size,
         logo_badge_size: settings.logo_badge_size,
         backdrop_badge_size: settings.backdrop_badge_size,
+        backdrop_position: settings.backdrop_position,
+        backdrop_badge_direction: settings.backdrop_badge_direction,
         episode_ratings_limit: settings.episode_ratings_limit,
         episode_badge_style: settings.episode_badge_style,
         episode_label_style: settings.episode_label_style,
@@ -225,6 +229,10 @@ pub struct UpdateGlobalSettingsRequest {
     pub logo_badge_size: BadgeSize,
     #[serde(default = "db::default_badge_size")]
     pub backdrop_badge_size: BadgeSize,
+    #[serde(default = "db::default_backdrop_position")]
+    pub backdrop_position: BadgePosition,
+    #[serde(default = "db::default_backdrop_badge_direction")]
+    pub backdrop_badge_direction: BadgeDirection,
     #[serde(default = "db::default_episode_ratings_limit")]
     pub episode_ratings_limit: i32,
     #[serde(default = "db::default_episode_badge_style")]
@@ -271,6 +279,8 @@ pub async fn update_settings(
         ("poster_badge_size", req.poster_badge_size.as_str()),
         ("logo_badge_size", req.logo_badge_size.as_str()),
         ("backdrop_badge_size", req.backdrop_badge_size.as_str()),
+        ("backdrop_position", req.backdrop_position.as_str()),
+        ("backdrop_badge_direction", req.backdrop_badge_direction.as_str()),
         ("episode_ratings_limit", &episode_limit_str),
         ("episode_badge_style", req.episode_badge_style.as_str()),
         ("episode_label_style", req.episode_label_style.as_str()),

api/src/handlers/api_keys.rs

@@ -113,6 +113,8 @@ pub struct RenderSettingsResponse {
     pub poster_badge_size: BadgeSize,
     pub logo_badge_size: BadgeSize,
     pub backdrop_badge_size: BadgeSize,
+    pub backdrop_position: BadgePosition,
+    pub backdrop_badge_direction: BadgeDirection,
     pub episode_ratings_limit: i32,
     pub episode_badge_style: BadgeStyle,
     pub episode_label_style: LabelStyle,
@@ -155,6 +157,8 @@ fn settings_to_response(settings: &db::RenderSettings, fanart_available: bool) -
         poster_badge_size: settings.poster_badge_size,
         logo_badge_size: settings.logo_badge_size,
         backdrop_badge_size: settings.backdrop_badge_size,
+        backdrop_position: settings.backdrop_position,
+        backdrop_badge_direction: settings.backdrop_badge_direction,
         episode_ratings_limit: settings.episode_ratings_limit,
         episode_badge_style: settings.episode_badge_style,
         episode_label_style: settings.episode_label_style,
@@ -203,6 +207,10 @@ pub struct UpdateSettingsRequest {
     pub logo_badge_size: BadgeSize,
     #[serde(default = "db::default_badge_size")]
     pub backdrop_badge_size: BadgeSize,
+    #[serde(default = "db::default_backdrop_position")]
+    pub backdrop_position: BadgePosition,
+    #[serde(default = "db::default_backdrop_badge_direction")]
+    pub backdrop_badge_direction: BadgeDirection,
     #[serde(default = "db::default_episode_ratings_limit")]
     pub episode_ratings_limit: i32,
     #[serde(default = "db::default_episode_badge_style")]
@@ -240,6 +248,8 @@ fn build_upsert(id: i32, req: &UpdateSettingsRequest) -> db::UpsertApiKeySetting
         poster_badge_size: req.poster_badge_size.as_str(),
         logo_badge_size: req.logo_badge_size.as_str(),
         backdrop_badge_size: req.backdrop_badge_size.as_str(),
+        backdrop_position: req.backdrop_position.as_str(),
+        backdrop_badge_direction: req.backdrop_badge_direction.as_str(),
         episode_ratings_limit: req.episode_ratings_limit,
         episode_badge_style: req.episode_badge_style.as_str(),
         episode_label_style: req.episode_label_style.as_str(),

api/src/handlers/image.rs

@@ -278,7 +278,7 @@ fn apply_query_overrides(
         }
     }
 
-    // -- poster/episode position and direction overrides --
+    // -- position and direction overrides (poster, backdrop, episode) --
     if kind == cache::ImageType::Poster {
         if let Some(dir) = query.badge_direction {
             s.poster_badge_direction = dir;
@@ -287,6 +287,14 @@ fn apply_query_overrides(
             s.poster_position = pos;
         }
     }
+    if kind == cache::ImageType::Backdrop {
+        if let Some(dir) = query.badge_direction {
+            s.backdrop_badge_direction = dir;
+        }
+        if let Some(pos) = query.position {
+            s.backdrop_position = pos;
+        }
+    }
     if kind == cache::ImageType::Episode {
         if let Some(dir) = query.badge_direction {
             s.episode_badge_direction = dir;
@@ -782,15 +790,26 @@ mod tests {
     #[test]
     fn apply_query_overrides_backdrop_maps_correctly() {
         let settings = Arc::new(db::RenderSettings::default());
+        let original_poster_position = settings.poster_position;
+        let original_poster_direction = settings.poster_badge_direction;
+
         let query = ImageQuery {
             ratings_limit: Some(5),
             badge_style: Some(BadgeStyle::Default),
+            position: Some(BadgePosition::BottomCenter),
+            badge_direction: Some(BadgeDirection::Horizontal),
             ..empty_query()
         };
         let result =
             apply_query_overrides(settings, &query, cache::ImageType::Backdrop).unwrap();
         assert_eq!(result.backdrop_ratings_limit, 5);
         assert_eq!(result.backdrop_badge_style, BadgeStyle::Default);
+        assert_eq!(result.backdrop_position, BadgePosition::BottomCenter);
+        assert_eq!(result.backdrop_badge_direction, BadgeDirection::Horizontal);
+
+        // Poster fields unchanged
+        assert_eq!(result.poster_position, original_poster_position);
+        assert_eq!(result.poster_badge_direction, original_poster_direction);
     }
 
     #[test]

api/src/handlers/preview.rs

@@ -127,6 +127,8 @@ fn preview_render_settings(
             s.backdrop_badge_style = badge_style;
             s.backdrop_label_style = label_style;
             s.backdrop_badge_size = badge_size;
+            s.backdrop_position = position;
+            s.backdrop_badge_direction = badge_direction;
         }
         cache::ImageType::Episode => {
             s.episode_ratings_limit = ratings_limit;
@@ -276,10 +278,12 @@ pub async fn preview_backdrop(
     let default_order = db::default_ratings_order();
     let ratings_order = query.ratings_order.as_deref().unwrap_or(&default_order);
     db::validate_ratings_order(ratings_order)?;
-    let badge_style = query.badge_style.unwrap_or(BadgeStyle::Vertical).resolve(BadgeDirection::Vertical);
+    let position = query.position.unwrap_or(db::default_backdrop_position());
+    let badge_direction = query.badge_direction.unwrap_or(db::default_backdrop_badge_direction()).resolve(position);
+    let badge_style = query.badge_style.unwrap_or(BadgeStyle::Vertical).resolve(badge_direction);
     let label_style = query.label_style.unwrap_or(db::default_label_style());
     let ratings_suffix = ratings::ratings_cache_suffix(ratings_order, ratings_limit);
-    let preview_settings = preview_render_settings(cache::ImageType::Backdrop, badge_style, label_style, badge_size, BadgePosition::BottomCenter, BadgeDirection::Horizontal, ratings_limit, ratings_order);
+    let preview_settings = preview_render_settings(cache::ImageType::Backdrop, badge_style, label_style, badge_size, position, badge_direction, ratings_limit, ratings_order);
     let suffix = serve::settings_cache_suffix_with_ratings(&preview_settings, cache::ImageType::Backdrop, image_size, &ratings_suffix);
     let cache_key = format!("preview-backdrop:{suffix}");
     let cache_path = cache::preview_path(&state.config.cache_dir, cache::ImageType::Backdrop, &suffix, "jpg")?;
@@ -302,7 +306,7 @@ pub async fn preview_backdrop(
     let quality = state.config.image_quality;
 
     let buf = tokio::task::spawn_blocking(move || {
-        generate::render_backdrop_sync(backdrop_png, &badges, &font, quality, badge_style, label_style, target_width, badge_scale)
+        generate::render_backdrop_sync(backdrop_png, &badges, &font, quality, position, badge_style, label_style, badge_direction, target_width, badge_scale, badge_size)
     })
     .await
     .map_err(|e| AppError::Other(e.to_string()))??;

api/src/image/generate.rs

@@ -21,6 +21,7 @@ const BADGE_TOP_MARGIN: u32 = 20;
 const BADGE_SIDE_MARGIN: u32 = 15;
 const BADGE_ROW_SPACING: u32 = 7;
 const BADGE_VERT_SPACING: u32 = 7;
+const BACKDROP_SIDE_MARGIN: u32 = 20;
 const MAX_BADGES_PER_ROW: usize = 3;
 const MAX_VERT_BADGES_PER_ROW: usize = 5;
 
@@ -140,21 +141,21 @@ pub async fn generate_poster(params: ImageParams<'_>) -> Result<Vec<u8>, AppErro
     Ok(buf)
 }
 
-/// Overlay badges in a vertical column, positioned according to `poster_position`.
-fn overlay_vertical_stack(canvas: &mut RgbaImage, badge_images: &[RgbaImage], poster_position: BadgePosition, badge_scale: f32) {
+/// Overlay badges in a vertical column, positioned according to `position`.
+fn overlay_vertical_stack(canvas: &mut RgbaImage, badge_images: &[RgbaImage], position: BadgePosition, badge_scale: f32, side_margin_base: u32) {
     let vert_spacing = (BADGE_VERT_SPACING as f32 * badge_scale).round() as u32;
     let top_margin = (BADGE_TOP_MARGIN as f32 * badge_scale).round() as u32;
     let bottom_margin = (BADGE_BOTTOM_MARGIN as f32 * badge_scale).round() as u32;
-    let side_margin = (BADGE_SIDE_MARGIN as f32 * badge_scale).round() as u32;
+    let side_margin = (side_margin_base as f32 * badge_scale).round() as u32;
 
     let total_badge_height: u32 = badge_images.iter().map(|b| b.height()).sum::<u32>()
         + vert_spacing * (badge_images.len() as u32).saturating_sub(1);
     let max_badge_width: u32 = badge_images.iter().map(|b| b.width()).max().unwrap_or(0);
 
     // Vertical anchor
-    let start_y = if poster_position.is_top() {
+    let start_y = if position.is_top() {
         top_margin
-    } else if poster_position.is_bottom() {
+    } else if position.is_bottom() {
         canvas.height().saturating_sub(total_badge_height + bottom_margin)
     } else {
         // "l", "r" — vertically centered
@@ -162,8 +163,8 @@ fn overlay_vertical_stack(canvas: &mut RgbaImage, badge_images: &[RgbaImage], po
     };
 
     // Horizontal anchor
-    let is_left = poster_position.is_left();
-    let is_right = poster_position.is_right();
+    let is_left = position.is_left();
+    let is_right = position.is_right();
 
     let base_x = if is_left {
         side_margin
@@ -188,13 +189,13 @@ fn overlay_vertical_stack(canvas: &mut RgbaImage, badge_images: &[RgbaImage], po
     }
 }
 
-/// Overlay badges in horizontal rows, positioned according to `poster_position`.
-fn overlay_horizontal_rows(canvas: &mut RgbaImage, badge_images: &[RgbaImage], poster_position: BadgePosition, max_per_row: usize, badge_scale: f32) {
+/// Overlay badges in horizontal rows, positioned according to `position`.
+fn overlay_horizontal_rows(canvas: &mut RgbaImage, badge_images: &[RgbaImage], position: BadgePosition, max_per_row: usize, badge_scale: f32, side_margin_base: u32) {
     let spacing = (BADGE_SPACING as f32 * badge_scale).round() as u32;
     let row_spacing = (BADGE_ROW_SPACING as f32 * badge_scale).round() as u32;
     let top_margin = (BADGE_TOP_MARGIN as f32 * badge_scale).round() as u32;
     let bottom_margin = (BADGE_BOTTOM_MARGIN as f32 * badge_scale).round() as u32;
-    let side_margin = (BADGE_SIDE_MARGIN as f32 * badge_scale).round() as u32;
+    let side_margin = (side_margin_base as f32 * badge_scale).round() as u32;
 
     let rows: Vec<&[RgbaImage]> = badge_images.chunks(max_per_row).collect();
     let badge_height = badge_images.iter().map(|b| b.height()).max().unwrap_or(0);
@@ -202,9 +203,9 @@ fn overlay_horizontal_rows(canvas: &mut RgbaImage, badge_images: &[RgbaImage], p
         + row_spacing * (rows.len() as u32).saturating_sub(1);
 
     // Vertical anchor
-    let base_y = if poster_position.is_top() {
+    let base_y = if position.is_top() {
         top_margin
-    } else if poster_position.is_bottom() {
+    } else if position.is_bottom() {
         canvas.height().saturating_sub(total_height + bottom_margin)
     } else {
         // "l", "r" — vertically centered
@@ -212,8 +213,8 @@ fn overlay_horizontal_rows(canvas: &mut RgbaImage, badge_images: &[RgbaImage], p
     };
 
     // Horizontal alignment
-    let is_left = poster_position.is_left();
-    let is_right = poster_position.is_right();
+    let is_left = position.is_left();
+    let is_right = position.is_right();
 
     for (row_idx, row) in rows.iter().enumerate() {
         let row_width: u32 = row.iter().map(|b| b.width()).sum::<u32>()
@@ -290,7 +291,7 @@ pub fn render_poster_sync(
         };
 
         if badge_direction.is_vertical() {
-            overlay_vertical_stack(&mut canvas, &badge_images, poster_position, badge_scale);
+            overlay_vertical_stack(&mut canvas, &badge_images, poster_position, badge_scale, BADGE_SIDE_MARGIN);
         } else {
             let max_per_row = match badge_size {
                 BadgeSize::Large | BadgeSize::ExtraLarge => {
@@ -300,7 +301,7 @@ pub fn render_poster_sync(
                     if badge_style.is_vertical() { MAX_VERT_BADGES_PER_ROW } else { MAX_BADGES_PER_ROW }
                 }
             };
-            overlay_horizontal_rows(&mut canvas, &badge_images, poster_position, max_per_row, badge_scale);
+            overlay_horizontal_rows(&mut canvas, &badge_images, poster_position, max_per_row, badge_scale, BADGE_SIDE_MARGIN);
         }
     }
 
@@ -496,18 +497,18 @@ pub async fn generate_logo(
     Ok(buf)
 }
 
-const BACKDROP_MARGIN: u32 = 20;
-const BACKDROP_BADGE_SPACING: u32 = 7;
-
 pub fn render_backdrop_sync(
     backdrop_bytes: &[u8],
     badges: &[RatingBadge],
     font: &FontArc,
     quality: u8,
+    position: BadgePosition,
     badge_style: BadgeStyle,
     label_style: LabelStyle,
+    badge_direction: BadgeDirection,
     target_width: u32,
     badge_scale: f32,
+    _badge_size: BadgeSize,
 ) -> Result<Vec<u8>, AppError> {
     let base = load_image_with_limits(backdrop_bytes)?;
 
@@ -528,16 +529,11 @@ pub fn render_backdrop_sync(
             badge::render_badges_uniform(badges, font, label_style, badge_scale)
         };
 
-        let backdrop_margin = (BACKDROP_MARGIN as f32 * badge_scale).round() as u32;
-        let backdrop_badge_spacing = (BACKDROP_BADGE_SPACING as f32 * badge_scale).round() as u32;
-        let max_badge_width: u32 = badge_images.iter().map(|b| b.width()).max().unwrap_or(0);
-        let x = canvas.width().saturating_sub(max_badge_width + backdrop_margin);
-        let mut y = backdrop_margin;
-
-        for badge_img in &badge_images {
-            let bx = x + max_badge_width.saturating_sub(badge_img.width());
-            imageops::overlay(&mut canvas, badge_img, bx as i64, y as i64);
-            y += badge_img.height() + backdrop_badge_spacing;
+        if badge_direction.is_vertical() {
+            overlay_vertical_stack(&mut canvas, &badge_images, position, badge_scale, BACKDROP_SIDE_MARGIN);
+        } else {
+            // Backdrops are wide (16:9) so all badges fit in a single row
+            overlay_horizontal_rows(&mut canvas, &badge_images, position, badge_images.len(), badge_scale, BACKDROP_SIDE_MARGIN);
         }
     }
 
@@ -555,11 +551,14 @@ pub async fn generate_backdrop(
     badges: Vec<RatingBadge>,
     font: FontArc,
     quality: u8,
+    position: BadgePosition,
     badge_style: BadgeStyle,
     label_style: LabelStyle,
+    badge_direction: BadgeDirection,
     render_semaphore: Arc<Semaphore>,
     target_width: u32,
     badge_scale: f32,
+    badge_size: BadgeSize,
 ) -> Result<Vec<u8>, AppError> {
     if render_semaphore.available_permits() == 0 {
         tracing::debug!("render queue full, waiting for permit");
@@ -569,7 +568,7 @@ pub async fn generate_backdrop(
     tracing::debug!("backdrop render started");
     let start = std::time::Instant::now();
 
-    let buf = tokio::task::spawn_blocking(move || render_backdrop_sync(&backdrop_bytes, &badges, &font, quality, badge_style, label_style, target_width, badge_scale))
+    let buf = tokio::task::spawn_blocking(move || render_backdrop_sync(&backdrop_bytes, &badges, &font, quality, position, badge_style, label_style, badge_direction, target_width, badge_scale, badge_size))
         .await
         .map_err(|e| AppError::Other(e.to_string()))??;
 
@@ -624,7 +623,7 @@ pub fn render_episode_sync(
         };
 
         if badge_direction.is_vertical() {
-            overlay_vertical_stack(&mut canvas, &badge_images, position, badge_scale);
+            overlay_vertical_stack(&mut canvas, &badge_images, position, badge_scale, BADGE_SIDE_MARGIN);
         } else {
             let max_per_row = match badge_size {
                 BadgeSize::Large | BadgeSize::ExtraLarge => {
@@ -634,7 +633,7 @@ pub fn render_episode_sync(
                     if badge_style.is_vertical() { MAX_VERT_BADGES_PER_ROW } else { MAX_BADGES_PER_ROW }
                 }
             };
-            overlay_horizontal_rows(&mut canvas, &badge_images, position, max_per_row, badge_scale);
+            overlay_horizontal_rows(&mut canvas, &badge_images, position, max_per_row, badge_scale, BADGE_SIDE_MARGIN);
         }
     }
 
@@ -785,7 +784,7 @@ mod tests {
     fn render_backdrop_no_badges() {
         let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
         let png = test_png(640, 360);
-        let result = render_backdrop_sync(&png, &[], &font, 85, BadgeStyle::Vertical, LabelStyle::Text, 1280, 1.0).unwrap();
+        let result = render_backdrop_sync(&png, &[], &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Text, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium).unwrap();
         assert!(!result.is_empty());
         // Backdrop outputs JPEG
         assert_eq!(result[0], 0xFF);
@@ -802,7 +801,7 @@ mod tests {
             RatingBadge { source: RatingSource::Imdb, value: "9.0".to_string() },
             RatingBadge { source: RatingSource::Rt, value: "95%".to_string() },
         ];
-        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgeStyle::Vertical, LabelStyle::Text, 1280, 1.0).unwrap();
+        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Text, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium).unwrap();
         assert!(!result.is_empty());
         assert_eq!(result[0], 0xFF);
         assert_eq!(result[1], 0xD8);
@@ -813,7 +812,7 @@ mod tests {
         let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
         // Create a backdrop wider than TARGET_WIDTH (1280)
         let png = test_png(2560, 1440);
-        let result = render_backdrop_sync(&png, &[], &font, 85, BadgeStyle::Vertical, LabelStyle::Text, 1280, 1.0).unwrap();
+        let result = render_backdrop_sync(&png, &[], &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Text, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium).unwrap();
         assert!(!result.is_empty());
         assert_eq!(result[0], 0xFF);
         assert_eq!(result[1], 0xD8);
@@ -822,10 +821,59 @@ mod tests {
     #[test]
     fn render_backdrop_invalid_bytes() {
         let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
-        let result = render_backdrop_sync(b"not an image", &[], &font, 85, BadgeStyle::Vertical, LabelStyle::Text, 1280, 1.0);
+        let result = render_backdrop_sync(b"not an image", &[], &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Text, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium);
         assert!(result.is_err());
     }
 
+    #[test]
+    fn render_backdrop_horizontal_bottom_center() {
+        use crate::services::ratings::{RatingBadge, RatingSource};
+
+        let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
+        let png = test_png(1280, 720);
+        let badges = vec![
+            RatingBadge { source: RatingSource::Imdb, value: "9.0".to_string() },
+            RatingBadge { source: RatingSource::Rt, value: "95%".to_string() },
+        ];
+        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgePosition::BottomCenter, BadgeStyle::Horizontal, LabelStyle::Text, BadgeDirection::Horizontal, 1280, 1.0, BadgeSize::Medium).unwrap();
+        assert!(!result.is_empty());
+        assert_eq!(result[0], 0xFF);
+        assert_eq!(result[1], 0xD8);
+    }
+
+    #[test]
+    fn render_backdrop_horizontal_large_badges() {
+        use crate::services::ratings::{RatingBadge, RatingSource};
+
+        let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
+        let png = test_png(1280, 720);
+        let badges = vec![
+            RatingBadge { source: RatingSource::Imdb, value: "9.0".to_string() },
+            RatingBadge { source: RatingSource::Rt, value: "95%".to_string() },
+            RatingBadge { source: RatingSource::RtAudience, value: "80%".to_string() },
+        ];
+        // Large + Horizontal style — all badges in a single row on wide backdrop
+        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgePosition::BottomCenter, BadgeStyle::Horizontal, LabelStyle::Text, BadgeDirection::Horizontal, 1280, 1.0, BadgeSize::Large).unwrap();
+        assert!(!result.is_empty());
+        assert_eq!(result[0], 0xFF);
+        assert_eq!(result[1], 0xD8);
+    }
+
+    #[test]
+    fn render_backdrop_vertical_bottom_left() {
+        use crate::services::ratings::{RatingBadge, RatingSource};
+
+        let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
+        let png = test_png(1280, 720);
+        let badges = vec![
+            RatingBadge { source: RatingSource::Imdb, value: "8.5".to_string() },
+        ];
+        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgePosition::BottomLeft, BadgeStyle::Vertical, LabelStyle::Icon, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium).unwrap();
+        assert!(!result.is_empty());
+        assert_eq!(result[0], 0xFF);
+        assert_eq!(result[1], 0xD8);
+    }
+
     // --- Episode rendering tests ---
 
     #[test]
@@ -1005,7 +1053,7 @@ mod tests {
             RatingBadge { source: RatingSource::Imdb, value: "9.0".to_string() },
             RatingBadge { source: RatingSource::Rt, value: "95%".to_string() },
         ];
-        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgeStyle::Vertical, LabelStyle::Icon, 1280, 1.0).unwrap();
+        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Icon, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium).unwrap();
         assert!(!result.is_empty());
         assert_eq!(result[0], 0xFF);
         assert_eq!(result[1], 0xD8);
@@ -1053,7 +1101,7 @@ mod tests {
             RatingBadge { source: RatingSource::Rt, value: "95%".to_string() },
             RatingBadge { source: RatingSource::RtAudience, value: "40%".to_string() },
         ];
-        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgeStyle::Vertical, LabelStyle::Official, 1280, 1.0).unwrap();
+        let result = render_backdrop_sync(&png, &badges, &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Official, BadgeDirection::Vertical, 1280, 1.0, BadgeSize::Medium).unwrap();
         assert!(!result.is_empty());
         assert_eq!(result[0], 0xFF);
         assert_eq!(result[1], 0xD8);
@@ -1160,7 +1208,7 @@ mod tests {
         let png = test_png(640, 360);
         let sem = Arc::new(Semaphore::new(1));
 
-        let result = generate_backdrop(png, vec![], font, 85, BadgeStyle::Horizontal, LabelStyle::Text, sem.clone(), 1280, 1.0).await;
+        let result = generate_backdrop(png, vec![], font, 85, BadgePosition::TopRight, BadgeStyle::Horizontal, LabelStyle::Text, BadgeDirection::Vertical, sem.clone(), 1280, 1.0, BadgeSize::Medium).await;
         assert!(result.is_ok());
         assert_eq!(sem.available_permits(), 1);
     }
@@ -1172,7 +1220,7 @@ mod tests {
         let sem = Arc::new(Semaphore::new(1));
         sem.close();
 
-        let result = generate_backdrop(png, vec![], font, 85, BadgeStyle::Horizontal, LabelStyle::Text, sem, 1280, 1.0).await;
+        let result = generate_backdrop(png, vec![], font, 85, BadgePosition::TopRight, BadgeStyle::Horizontal, LabelStyle::Text, BadgeDirection::Vertical, sem, 1280, 1.0, BadgeSize::Medium).await;
         assert!(result.is_err());
     }
 
@@ -1364,7 +1412,7 @@ mod tests {
     fn render_backdrop_at_large_target_width() {
         let font = FontArc::try_from_slice(crate::FONT_BYTES).unwrap();
         let png = test_png(640, 360);
-        let result = render_backdrop_sync(&png, &[], &font, 85, BadgeStyle::Vertical, LabelStyle::Text, 3840, 2.0).unwrap();
+        let result = render_backdrop_sync(&png, &[], &font, 85, BadgePosition::TopRight, BadgeStyle::Vertical, LabelStyle::Text, BadgeDirection::Vertical, 3840, 2.0, BadgeSize::Medium).unwrap();
         assert!(!result.is_empty());
         assert_eq!(result[0], 0xFF);
         assert_eq!(result[1], 0xD8);

api/src/image/serve.rs

@@ -10,7 +10,7 @@ use crate::cache::{self, MemCacheEntry};
 use crate::error::AppError;
 use crate::id::{self, IdType, MediaType, format_tmdb_id_value};
 use crate::image::generate;
-use crate::services::db::{BadgeDirection, BadgeStyle, ImageSize, LabelStyle, RenderSettings};
+use crate::services::db::{BadgeDirection, BadgePosition, BadgeSize, BadgeStyle, ImageSize, LabelStyle, RenderSettings};
 use crate::services::fanart::{FanartClient, FanartImages, FanartPoster, PosterMatch};
 use crate::services::ratings;
 use crate::AppState;
@@ -37,9 +37,49 @@ impl From<LogoBackdropKind> for cache::ImageType {
     }
 }
 
+/// Resolved per-type render parameters for logo/backdrop generation.
+///
+/// For logos, `position` and `badge_direction` are hardcoded (TopRight / Vertical)
+/// and not passed to `generate_logo` — only `badge_style`, `label_style`, and
+/// `badge_size` are used. They exist here so backdrop callers can read them
+/// without a separate code path.
+struct LbRenderParams {
+    position: BadgePosition,
+    badge_direction: BadgeDirection,
+    badge_style: BadgeStyle,
+    label_style: LabelStyle,
+    badge_size: BadgeSize,
+}
 
-/// Returns a cache key suffix for poster position.
-pub fn poster_position_cache_suffix(position: &str) -> String {
+impl LbRenderParams {
+    fn from_settings(lb_kind: LogoBackdropKind, settings: &RenderSettings) -> Self {
+        let position = match lb_kind {
+            LogoBackdropKind::Logo => BadgePosition::TopRight,
+            LogoBackdropKind::Backdrop => settings.backdrop_position,
+        };
+        let badge_direction = match lb_kind {
+            LogoBackdropKind::Logo => BadgeDirection::Vertical,
+            LogoBackdropKind::Backdrop => settings.backdrop_badge_direction.resolve(position),
+        };
+        let badge_style = match lb_kind {
+            LogoBackdropKind::Logo => settings.logo_badge_style,
+            LogoBackdropKind::Backdrop => settings.backdrop_badge_style,
+        }
+        .resolve(badge_direction);
+        let label_style = match lb_kind {
+            LogoBackdropKind::Logo => settings.logo_label_style,
+            LogoBackdropKind::Backdrop => settings.backdrop_label_style,
+        };
+        let badge_size = match lb_kind {
+            LogoBackdropKind::Logo => settings.logo_badge_size,
+            LogoBackdropKind::Backdrop => settings.backdrop_badge_size,
+        };
+        Self { position, badge_direction, badge_style, label_style, badge_size }
+    }
+}
+
+/// Returns a cache key suffix for badge position.
+pub fn position_cache_suffix(position: &str) -> String {
     format!(".p{position}")
 }
 
@@ -122,6 +162,8 @@ pub fn settings_cache_suffix_with_ratings(
         poster_badge_size: _,
         logo_badge_size: _,
         backdrop_badge_size: _,
+        backdrop_position: _,
+        backdrop_badge_direction: _,
         episode_ratings_limit: _,
         episode_badge_style: _,
         episode_label_style: _,
@@ -137,7 +179,7 @@ pub fn settings_cache_suffix_with_ratings(
 
     match kind {
         cache::ImageType::Poster => {
-            let ps = poster_position_cache_suffix(settings.poster_position.as_str());
+            let ps = position_cache_suffix(settings.poster_position.as_str());
             let bs = badge_style_cache_suffix(settings.poster_badge_style.as_str());
             let ls = label_style_cache_suffix(settings.poster_label_style.as_str());
             let bd = badge_direction_cache_suffix(settings.poster_badge_direction.as_str());
@@ -151,13 +193,15 @@ pub fn settings_cache_suffix_with_ratings(
             format!("{rs}{bs}{ls}{bsz}{is_suffix}")
         }
         cache::ImageType::Backdrop => {
+            let ps = position_cache_suffix(settings.backdrop_position.as_str());
             let bs = badge_style_cache_suffix(settings.backdrop_badge_style.as_str());
             let ls = label_style_cache_suffix(settings.backdrop_label_style.as_str());
+            let bd = badge_direction_cache_suffix(settings.backdrop_badge_direction.as_str());
             let bsz = settings.backdrop_badge_size.cache_suffix();
-            format!("{rs}{bs}{ls}{bsz}{is_suffix}")
+            format!("{rs}{ps}{bs}{ls}{bd}{bsz}{is_suffix}")
         }
         cache::ImageType::Episode => {
-            let ps = poster_position_cache_suffix(settings.episode_position.as_str());
+            let ps = position_cache_suffix(settings.episode_position.as_str());
             let bs = badge_style_cache_suffix(settings.episode_badge_style.as_str());
             let ls = label_style_cache_suffix(settings.episode_label_style.as_str());
             let bd = badge_direction_cache_suffix(settings.episode_badge_direction.as_str());
@@ -1028,20 +1072,9 @@ fn trigger_logo_backdrop_refresh(
 
         let image_type: cache::ImageType = lb_kind.into();
 
-        let type_badge_style = match lb_kind {
-            LogoBackdropKind::Logo => settings.logo_badge_style,
-            LogoBackdropKind::Backdrop => settings.backdrop_badge_style,
-        };
-        let type_label_style = match lb_kind {
-            LogoBackdropKind::Logo => settings.logo_label_style,
-            LogoBackdropKind::Backdrop => settings.backdrop_label_style,
-        };
-
+        let params = LbRenderParams::from_settings(lb_kind, &settings);
         let resolved_size = resolve_image_size(image_size);
-        let badge_size_factor = match lb_kind {
-            LogoBackdropKind::Logo => settings.logo_badge_size.scale_factor(),
-            LogoBackdropKind::Backdrop => settings.backdrop_badge_size.scale_factor(),
-        };
+        let badge_size_factor = params.badge_size.scale_factor();
         let (target_width, badge_scale) = match lb_kind {
             LogoBackdropKind::Logo => (
                 resolved_size.logo_target_width(),
@@ -1053,8 +1086,8 @@ fn trigger_logo_backdrop_refresh(
             ),
         };
         let bytes = match lb_kind {
-            LogoBackdropKind::Logo => generate::generate_logo(image_bytes, badges, state2.font.clone(), type_badge_style, type_label_style, state2.render_semaphore.clone(), target_width, badge_scale).await?,
-            LogoBackdropKind::Backdrop => generate::generate_backdrop(image_bytes, badges, state2.font.clone(), state2.config.image_quality, type_badge_style, type_label_style, state2.render_semaphore.clone(), target_width, badge_scale).await?,
+            LogoBackdropKind::Logo => generate::generate_logo(image_bytes, badges, state2.font.clone(), params.badge_style, params.label_style, state2.render_semaphore.clone(), target_width, badge_scale).await?,
+            LogoBackdropKind::Backdrop => generate::generate_backdrop(image_bytes, badges, state2.font.clone(), state2.config.image_quality, params.position, params.badge_style, params.label_style, params.badge_direction, state2.render_semaphore.clone(), target_width, badge_scale, params.badge_size).await?,
         };
 
         Ok((bytes, cross_ids.release_date.clone(), image_type, cross_ids))
@@ -1660,15 +1693,9 @@ pub async fn handle_logo_backdrop_inner(
         LogoBackdropKind::Logo => settings.logo_ratings_limit,
         LogoBackdropKind::Backdrop => settings.backdrop_ratings_limit,
     };
-    let type_badge_style = match lb_kind {
-        LogoBackdropKind::Logo => settings.logo_badge_style,
-        LogoBackdropKind::Backdrop => settings.backdrop_badge_style,
-    }
-    .resolve(BadgeDirection::Vertical);
-    let type_label_style = match lb_kind {
-        LogoBackdropKind::Logo => settings.logo_label_style,
-        LogoBackdropKind::Backdrop => settings.backdrop_label_style,
-    };
+    let params = LbRenderParams::from_settings(lb_kind, settings);
+    let type_badge_style = params.badge_style;
+    let type_label_style = params.label_style;
 
     // Backdrops are language-agnostic (no text) — skip lang/textless entirely.
     // Logos ARE the text — textless makes no sense, only lang matters.
@@ -1772,6 +1799,9 @@ pub async fn handle_logo_backdrop_inner(
         neg_lang_key: String,
         type_badge_style: BadgeStyle,
         type_label_style: LabelStyle,
+        type_position: BadgePosition,
+        type_badge_direction: BadgeDirection,
+        type_badge_size: BadgeSize,
         badge_size_factor: f32,
         label: &'static str,
         resolved: id::ResolvedId,
@@ -1790,10 +1820,10 @@ pub async fn handle_logo_backdrop_inner(
         neg_lang_key,
         type_badge_style,
         type_label_style,
-        badge_size_factor: match lb_kind {
-            LogoBackdropKind::Logo => settings.logo_badge_size.scale_factor(),
-            LogoBackdropKind::Backdrop => settings.backdrop_badge_size.scale_factor(),
-        },
+        type_position: params.position,
+        type_badge_direction: params.badge_direction,
+        type_badge_size: params.badge_size,
+        badge_size_factor: params.badge_size.scale_factor(),
         label,
         resolved: resolved.clone(),
         badges,
@@ -1876,7 +1906,7 @@ pub async fn handle_logo_backdrop_inner(
             };
             let bytes = match lb_kind {
                 LogoBackdropKind::Logo => generate::generate_logo(image_bytes, ctx.badges, ctx.state.font.clone(), ctx.type_badge_style, ctx.type_label_style, ctx.state.render_semaphore.clone(), target_width, badge_scale).await?,
-                LogoBackdropKind::Backdrop => generate::generate_backdrop(image_bytes, ctx.badges, ctx.state.font.clone(), ctx.state.config.image_quality, ctx.type_badge_style, ctx.type_label_style, ctx.state.render_semaphore.clone(), target_width, badge_scale).await?,
+                LogoBackdropKind::Backdrop => generate::generate_backdrop(image_bytes, ctx.badges, ctx.state.font.clone(), ctx.state.config.image_quality, ctx.type_position, ctx.type_badge_style, ctx.type_label_style, ctx.type_badge_direction, ctx.state.render_semaphore.clone(), target_width, badge_scale, ctx.type_badge_size).await?,
             };
 
             let release_date = ctx.cross_ids.release_date.clone();
@@ -1899,7 +1929,7 @@ pub async fn handle_logo_backdrop_inner(
 #[cfg(test)]
 mod tests {
     use super::*;
-    use crate::services::db::{BadgeStyle, ImageSource};
+    use crate::services::db::{BadgeDirection, BadgePosition, BadgeSize, BadgeStyle, ImageSource, LabelStyle, RenderSettings};
 
     #[test]
     fn image_kind_prefix() {
@@ -1936,15 +1966,15 @@ mod tests {
     }
 
     #[test]
-    fn poster_position_cache_suffix_all_positions() {
-        assert_eq!(poster_position_cache_suffix("bc"), ".pbc");
-        assert_eq!(poster_position_cache_suffix("tc"), ".ptc");
-        assert_eq!(poster_position_cache_suffix("l"), ".pl");
-        assert_eq!(poster_position_cache_suffix("r"), ".pr");
-        assert_eq!(poster_position_cache_suffix("tl"), ".ptl");
-        assert_eq!(poster_position_cache_suffix("tr"), ".ptr");
-        assert_eq!(poster_position_cache_suffix("bl"), ".pbl");
-        assert_eq!(poster_position_cache_suffix("br"), ".pbr");
+    fn position_cache_suffix_all_positions() {
+        assert_eq!(position_cache_suffix("bc"), ".pbc");
+        assert_eq!(position_cache_suffix("tc"), ".ptc");
+        assert_eq!(position_cache_suffix("l"), ".pl");
+        assert_eq!(position_cache_suffix("r"), ".pr");
+        assert_eq!(position_cache_suffix("tl"), ".ptl");
+        assert_eq!(position_cache_suffix("tr"), ".ptr");
+        assert_eq!(position_cache_suffix("bl"), ".pbl");
+        assert_eq!(position_cache_suffix("br"), ".pbr");
     }
 
     #[test]
@@ -2135,11 +2165,11 @@ mod tests {
     }
 
     #[test]
-    fn settings_cache_suffix_backdrop_no_position_or_direction() {
+    fn settings_cache_suffix_backdrop_includes_position_and_direction() {
         let s = RenderSettings::default();
         let suffix = settings_cache_suffix(&s, cache::ImageType::Backdrop, None);
-        assert!(!suffix.contains(".p"), "backdrop should not have position suffix");
-        assert!(!suffix.contains(".d"), "backdrop should not have direction suffix");
+        assert!(suffix.contains(".p"), "backdrop should have position suffix");
+        assert!(suffix.contains(".d"), "backdrop should have direction suffix");
         assert!(suffix.contains(".s"), "missing badge style suffix");
         assert!(suffix.contains(".l"), "missing label style suffix");
         assert!(suffix.contains(".z"), "missing image size suffix");
@@ -2217,6 +2247,76 @@ mod tests {
         assert_eq!(suffix_imdb_rt, suffix_imdb_rt_2);
     }
 
+    // --- LbRenderParams tests ---
+
+    #[test]
+    fn lb_render_params_logo_uses_hardcoded_defaults() {
+        let settings = RenderSettings {
+            logo_badge_style: BadgeStyle::Horizontal,
+            logo_label_style: LabelStyle::Icon,
+            logo_badge_size: BadgeSize::Large,
+            // Backdrop fields should be ignored for logo
+            backdrop_position: BadgePosition::BottomLeft,
+            backdrop_badge_direction: BadgeDirection::Horizontal,
+            backdrop_badge_style: BadgeStyle::Vertical,
+            ..RenderSettings::default()
+        };
+        let p = LbRenderParams::from_settings(LogoBackdropKind::Logo, &settings);
+        assert_eq!(p.position, BadgePosition::TopRight);
+        assert_eq!(p.badge_direction, BadgeDirection::Vertical);
+        assert_eq!(p.badge_style, BadgeStyle::Horizontal);
+        assert_eq!(p.label_style, LabelStyle::Icon);
+        assert_eq!(p.badge_size, BadgeSize::Large);
+    }
+
+    #[test]
+    fn lb_render_params_backdrop_reads_settings() {
+        let settings = RenderSettings {
+            backdrop_position: BadgePosition::BottomCenter,
+            backdrop_badge_direction: BadgeDirection::Horizontal,
+            backdrop_badge_style: BadgeStyle::Vertical,
+            backdrop_label_style: LabelStyle::Official,
+            backdrop_badge_size: BadgeSize::ExtraSmall,
+            ..RenderSettings::default()
+        };
+        let p = LbRenderParams::from_settings(LogoBackdropKind::Backdrop, &settings);
+        assert_eq!(p.position, BadgePosition::BottomCenter);
+        assert_eq!(p.badge_direction, BadgeDirection::Horizontal);
+        // badge_style Vertical stays Vertical (not Default), unaffected by direction
+        assert_eq!(p.badge_style, BadgeStyle::Vertical);
+        assert_eq!(p.label_style, LabelStyle::Official);
+        assert_eq!(p.badge_size, BadgeSize::ExtraSmall);
+    }
+
+    #[test]
+    fn lb_render_params_backdrop_resolves_default_direction() {
+        // BottomCenter is center-horizontal → Default direction resolves to Horizontal
+        let settings = RenderSettings {
+            backdrop_position: BadgePosition::BottomCenter,
+            backdrop_badge_direction: BadgeDirection::Default,
+            backdrop_badge_style: BadgeStyle::Default,
+            ..RenderSettings::default()
+        };
+        let p = LbRenderParams::from_settings(LogoBackdropKind::Backdrop, &settings);
+        assert_eq!(p.badge_direction, BadgeDirection::Horizontal);
+        // Default style resolves to match direction (Horizontal)
+        assert_eq!(p.badge_style, BadgeStyle::Horizontal);
+    }
+
+    #[test]
+    fn lb_render_params_backdrop_resolves_default_direction_vertical() {
+        // TopRight is not center-horizontal → Default direction resolves to Vertical
+        let settings = RenderSettings {
+            backdrop_position: BadgePosition::TopRight,
+            backdrop_badge_direction: BadgeDirection::Default,
+            backdrop_badge_style: BadgeStyle::Default,
+            ..RenderSettings::default()
+        };
+        let p = LbRenderParams::from_settings(LogoBackdropKind::Backdrop, &settings);
+        assert_eq!(p.badge_direction, BadgeDirection::Vertical);
+        assert_eq!(p.badge_style, BadgeStyle::Vertical);
+    }
+
     #[test]
     fn tmdb_poster_variant_all_combinations() {
         // Default case: no variant (backward compatible)

api/src/lib.rs

@@ -332,4 +332,12 @@ pub const MIGRATIONS: &[(&str, &str)] = &[
         "ALTER TABLE api_key_settings ADD COLUMN episode_blur INTEGER NOT NULL DEFAULT 0",
         "duplicate column",
     ),
+    (
+        "ALTER TABLE api_key_settings ADD COLUMN backdrop_position TEXT NOT NULL DEFAULT 'tr'",
+        "duplicate column",
+    ),
+    (
+        "ALTER TABLE api_key_settings ADD COLUMN backdrop_badge_direction TEXT NOT NULL DEFAULT 'v'",
+        "duplicate column",
+    ),
 ];

api/src/services/db.rs

@@ -481,6 +481,14 @@ pub fn default_episode_ratings_limit() -> i32 {
     1
 }
 
+pub fn default_backdrop_position() -> BadgePosition {
+    BadgePosition::TopRight
+}
+
+pub fn default_backdrop_badge_direction() -> BadgeDirection {
+    BadgeDirection::Vertical
+}
+
 // --- Badge size ---
 
 pub fn default_badge_size() -> BadgeSize {
@@ -1627,6 +1635,8 @@ pub struct UpsertApiKeySettings<'a> {
     pub poster_badge_size: &'a str,
     pub logo_badge_size: &'a str,
     pub backdrop_badge_size: &'a str,
+    pub backdrop_position: &'a str,
+    pub backdrop_badge_direction: &'a str,
     pub episode_ratings_limit: i32,
     pub episode_badge_style: &'a str,
     pub episode_label_style: &'a str,
@@ -1660,6 +1670,8 @@ pub async fn upsert_api_key_settings(
         poster_badge_size: Set(params.poster_badge_size.to_string()),
         logo_badge_size: Set(params.logo_badge_size.to_string()),
         backdrop_badge_size: Set(params.backdrop_badge_size.to_string()),
+        backdrop_position: Set(params.backdrop_position.to_string()),
+        backdrop_badge_direction: Set(params.backdrop_badge_direction.to_string()),
         episode_ratings_limit: Set(params.episode_ratings_limit),
         episode_badge_style: Set(params.episode_badge_style.to_string()),
         episode_label_style: Set(params.episode_label_style.to_string()),
@@ -1690,6 +1702,8 @@ pub async fn upsert_api_key_settings(
                     api_key_settings::Column::PosterBadgeSize,
                     api_key_settings::Column::LogoBadgeSize,
                     api_key_settings::Column::BackdropBadgeSize,
+                    api_key_settings::Column::BackdropPosition,
+                    api_key_settings::Column::BackdropBadgeDirection,
                     api_key_settings::Column::EpisodeRatingsLimit,
                     api_key_settings::Column::EpisodeBadgeStyle,
                     api_key_settings::Column::EpisodeLabelStyle,
@@ -1740,6 +1754,8 @@ pub struct RenderSettings {
     pub poster_badge_size: BadgeSize,
     pub logo_badge_size: BadgeSize,
     pub backdrop_badge_size: BadgeSize,
+    pub backdrop_position: BadgePosition,
+    pub backdrop_badge_direction: BadgeDirection,
     pub episode_ratings_limit: i32,
     pub episode_badge_style: BadgeStyle,
     pub episode_label_style: LabelStyle,
@@ -1771,6 +1787,8 @@ impl Default for RenderSettings {
             poster_badge_size: BadgeSize::Medium,
             logo_badge_size: BadgeSize::Medium,
             backdrop_badge_size: BadgeSize::Medium,
+            backdrop_position: default_backdrop_position(),
+            backdrop_badge_direction: default_backdrop_badge_direction(),
             episode_ratings_limit: default_episode_ratings_limit(),
             episode_badge_style: default_episode_badge_style(),
             episode_label_style: default_label_style(),
@@ -1827,6 +1845,8 @@ pub fn parse_global_render_settings(globals: &HashMap<String, String>) -> Render
         poster_badge_size: global_or(globals, "poster_badge_size", BadgeSize::parse, defaults.poster_badge_size),
         logo_badge_size: global_or(globals, "logo_badge_size", BadgeSize::parse, defaults.logo_badge_size),
         backdrop_badge_size: global_or(globals, "backdrop_badge_size", BadgeSize::parse, defaults.backdrop_badge_size),
+        backdrop_position: global_or(globals, "backdrop_position", BadgePosition::parse, defaults.backdrop_position),
+        backdrop_badge_direction: global_or(globals, "backdrop_badge_direction", BadgeDirection::parse, defaults.backdrop_badge_direction),
         episode_ratings_limit: globals
             .get("episode_ratings_limit")
             .and_then(|v| v.parse().ok())
@@ -1871,6 +1891,8 @@ pub async fn get_effective_render_settings(
                 poster_badge_size: parse_setting_or_default(&s.poster_badge_size, "poster_badge_size", BadgeSize::parse, BadgeSize::Medium),
                 logo_badge_size: parse_setting_or_default(&s.logo_badge_size, "logo_badge_size", BadgeSize::parse, BadgeSize::Medium),
                 backdrop_badge_size: parse_setting_or_default(&s.backdrop_badge_size, "backdrop_badge_size", BadgeSize::parse, BadgeSize::Medium),
+                backdrop_position: parse_setting_or_default(&s.backdrop_position, "backdrop_position", BadgePosition::parse, default_backdrop_position()),
+                backdrop_badge_direction: parse_setting_or_default(&s.backdrop_badge_direction, "backdrop_badge_direction", BadgeDirection::parse, default_backdrop_badge_direction()),
                 episode_ratings_limit: s.episode_ratings_limit,
                 episode_badge_style: parse_setting_or_default(&s.episode_badge_style, "episode_badge_style", BadgeStyle::parse, default_episode_badge_style()),
                 episode_label_style: parse_setting_or_default(&s.episode_label_style, "episode_label_style", LabelStyle::parse, LabelStyle::Official),

api/src/upgrade/mod.rs

@@ -1,4 +1,5 @@
 mod v001_backdrop_cache_keys;
+mod v002_backdrop_position_direction_cache;
 
 use sea_orm::{ConnectionTrait, DatabaseConnection};
 
@@ -19,8 +20,10 @@ pub async fn run(
     })
     .await?;
 
-    // Future upgrades:
-    // run_once(db, "v002_...", || v002_...::run(db, cache_dir, external_cache_only)).await?;
+    run_once(db, "v002_backdrop_position_direction_cache", || {
+        v002_backdrop_position_direction_cache::run(db, cache_dir, external_cache_only)
+    })
+    .await?;
 
     Ok(())
 }

api/src/upgrade/v002_backdrop_position_direction_cache.rs

@@ -0,0 +1,227 @@
+use sea_orm::{ConnectionTrait, DatabaseConnection};
+
+use crate::error::AppError;
+
+/// Migrate backdrop cache keys to include position and direction suffixes.
+///
+/// Before this change, backdrop cache suffixes were:
+///   `{ratings}.s{style}.l{label}.b{badge_size}.z{image_size}`
+/// After this change they include position (`.ptr`) and direction (`.dv`):
+///   `{ratings}.ptr.s{style}.l{label}.dv.b{badge_size}.z{image_size}`
+///
+/// All existing backdrops were rendered with the hardcoded defaults
+/// (TopRight position, Vertical direction), so we insert those defaults.
+pub async fn run(
+    db: &DatabaseConnection,
+    cache_dir: &str,
+    external_cache_only: bool,
+) -> Result<(), AppError> {
+    run_db(db).await?;
+    run_fs(cache_dir, external_cache_only).await?;
+    Ok(())
+}
+
+/// Database step — insert `.ptr` before badge style and `.dv` after label style
+/// in all backdrop cache keys.
+pub async fn run_db(db: &impl ConnectionTrait) -> Result<(), AppError> {
+    let mut total = 0u64;
+
+    // Insert `.ptr` (default position = TopRight) before badge style (`.sv`, `.sh`, `.sd`)
+    // Use substr-based replacement to only replace the first occurrence of the pattern.
+    for style in ["sv", "sh", "sd"] {
+        let old = format!(".{style}.l");
+        let new = format!(".ptr.{style}.l");
+        let old_len = old.len() as i32;
+        let result = db
+            .execute(sea_orm::Statement::from_string(
+                sea_orm::DatabaseBackend::Sqlite,
+                format!(
+                    "UPDATE image_meta SET cache_key = \
+                     substr(cache_key, 1, instr(cache_key, '{old}') - 1) || '{new}' || \
+                     substr(cache_key, instr(cache_key, '{old}') + {old_len}) \
+                     WHERE image_type = 'b' AND instr(cache_key, '{old}') > 0 AND instr(cache_key, '.ptr.') = 0"
+                ),
+            ))
+            .await?;
+        total += result.rows_affected();
+    }
+
+    // Insert `.dv` (default direction = Vertical) after label style, before badge size
+    for label in ["lt", "li", "lo"] {
+        let old = format!(".{label}.b");
+        let new = format!(".{label}.dv.b");
+        let old_len = old.len() as i32;
+        let result = db
+            .execute(sea_orm::Statement::from_string(
+                sea_orm::DatabaseBackend::Sqlite,
+                format!(
+                    "UPDATE image_meta SET cache_key = \
+                     substr(cache_key, 1, instr(cache_key, '{old}') - 1) || '{new}' || \
+                     substr(cache_key, instr(cache_key, '{old}') + {old_len}) \
+                     WHERE image_type = 'b' AND instr(cache_key, '{old}') > 0 AND instr(cache_key, '.dv.') = 0"
+                ),
+            ))
+            .await?;
+        total += result.rows_affected();
+    }
+
+    tracing::info!(db_rows = total, "backdrop cache keys migrated (added position/direction suffixes)");
+    Ok(())
+}
+
+/// Filesystem step — rename backdrop cache files to include position/direction suffixes.
+pub async fn run_fs(cache_dir: &str, external_cache_only: bool) -> Result<(), AppError> {
+    if external_cache_only {
+        tracing::info!("backdrop position/direction filesystem rename skipped (external_cache_only)");
+        return Ok(());
+    }
+
+    let backdrop_dir = std::path::Path::new(cache_dir).join("backdrops");
+    let renamed = tokio::task::spawn_blocking(move || rename_files(&backdrop_dir))
+        .await
+        .map_err(|e| AppError::Other(format!("rename task panicked: {e}")))?
+        ?;
+    tracing::info!(fs_renamed = renamed, "backdrop cache files renamed (added position/direction suffixes)");
+    Ok(())
+}
+
+/// Recursively rename backdrop cache files to include `.ptr` and `.dv` suffixes.
+fn rename_files(dir: &std::path::Path) -> Result<u64, AppError> {
+    let entries = match std::fs::read_dir(dir) {
+        Ok(e) => e,
+        Err(e) if e.kind() == std::io::ErrorKind::NotFound => return Ok(0),
+        Err(e) => {
+            return Err(AppError::Other(format!(
+                "failed to read {}: {e}",
+                dir.display()
+            )))
+        }
+    };
+
+    let mut count = 0u64;
+    for entry in entries {
+        let entry = entry.map_err(|e| AppError::Other(e.to_string()))?;
+        let path = entry.path();
+        if path.is_dir() {
+            count += rename_files(&path)?;
+        } else if let Some(name) = path.file_name().and_then(|n| n.to_str()) {
+            if let Some(new_name) = migrate_name(name) {
+                let new_path = path.with_file_name(new_name);
+                std::fs::rename(&path, &new_path).map_err(|e| {
+                    AppError::Other(format!(
+                        "rename failed: {} → {}: {e}",
+                        path.display(),
+                        new_path.display()
+                    ))
+                })?;
+                count += 1;
+            }
+        }
+    }
+
+    Ok(count)
+}
+
+/// Transform an old backdrop filename to include default position/direction suffixes.
+///
+/// Returns `None` if already migrated or no matching pattern found.
+fn migrate_name(name: &str) -> Option<String> {
+    // Already migrated — has both position and direction suffixes
+    if name.contains(".ptr.") && name.contains(".dv.") {
+        return None;
+    }
+
+    let mut result = name.to_string();
+    let mut modified = false;
+
+    // Insert `.ptr` before badge style (`.sv.l`, `.sh.l`, or `.sd.l`)
+    if !result.contains(".ptr.") {
+        for style in [".sv.l", ".sh.l", ".sd.l"] {
+            if let Some(pos) = result.find(style) {
+                result.insert_str(pos, ".ptr");
+                modified = true;
+                break;
+            }
+        }
+    }
+
+    // Insert `.dv` after label style, before badge size
+    if !result.contains(".dv.") {
+        for (old, new) in [(".lt.b", ".lt.dv.b"), (".li.b", ".li.dv.b"), (".lo.b", ".lo.dv.b")] {
+            if result.contains(old) {
+                result = result.replacen(old, new, 1);
+                modified = true;
+                break;
+            }
+        }
+    }
+
+    if modified { Some(result) } else { None }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn migrate_name_typical() {
+        assert_eq!(
+            migrate_name("tt1234567_b_f@mil.sv.lt.bm.zm.jpg"),
+            Some("tt1234567_b_f@mil.ptr.sv.lt.dv.bm.zm.jpg".to_string()),
+        );
+    }
+
+    #[test]
+    fn migrate_name_horizontal_style_icon_label() {
+        assert_eq!(
+            migrate_name("tt1234567_b_t@ir.sh.li.bl.zl.jpg"),
+            Some("tt1234567_b_t@ir.ptr.sh.li.dv.bl.zl.jpg".to_string()),
+        );
+    }
+
+    #[test]
+    fn migrate_name_default_style_official_label() {
+        assert_eq!(
+            migrate_name("tt1234567_b_f@m.sd.lo.bxs.zs.jpg"),
+            Some("tt1234567_b_f@m.ptr.sd.lo.dv.bxs.zs.jpg".to_string()),
+        );
+    }
+
+    #[test]
+    fn migrate_name_already_migrated() {
+        assert_eq!(
+            migrate_name("tt1234567_b_f@mil.ptr.sv.lt.dv.bm.zm.jpg"),
+            None,
+        );
+    }
+
+    #[test]
+    fn migrate_name_no_match() {
+        // Not a backdrop cache file
+        assert_eq!(migrate_name("tt1234567.jpg"), None);
+    }
+
+    #[test]
+    fn migrate_name_extra_small_badge_size() {
+        assert_eq!(
+            migrate_name("tt1234567_b_f@mil.sv.lt.bxs.zm.jpg"),
+            Some("tt1234567_b_f@mil.ptr.sv.lt.dv.bxs.zm.jpg".to_string()),
+        );
+    }
+
+    #[test]
+    fn migrate_name_extra_large_badge_size() {
+        assert_eq!(
+            migrate_name("tt1234567_b_f@mil.sv.lt.bxl.zvl.jpg"),
+            Some("tt1234567_b_f@mil.ptr.sv.lt.dv.bxl.zvl.jpg".to_string()),
+        );
+    }
+
+    #[test]
+    fn migrate_name_zero_ratings() {
+        assert_eq!(
+            migrate_name("tt1234567_b_f@.sv.lt.bm.zm.jpg"),
+            Some("tt1234567_b_f@.ptr.sv.lt.dv.bm.zm.jpg".to_string()),
+        );
+    }
+}

api/tests/db_operations.rs

@@ -25,6 +25,8 @@ fn test_upsert(key_id: i32) -> UpsertApiKeySettings<'static> {
         poster_badge_size: "m",
         logo_badge_size: "m",
         backdrop_badge_size: "m",
+        backdrop_position: "tr",
+        backdrop_badge_direction: "v",
         episode_ratings_limit: 2,
         episode_badge_style: "v",
         episode_label_style: "o",

api/tests/upgrade.rs

@@ -232,3 +232,153 @@ async fn v001_skips_filesystem_when_external_cache_only() {
         "renamed file should not exist in external_cache_only mode"
     );
 }
+
+// --- v002 backdrop position/direction cache key migration: DB ---
+
+#[tokio::test]
+async fn v002_inserts_position_and_direction_in_db() {
+    let db = setup_db().await;
+    let dir = tempfile::tempdir().unwrap();
+
+    // Insert rows with old-style backdrop cache keys (no position/direction suffix)
+    db.execute_unprepared(
+        "INSERT INTO image_meta (cache_key, image_type, created_at, updated_at) VALUES
+         ('imdb/tt1234567_b_f@mil.sv.lt.bm.zm', 'b', 1000, 1000),
+         ('imdb/tt7654321_b_t@ir.sh.li.bl.zl', 'b', 1000, 1000),
+         ('imdb/tt0000001_p@mil.sv.lt.bm.zm', 'poster', 1000, 1000)"
+    )
+    .await
+    .unwrap();
+
+    openposterdb_api::upgrade::run(&db, dir.path().to_str().unwrap(), false)
+        .await
+        .expect("upgrade should succeed");
+
+    // Backdrop keys should have position and direction inserted
+    let row = db
+        .query_one(sea_orm::Statement::from_string(
+            sea_orm::DatabaseBackend::Sqlite,
+            "SELECT cache_key FROM image_meta WHERE cache_key = 'imdb/tt1234567_b_f@mil.ptr.sv.lt.dv.bm.zm'".to_string(),
+        ))
+        .await
+        .unwrap();
+    assert!(row.is_some(), "first backdrop key should have .ptr and .dv inserted");
+
+    let row = db
+        .query_one(sea_orm::Statement::from_string(
+            sea_orm::DatabaseBackend::Sqlite,
+            "SELECT cache_key FROM image_meta WHERE cache_key = 'imdb/tt7654321_b_t@ir.ptr.sh.li.dv.bl.zl'".to_string(),
+        ))
+        .await
+        .unwrap();
+    assert!(row.is_some(), "second backdrop key should have .ptr and .dv inserted");
+
+    // Poster key should be untouched
+    let row = db
+        .query_one(sea_orm::Statement::from_string(
+            sea_orm::DatabaseBackend::Sqlite,
+            "SELECT cache_key FROM image_meta WHERE cache_key = 'imdb/tt0000001_p@mil.sv.lt.bm.zm'".to_string(),
+        ))
+        .await
+        .unwrap();
+    assert!(row.is_some(), "poster key should be untouched");
+}
+
+#[tokio::test]
+async fn v002_db_is_idempotent() {
+    let db = setup_db().await;
+    let dir = tempfile::tempdir().unwrap();
+
+    db.execute_unprepared(
+        "INSERT INTO image_meta (cache_key, image_type, created_at, updated_at) VALUES
+         ('imdb/tt1234567_b_f@mil.sv.lt.bm.zm', 'b', 1000, 1000)"
+    )
+    .await
+    .unwrap();
+
+    let cache_dir = dir.path().to_str().unwrap();
+    openposterdb_api::upgrade::run(&db, cache_dir, false)
+        .await
+        .expect("first run should succeed");
+    openposterdb_api::upgrade::run(&db, cache_dir, false)
+        .await
+        .expect("second run should succeed (idempotent)");
+
+    let row = db
+        .query_one(sea_orm::Statement::from_string(
+            sea_orm::DatabaseBackend::Sqlite,
+            "SELECT cache_key FROM image_meta WHERE cache_key = 'imdb/tt1234567_b_f@mil.ptr.sv.lt.dv.bm.zm'".to_string(),
+        ))
+        .await
+        .unwrap();
+    assert!(row.is_some(), "key should be migrated exactly once");
+}
+
+// --- v002 backdrop position/direction cache key migration: filesystem ---
+
+#[tokio::test]
+async fn v002_renames_backdrop_files() {
+    let db = setup_db().await;
+    let dir = tempfile::tempdir().unwrap();
+    let cache_dir = dir.path();
+
+    let backdrop_dir = cache_dir.join("backdrops").join("imdb");
+    std::fs::create_dir_all(&backdrop_dir).unwrap();
+
+    // Old-style filenames
+    std::fs::write(backdrop_dir.join("tt1234567_b_f@mil.sv.lt.bm.zm.jpg"), b"data1").unwrap();
+    std::fs::write(backdrop_dir.join("tt7654321_b_t@ir.sh.li.bl.zl.jpg"), b"data2").unwrap();
+    // Already migrated — should not be touched
+    std::fs::write(backdrop_dir.join("tt0000001_b_f@mil.ptr.sv.lt.dv.bm.zm.jpg"), b"data3").unwrap();
+
+    openposterdb_api::upgrade::run(&db, cache_dir.to_str().unwrap(), false)
+        .await
+        .expect("upgrade should succeed");
+
+    assert!(
+        backdrop_dir.join("tt1234567_b_f@mil.ptr.sv.lt.dv.bm.zm.jpg").exists(),
+        "first file should be renamed with .ptr and .dv"
+    );
+    assert!(
+        backdrop_dir.join("tt7654321_b_t@ir.ptr.sh.li.dv.bl.zl.jpg").exists(),
+        "second file should be renamed with .ptr and .dv"
+    );
+    assert!(
+        !backdrop_dir.join("tt1234567_b_f@mil.sv.lt.bm.zm.jpg").exists(),
+        "old first file should no longer exist"
+    );
+    assert!(
+        backdrop_dir.join("tt0000001_b_f@mil.ptr.sv.lt.dv.bm.zm.jpg").exists(),
+        "already-migrated file should be untouched"
+    );
+}
+
+#[tokio::test]
+async fn v002_skips_filesystem_when_external_cache_only() {
+    let db = setup_db().await;
+    let dir = tempfile::tempdir().unwrap();
+    let cache_dir = dir.path();
+
+    let backdrop_dir = cache_dir.join("backdrops").join("imdb");
+    std::fs::create_dir_all(&backdrop_dir).unwrap();
+    std::fs::write(backdrop_dir.join("tt1234567_b_f@mil.sv.lt.bm.zm.jpg"), b"data").unwrap();
+
+    openposterdb_api::upgrade::run(&db, cache_dir.to_str().unwrap(), true)
+        .await
+        .expect("upgrade should succeed");
+
+    assert!(
+        backdrop_dir.join("tt1234567_b_f@mil.sv.lt.bm.zm.jpg").exists(),
+        "file should be untouched in external_cache_only mode"
+    );
+}
+
+#[tokio::test]
+async fn v002_handles_missing_backdrop_directory() {
+    let db = setup_db().await;
+    let dir = tempfile::tempdir().unwrap();
+    // Don't create the backdrops subdirectory — should not error
+    openposterdb_api::upgrade::run(&db, dir.path().to_str().unwrap(), false)
+        .await
+        .expect("upgrade should succeed even without backdrops dir");
+}

scripts/visual-report.sh

@@ -262,6 +262,20 @@ for val in xs s m l xl; do
 done
 end_section
 
+add_section "Backdrop - badge_direction"
+for val in h v d; do
+    path=$(fetch_image "backdrop_badge_direction=$val" "backdrop-default" "badge_direction=$val" "jpg")
+    add_image "badge_direction=$val" "$path"
+done
+end_section
+
+add_section "Backdrop - position"
+for val in bc tc l r tl tr bl br; do
+    path=$(fetch_image "backdrop_position=$val" "backdrop-default" "position=$val" "jpg")
+    add_image "position=$val" "$path"
+done
+end_section
+
 add_section "Backdrop - image_source"
 for val in t f; do
     path=$(fetch_image "backdrop_image_source=$val" "backdrop-default" "image_source=$val" "jpg")
@@ -283,6 +297,16 @@ for val in small medium large; do
 done
 end_section
 
+# Combined backdrop: position × badge_direction (needs multiple ratings to see direction)
+add_section "Backdrop - position × badge_direction"
+for pos in bc tc l r tl tr bl br; do
+    for dir in h v; do
+        path=$(fetch_image "backdrop_pos=${pos}_dir=${dir}" "backdrop-default" "position=${pos}&badge_direction=${dir}" "jpg")
+        add_image "position=$pos badge_direction=$dir" "$path"
+    done
+done
+end_section
+
 # Combined backdrop: badge_style × label_style
 add_section "Backdrop - badge_style × label_style"
 for bs in h v; do

web/src/__tests__/components/RenderSettingsForm.spec.ts

@@ -27,6 +27,8 @@ const defaultSettings: RenderSettings = {
   poster_badge_size: 'm',
   logo_badge_size: 'm',
   backdrop_badge_size: 'm',
+  backdrop_position: 'tr',
+  backdrop_badge_direction: 'v',
   episode_ratings_limit: 1,
   episode_badge_style: 'v',
   episode_label_style: 'o',

web/src/__tests__/views/SettingsView.spec.ts

@@ -35,6 +35,8 @@ const defaultSettings = {
   logo_label_style: 't',
   backdrop_label_style: 't',
   poster_badge_direction: 'd',
+  backdrop_position: 'tr',
+  backdrop_badge_direction: 'v',
   episode_ratings_limit: 1,
   episode_badge_style: 'v',
   episode_label_style: 'o',

web/src/components/RenderSettingsForm.vue

@@ -37,6 +37,8 @@ export interface RenderSettings {
   poster_badge_size: string
   logo_badge_size: string
   backdrop_badge_size: string
+  backdrop_position: string
+  backdrop_badge_direction: string
   episode_ratings_limit: number
   episode_badge_style: string
   episode_label_style: string
@@ -54,7 +56,7 @@ const props = defineProps<{
   resetSettings?: () => Promise<boolean>
   fetchPreview: (ratingsLimit: number, ratingsOrder: string, posterPosition?: string, badgeStyle?: string, labelStyle?: string, badgeDirection?: string, badgeSize?: string) => Promise<Response>
   fetchLogoPreview?: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string) => Promise<Response>
-  fetchBackdropPreview?: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string) => Promise<Response>
+  fetchBackdropPreview?: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string, position?: string, badgeDirection?: string) => Promise<Response>
   fetchEpisodePreview?: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string, position?: string, badgeDirection?: string, blur?: boolean) => Promise<Response>
 }>()
 
@@ -77,6 +79,8 @@ const editPosterBadgeDirection = ref(props.settings.poster_badge_direction || 'd
 const editPosterBadgeSize = ref(props.settings.poster_badge_size || 'm')
 const editLogoBadgeSize = ref(props.settings.logo_badge_size || 'm')
 const editBackdropBadgeSize = ref(props.settings.backdrop_badge_size || 'm')
+const editBackdropPosition = ref(props.settings.backdrop_position || 'tr')
+const editBackdropBadgeDirection = ref(props.settings.backdrop_badge_direction || 'v')
 const editEpisodeRatingsLimit = ref(props.settings.episode_ratings_limit ?? 1)
 const editEpisodeBadgeStyle = ref(props.settings.episode_badge_style || 'v')
 const editEpisodeLabelStyle = ref(props.settings.episode_label_style || 'o')
@@ -104,6 +108,8 @@ function applySettings(s: RenderSettings) {
   editPosterBadgeSize.value = s.poster_badge_size || 'm'
   editLogoBadgeSize.value = s.logo_badge_size || 'm'
   editBackdropBadgeSize.value = s.backdrop_badge_size || 'm'
+  editBackdropPosition.value = s.backdrop_position || 'tr'
+  editBackdropBadgeDirection.value = s.backdrop_badge_direction || 'v'
   editEpisodeRatingsLimit.value = s.episode_ratings_limit ?? 1
   editEpisodeBadgeStyle.value = s.episode_badge_style || 'v'
   editEpisodeLabelStyle.value = s.episode_label_style || 'o'
@@ -165,6 +171,8 @@ async function autoSave() {
       poster_badge_size: editPosterBadgeSize.value,
       logo_badge_size: editLogoBadgeSize.value,
       backdrop_badge_size: editBackdropBadgeSize.value,
+      backdrop_position: editBackdropPosition.value,
+      backdrop_badge_direction: editBackdropBadgeDirection.value,
       episode_ratings_limit: editEpisodeRatingsLimit.value,
       episode_badge_style: editEpisodeBadgeStyle.value,
       episode_label_style: editEpisodeLabelStyle.value,
@@ -198,7 +206,7 @@ async function autoSave() {
 
 // Auto-save on any setting change
 watch(
-  [editSource, editLang, editTextless, editRatingsLimit, editRatingsOrder, editPosterPosition, editLogoRatingsLimit, editBackdropRatingsLimit, editPosterBadgeStyle, editLogoBadgeStyle, editBackdropBadgeStyle, editPosterLabelStyle, editLogoLabelStyle, editBackdropLabelStyle, editPosterBadgeDirection, editPosterBadgeSize, editLogoBadgeSize, editBackdropBadgeSize, editEpisodeRatingsLimit, editEpisodeBadgeStyle, editEpisodeLabelStyle, editEpisodeBadgeSize, editEpisodePosition, editEpisodeBadgeDirection, editEpisodeBlur],
+  [editSource, editLang, editTextless, editRatingsLimit, editRatingsOrder, editPosterPosition, editLogoRatingsLimit, editBackdropRatingsLimit, editPosterBadgeStyle, editLogoBadgeStyle, editBackdropBadgeStyle, editPosterLabelStyle, editLogoLabelStyle, editBackdropLabelStyle, editPosterBadgeDirection, editPosterBadgeSize, editLogoBadgeSize, editBackdropBadgeSize, editBackdropPosition, editBackdropBadgeDirection, editEpisodeRatingsLimit, editEpisodeBadgeStyle, editEpisodeLabelStyle, editEpisodeBadgeSize, editEpisodePosition, editEpisodeBadgeDirection, editEpisodeBlur],
   () => {
     if (syncing) return
     autoSave()
@@ -301,7 +309,7 @@ function updateLogoPreview() {
 
 function updateBackdropPreview() {
   if (props.fetchBackdropPreview) {
-    fetchPreviewImage(backdropPreview.value, (_limit, order) => props.fetchBackdropPreview!(editBackdropRatingsLimit.value, order, editBackdropBadgeStyle.value, editBackdropLabelStyle.value, editBackdropBadgeSize.value))
+    fetchPreviewImage(backdropPreview.value, (_limit, order) => props.fetchBackdropPreview!(editBackdropRatingsLimit.value, order, editBackdropBadgeStyle.value, editBackdropLabelStyle.value, editBackdropBadgeSize.value, editBackdropPosition.value, editBackdropBadgeDirection.value))
   }
 }
 
@@ -346,7 +354,7 @@ watch([editLogoRatingsLimit, editLogoBadgeStyle, editLogoLabelStyle, editLogoBad
 })
 
 // Backdrop-only settings
-watch([editBackdropRatingsLimit, editBackdropBadgeStyle, editBackdropLabelStyle, editBackdropBadgeSize], () => {
+watch([editBackdropRatingsLimit, editBackdropBadgeStyle, editBackdropLabelStyle, editBackdropBadgeSize, editBackdropPosition, editBackdropBadgeDirection], () => {
   if (syncing) return
   if (backdropPreviewTimer) clearTimeout(backdropPreviewTimer)
   backdropPreviewTimer = setTimeout(updateBackdropPreview, 500)
@@ -716,6 +724,43 @@ const inputId = (name: string) => props.uid ? `${name}-${props.uid}` : name
               </SelectContent>
             </Select>
           </div>
+          <div class="space-y-2">
+            <Label :for="inputId('backdrop-position')">Position</Label>
+            <Select
+              :model-value="editBackdropPosition"
+              @update:model-value="editBackdropPosition = $event as string"
+            >
+              <SelectTrigger :id="inputId('backdrop-position')" class="max-w-xs" data-testid="backdrop-position-select">
+                <SelectValue placeholder="Select position" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tl">Top Left</SelectItem>
+                <SelectItem value="tc">Top Center</SelectItem>
+                <SelectItem value="tr">Top Right</SelectItem>
+                <SelectItem value="bl">Bottom Left</SelectItem>
+                <SelectItem value="bc">Bottom Center</SelectItem>
+                <SelectItem value="br">Bottom Right</SelectItem>
+                <SelectItem value="l">Left</SelectItem>
+                <SelectItem value="r">Right</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="space-y-2">
+            <Label :for="inputId('backdrop-badge-direction')">Badge direction</Label>
+            <Select
+              :model-value="editBackdropBadgeDirection"
+              @update:model-value="editBackdropBadgeDirection = $event as string"
+            >
+              <SelectTrigger :id="inputId('backdrop-badge-direction')" class="max-w-xs" data-testid="backdrop-badge-direction-select">
+                <SelectValue placeholder="Select direction" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="d">Default</SelectItem>
+                <SelectItem value="h">Horizontal</SelectItem>
+                <SelectItem value="v">Vertical</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
           <div class="space-y-1">
             <div class="flex items-center gap-3">
               <Label :for="inputId('backdrop-ratings-limit')">Max ratings</Label>

web/src/lib/api.ts

@@ -83,6 +83,8 @@ export interface SaveSettingsPayload {
   poster_badge_size: string
   logo_badge_size: string
   backdrop_badge_size: string
+  backdrop_position: string
+  backdrop_badge_direction: string
   episode_ratings_limit: number
   episode_badge_style: string
   episode_label_style: string
@@ -138,8 +140,8 @@ export const adminApi = {
     get(buildUrl('/api/admin/preview/poster', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, position: posterPosition, badge_style: badgeStyle, label_style: labelStyle, badge_direction: badgeDirection, badge_size: badgeSize })),
   previewLogo: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string): Promise<Response> =>
     get(buildUrl('/api/admin/preview/logo', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize })),
-  previewBackdrop: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string): Promise<Response> =>
-    get(buildUrl('/api/admin/preview/backdrop', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize })),
+  previewBackdrop: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string, position?: string, badgeDirection?: string): Promise<Response> =>
+    get(buildUrl('/api/admin/preview/backdrop', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize, position, badge_direction: badgeDirection })),
   previewEpisode: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string, position?: string, badgeDirection?: string, blur?: boolean): Promise<Response> =>
     get(buildUrl('/api/admin/preview/episode', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize, position, badge_direction: badgeDirection, blur: blur ? 'true' : undefined })),
 }
@@ -177,8 +179,8 @@ export const selfApi = {
     keyRequest(buildUrl('/api/key/me/preview/poster', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, position: posterPosition, badge_style: badgeStyle, label_style: labelStyle, badge_direction: badgeDirection, badge_size: badgeSize })),
   previewLogo: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string): Promise<Response> =>
     keyRequest(buildUrl('/api/key/me/preview/logo', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize })),
-  previewBackdrop: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string): Promise<Response> =>
-    keyRequest(buildUrl('/api/key/me/preview/backdrop', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize })),
+  previewBackdrop: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string, position?: string, badgeDirection?: string): Promise<Response> =>
+    keyRequest(buildUrl('/api/key/me/preview/backdrop', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize, position, badge_direction: badgeDirection })),
   previewEpisode: (ratingsLimit: number, ratingsOrder: string, badgeStyle?: string, labelStyle?: string, badgeSize?: string, position?: string, badgeDirection?: string, blur?: boolean): Promise<Response> =>
     keyRequest(buildUrl('/api/key/me/preview/episode', { ratings_limit: ratingsLimit, ratings_order: ratingsOrder, badge_style: badgeStyle, label_style: labelStyle, badge_size: badgeSize, position, badge_direction: badgeDirection, blur: blur ? 'true' : undefined })),
 }