-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
101 additions
and
96 deletions.
There are no files selected for viewing
89 changes: 46 additions & 43 deletions
89
templates/_site/_snippet/_content/_blocks/_callToAction.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,53 @@ | ||
| {% if block.blockTitle|length or block.text|length %} | ||
| <div class="w-full mx-auto overflow-hidden bg-white rounded-lg md:shadow-card"> | ||
| <div class="flex flex-wrap -mx-4"> | ||
| {% if block.image and block.image.collect()|length %} | ||
| {% set image = block.image.collect().first() ? block.image.collect().first() : fallback.image.one() %} | ||
| {% set optimizedImage = image.optimizedTextImage %} | ||
| {% if optimizedImage|length %} | ||
| <div class="w-full px-4 bg-center bg-cover md:w-1/2 js-bg-target aspect-video md:aspect-auto" | ||
| {% if optimizedImage.colorPalette %}style="background-color: {{ optimizedImage.colorPalette[0] }}; background-position: {% for focalPoint in image.getFocalPoint() %} {{ focalPoint * 100 }}% {% endfor %};"{% endif %}> | ||
| <picture> | ||
| {% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' and image.extension != 'webp' %} | ||
| <source srcset="{{ optimizedImage.srcsetWebP() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| type="image/webp"/> | ||
| {% endif %} | ||
| <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}" | ||
| srcset="{{ optimizedImage.srcset() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| alt="{{ image.alt }}" | ||
| class="sr-only js-bg-src" loading="lazy"/> | ||
| </picture> | ||
| </div> | ||
| {% endif %} | ||
| {% endif %} | ||
| <div class="w-full {% if block.image|length %}md:w-1/2{% else %}text-center{% endif %} px-4"> | ||
| <div class="p-6"> | ||
| {% if block.blockTitle|length %} | ||
| <h2 id="{{ block.blockTitle|slugify }}">{{ block.blockTitle }}</h2> | ||
| {% endif %} | ||
|
|
||
| {% if block.text|length %} | ||
| <div class="text-editor w-full {% if not block.image|length %}md:w-2/3 mx-auto{% endif %}"> | ||
| {{ block.text }} | ||
| {% apply enkode_emails %} | ||
| {% if block.blockTitle|length or block.text|length %} | ||
| <div class="w-full mx-auto overflow-hidden bg-white rounded-lg md:shadow-card"> | ||
| <div class="flex flex-wrap -mx-4"> | ||
| {% if block.image and block.image.collect()|length %} | ||
| {% set image = block.image.collect().first() ? block.image.collect().first() : fallback.image.one() %} | ||
| {% set optimizedImage = image.optimizedTextImage %} | ||
| {% if optimizedImage|length %} | ||
| <div class="w-full px-4 bg-center bg-cover md:w-1/2 js-bg-target aspect-video md:aspect-auto" | ||
| {% if optimizedImage.colorPalette %}style="background-color: {{ optimizedImage.colorPalette[0] }}; background-position: {% for focalPoint in image.getFocalPoint() %} {{ focalPoint * 100 }}% {% endfor %};"{% endif %}> | ||
| <picture> | ||
| {% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' and image.extension != 'webp' %} | ||
| <source srcset="{{ optimizedImage.srcsetWebP() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| type="image/webp"/> | ||
| {% endif %} | ||
| <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}" | ||
| srcset="{{ optimizedImage.srcset() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| alt="{{ image.alt }}" | ||
| class="sr-only js-bg-src" loading="lazy"/> | ||
| </picture> | ||
| </div> | ||
| {% endif %} | ||
| {% endif %} | ||
| <div class="w-full {% if block.image|length %}md:w-1/2{% else %}text-center{% endif %} px-4"> | ||
| <div class="p-6"> | ||
| {% if block.blockTitle|length %} | ||
| <h2 id="{{ block.blockTitle|slugify }}">{{ block.blockTitle }}</h2> | ||
| {% endif %} | ||
|
|
||
| {% if not block.cta.isEmpty() %} | ||
| <div class="mt-6"> | ||
| {{ render_hyper_links(block.cta) | raw }} | ||
| </div> | ||
| {% endif %} | ||
| {% if block.text|length %} | ||
| <div class="text-editor w-full {% if not block.image|length %}md:w-2/3 mx-auto{% endif %}"> | ||
| {{ block.text }} | ||
| </div> | ||
| {% endif %} | ||
|
|
||
| {% if not block.cta.isEmpty() %} | ||
| <div class="mt-6"> | ||
| {{ render_hyper_links(block.cta) | raw }} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% else %} | ||
| <div class="flex justify-center"> | ||
| {{ render_hyper_links(block.cta) | raw }} | ||
| </div> | ||
| {% endif %} | ||
| {% else %} | ||
| <div class="flex justify-center"> | ||
| {{ render_hyper_links(block.cta) | raw }} | ||
| </div> | ||
| {% endif %} | ||
| {% endapply %} |
108 changes: 55 additions & 53 deletions
108
templates/_site/_snippet/_content/_blocks/_textImage.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,57 @@ | ||
| {% set inverseClass = block.position == 'right' and block.image|length ? 'flex-row-reverse' : '' %} | ||
|
|
||
| <div class="flex flex-wrap -mx-4 {{ inverseClass }}"> | ||
| {% if block.image.eagerly().one() %} | ||
| <div class="w-full px-4 md:w-1/2"> | ||
| {% set image = block.image.collect().first() %} | ||
| {% set optimizedImage = image.optimizedTextImage %} | ||
| <picture> | ||
| {% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' %} | ||
| <source srcset="{{ optimizedImage.srcsetWebP() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| type="image/webp"/> | ||
| {% endif %} | ||
| {% if image.extension == 'svg' or image.extension == 'gif' %} | ||
| <img src="{{ image.getUrl() }}" | ||
| width="{{image.width}}" height="{{image.height}}" | ||
| alt="{{ image.alt }}" | ||
| class="w-full" loading="lazy"/> | ||
| {% else %} | ||
| <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}" | ||
| srcset="{{ optimizedImage.srcset() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}" | ||
| alt="{{ image.alt }}" | ||
| class="w-full" loading="lazy"/> | ||
| {% endif %} | ||
| </picture> | ||
| {% if image.imageCopyright|length or image.imageCaption|length %} | ||
| <div class="mt-1 text-sm italic opacity-50"> | ||
| {% if image.imageCaption|length %} | ||
| {{ image.imageCaption }} | ||
| {% endif %} | ||
| {% if image.imageCopyright|length %} | ||
| © {{ image.imageCopyright }} | ||
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
| <div class="w-full px-4 {% if block.image|length %}mt-8 md:mt-0 md:w-1/2{% else %}lg:w-3/4{% endif %}"> | ||
| {% if block.blockTitle|length %} | ||
| <h2 id="{{ block.blockTitle|slugify }}">{{ block.blockTitle }}</h2> | ||
| {% endif %} | ||
| {% if block.text|length %} | ||
| <div class="text-editor"> | ||
| {{ block.text }} | ||
| </div> | ||
| {% endif %} | ||
| {% if block.cta|length %} | ||
| <div class="flex flex-wrap items-baseline gap-4 mt-6"> | ||
| {{ render_hyper_links(block.cta) | raw }} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| {% apply enkode_emails %} | ||
| <div class="flex flex-wrap -mx-4 {{ inverseClass }}"> | ||
| {% if block.image.eagerly().one() %} | ||
| <div class="w-full px-4 md:w-1/2"> | ||
| {% set image = block.image.collect().first() %} | ||
| {% set optimizedImage = image.optimizedTextImage %} | ||
| <picture> | ||
| {% if craft.imageOptimize.serverSupportsWebP() and image.extension != 'svg' and image.extension != 'gif' %} | ||
| <source srcset="{{ optimizedImage.srcsetWebP() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| type="image/webp"/> | ||
| {% endif %} | ||
| {% if image.extension == 'svg' or image.extension == 'gif' %} | ||
| <img src="{{ image.getUrl() }}" | ||
| width="{{image.width}}" height="{{image.height}}" | ||
| alt="{{ image.alt }}" | ||
| class="w-full" loading="lazy"/> | ||
| {% else %} | ||
| <img src="{{ optimizedImage.optimizedImageUrls|length == 0 ? image.getUrl() : optimizedImage.placeholderBox() }}" | ||
| srcset="{{ optimizedImage.srcset() }}" | ||
| sizes="(max-width: 479px) 95vw, (min-width: 480px) and (max-width: 659px) 448px, (min-width: 660px) and (max-width: 819px) 628px, (min-width: 820px) and (max-width: 979px) 378px, (min-width: 980px) and (max-width: 1199px) 458px, (min-width: 1200px) 568px" | ||
| width="{{optimizedImage.placeholderWidth}}" height="{{optimizedImage.placeholderHeight}}" | ||
| alt="{{ image.alt }}" | ||
| class="w-full" loading="lazy"/> | ||
| {% endif %} | ||
| </picture> | ||
| {% if image.imageCopyright|length or image.imageCaption|length %} | ||
| <div class="mt-1 text-sm italic opacity-50"> | ||
| {% if image.imageCaption|length %} | ||
| {{ image.imageCaption }} | ||
| {% endif %} | ||
| {% if image.imageCopyright|length %} | ||
| © {{ image.imageCopyright }} | ||
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
| <div class="w-full px-4 {% if block.image|length %}mt-8 md:mt-0 md:w-1/2{% else %}lg:w-3/4{% endif %}"> | ||
| {% if block.blockTitle|length %} | ||
| <h2 id="{{ block.blockTitle|slugify }}">{{ block.blockTitle }}</h2> | ||
| {% endif %} | ||
| {% if block.text|length %} | ||
| <div class="text-editor"> | ||
| {{ block.text }} | ||
| </div> | ||
| {% endif %} | ||
| {% if block.cta|length %} | ||
| <div class="flex flex-wrap items-baseline gap-4 mt-6"> | ||
| {{ render_hyper_links(block.cta) | raw }} | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| {% endapply %} |