Add thumbnail_classes to be able to control thumbnail placing

app/models/talk.rb

@@ -279,6 +279,10 @@ def thumbnail_xl
     thumbnail(:thumbnail_xl)
   end
 
+  def thumbnail_classes
+    static_metadata.try(:[], "thumbnail_classes") || ""
+  end
+
   def fallback_thumbnail
     "/assets/#{Rails.application.assets.load_path.find("events/default/poster.webp").digested_path}"
   end

app/views/talks/_card.html.erb

@@ -89,7 +89,7 @@
           loading: "lazy",
           alt: "talk by #{talk.speakers.map(&:name).join(", ")}: #{talk.title}",
           style: "view-transition-name: #{dom_id(talk, :image)}",
-          class: "w-full object-cover object-center skeleton rounded-t-xl border-b"
+          class: "w-full object-cover skeleton rounded-t-xl border-b #{talk.thumbnail_classes}"
         ) %>
   <% end %>
   <div class="card-body flex flex-row justify-between items-start gap-2">

app/views/talks/_card_horizontal.html.erb

@@ -24,7 +24,7 @@
     ) do %>
 
   <div class="flex aspect-video shrink-0 relative w-20">
-    <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_sm} 2x"], id: dom_id(talk), class: "w-full h-auto aspect-video object-cover border rounded", loading: :lazy %>
+    <%= image_tag talk.thumbnail_sm, srcset: ["#{talk.thumbnail_sm} 2x"], id: dom_id(talk), class: "w-full h-auto aspect-video object-cover border rounded #{talk.thumbnail_classes}", loading: :lazy %>
 
     <div class="absolute inset-0 bg-black/50 justify-center items-center rounded hidden group-[.active]:flex">
       <%= fa("play", size: :sm, class: "fill-white") %>

app/views/talks/_sections.html.erb

@@ -6,7 +6,7 @@
           <div class="flex justify-between">
             <div <% if child_talk == talk %> data-active <% end %> class="flex gap-3 text-gray-700 data-[active]:font-bold text-sm">
               <div class="flex aspect-video shrink-0 relative w-16 lg:w-24 xl:w-36">
-                <%= image_tag child_talk.thumbnail_sm, srcset: ["#{child_talk.thumbnail_sm} 2x"], id: dom_id(child_talk), class: "w-full h-auto aspect-video object-cover rounded", loading: :lazy %>
+                <%= image_tag child_talk.thumbnail_sm, srcset: ["#{child_talk.thumbnail_sm} 2x"], id: dom_id(child_talk), class: "w-full h-auto aspect-video object-cover rounded #{child_talk.thumbnail_classes}", loading: :lazy %>
               </div>
 
               <div class="flex flex-col gap-0.5 justify-center">

app/views/talks/video_providers/_children.html.erb

@@ -1,5 +1,5 @@
 <div class="relative w-full h-full block">
-  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl" %>
+  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl #{talk.thumbnail_classes}" %>
 
   <div class="absolute inset-0 text-white bg-black/70 flex flex-col gap-3 justify-center items-center text-xl rounded-xl p-6 overflow-y-scroll">
     <span class="text-center text-2xl p-4 rounded-full mb-2 font-bold">

app/views/talks/video_providers/_not_published.html.erb

@@ -1,5 +1,5 @@
 <div class="relative w-full h-full block">
-  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl" %>
+  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl #{talk.thumbnail_classes}" %>
 
   <div class="absolute inset-0 text-center text-white bg-black/80 flex flex-col gap-3 justify-center items-center font-bold text-xl rounded-xl p-6">
     <span class="bg-black/30 p-4 rounded-full">

app/views/talks/video_providers/_not_recorded.html.erb

@@ -1,5 +1,5 @@
 <div class="relative w-full h-full block">
-  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl" %>
+  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl #{talk.thumbnail_classes}" %>
 
   <div class="absolute inset-0 text-center text-white bg-black/80 flex flex-col gap-3 justify-center items-center font-bold text-xl rounded-xl p-6">
     <span class="bg-black/30 p-4 rounded-full">

app/views/talks/video_providers/_scheduled.html.erb

@@ -1,5 +1,5 @@
 <div class="relative w-full h-full block">
-  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl" %>
+  <%= image_tag talk.thumbnail_xl, class: "w-full h-full object-cover rounded-xl #{talk.thumbnail_classes}" %>
 
   <div class="absolute inset-0 text-center text-white bg-black/80 flex flex-col gap-3 justify-center items-center font-bold text-xl rounded-xl p-6">
     <span class="bg-black/30 p-4 rounded-full">

data/madison-ruby/madison-ruby-2024/videos.yml

@@ -15,6 +15,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GQTxm1AbwAApD3f?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GQTxm1AbwAApD3f?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GQTxm1AbwAApD3f?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "A keynote reflecting on a decade in the Ruby community, emphasizing mentorship and the essence of being a Rubyist."
   date: "2024-08-01"
   published_at: "TODO"
@@ -30,6 +31,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GQ2izw3W8AAtsR_?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GQ2izw3W8AAtsR_?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GQ2izw3W8AAtsR_?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   date: "2024-08-01"
   published_at: "TODO"
   description: |-
@@ -47,6 +49,7 @@
   thumbnail_lg: https://pbs.twimg.com/media/GPkCjEpXwAANMDY?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GPkCjEpXwAANMDY?format=jpg&name=medium
   slides_url: https://speakerdeck.com/johnksawers/hacking-your-emotionhal-firewall-1-dot-0
