Merge pull request #15 from mirus-ua/14-feat-post-banner-image-source

[feat] cover caption on post page

README.md

@@ -23,6 +23,7 @@ So, welcome aboard! I'm excited to have you join us on this journey as we shape
 - site top banner, aka call to action banner
 - migrated from SCSS variable to CSS' Native, it brings super easy color customization via `style.css`
 - add submenus for the main menu
+- `coverCaption` for your article covers. Now you can add some information about the image in proper way
 
 ----
 

archetypes/posts.md

@@ -4,6 +4,7 @@ date = "{{ .Date }}"
 author = ""
 authorTwitter = "" #do not include @
 cover = ""
+coverCaption = ""
 tags = ["", ""]
 keywords = ["", ""]
 description = ""

assets/css/post.scss

@@ -134,3 +134,15 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 .footnotes {
   color: color-mix(in srgb, var(--accent), transparent 50%);
 }
+
+figure:has(.post-cover) {
+  margin: 20px;
+
+  & > .post-cover {
+    margin: 0;
+  }
+
+  & > figcaption {
+    margin-top: 0;
+  }
+}

demoSite/content/posts/css-vars.md

@@ -3,6 +3,7 @@ title = "CSS Variables update"
 date = "2024-07-30"
 author = "Mirus"
 cover = "img/css-variables-update.webp"
+coverCaption = "By the way, you can add a caption for your cover"
 description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
 layout = "css-vars-showcase"
 Toc=true

demoSite/hugo.toml

@@ -4,72 +4,72 @@ languageCode = "en-us"
 paginate = 5
 
 [params]
-contentTypeName = "posts"
+  contentTypeName = "posts"
-themeColor = "blue"
+  themeColor = "blue"
-showMenuItems = 3
+  showMenuItems = 3
-fullWidthTheme = false
+  fullWidthTheme = false
-centerTheme = true
+  centerTheme = true
-[params.banner]
+  [params.banner]
-dismissible = false
+    dismissible = false
-text = "Check it out on GitHub"
+    text = "Check it out on GitHub"
-url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
+    url = "https://github.com/mirus-ua/hugo-theme-re-terminal"
 
 [languages]
-[languages.en.params]
+  [languages.en.params]
-title = "re-Terminal"
+    title = "re-Terminal"
-subtitle = "A simple, retro theme for Hugo"
+    subtitle = "A simple, retro theme for Hugo"
-keywords = ""
+    keywords = ""
-copyright = ""
+    copyright = ""
-menuMore = "Show more"
+    menuMore = "Show more"
-readMore = "Read more"
+    readMore = "Read more"
-readOtherPosts = "Read other posts"
+    readOtherPosts = "Read other posts"
 
-[languages.en.params.logo]
+    [languages.en.params.logo]
-logoText = "re-Terminal"
+      logoText = "re-Terminal"
-logoHomeLink = "/"
+      logoHomeLink = "/"
 
 [languages.en.menu]
-[[languages.en.menu.main]]
+  [[languages.en.menu.main]]
-identifier = "submenu"
+    identifier = "submenu"
-name = "Sub menus"
+    name = "Sub menus"
-weight = 10
+    weight = 10
-[[languages.en.menu.main]]
+  [[languages.en.menu.main]]
-identifier = "subabout"
+    identifier = "subabout"
-name = "About"
+    name = "About"
-url = "/about"
+    url = "/about"
-parent = "submenu"
+    parent = "submenu"
-[[languages.en.menu.main]]
+  [[languages.en.menu.main]]
-identifier = "subshowcase"
+    identifier = "subshowcase"
-name = "Showcase"
+    name = "Showcase"
-url = "/showcase"
+    url = "/showcase"
-parent = "submenu"
+    parent = "submenu"
-[[languages.en.menu.main]]
+  [[languages.en.menu.main]]
-identifier = "about"
+    identifier = "about"
-name = "About"
+    name = "About"
-url = "/about"
+    url = "/about"
-[[languages.en.menu.main]]
+  [[languages.en.menu.main]]
-identifier = "showcase"
+    identifier = "showcase"
-name = "Showcase"
+    name = "Showcase"
-url = "/showcase"
+    url = "/showcase"
 
 
 # Only for demo deploy perpous
 [module]
-[[module.mounts]]
+  [[module.mounts]]
-source = 'demoSite/content'
+    source = 'demoSite/content'
-target = 'content'
+    target = 'content'
-[[module.mounts]]
+  [[module.mounts]]
-source = 'demoSite/static'
+    source = 'demoSite/static'
-target = 'static'
+    target = 'static'
-[[module.mounts]]
+  [[module.mounts]]
-source = 'static'
+    source = 'static'
-target = 'static'
+    target = 'static'
-[[module.mounts]]
+  [[module.mounts]]
-source = 'layouts'
+    source = 'layouts'
-target = 'layouts'
+    target = 'layouts'
-[[module.mounts]]
+  [[module.mounts]]
-source = 'demoSite/layouts'
+    source = 'demoSite/layouts'
-target = 'layouts'
+    target = 'layouts'
-[[module.mounts]]
+  [[module.mounts]]
-source = 'archetypes'
+    source = 'archetypes'
-target = 'archetypes'
+    target = 'archetypes'

layouts/partials/cover.html

@@ -16,9 +16,22 @@
 {{- end -}}
 
 {{if $cover -}}
-  <!-- Cover image found -->
+  {{ if .Params.coverCaption }}
-  <img src="{{ $cover }}"
+    <figure> 
-    class="post-cover"
+      <!-- Cover image found -->
-    alt="{{ .Title | plainify | default " " }}"
+      <img src="{{ $cover }}"
-    title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+      class="post-cover"
+      alt="{{ .Title | plainify | default " " }}"
+      title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+      
+      <figcaption class="right">{{ .Params.coverCaption | safeHTML }}</figcaption>
+    </figure>
+  {{ else }}
+    <!-- Cover image found -->
+    <img src="{{ $cover }}"
+      class="post-cover"
+      alt="{{ .Title | plainify | default " " }}"
+      title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+  {{ end }}
 {{- end }}
+