Merge pull request #2515 from ZhenShuo2021/feat/image-position

 Feat: add `imagePosition` to allow align image
This commit is contained in:
Nuno C.
2025-10-14 10:14:27 +01:00
committed by GitHub
24 changed files with 112 additions and 36 deletions
+4 -4
View File
@@ -3714,19 +3714,19 @@ pre {
width: 100%;
height: 100%;
}
.thumbnail--card {
.thumbnail_card {
min-width: 300px;
height: 200px;
}
.thumbnail--related {
.thumbnail_card_related {
height: 150px;
}
.thumbnail--simple {
.thumbnail {
width: 300px;
min-height: 180px;
}
@media (width < 853px) {
.thumbnail--simple {
.thumbnail {
width: 100%;
}
}
+4 -4
View File
@@ -174,22 +174,22 @@ pre {
height: 100%;
}
.thumbnail--card {
.thumbnail_card {
min-width: 300px;
height: 200px;
}
.thumbnail--related {
.thumbnail_card_related {
height: 150px;
}
.thumbnail--simple {
.thumbnail {
width: 300px;
min-height: 180px;
}
@variant max-md {
.thumbnail--simple {
.thumbnail {
width: 100%;
}
}
+1
View File
@@ -27,6 +27,7 @@ disableTextInHeader = false
# defaultFeaturedImage = "IMAGE.jpg" # used as default for featured images in all articles
# defaultSocialImage = "/android-chrome-512x512.png" # used as default for social media sharing (Open Graph and Twitter)
hotlinkFeatureImage = false
# imagePosition = "50% 50%"
# highlightCurrentMenuArea = true
# smartTOC = true
+1
View File
@@ -27,6 +27,7 @@ defaultBackgroundImage = "/img/background.svg"
defaultFeaturedImage = "/img/featured.svg"
defaultSocialImage = "/img/blowfish_banner.png"
hotlinkFeatureImage = false
# imagePosition = "50% 50%"
highlightCurrentMenuArea = true
smartTOC = true
@@ -186,6 +186,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
| `defaultFeaturedImage` | _Not set_ | Default background image for all `featured` images across articles, will be overridden by a local `featured` image. |
| `defaultSocialImage` | _Not set_ | Default image for social media sharing (Open Graph and Twitter). Will be overridden by a local `feature` image if available. |
| `hotlinkFeatureImage` | `false` | Hotlink external images in article feature images and article cards. Those images will not be processed by Hugo. |
| `imagePosition` | _Not set_ | Sets the position of the default image using `object-position` attribute. Valid values are as specified in the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). |
| `highlightCurrentMenuArea` | _Not set_ | Marks menu entries in the main menu when selected |
| `smartTOC` | _Not set_ | Activate smart Table of Contents, items in view will be highlighted. |
| `smartTOCHideUnfocusedChildren` | _Not set_ | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus. |
@@ -186,6 +186,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
| `defaultFeaturedImage` | _未設定_ | 記事全体のすべての `featured` 画像のデフォルトの背景画像です。ローカルの `featured` 画像によってオーバーライドされます。 |
| `defaultSocialImage` | _未設定_ | ソーシャルメディア共有(Open Graph と Twitter)用のデフォルト画像。ローカルの `featured` 画像によってオーバーライドされます。 |
| `hotlinkFeatureImage` | `false` | 記事のアイキャッチ画像や記事カードで外部画像をホットリンクします。これらの画像は Hugo によって処理されません。 |
| `imagePosition` | _未設定_ | `object-position` 属性を使用してデフォルト画像の位置を設定します。有効な値は [MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it) に記載されています。 |
| `highlightCurrentMenuArea` | _未設定_ | メインメニューのメニュー項目が選択されているときにマークを付けます。 |
| `smartTOC` | _未設定_ | スマート目次をアクティブにします。表示されている項目が強調表示されます。 |
| `smartTOCHideUnfocusedChildren` | _未設定_ | スマート目次がオンになっている場合、フォーカスされていないときに、テーブルのより深いレベルが非表示になります。 |
@@ -192,6 +192,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
| `defaultFeaturedImage` | _Not set_ | Default background image for all `featured` images across articles, will be overridden by a local `featured` image. |
| `defaultSocialImage` | _Not set_ | Default image for social media sharing (Open Graph and Twitter). Will be overridden by a local `feature` image. |
| `hotlinkFeatureImage` | `false` | Hotlink external images in article feature images and article cards. Those images will not be processed by Hugo. |
| `imagePosition` | _Not set_ | Sets the position of the default image using `object-position` attribute. Valid values are as specified in the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). |
| `highlightCurrentMenuArea` | _Not set_ | Marks menu entries in the main menu when selected |
| `smartTOC` | _Not set_ | Activate smart Table of Contents, items in view will be highlighted. |
| `smartTOCHideUnfocusedChildren` | _Not set_ | When smart Table of Contents is turned on, this will hide deeper levels of the table when they are not in focus. |
@@ -190,6 +190,7 @@ Blowfish 提供了大量控制主题功能的配置参数,下面的表格中
| `defaultFeaturedImage` | 无 | 设置默认背景图片,用于所有文章的`featured`图片,可以通过文章目录中的 `featured` 图片替换。 |
| `defaultSocialImage` | 无 | 社交媒体分享(Open Graph 和 Twitter)使用的默认图片,可以通过文章目录中的 `featured` 图片替换。 |
| `hotlinkFeatureImage` | `false` | 在文章特色图片和文章卡片中外链图片。这些图片不会被 Hugo 处理。 |
| `imagePosition` | 无 | 使用 `object-position` 属性设置默认图像的位置。有效值如 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it) 所示。 |
| `highlightCurrentMenuArea` | 无 | 当菜单被选择时,标记主菜单中的菜单项。 |
| `smartTOC` | 无 | 开启智能目录,视图中的项目将会被高亮显示。 |
| `smartTOCHideUnfocusedChildren` | 无 | 当开启智能目录,如果目录级别不再被聚焦时,将会隐藏更深层次的目录。 |
@@ -28,10 +28,11 @@ I valori predefiniti dei parametri del front metter vengono ereditati dalla [con
| `showAuthor` | `article.showAuthor` | Se la casella dell'autore predefinito viene visualizzata o meno nel piè di pagina dell'articolo. |
| `authors` | _Not set_ | Matrice di valori per gli autori, se impostata sovrascrive le impostazioni di "showAuthor" per la pagina o il sito. Utilizzato nella funzionalità per più autori, controlla [questa pagina]({{< ref "multi-author" >}}) per maggiori dettagli su come configurare tale funzionalità. |
| `showAuthorsBadges` | `article.showAuthorsBadges` | Se le tassonomie degli "autori" vengono visualizzate nell'articolo o nell'intestazione dell'elenco. Ciò richiede l'impostazione di "autori multipli" e la tassonomia degli "autori". Controlla [questa pagina]({{< ref "multi-author" >}}) per maggiori dettagli su come configurare questa funzione. |
| `featureimage` | _Not set_ | URL esterno per l'immagine in primo piano
| `featureimagecaption` | _Not set_ | Didascalia per l'immagine in primo piano. Visualizzato solo in heroStyle "big".
| `featureimage` | _Not set_ | Link per l'immagine in primo piano |
| `featureimagecaption` | _Not set_ | Didascalia per l'immagine in primo piano. Visualizzato solo in heroStyle "big". |
| `showHero` | `article.showHero` | Se l'immagine in miniatura verrà mostrata come immagine hero all'interno della pagina dell'articolo. |
| `heroStyle` | `article.heroStyle` | Stile per visualizzare l'immagine hero, le opzioni valide sono: `basic`, `big`, ` background`, `thumbAndBackground`. |
| `heroStyle` | `article.heroStyle` | Stile per visualizzare l'immagine hero, le opzioni valide sono: `basic`, `big`, `background`, `thumbAndBackground`. |
| `imagePosition` | _Not set_ | Imposta la posizione dell'immagine in evidenza utilizzando l'attributo `object-position`. I valori validi sono specificati nella [documentazione MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Se i breadcrumb vengono visualizzati nell'articolo o nell'intestazione dell'elenco. |
| `showDate` | `article.showDate` | Se viene visualizzata o meno la data dell'articolo. La data viene impostata utilizzando il parametro "data". |
| `showDateUpdated` | `article.showDateUpdated` | Se viene visualizzata o meno la data di aggiornamento dell'articolo. La data viene impostata utilizzando il parametro "lastmod". |
@@ -29,10 +29,11 @@ series_order: 7
| `showAuthorBottom` | `article.showAuthorBottom` | 著者ボックスは、各ページの上部ではなく下部に表示されます。 |
| `authors` | _未設定_ | 著者の値の配列。設定されている場合、ページまたはサイトの `showAuthor` 設定を上書きします。複数人の著者機能で使用されます。この機能の設定方法の詳細については、[このページ]({{< ref "multi-author" >}})をご覧ください。 |
| `showAuthorsBadges` | `article.showAuthorsBadges` | 記事またはリストヘッダーに `authors` タクソノミーを表示するかどうか。これには、`複数人の著者``authors` タクソノミーの設定が必要です。この機能の設定方法の詳細については、[このページ]({{< ref "multi-author" >}})をご覧ください。 |
| `featureimage` | _未設定_ | フィーチャー画像の外部 URL。 |
| `featureimage` | _未設定_ | フィーチャー画像の外部リンク。 |
| `featureimagecaption` | _未設定_ | フィーチャー画像のキャプション。heroStyle `big` でのみ表示されます。 |
| `showHero` | `article.showHero` | 記事ページ内でサムネイル画像をヒーロー画像として表示するかどうか。 |
| `heroStyle` | `article.heroStyle` | ヒーロー画像の表示スタイル。有効なオプションは、`basic``big``background``thumbAndBackground` です。 |
| `imagePosition` | _未設定_ | `object-position` 属性を使用してフィーチャー画像の位置を設定します。有効な値は [MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it) に記載されています。 |
| `showBreadcrumbs` | `article.showBreadcrumbs` <br/>または `list.showBreadcrumbs` | 記事またはリストヘッダーにパンくずリストを表示するかどうか。 |
| `showDate` | `article.showDate` | 記事の日付を表示するかどうか。日付は `date` パラメータを使用して設定されます。 |
| `showDateUpdated` | `article.showDateUpdated` | 記事が更新された日付を表示するかどうか。日付は `lastmod` パラメータを使用して設定されます。 |
@@ -29,10 +29,11 @@ Front matter parameter default values are inherited from the theme's [base confi
| `showAuthorBottom` | `article.showAuthorBottom` | Author boxes are displayed at the bottom of each page instead of the top. |
| `authors` | _Not set_ | Array of values for authors, if set it overrides `showAuthor` settings for page or site. Used on the multiple authors feature, check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `showAuthorsBadges` | `article.showAuthorsBadges` | Whether the `authors` taxonomies are are displayed in the article or list header. This requires the setup of `multiple authors` and the `authors` taxonomy. Check [this page]({{< ref "multi-author" >}}) for more details on how to configure that feature. |
| `featureimage` | _Not set_ | External URL for feature image |
| `featureimage` | _Not set_ | Link for feature image |
| `featureimagecaption` | _Not set_ | Caption for feature image. Only displayed in heroStyle `big` |
| `showHero` | `article.showHero` | Whether the thumbnail image will be shown as a hero image within the article page. |
| `heroStyle` | `article.heroStyle` | Style to display the hero image, valid options are: `basic`, `big`, `background`, `thumbAndBackground`. |
| `imagePosition` | _Not set_ | Sets the position of the feature image using `object-position` attribute. Valid values are as specified in the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it). |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | Whether the breadcrumbs are displayed in the article or list header. |
| `showDate` | `article.showDate` | Whether or not the article date is displayed. The date is set using the `date` parameter. |
| `showDateUpdated` | `article.showDateUpdated` | Whether or not the date the article was updated is displayed. The date is set using the `lastmod` parameter. |
@@ -29,10 +29,11 @@ front matter 参数中的默认值是从[基础配置]({{< ref "configuration" >
| `showAuthorBottom` | `article.showAuthorBottom` | 作者框显示在每页的底部而不是顶部。 |
| `authors` | 无 | 用于展示多创作者的数组,如果设置了将会覆盖 `showAuthor` 设置。这里使用了多作者的特性,查看[这个页面]({{< ref "multi-author" >}})来获取更多信息。 |
| `showAuthorsBadges` | `article.showAuthorsBadges` | 是否在文章和列表页展示`authors`作者分类。想是它生效需要开启`multiple authors`多创作者和 `authors` 作者分类。 查看[这个页面]({{< ref "multi-author" >}})来获取更多信息。 |
| `featureimage` | 无 | 基于外部 URL 的特征图片链接。 |
| `featureimage` | 无 | 基于连结的特征图片链接。 |
| `featureimagecaption` | 无 | 特征图片的说明,仅在 hero 样式的 `big` 风格下展示。 |
| `showHero` | `article.showHero` | 是否在文章页面将所裸土作为文章页面内的 hero 图片显示。 |
| `heroStyle` | `article.heroStyle` | hero 图片的风格,合法的值有: `basic``big``background``thumbAndBackground`。 |
| `imagePosition` | 无 | 使用 `object-position` 属性设置特色图片的位置。有效值如 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position#try_it) 所示。 |
| `showBreadcrumbs` | `article.showBreadcrumbs` or `list.showBreadcrumbs` | 是否在文章或列表页面显示面包屑导航。 |
| `showDate` | `article.showDate` | 是否显示文章的日期。具体日期使用 `date` 参数设置。 |
| `showDateUpdated` | `article.showDateUpdated` | 是否显示文章的更新日期。具体日期使用 `lastmod` 参数设置。 |
@@ -14,7 +14,7 @@
{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
{{ $cardClasses := "flex flex-col md:flex-row relative" }}
{{ $figureClasses := "" }}
{{ $imgWrapperClasses := "" }}
{{ $cardContentClasses := "" }}
{{ if site.Params.list.showCards }}
@@ -23,7 +23,7 @@
{{ $cardContentClasses = printf "%s p-4 pt-2" $cardContentClasses }}
{{ else }}
{{ $cardClasses = printf "%s" $cardClasses }}
{{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
{{ $imgWrapperClasses = printf "%s thumbnail-shadow md:mr-7" $imgWrapperClasses }}
{{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
{{ end }}
@@ -82,14 +82,14 @@
<article class="{{ $cardClasses }}">
{{ with $featuredURL }}
<figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
<div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
<img
src="{{ . }}"
alt="{{ with $target.Params.featuredImageAlt }}{{ . }}{{ else }}{{ $target.Title | emojify }}{{ end }}"
loading="lazy"
decoding="async"
class="not-prose absolute inset-0 w-full h-full object-cover">
</figure>
</div>
{{ end }}
<div class="{{ $cardContentClasses }}">
<header class="items-center text-start text-xl font-semibold">
@@ -53,7 +53,7 @@
<article
class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
{{ with $featuredURL }}
<figure class="not-prose flex-none relative overflow-hidden thumbnail--related">
<div class="flex-none relative overflow-hidden thumbnail_card_related">
<img
src="{{ . }}"
alt="{{ $page.Title }}"
@@ -61,7 +61,7 @@
decoding="async"
fetchpriority="low"
class="not-prose absolute inset-0 w-full h-full object-cover">
</figure>
</div>
{{ end }}
{{ if and .Draft .Site.Params.article.showDraftLabel }}
<span class="absolute top-0 right-0 m-2">
+2 -2
View File
@@ -57,14 +57,14 @@
<article
class="relative min-h-full min-w-full overflow-hidden rounded border border-2 border-neutral-200 shadow-2xl dark:border-neutral-700">
{{ with $featuredURL }}
<figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
<div class="flex-none relative overflow-hidden thumbnail_card">
<img
src="{{ . }}"
alt="{{ $page.Title | plainify }}"
loading="lazy"
decoding="async"
class="not-prose absolute inset-0 w-full h-full object-cover">
</figure>
</div>
{{ end }}
{{ if and .Draft .Site.Params.article.showDraftLabel }}
<span class="absolute top-0 right-0 m-2">
+5 -5
View File
@@ -7,16 +7,16 @@
{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
{{ $cardClasses := "flex flex-col md:flex-row relative" }}
{{ $figureClasses := "" }}
{{ $imgWrapperClasses := "" }}
{{ $cardContentClasses := "" }}
{{ if site.Params.list.showCards }}
{{ $cardClasses = printf "%s overflow-hidden rounded-md border-2 border-neutral-200 dark:border-neutral-700" $cardClasses }}
{{ $figureClasses = "" }}
{{ $imgWrapperClasses = "" }}
{{ $cardContentClasses = printf "%s p-4" $cardContentClasses }}
{{ else }}
{{ $cardClasses = $cardClasses }}
{{ $figureClasses = printf "%s thumbnail-shadow md:mr-7" $figureClasses }}
{{ $imgWrapperClasses = printf "%s thumbnail-shadow md:mr-7" $imgWrapperClasses }}
{{ $cardContentClasses = printf "%s mt-3 md:mt-0" $cardContentClasses }}
{{ end }}
@@ -75,14 +75,14 @@
<article class="{{ $cardClasses }}">
{{ with $featuredURL }}
<figure class="not-prose flex-none relative overflow-hidden {{ $figureClasses }} thumbnail--simple">
<div class="flex-none relative overflow-hidden {{ $imgWrapperClasses }} thumbnail">
<img
src="{{ . }}"
alt="{{ $.Params.featuredImageAlt | default ($.Title | emojify) }}"
loading="lazy"
decoding="async"
class="not-prose absolute inset-0 w-full h-full object-cover">
</figure>
</div>
{{ end }}
<div class="{{ $cardContentClasses }}">
<header class="items-center text-start text-xl font-semibold">
+10 -1
View File
@@ -1,5 +1,6 @@
{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
{{ $useDefault := false }}
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ with .Params.featureimage }}
@@ -25,8 +26,10 @@
{{ $default := site.Store.Get "defaultBackgroundImage" }}
{{ if $default.url }}
{{ $featuredURL = $default.url }}
{{ $useDefault = true }}
{{ else if $default.obj }}
{{ $featured = $default.obj }}
{{ $useDefault = true }}
{{ end }}
{{ end }}
@@ -58,6 +61,11 @@
<div id="hero" class="h-[150px] md:h-[200px]"></div>
{{ end }}
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<img
id="background-image"
src="{{ . }}"
@@ -65,7 +73,8 @@
loading="eager"
decoding="async"
fetchpriority="high"
class="absolute inset-0 w-full h-full object-cover">
class="absolute inset-0 w-full h-full object-cover"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
<div
+10 -1
View File
@@ -1,5 +1,6 @@
{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
{{ $useDefault := false }}
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ with .Params.featureimage }}
@@ -25,8 +26,10 @@
{{ $default := site.Store.Get "defaultBackgroundImage" }}
{{ if $default.url }}
{{ $featuredURL = $default.url }}
{{ $useDefault = true }}
{{ else if $default.obj }}
{{ $featured = $default.obj }}
{{ $useDefault = true }}
{{ end }}
{{ end }}
@@ -42,6 +45,11 @@
{{ end }}
{{ with $featuredURL }}
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<div class="overflow-hidden h-36 md:h-56 lg:h-72">
<img
src="{{ . }}"
@@ -49,6 +57,7 @@
loading="eager"
decoding="async"
fetchpriority="high"
class="w-full h-full nozoom object-cover">
class="w-full h-full nozoom object-cover"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
</div>
{{ end }}
+10 -1
View File
@@ -1,5 +1,6 @@
{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
{{ $useDefault := false }}
{{ $featured := "" }}
{{ $featuredURL := "" }}
{{ with .Params.featureimage }}
@@ -25,8 +26,10 @@
{{ $default := site.Store.Get "defaultBackgroundImage" }}
{{ if $default.url }}
{{ $featuredURL = $default.url }}
{{ $useDefault = true }}
{{ else if $default.obj }}
{{ $featured = $default.obj }}
{{ $useDefault = true }}
{{ end }}
{{ end }}
@@ -50,6 +53,11 @@
{{- with .Page.Params.alt }}{{ $alt = . }}{{ end -}}
{{ with $featuredURL }}
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<figure>
<img
src="{{ . }}"
@@ -57,7 +65,8 @@
loading="eager"
decoding="async"
fetchpriority="high"
class="w-full rounded-lg single_hero_round nozoom">
class="w-full rounded-lg single_hero_round nozoom"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
{{ if $caption }}
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center">
{{ $caption | markdownify }}
+12 -2
View File
@@ -1,6 +1,7 @@
{{ $disableImageOptimization := site.Store.Get "disableImageOptimization" }}
{{/* === Background === */}}
{{ $useDefault := false }}
{{ $images := .Resources.ByType "image" }}
{{ $background := $images.GetMatch "*background*" }}
{{ $backgroundURL := "" }}
@@ -9,8 +10,10 @@
{{ $default := site.Store.Get "defaultBackgroundImage" }}
{{ if $default.url }}
{{ $backgroundURL = $default.url }}
{{ $useDefault = true }}
{{ else if $default.obj }}
{{ $background = $default.obj }}
{{ $useDefault = true }}
{{ end }}
{{ end }}
@@ -88,13 +91,19 @@
loading="eager"
decoding="async"
fetchpriority="high"
class="w-full h-full nozoom object-cover">
class="w-full h-full nozoom object-cover"
{{ with $.Params.imagePositionFeature }}style="object-position: {{ . }};"{{ end }}>
</div>
{{ end }}
<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
{{ with $backgroundURL }}
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<img
id="background-image-main"
src="{{ . }}"
@@ -103,7 +112,8 @@
loading="eager"
decoding="async"
fetchpriority="high"
class="absolute inset-0 h-full w-full object-cover">
class="absolute inset-0 h-full w-full object-cover"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
{{ end }}
<div
class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
+10 -1
View File
@@ -5,6 +5,7 @@
<div class="mx-auto max-w-7xl p-0">
<div class="relative sm:overflow-hidden">
<div class="fixed inset-x-0 top-0 -z-10">
{{ $useDefault := true }}
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -16,16 +17,24 @@
{{ with .Site.Params.homepage.homepageImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
{{ $homepageImage = resources.GetRemote . }}
{{ $useDefault = false }}
{{ else }}
{{ $homepageImage = resources.Get . }}
{{ $useDefault = false }}
{{ end }}
{{ end }}
{{ if $homepageImage }}
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<img
id="background-image"
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
src="{{ $homepageImage.RelPermalink }}"
role="presentation">
role="presentation"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
<div
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
<div
+10 -1
View File
@@ -14,6 +14,7 @@
</div>
<div class="mt-6 sm:mt-16 lg:mt-0 mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div class="-me-48 md:-me-16 lg:relative lg:m-0 lg:h-full lg:px-0 w-full">
{{ $useDefault := true }}
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -25,14 +26,22 @@
{{ with .Site.Params.homepage.homepageImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
{{ $homepageImage = resources.GetRemote . }}
{{ $useDefault = false }}
{{ else }}
{{ $homepageImage = resources.Get . }}
{{ $useDefault = false }}
{{ end }}
{{ end }}
{{ if $homepageImage }}
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<img
class="w-full rounded-xl shadow-xl lg:absolute lg:h-full lg:w-auto lg:max-w-none"
src="{{ $homepageImage.RelPermalink }}">
src="{{ $homepageImage.RelPermalink }}"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
{{ end }}
</div>
</div>
+12 -1
View File
@@ -6,6 +6,7 @@
<div class="mx-auto max-w-7xl p-0">
<div class="relative shadow-xl sm:overflow-hidden rounded-2xl">
<div class="absolute inset-0">
{{ $useDefault := true }}
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -17,12 +18,22 @@
{{ with .Site.Params.homepage.homepageImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
{{ $homepageImage = resources.GetRemote . }}
{{ $useDefault = false }}
{{ else }}
{{ $homepageImage = resources.Get . }}
{{ $useDefault = false }}
{{ end }}
{{ end }}
{{ if $homepageImage }}
<img class="h-full w-full object-cover nozoom mt-0 mr-0 mb-0 ml-0" src="{{ $homepageImage.RelPermalink }}">
{{ $style := "" }}
{{ $defaultPosition := cond $useDefault site.Params.imagePosition false }}
{{ with $.Params.imagePosition | default $defaultPosition }}
{{ $style = printf "object-position: %s;" . }}
{{ end }}
<img
class="h-full w-full object-cover nozoom mt-0 mr-0 mb-0 ml-0"
src="{{ $homepageImage.RelPermalink }}"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
{{ if not $disableHeroImageFilter }}
<div
class="absolute inset-0 bg-gradient-to-r from-primary-500 to-secondary-600 dark:from-primary-600 dark:to-secondary-800 mix-blend-multiply"></div>
+1 -1
View File
@@ -28,7 +28,7 @@
<div class="min-w-full">
<div class="border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative">
{{ with $featuredURL }}
<figure class="not-prose flex-none relative overflow-hidden thumbnail--card">
<figure class="not-prose flex-none relative overflow-hidden thumbnail_card">
<img
src="{{ . }}"
alt="{{ $.Page.Title }}"