+  thumbnail_classes: "object-bottom"
   description: |-
     Firewalls are great, they filter out traffic you don't want from the internet. In this talk I'll take a look at what's inside us, at the connection between our body and mind, and imagine a firewall that sits in between. What if we could use the magic of TCP to find disconnected parts of ourselves and connect to them? We would end up experiencing greater wholeness and increased understanding of our minds, bodies, emotions, and motivations.
   date: "2024-08-01"
@@ -63,6 +66,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GQxbWHBXMAEZfjS?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GQxbWHBXMAEZfjS?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GQxbWHBXMAEZfjS?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "A comparative analysis of building architecture and software architecture, exploring patterns and considerations at various scales."
   date: "2024-08-01"
   published_at: "TODO"
@@ -80,6 +84,7 @@
   thumbnail_lg: https://pbs.twimg.com/media/GP9OVajWoAAIB5C?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GP9OVajWoAAIB5C?format=jpg&name=medium
   slides_url: https://speakerdeck.com/markyoon/designing-resilient-apis-balancing-stability-and-flexibility
+  thumbnail_classes: "object-bottom"
   description: "Strategies for crafting robust APIs in Ruby tailored for mobile clients, focusing on stability, flexibility, and collaboration."
   date: "2024-08-01"
   published_at: "TODO"
@@ -95,6 +100,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GQsWhXrWcAATPmk?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GQsWhXrWcAATPmk?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GQsWhXrWcAATPmk?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "Insights on how paragliding experiences can influence programming, focusing on handling fear and stress effectively."
   date: "2024-08-01"
   published_at: "TODO"
@@ -110,6 +116,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GSSUzTXXUAEU8ei?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GSSUzTXXUAEU8ei?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GSSUzTXXUAEU8ei?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   slides_url: https://speakerdeck.com/asheren/effective-discussions-for-technical-decision-making
   description: "Whiteboards. Pairing. Spikes. These are the tools we use to have high-level technical conversations about ideas or approaches. How you conduct and lead these conversations involves articulating a vision and securing buy-in, while also valuing and integrating diverse perspectives and feedback from others. The goal is to foster an environment where ideas can be exchanged, discussed, enhanced, and decided on. You’ll walk away from this talk with some new approaches to get your technical ideas across and also solicit thoughts and opinions in ways that engage different points of view."
   date: "2024-08-01"
@@ -144,6 +151,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GQDALWXWsAEzSMi?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GQDALWXWsAEzSMi?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GQDALWXWsAEzSMi?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "Automation doesn’t have to be all or nothing. Automating manual processes is a practice that one can employ via simple principles. Broad enough to be applied to a range of workflows, flexible enough to be tailored to an individual’s personal development routines; these principles are not in themselves complex, and can be performed regularly in the day to day of working in a codebase. Learn how to cultivate habits and a culture of incremental automation so even if the goal is not a full self-service suite of automated tools, your team can begin a journey away from friction and manual tasks."
   date: "2024-08-01"
   published_at: "TODO"
@@ -159,6 +167,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GSIFESPaUAkro38?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GSIFESPaUAkro38?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GSIFESPaUAkro38?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   slides_url: https://speakerdeck.com/thedayisntgray/ruby-on-rag-building-ai-use-cases-for-fun-and-profit
   description: |-
     This talk will cover what RAG is, how it works, and why we should be building RAG applications in Ruby and Rails. I'll share some code examples of what a toy RAG pipeline looks like in native Ruby and do a live demo of a simple RAG application. I'll also share a perspective as to why Ruby and Rails are great tools for building LLM applications and that the future languages for building such applications are whatever languages are most natural to you.
@@ -176,6 +185,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GPUzTZoXsAAhrpE?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GPUzTZoXsAAhrpE?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GPUzTZoXsAAhrpE?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "A discussion on applying Postel’s Law to code generated from Large Language Models (LLMs) and Ruby's role in AI code generation."
   date: "2024-08-01"
   published_at: "TODO"
@@ -191,6 +201,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GPZxoCAXoAQmjfV?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GPZxoCAXoAQmjfV?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GPZxoCAXoAQmjfV?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "Techniques to enhance writing clarity for developers, drawing parallels between code refactoring and prose improvement."
   date: "2024-08-02"
   published_at: "TODO"
@@ -222,6 +233,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GPpn4_SWUAApz5S?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GPpn4_SWUAApz5S?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GPpn4_SWUAApz5S?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "Guidance for back-end developers on impacting accessibility through APIs, specs, Ruby code, and documentation."
   date: "2024-08-01"
   published_at: "TODO"
@@ -237,6 +249,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GPt0CssWMAAeS-a?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GPt0CssWMAAeS-a?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GPt0CssWMAAeS-a?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "Essentials of visual regression testing using Storybook and Backstop, with practical advice for integration into development cycles."
   date: "2024-08-01"
   published_at: "TODO"
@@ -252,6 +265,7 @@
   thumbnail_md: https://pbs.twimg.com/media/GPze7qOWoAAt5T0?format=jpg
   thumbnail_lg: https://pbs.twimg.com/media/GPze7qOWoAAt5T0?format=jpg&name=medium
   thumbnail_xl: https://pbs.twimg.com/media/GPze7qOWoAAt5T0?format=jpg&name=medium
+  thumbnail_classes: "object-bottom"
   description: "A provocative discussion on the role of ethics in open source, challenging common perceptions and encouraging critical thought."
   date: "2024-08-01"
   published_at: "TODO"

tailwind.config.js

@@ -8,7 +8,8 @@ module.exports = {
     './app/helpers/**/*.rb',
     './app/assets/stylesheets/**/*.css',
     './app/javascript/**/*.js',
-    './config/initializers/heroicon.rb'
+    './config/initializers/heroicon.rb',
+    './data/**/**'
   ],
   theme: {
     container: {