ghostcms/solo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix logo and hero image srcset

Browse Source
This commit is contained in:
Cathy Sarisky 2024-03-23 22:41:04 -04:00
parent 97ea3228e5
commit 0d5c2e0c1d
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
default.hbs
View File

@ -45,7 +45,11 @@
<div class="gh-head-brand-wrapper"> <div class="gh-head-brand-wrapper">
<a class="gh-head-logo" href="{{@site.url}}"> <a class="gh-head-logo" href="{{@site.url}}">
{{#if @site.logo}} {{#if @site.logo}}
<img src="{{@site.logo}}" alt="{{@site.title}}"> <img srcset="{{img_url @site.logo size="s"}} 300w,
{{img_url @site.logo size="m"}} 600w"
sizes="(max-width: 600px) 50vw, 40vw"
src="{{img_url @site.logo size="s"}}" alt="{{@site.title}}"
>
{{else}} {{else}}
{{@site.title}} {{@site.title}}
{{/if}} {{/if}}

24
index.hbs
View File

@ -3,9 +3,27 @@
<section class="gh-about gh-outer{{#match @custom.header_section_layout "!=" "Typographic profile"}}{{#unless @site.cover_image}} no-image{{/unless}}{{else}}{{#unless @site.icon}} no-image{{/unless}}{{/match}}"> <section class="gh-about gh-outer{{#match @custom.header_section_layout "!=" "Typographic profile"}}{{#unless @site.cover_image}} no-image{{/unless}}{{else}}{{#unless @site.icon}} no-image{{/unless}}{{/match}}">
<div class="gh-about-inner gh-inner"> <div class="gh-about-inner gh-inner">
{{#match @custom.header_section_layout "!=" "Typographic profile"}} {{#match @custom.header_section_layout "!=" "Typographic profile"}}
{{#if @site.cover_image}} {{#match @custom.header_section_layout "=" "Large background"}}
<img class="gh-about-image" src="{{@site.cover_image}}" alt="{{@site.title}}"> {{#if @site.cover_image}}
{{/if}} <img class="gh-about-image"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 720w,
{{img_url @site.cover_image size="l"}} 960w,
{{img_url @site.cover_image size="xl"}} 1200w,
{{img_url @site.cover_image size="xxl"}} 2000w"
sizes="100vw"
src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{else}}
{{#if @site.cover_image}}
<img class="gh-about-image"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 720w,
{{img_url @site.cover_image size="l"}} 960w"
sizes="(max-width: 840px) 100vw, 50vw"
src="{{@site.cover_image}}" alt="{{@site.title}}">
{{/if}}
{{/match}}
{{else}} {{else}}
{{#if @site.icon}} {{#if @site.icon}}
<img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}"> <img class="gh-about-image" src="{{@site.icon}}" alt="{{@site.title}}">