Allow dynamic setting of width/height for news img

thechangelog · Jul 23, 2024 · 6fb20ba · 6fb20ba
1 parent 6fa22ea
commit 6fb20ba
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/.formatter.exs b/.formatter.exs
@@ -1,5 +1,5 @@
 [
   import_deps: [:ecto, :phoenix],
-  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  inputs: ["*.{heex,ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{heex,ex,exs}"],
   subdirectories: ["priv/*/migrations"]
 ]
diff --git a/assets/app/img.css b/assets/app/img.css
@@ -282,8 +282,6 @@ Changelog News
   background: var(--color-dark);
   margin: 0 auto 1rem;
   position: relative;
-  width: 1200px;
-  height: 630px;
 }
 
 .news-fade {

diff --git a/lib/changelog_web/controllers/episode_controller.ex b/lib/changelog_web/controllers/episode_controller.ex
@@ -27,14 +27,19 @@ defmodule ChangelogWeb.EpisodeController do
     |> render(:show)
   end
 
-  def img(conn, %{"slug" => slug}, podcast = %{slug: "news"}) do
+  def img(conn, params = %{"slug" => slug}, podcast = %{slug: "news"}) do
     episode =
       assoc(podcast, :episodes)
       |> Episode.preload_all()
       |> Repo.get_by!(slug: slug)
 
+    width = Map.get(params, "w", "1200")
+    height = Map.get(params, "h", "630")
+
     conn
     |> assign(:episode, episode)
+    |> assign(:width, width)
+    |> assign(:height, height)
     |> render(:img_news, layout: false)
   end
 

diff --git a/lib/changelog_web/templates/episode/img_news.html.heex b/lib/changelog_web/templates/episode/img_news.html.heex
@@ -6,6 +6,12 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title><%= title_with_guest_focused_subtitle_and_podcast_aside(@episode) %></title>
     <link rel="stylesheet" href={url(~p"/css/img.css")}>
+    <style>
+    .news-container {
+      width: <%= @width %>px;
+      height: <%= @height %>px;
+    }
+    </style>
   </head>
   <body style={"--primary: ##{PodcastView.color_hex_code(@episode.podcast)};"}>
     <div class="news-container">
@@ -23,7 +29,6 @@
         <% end %>
         </ul>
       </div>
-
       <div class="news-fade"></div>
     </div>
   </body>