feat: banners images can be flagged on with env

* adds 3 new config variables to flag on banners: * BANNER_IMAGE_SOURCE (this is the one that flips on the banner) * BANNER_IMAGE_LINK * BANNER_IMAGE_ALT
hashrocket · Nov 3, 2022 · c78f86a · c78f86a
1 parent bef33c4
commit c78f86a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 2 deletions.
diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -210,3 +210,43 @@ header.page_head a.author_twitter {
   border-color: var(--red);
   color: var(--red);
 }
+
+/* Banner Image Styles */
+.has-banner {
+  margin-top: 27vh !important;
+}
+@media screen and (min-width: 1201px) {
+  .has-banner {
+    margin-top: 47vh !important;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .has-banner {
+    margin-top: 37vh !important;
+  }
+}
+@media screen and (max-width: 800px) {
+  .has-banner {
+    margin-top: 35vh !important;
+  }
+}
+@media screen and (max-width: 480px) {
+  .has-banner {
+    margin-top: 17vh !important;
+  }
+}
+header.site_head > .banner_image {
+  display: flex;
+  justify-content: center;
+}
+.banner_image > a {
+  width: 650px;
+}
+.banner_image img {
+  width: 100%;
+}
+@media screen and (max-width: 480px) {
+  header.site_head > .banner_image {
+    display: none;
+  }
+}
diff --git a/config/config.exs b/config/config.exs
@@ -64,6 +64,9 @@ config :tilex, :guest_author_allowlist, System.get_env("GUEST_AUTHOR_ALLOWLIST")
 config :tilex, :date_display_tz, System.get_env("DATE_DISPLAY_TZ")
 config :tilex, :imgur_client_id, System.get_env("IMGUR_CLIENT_ID")
 config :tilex, :slack_endpoint, "https://hooks.slack.com#{System.get_env("slack_post_endpoint")}"
+config :tilex, :banner_image_source, System.get_env("BANNER_IMAGE_SOURCE")
+config :tilex, :banner_image_link, System.get_env("BANNER_IMAGE_LINK")
+config :tilex, :banner_image_alt, System.get_env("BANNER_IMAGE_ALT")
 
 config :tilex,
        :rate_limiter_requests_per_time_period,

diff --git a/lib/tilex_web/templates/layout/app.html.heex b/lib/tilex_web/templates/layout/app.html.heex
@@ -1,4 +1,4 @@
-<main class="container">
+<main class={"container #{if Application.get_env(:tilex, :banner_image_source), do: 'has-banner'}"}>
   <div id="flash">
     <%= if message = get_flash(@conn, :info) do %>
       <p class="alert alert-info" role="alert"><%= message %></p>

diff --git a/lib/tilex_web/templates/layout/root.html.heex b/lib/tilex_web/templates/layout/root.html.heex
@@ -64,7 +64,15 @@
 
     <%= render "site_nav.html", conn: @conn %>
 
-    <header class="site_head">
+    <header class={"site_head"}>
+      <%= if Application.get_env(:tilex, :banner_image_source) do %>
+        <div class="banner_image">
+          <a href={Application.get_env(:tilex, :banner_image_link)}>
+            <%= img_tag Application.get_env(:tilex, :banner_image_source), alt: Application.get_env(:tilex, :banner_image_alt) %>
+          </a>
+        </div>
+      <% end %>
+
       <div>
         <h1><%= link("Today I Learned", to: Routes.post_path(@conn, :index)) %></h1>
         <h2>