Optimal image dimensions
<!-- Images -->
<div class="mediaGallery">
<h2 class="mediaGallery-title">Galerie mit Bildern</h2>
<ul class="mediaGallery-items">
<li class="mediaGallery-item" data-type="image" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../images/placeholder/dummy-image-640w.jpg);">
<a class="mediaGallery-link" href="../../images/placeholder/dummy-image-full-size.jpg" download target="_blank">
<img src="../../images/placeholder/dummy-image-640w.jpg" data-zoom="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin der Titel des Mediums</span><small class="mediaGallery-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="image" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../images/placeholder/dummy-image-640w.jpg);">
<a class="mediaGallery-link" href="../../images/placeholder/dummy-image-full-size.jpg" download target="_blank">
<img src="../../images/placeholder/dummy-image-640w.jpg" data-zoom="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin ein etwas längerer der Titel für das hier gezeigte Medium</span><small class="mediaGallery-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="image" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../images/placeholder/dummy-image-640w.jpg);">
<a class="mediaGallery-link" href="../../images/placeholder/dummy-image-full-size.jpg" download target="_blank">
<img src="../../images/placeholder/dummy-image-640w.jpg" data-zoom="../../images/placeholder/dummy-image.jpg" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="mediaGallery-caption"><span>Der Titel</span><small class="mediaGallery-copyright">Foto von <a class="link" href="https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sergio Medina</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="image" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(https://picsum.photos/id/18/480/720);">
<a class="mediaGallery-link" href="https://picsum.photos/id/18/1120/1680" download target="_blank">
<img src="https://picsum.photos/id/18/480/720" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin der Titel des Mediums</span></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="image" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(https://picsum.photos/id/193/720/360);">
<a class="mediaGallery-link" href="https://picsum.photos/id/193/1680/840" download target="_blank">
<img src="https://picsum.photos/id/193/720/360" alt="Alternative Bildbeschreibung" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin der Titel des Mediums</span></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="image">
<figure class="mediaGallery-preview">
<figcaption class="mediaGallery-caption"><span>Ich bin der Titel des Mediums</span></figcaption>
</figure>
</li>
</ul>
</div>
<!-- Video -->
<div class="mediaGallery">
<h2 class="mediaGallery-title">Galerie mit Videos</h2>
<ul class="mediaGallery-items">
<li class="mediaGallery-item" data-type="video" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../videos/placeholder/dummy-video.jpg);">
<a class="mediaGallery-link" href="../../videos/placeholder/dummy-video.mp4" target="_blank">
<img src="../../videos/placeholder/dummy-video.jpg" alt="Alternative Beschreibung des Videos" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin der Titel des Mediums</span><small class="mediaGallery-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="video" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../videos/placeholder/dummy-video.jpg);">
<a class="mediaGallery-link" href="../../videos/placeholder/dummy-video.mp4" target="_blank">
<img src="../../videos/placeholder/dummy-video.jpg" alt="Alternative Beschreibung des Videos" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin ein etwas längerer der Titel für das hier gezeigte Medium</span><small class="mediaGallery-copyright">Video von <a class="link" href="https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/">Pixabay</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="video" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview">
<a class="mediaGallery-link" href="../../videos/placeholder/dummy-video.mp4" target="_blank">
</a>
<figcaption class="mediaGallery-caption"><span>Video ohne Vorschau</span></figcaption>
</figure>
</li>
</ul>
</div>
<!-- Audio -->
<div class="mediaGallery">
<h2 class="mediaGallery-title">Galerie mit Audiodateien</h2>
<ul class="mediaGallery-items">
<li class="mediaGallery-item" data-type="audio" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../audios/placeholder/dummy-audio-poster.jpg);">
<a class="mediaGallery-link" href="../../audios/placeholder/dummy-audio.mp3" target="_blank">
<img src="../../audios/placeholder/dummy-audio-poster.jpg" alt="Alternative Beschreibung des Tons" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin der Titel des Mediums</span><small class="mediaGallery-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="audio" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview" style="background-image: url(../../audios/placeholder/dummy-audio-poster.jpg);">
<a class="mediaGallery-link" href="../../audios/placeholder/dummy-audio.mp3" target="_blank">
<img src="../../audios/placeholder/dummy-audio-poster.jpg" alt="Alternative Beschreibung des Tons" />
</a>
<figcaption class="mediaGallery-caption"><span>Ich bin ein etwas längerer der Titel für das hier gezeigte Medium</span><small class="mediaGallery-copyright">Audio von <a class="link" href="https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/">Pixabay</a></small></figcaption>
</figure>
</li>
<li class="mediaGallery-item" data-type="audio" data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link">
<figure class="mediaGallery-preview">
<a class="mediaGallery-link" href="../../audios/placeholder/dummy-audio.mp3" target="_blank">
</a>
<figcaption class="mediaGallery-caption"><span>Audiodatei ohne Vorschau</span></figcaption>
</figure>
</li>
</ul>
</div>
<div class="mediaGallery{{#modifier}} {{.}}{{/modifier}}">
{{#title}}
<h2 class="mediaGallery-title">{{{.}}}</h2>
{{/title}}
<ul class="mediaGallery-items">
{{#items}}
<li class="mediaGallery-item"{{#type}} data-type="{{.}}"{{/type}}{{#if link}} data-media-overlay data-action="open" data-trigger-selector=".mediaGallery-link"{{/if}}>
{{#label}}{{! Deprecated: Use caption instead}}
<h3 class="mediaGallery-label">{{{.}}}</h3>
{{/label}}
<figure class="mediaGallery-preview"{{#preview}} style="background-image: url({{path src}});"{{/preview}}>
{{#link}}<a class="mediaGallery-link" href="{{path url}}"{{#if download}} download{{/if}} target="{{#if target}}{{target}}{{else}}_blank{{/if}}">{{/link}}
{{#if preview}}
<img src="{{path preview.src}}"{{#zoom}} data-zoom="{{path src}}"{{/zoom}} alt="{{preview.alt}}"/>
{{/if}}
{{#if link}}</a>{{/if}}
{{#if caption}}
<figcaption class="mediaGallery-caption"><span>{{{caption}}}</span>{{#copyright}}<small class="mediaGallery-copyright">{{{.}}}</small>{{/copyright}}</figcaption>
{{else}}
{{#copyright}}
<figcaption class="mediaGallery-caption"><small class="mediaGallery-copyright">{{{.}}}</small></figcaption>
{{/copyright}}
{{/if}}
</figure>
</li>
{{/items}}
</ul>
</div>
/* Images */
{
"title": "Galerie mit Bildern",
"items": [
{
"type": "image",
"caption": "Ich bin der Titel des Mediums",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"preview": {
"src": "/images/placeholder/dummy-image-640w.jpg",
"alt": "Alternative Bildbeschreibung"
},
"link": {
"url": "/images/placeholder/dummy-image-full-size.jpg",
"download": true,
"target": "_blank"
},
"zoom": {
"src": "/images/placeholder/dummy-image.jpg"
}
},
{
"type": "image",
"caption": "Ich bin ein etwas längerer der Titel für das hier gezeigte Medium",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"preview": {
"src": "/images/placeholder/dummy-image-640w.jpg",
"alt": "Alternative Bildbeschreibung"
},
"link": {
"url": "/images/placeholder/dummy-image-full-size.jpg",
"download": true,
"target": "_blank"
},
"zoom": {
"src": "/images/placeholder/dummy-image.jpg"
}
},
{
"type": "image",
"caption": "Der Titel",
"copyright": "Foto von <a class=\"link\" href=\"https://unsplash.com/de/@ssergiomedinaa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Sergio Medina</a>",
"preview": {
"src": "/images/placeholder/dummy-image-640w.jpg",
"alt": "Alternative Bildbeschreibung"
},
"link": {
"url": "/images/placeholder/dummy-image-full-size.jpg",
"download": true,
"target": "_blank"
},
"zoom": {
"src": "/images/placeholder/dummy-image.jpg"
}
},
{
"type": "image",
"caption": "Ich bin der Titel des Mediums",
"preview": {
"src": "https://picsum.photos/id/18/480/720",
"alt": "Alternative Bildbeschreibung"
},
"link": {
"url": "https://picsum.photos/id/18/1120/1680",
"download": true,
"target": "_blank"
}
},
{
"type": "image",
"caption": "Ich bin der Titel des Mediums",
"preview": {
"src": "https://picsum.photos/id/193/720/360",
"alt": "Alternative Bildbeschreibung"
},
"link": {
"url": "https://picsum.photos/id/193/1680/840",
"download": true,
"target": "_blank"
}
},
{
"type": "image",
"caption": "Ich bin der Titel des Mediums"
}
]
}
/* Video */
{
"title": "Galerie mit Videos",
"items": [
{
"type": "video",
"caption": "Ich bin der Titel des Mediums",
"copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>",
"preview": {
"src": "/videos/placeholder/dummy-video.jpg",
"alt": "Alternative Beschreibung des Videos"
},
"link": {
"url": "/videos/placeholder/dummy-video.mp4"
}
},
{
"type": "video",
"caption": "Ich bin ein etwas längerer der Titel für das hier gezeigte Medium",
"copyright": "Video von <a class=\"link\" href=\"https://pixabay.com/de/videos/gelb-fl%C3%BCssig-farbe-raum-27803/\">Pixabay</a>",
"preview": {
"src": "/videos/placeholder/dummy-video.jpg",
"alt": "Alternative Beschreibung des Videos"
},
"link": {
"url": "/videos/placeholder/dummy-video.mp4"
}
},
{
"type": "video",
"caption": "Video ohne Vorschau",
"link": {
"url": "/videos/placeholder/dummy-video.mp4"
}
}
]
}
/* Audio */
{
"title": "Galerie mit Audiodateien",
"items": [
{
"type": "audio",
"caption": "Ich bin der Titel des Mediums",
"copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
"preview": {
"src": "/audios/placeholder/dummy-audio-poster.jpg",
"alt": "Alternative Beschreibung des Tons"
},
"link": {
"url": "/audios/placeholder/dummy-audio.mp3"
}
},
{
"type": "audio",
"caption": "Ich bin ein etwas längerer der Titel für das hier gezeigte Medium",
"copyright": "Audio von <a class=\"link\" href=\"https://pixabay.com/sound-effects/birds-chirping-ambiance-26052/\">Pixabay</a>",
"preview": {
"src": "/audios/placeholder/dummy-audio-poster.jpg",
"alt": "Alternative Beschreibung des Tons"
},
"link": {
"url": "/audios/placeholder/dummy-audio.mp3"
}
},
{
"type": "audio",
"caption": "Audiodatei ohne Vorschau",
"link": {
"url": "/audios/placeholder/dummy-audio.mp3"
}
}
]
}
$mediaGallery_icons: (
audio: map.get($downloadItem_icons, audio),
generic: map.get($downloadItem_icons, generic),
image: map.get($downloadItem_icons, image),
video: map.get($downloadItem_icons, video),
) !default;
$mediaGallery_figure_action_scale: $figure_action_scale !default;
@import "_mediaGallery.settings";
@import "_mediaGallery.styles";
%mediaGallery {
&-caption {
@include text-size();
font-family: inherit;
font-style: inherit;
color: inherit;
> span {
font-weight: $_font-weight--bold;
}
}
}
$mediaGallery_max-columns: 3 !default;
$mediaGallery_icon_stroke-width: 2 !default;
$mediaGallery_icons: (
audio: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$mediaGallery_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M10 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V12C3 11.7348 3.10536 11.4804 3.29289 11.2929C3.48043 11.1054 3.73478 11 4 11H10L19 4V28L10 21Z"/><path d="M24 13V19"/><path d="M28 11V21"/></svg>',
document: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$mediaGallery_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M25 28H7C6.73478 28 6.48043 27.8946 6.29289 27.7071C6.10536 27.5196 6 27.2652 6 27V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H19L26 11V27C26 27.2652 25.8946 27.5196 25.7071 27.7071C25.5196 27.8946 25.2652 28 25 28Z"/><path d="M19 4V11H26"/><path d="M12 17H20"/><path d="M12 21H20"/></svg>',
generic: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$mediaGallery_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M25 28H7C6.73478 28 6.48043 27.8946 6.29289 27.7071C6.10536 27.5196 6 27.2652 6 27V5C6 4.73478 6.10536 4.48043 6.29289 4.29289C6.48043 4.10536 6.73478 4 7 4H19L26 11V27C26 27.2652 25.8946 27.5196 25.7071 27.7071C25.5196 27.8946 25.2652 28 25 28Z"/><path d="M19 4V11H26"/></svg>',
image: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$mediaGallery_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"/><path d="M18.4137 20.4998L21.625 17.2923C21.8125 17.1049 22.0668 16.9996 22.3319 16.9996C22.597 16.9996 22.8512 17.1049 23.0387 17.2923L28 22.2573M4 21.0861L10.7925 14.2923C10.8854 14.1993 10.9957 14.1256 11.1171 14.0753C11.2385 14.0249 11.3686 13.999 11.5 13.999C11.6314 13.999 11.7615 14.0249 11.8829 14.0753C12.0043 14.1256 12.1146 14.1993 12.2075 14.2923L23.9137 25.9998"/><circle cx="19.75" cy="11.75" r="0.75"/></svg>',
video: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="#{$mediaGallery_icon_stroke-width}" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M20 14L14 10V18L20 14Z"/><path d="M27 6H5C4.44772 6 4 6.44772 4 7V21C4 21.5523 4.44772 22 5 22H27C27.5523 22 28 21.5523 28 21V7C28 6.44772 27.5523 6 27 6Z"/><path d="M4 26H28"/></svg>',
) !default;
$mediaGallery_icons: map.set($mediaGallery_icons, "logo", map.get($mediaGallery_icons, image));
$mediaGallery_icon_color: $_GRAY-300 !default;
$mediaGallery_icon_size: 48px !default;
$mediaGallery_figure_action_scale: 1.05 !default;
%mediaGallery {
@include stack-spacing(section);
width: 100%;
&-title {
@extend %sectionTitle;
@include stack-spacing(0);
}
&-items {
list-style: none;
padding: 0;
@include stack-spacing(component);
@include grid-flowbox($max-columns: $mediaGallery_max-columns);
}
&-item {
display: flex;
flex-direction: column;
}
&-label {
@include stack-spacing(small);
@include text-size();
order: 2;
}
&-preview {
@include stack-spacing(0);
display: block;
transition: $_transition-duration;
transition-property: background-size, border-radius;
position: relative;
&::before,
&::after {
content: "";
display: block;
width: 100%;
aspect-ratio: $figure_aspect-ratio;
@include border-radius();
}
&::before {
background: $_backdrop-color svg-url(map.get($mediaGallery_icons, generic), $mediaGallery_icon_color) center center no-repeat;
background-size: $mediaGallery_icon_size;
}
&:not([style*="background-image"])::after {
display: none;
}
&[style*="background-image"] {
background-size: 0px;
position: relative;
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
&::before {
background: inherit;
background-size: cover;
}
&::after {
background-color: rgba(white, .33);
backdrop-filter: blur(50px);
}
}
img {
@include stack-spacing(0);
width: 100%;
max-height: 100%;
margin: auto;
position: relative;
z-index: 2;
aspect-ratio: $figure_aspect-ratio;
object-fit: contain;
transform: scale(1);
transition: inherit;
transition-property: transform;
}
&:hover {
transition-duration: $_transition-duration--in;
@include border-radius(small);
&:not([style*="background-image"]) {
background-size: (1.25 * $mediaGallery_icon_size);
}
img {
transform: scale($mediaGallery_figure_action_scale);
}
}
}
@each $name, $data in $mediaGallery_icons {
@if $name != "generic" {
&-item[data-type="#{$name}"] &-preview:not([style*="background-image"])::before {
background-image: svg-url($data, $mediaGallery_icon_color);
}
}
}
&-item[data-type="video"] &,
&-item[data-type="audio"] & {
&-preview {
&::before,
&::after {
aspect-ratio: 16 / 9;
}
img {
object-fit: cover;
aspect-ratio: 16 / 9;
}
}
&-link {
aspect-ratio: 16 / 9;
}
}
&-link {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
@include border-radius();
overflow: hidden;
transition: inherit;
}
&-preview:not([style*="background-image"]) &-link {
position: absolute !important;
top: 0;
}
&-caption {
@extend %figure-caption;
}
&-copyright {
@extend %figure-copyright;
}
}
.mediaGallery {
@extend %mediaGallery;
&-title {
@extend %mediaGallery-title;
}
&-items {
@extend %mediaGallery-items;
}
&-item {
@extend %mediaGallery-item;
}
&-label {
@extend %mediaGallery-label;
}
&-caption {
@extend %mediaGallery-caption;
}
&-copyright {
@extend %mediaGallery-copyright;
}
&-preview {
@extend %mediaGallery-preview;
}
&-link {
@extend %mediaGallery-link;
}
}