Slave/improve sf images loading #1
+3
-1
@@ -21,7 +21,9 @@ async function bootstrap() {
|
||||
const { port, corsOrigins, nodeEnv } = configService.get('app') as Config['app'];
|
||||
|
||||
app.useStaticAssets(getPublicUploadsDir(), {
|
||||
prefix: publicUploadsUrlPrefix
|
||||
prefix: publicUploadsUrlPrefix,
|
||||
maxAge: '1y',
|
||||
immutable: true
|
||||
});
|
||||
|
||||
const storefrontPublicDir = path.join(__dirname, 'modules', 'storefrontCore', 'public');
|
||||
|
||||
@@ -172,7 +172,6 @@ body.sf-body {
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -866,10 +865,14 @@ a:hover {
|
||||
|
||||
.sf-product-card__media-link {
|
||||
display: block;
|
||||
aspect-ratio: 1;
|
||||
background: var(--sf-surface-muted);
|
||||
border-radius: var(--sf-radius-sm);
|
||||
}
|
||||
|
||||
.sf-product-card__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
border-radius: var(--sf-radius-sm);
|
||||
@@ -961,6 +964,7 @@ a:hover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
background: var(--sf-surface-muted);
|
||||
}
|
||||
|
||||
.sf-variant-link--sm {
|
||||
@@ -1054,6 +1058,7 @@ a:hover {
|
||||
object-fit: cover;
|
||||
border-radius: var(--sf-radius);
|
||||
border: 1px solid var(--sf-border);
|
||||
background: var(--sf-surface-muted);
|
||||
}
|
||||
|
||||
.sf-product-gallery__thumbs {
|
||||
@@ -1069,6 +1074,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.sf-prose img {
|
||||
height: auto;
|
||||
border-radius: var(--sf-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
@@ -27,6 +27,7 @@ const STOREFRONT_PARTIALS = [
|
||||
{ name: 'shop-head', file: 'shop-head.hbs' },
|
||||
{ name: 'shop-favicon', file: 'shop-favicon.hbs' },
|
||||
{ name: 'shop-footer', file: 'shop-footer.hbs' },
|
||||
{ name: 'storefront-image', file: 'storefront-image.hbs' },
|
||||
{ name: 'theme-switcher', file: 'theme-switcher.hbs' },
|
||||
{ name: 'page-back-link', file: 'page-back-link.hbs' },
|
||||
{ name: 'product-card', file: 'product-card.hbs' },
|
||||
|
||||
@@ -3,7 +3,13 @@
|
||||
<div class='sf-thumb'>
|
||||
<a href='/shop/products/{{productId}}/variants/{{id}}'>
|
||||
{{#if thumbnailUrl}}
|
||||
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{title}}' />
|
||||
{{> storefront-image
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
{{else}}
|
||||
<span class='sf-thumb__placeholder'>no image</span>
|
||||
{{/if}}
|
||||
|
||||
@@ -4,14 +4,26 @@
|
||||
{{#if linkHref}}
|
||||
<a href='{{linkHref}}'>
|
||||
{{#if thumbnailUrl}}
|
||||
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
|
||||
{{> storefront-image
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
{{else}}
|
||||
<span class='sf-thumb__placeholder'>no image</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{#if thumbnailUrl}}
|
||||
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
|
||||
{{> storefront-image
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
{{else}}
|
||||
<span class='sf-thumb__placeholder'>no image</span>
|
||||
{{/if}}
|
||||
|
||||
@@ -4,14 +4,26 @@
|
||||
{{#if linkHref}}
|
||||
<a href='{{linkHref}}'>
|
||||
{{#if thumbnailUrl}}
|
||||
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
|
||||
{{> storefront-image
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
{{else}}
|
||||
<span class='sf-thumb__placeholder'>no image</span>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{#if thumbnailUrl}}
|
||||
<img src='{{thumbnailUrl}}' alt='{{productTitle}} — {{variantTitle}}' />
|
||||
{{> storefront-image
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
{{else}}
|
||||
<span class='sf-thumb__placeholder'>no image</span>
|
||||
{{/if}}
|
||||
|
||||
@@ -2,11 +2,14 @@
|
||||
{{#with selectedVariant}}
|
||||
{{#if thumbnailUrl}}
|
||||
<a class='sf-product-card__media-link' href='{{detailHref}}'>
|
||||
<img
|
||||
{{> storefront-image
|
||||
class='sf-product-card__image'
|
||||
src='{{thumbnailUrl}}'
|
||||
alt='{{productTitle}} - {{title}}'
|
||||
/>
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{/with}}
|
||||
|
||||
@@ -3,7 +3,13 @@
|
||||
<div class='sf-header__brand-group'>
|
||||
{{#if logoUrl}}
|
||||
<a class='sf-logo-link' href='/'>
|
||||
<img class='sf-logo' src='{{logoUrl}}' alt='{{shopName}}' />
|
||||
{{> storefront-image
|
||||
class='sf-logo'
|
||||
src=logoUrl
|
||||
alt=shopName
|
||||
width='200'
|
||||
height='50'
|
||||
}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a class='sf-logo-link' href='/'>{{shopName}}</a>
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<img
|
||||
class='{{class}}'
|
||||
src='{{src}}'
|
||||
alt='{{alt}}'
|
||||
width='{{width}}'
|
||||
height='{{height}}'
|
||||
decoding='async'
|
||||
{{#if loading}}loading='{{loading}}'{{/if}}
|
||||
{{#if fetchPriority}}fetchpriority='{{fetchPriority}}'{{/if}}
|
||||
/>
|
||||
@@ -1,10 +1,13 @@
|
||||
{{#if selectedImageUrl}}
|
||||
<div class='sf-product-gallery'>
|
||||
<img
|
||||
{{> storefront-image
|
||||
class='sf-product-gallery__main'
|
||||
src='{{selectedImageUrl}}'
|
||||
alt='{{productTitle}}'
|
||||
/>
|
||||
src=selectedImageUrl
|
||||
alt=productTitle
|
||||
width='1'
|
||||
height='1'
|
||||
fetchPriority='high'
|
||||
}}
|
||||
|
||||
{{#if galleryImages}}
|
||||
{{#if (gt galleryImages.length 1)}}
|
||||
@@ -15,7 +18,13 @@
|
||||
class='sf-variant-link sf-variant-link--sm{{#if isSelected}} sf-variant-link--selected{{/if}}'
|
||||
{{#if isSelected}}aria-current='page'{{/if}}
|
||||
>
|
||||
<img src='{{url}}' alt='' />
|
||||
{{> storefront-image
|
||||
src=url
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,13 @@
|
||||
{{#if size}}style='width:{{size}}px;height:{{size}}px;aspect-ratio:auto;'{{/if}}
|
||||
>
|
||||
{{#if thumbnailUrl}}
|
||||
<img src='{{thumbnailUrl}}' alt='{{#if title}}{{title}}{{else}}Variant{{/if}}' />
|
||||
{{> storefront-image
|
||||
src=thumbnailUrl
|
||||
alt=''
|
||||
width='1'
|
||||
height='1'
|
||||
loading='lazy'
|
||||
}}
|
||||
{{else}}
|
||||
<span class='sf-thumb__placeholder'>no image</span>
|
||||
{{/if}}
|
||||
|
||||
Reference in New Issue
Block a user