Cloonar/dialog-relations-website
2
0
Fork 0
Code Pull Requests Actions Activity

feat: add url to site config, add webp support, change image sizing

Browse Source
This commit is contained in:
Dominik Polakovics Polakovics
2024-12-15 01:27:03 +01:00
parent a967366a9b
commit af66646775
7 changed files with 64 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css
View File

@@ -8,7 +8,7 @@
}
.frame-type-cloonar_hero + .frame {
margin-top: -10rem;
margin-top: -10.4rem;
}
.frame-type-cloonar_hero .container {
padding-bottom: 3rem;
@@ -81,6 +81,7 @@
.frame-type-cloonar_hero .hero-image-wrapper {
margin-top: 1rem;
align-self: flex-end;
width: 100%;
}
.frame-type-cloonar_hero .hero-image {

14
packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html
View File

@@ -21,11 +21,23 @@
<f:if condition="{data.image}">
<f:then>
<picture>
<!-- WEBP source -->
<source
type="image/webp"
srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
{f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
sizes="(max-width: 320px) 80vw,
(max-width: 768px) 80px,
430px" />
<!-- Fallback source -->
<source
srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
{f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 430w"
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
sizes="(max-width: 320px) 80vw,
(max-width: 768px) 80vw,
430px" />

14
packages/base/ContentBlocks/ContentElements/textimage/assets/frontend.css
View File

@@ -46,11 +46,9 @@
/* Size classes apply at all viewports */
.textimage-image-wrapper.size-25 .textimage-picture {
max-width: 300px;
}
.textimage-image-wrapper.size-50 .textimage-picture {
max-width: 600px;
}
/* On larger screens, arrange horizontally for image position settings */
@@ -63,7 +61,15 @@
flex-direction: row-reverse;
}
.textimage-wrapper {
.textimage-image-wrapper.size-25 {
flex: 0 0 25%;
}
.textimage-image-wrapper.size-50 {
flex: 0 0 50%;
}
.textimage-wrapper {
flex: 1;
}
}
}

4
packages/base/ContentBlocks/ContentElements/textimage/config.yaml
View File

@@ -14,7 +14,7 @@ fields:
- identifier: image
type: File
properties:
allowed: [jpg, jpeg, png, gif]
allowed: [jpg, jpeg, png, gif, webp]
useExistingField: true
- identifier: imageorient
useExistingField: true
@@ -26,4 +26,4 @@ fields:
- label: 25%
value: 1
- label: 50%
value: 2
value: 2

13
packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html
View File

@@ -18,6 +18,18 @@
<f:if condition="{data.image}">
<f:then>
<picture class="textimage-picture">
<!-- WEBP source -->
<source
type="image/webp"
srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
{f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
{f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
sizes="(max-width: 320px) 90vw,
(max-width: 768px) 600px,
600px" />
<!-- Fallback source -->
<source
srcset="
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
@@ -26,6 +38,7 @@
sizes="(max-width: 320px) 90vw,
(max-width: 768px) 600px,
600px" />
<f:image
image="{data.image.0}"
treatIdAsReference="1"