BIG-IMAGE (LMU-Intern Modul )

src/app/shared/components/big-image/templates

Demo Section

Each variation will be presented in the following section.

Default

LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.

Alternative text that describes the image

Imagedescription title

1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

©2018 imageworks

Default Long Image

LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.

Alternative text that describes the image

Imagedescription title

1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

©2018 imageworks

Rte Long Image

LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.

Alternative text that describes the image

Imagedescription title

1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

©2018 imageworks

Default

LMU intern | Grosses Bild 100% in Detailseite (Verwand zu Slider-rte)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.

Alternative text that describes the image

1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

©2018 imageworks

Readme

bigImage (component)

Description

This blueprint is based on the blueprint of Veams.

Requirements

  • Veams#5.0.0

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/big-image

Fields

big-image.hbs

Settings

Parameter Type Default Description
settings.bigImageClasses String '' Modifier classes for component
settings.bigImageContextClass String 'default' Context class of component

Content

Parameter Type Description
content.bigImageField String Please add a description!

SASS

Variables

There are multiple variables which you can change:

Variable Value Description
$big-image-my-custom-var 0px Please add a description!

Modifier Classes

There are modifier classes you can add to c-big-image:

Modifier Description
is-modifier Please add a description!

Templates

big-image.hbs

<div class="c-big-image{{#if settings.bigImageContextClass}}--{{settings.bigImageContextClass}}{{else}}--default{{/if}}{{#if settings.bigImageClasses}} {{settings.bigImageClasses}}{{/if}}"
     data-css="c-big-image">
    {{#if content.headline}}
		<h2 class="big-image__headline">{{content.headline}}</h2>
	{{/if}}
     {{#if content.introText}}
		<p class="big-image__intro-text">{{content.introText}}</p>
	{{/if}}
	{{#if content.picture}}
	<div class="big-image__content">
		{{#with content.picture}}
			{{> picture }}
		{{/with}}
	</div>
	{{/if}}
	{{#if content.imageDescription}}
	<div class="big-image__image-description-wrapper">
		{{#if content.imageDescription.content.title}}
			<h3 class="big-image__caption-headline">{{content.imageDescription.content.title}}</h3>
		{{/if}}
		{{#if content.imageDescription.content.text}}
			<p class="big-image__image-description-text">
				{{content.imageDescription.content.text}}
			</p>
		{{/if}}
		{{#if content.imageDescription.content.copyright}}
			<span class="big-image__image-description-copyright">{{content.imageDescription.content.copyright}}</span>
		{{/if}}
	</div>
	{{/if}}
</div>

Data File

big-image.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"bigImageContextClass": "lpage",
				"bigImageClasses": ""
			},
			"content": {
				"headline": "LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)",
				"introText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
				"picture": {
					"settings": {
						"pictureContextClass": "big-image-lpage",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/400x267",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x200",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x400",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x600",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/2400x1200",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1000",
										"imageWidth": "2000w"
									}
								],
								"sizes": [
									{
										"screenWidth": "(min-width: 1440px)",
										"imageWidth": "1440px"
									},
									{
										"screenWidth": "",
										"imageWidth": "100vw"
									}
								],
								"media": "(min-width: 1024px)"
							},
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x267",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x534",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x801",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1068",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1335",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1602",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1868",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x2135",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2)"
									}
								],
								"media": "(max-width: 1023px)"
							}
						]
					}
				},
				"imageDescription":
					{
						"content": {
							"title": "Imagedescription title",
							"text": "1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed  fh  fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"copyright": "©2018 imageworks"
						}
					}
			}
		},
		"defaultlong": {
			"docs": {
				"variationName": "Default Long Image"
			},
			"settings": {
				"bigImageContextClass": "lpage",
				"bigImageClasses": ""
			},
			"content": {
				"headline": "LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)",
				"introText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
				"picture": {
					"settings": {
						"pictureContextClass": "big-image-flex",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/2400x5800",
						"alt": "Alternative text that describes the image",
						"items": [
							{
							}
						]
					}
				},
				"imageDescription":
					{
						"content": {
							"title": "Imagedescription title",
							"text": "1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed  fh  fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"copyright": "©2018 imageworks"
						}
					}
			}
		},
		"rtelong": {
			"docs": {
				"variationName": "Rte Long Image"
			},
			"settings": {
				"bigImageContextClass": "rte",
				"bigImageClasses": "is-rte-embed"
			},
			"content": {
				"headline": "LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)",
				"introText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
				"picture": {
					"settings": {
						"pictureContextClass": "big-image-flex",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/2400x4800",
						"alt": "Alternative text that describes the image",
						"items": [
							{
							}
						]
					}
				},
				"imageDescription":
					{
						"content": {
							"title": "Imagedescription title",
							"text": "1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed  fh  fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"copyright": "©2018 imageworks"
						}
					}
			}
		},
		"rte": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"bigImageContextClass": "rte",
				"bigImageClasses": "is-rte-embed"
			},
			"content": {
				"headline": "LMU intern | Grosses Bild 100% in Detailseite (Verwand zu Slider-rte)",
				"introText": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
				"picture": {
					"settings": {
						"pictureContextClass": "big-image",
						"pictureClasses": false,
						"lazyload": false,
						"autoSizes": true
					},
					"content": {
						"fallbackSrc": "https://via.placeholder.com/400x267",
						"alt": "Alternative text that describes the image",
						"items": [
							{
								"srcset": [
									{
										"src": "https://via.placeholder.com/400x267",
										"imageWidth": "400w"
									},
									{
										"src": "https://via.placeholder.com/800x534",
										"imageWidth": "800w"
									},
									{
										"src": "https://via.placeholder.com/1200x801",
										"imageWidth": "1200w"
									},
									{
										"src": "https://via.placeholder.com/1600x1068",
										"imageWidth": "1600w"
									},
									{
										"src": "https://via.placeholder.com/2000x1335",
										"imageWidth": "2000w"
									},
									{
										"src": "https://via.placeholder.com/2400x1602",
										"imageWidth": "2400w"
									},
									{
										"src": "https://via.placeholder.com/2800x1868",
										"imageWidth": "2800w"
									},
									{
										"src": "https://via.placeholder.com/3200x2135",
										"imageWidth": "3200w"
									}
								],
								"sizes": [
									{
										"screenWidth": "",
										"imageWidth": "calc(100vw - ((100vw / 14) * 2)"
									}
								]
							}
						]
					}
				},
				"imageDescription":
					{
						"content": {
							"text": "1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed  fh  fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
							"copyright": "©2018 imageworks"
						}
					}
			}
		}
	}
}

Styles

big-image.scss

/* ===================================================
component: big-image
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css~="c-big-image"] {

	clear: both;
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0 auto 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;
	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}

	/*
	Print view
	----------------------- */
	@include print() {
		display: none;
	}

	.big-image__headline {
		@include headline-h2-styles();
	}

	.big-image__intro-text {
		font-family: $font-regular;
		font-size: 1.6rem;
		line-height: (22/16);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 25px;
	}

	.big-image__image-description-wrapper {
		position: relative;
		padding: 0;
		color: $color-dark;
	}

	.big-image__caption-headline {
		display: block;
		width: 100%;
		margin-left: 0;
		font-size: 1.3rem;
		line-height: (17/13);
		font-family: $font-bold;
		font-weight: 700;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.big-image__image-description-copyright,
	.big-image__image-description-text {
		margin-top: 10px;
		font-size: 1.2rem;
		line-height: (17/12);
		width: 100%;
		margin-left: 0;
		margin-top: 5px;
		margin-bottom: 0;
		font-size: 1.2rem;
		line-height: (17/12);
		font-family: $font-regular;
		font-weight: 400;
		letter-spacing: .5px;
	}

}

/* ---------------------------------------------------
Context: Default Landingpage
--------------------------------------------------- */
.c-big-image--lpage {

	.big-image__image-description-wrapper,
	.big-image__headline,
	.big-image__intro-text {
		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}

	.big-image__content {
		width: 100%;

		@include bp($bp-tablet-p) {
			@include grid-column-width(12);
			@include grid-push-h(0);
		}
	}

	.big-image__intro-text {

		strong,
		b {
			@include content-b-styles();
		}

		i {
			@include content-i-styles();
		}

		p {
			margin-bottom: 25px;

			@include bp($bp-desktop-m) {
				margin-bottom: 30px;
			}
		}

		sub {
			vertical-align: sub;
			font-size: smaller;
		}

		sup {
			vertical-align: super;
			font-size: smaller;
		}

		/*
		Links
		----------------------------- */
		a {
			@include content-a-styles();
		}

		/*
		Lists
		----------------------------- */
		ul {
			@include content-ul-styles();
		}

		ol {
			@include content-ol-styles();
		}

		/* Unterüberschrift
		----------------------------- */
		h3 {
			@include headline-h4-styles();
		}
	}
}

/* ---------------------------------------------------
Context: RTE
--------------------------------------------------- */
.c-big-image--rte {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/*
	MODIFIERS
	----------------------- */
	&.is-rte-embed {
		margin-bottom: 60px;
	}

	.big-image__intro-text {
		@include rte-dimensions();

		font-family: $font-regular;
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 25px;

		@include bp($bp-desktop-m) {
			font-size: 1.6rem;
			line-height: (24/16);
			margin-bottom: 30px;
		}
	}

	.grid__row {
		max-width: none;
	}

	.big-image__image-description-wrapper,
	.big-image__content {
		@include rte-dimensions();
		overflow: hidden;
	}

	.big-image__image-description-wrapper {
		margin-bottom: 0;
	}
}

HTML Output

Default

<div class="c-big-image--lpage" data-css="c-big-image">
	<h2 class="big-image__headline">LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)</h2>
	<p class="big-image__intro-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
	<div class="big-image__content">
		<picture class="c-picture--big-image-lpage
				" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source srcset="
				 https://via.placeholder.com/400x200  400w  , 
				 https://via.placeholder.com/800x400  800w  , 
				 https://via.placeholder.com/1200x600  1200w  , 
				 https://via.placeholder.com/2400x1200  1600w  , 
				 https://via.placeholder.com/2000x1000  2000w  " sizes=" 
				  (min-width: 1440px) 1440px 
				  ,   100vw " media=" (min-width: 1024px)" />
			<source srcset="
				 https://via.placeholder.com/400x267  400w  , 
				 https://via.placeholder.com/800x534  800w  , 
				 https://via.placeholder.com/1200x801  1200w  , 
				 https://via.placeholder.com/1600x1068  1600w  , 
				 https://via.placeholder.com/2000x1335  2000w  , 
				 https://via.placeholder.com/2400x1602  2400w  , 
				 https://via.placeholder.com/2800x1868  2800w  , 
				 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
				   calc(100vw - ((100vw / 14) * 2) " media=" (max-width: 1023px)" />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="big-image__image-description-wrapper">
		<h3 class="big-image__caption-headline">Imagedescription title</h3>
		<p class="big-image__image-description-text">
			1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</p>
		<span class="big-image__image-description-copyright">©2018 imageworks</span>
	</div>
</div>

Default Long Image

<div class="c-big-image--lpage" data-css="c-big-image">
	<h2 class="big-image__headline">LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)</h2>
	<p class="big-image__intro-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
	<div class="big-image__content">
		<picture class="c-picture--big-image-flex
				" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source srcset="" />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image" src="https://via.placeholder.com/2400x5800" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="big-image__image-description-wrapper">
		<h3 class="big-image__caption-headline">Imagedescription title</h3>
		<p class="big-image__image-description-text">
			1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</p>
		<span class="big-image__image-description-copyright">©2018 imageworks</span>
	</div>
</div>

Rte Long Image

<div class="c-big-image--rte is-rte-embed" data-css="c-big-image">
	<h2 class="big-image__headline">LMU intern | Grosses Bild 100% in Landinpage (Verwand zu Slider)</h2>
	<p class="big-image__intro-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
	<div class="big-image__content">
		<picture class="c-picture--big-image-flex
				" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source srcset="" />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image" src="https://via.placeholder.com/2400x4800" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="big-image__image-description-wrapper">
		<h3 class="big-image__caption-headline">Imagedescription title</h3>
		<p class="big-image__image-description-text">
			1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</p>
		<span class="big-image__image-description-copyright">©2018 imageworks</span>
	</div>
</div>

Default

<div class="c-big-image--rte is-rte-embed" data-css="c-big-image">
	<h2 class="big-image__headline">LMU intern | Grosses Bild 100% in Detailseite (Verwand zu Slider-rte)</h2>
	<p class="big-image__intro-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
	<div class="big-image__content">
		<picture class="c-picture--big-image
				" data-css="c-picture">
			<!--[if IE 9]><audio><![endif]-->
			<source srcset="
				 https://via.placeholder.com/400x267  400w  , 
				 https://via.placeholder.com/800x534  800w  , 
				 https://via.placeholder.com/1200x801  1200w  , 
				 https://via.placeholder.com/1600x1068  1600w  , 
				 https://via.placeholder.com/2000x1335  2000w  , 
				 https://via.placeholder.com/2400x1602  2400w  , 
				 https://via.placeholder.com/2800x1868  2800w  , 
				 https://via.placeholder.com/3200x2135  3200w  " sizes=" 
				   calc(100vw - ((100vw / 14) * 2) " />
			<!--[if IE 9]></audio><![endif]-->
			<img class="
				 picture__image" src="https://via.placeholder.com/400x267" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
		</picture>
	</div>
	<div class="big-image__image-description-wrapper">
		<p class="big-image__image-description-text">
			1. Lorem ipsum dolor sit amet, consetetur dyfgds fg sdfg sdfg sdfg dsfg sdfg dsg sdfg dsfg dfs gdsfg dsfg ds sdfg sdg sdf sd sd g sg sadipscing elitr, sed fh fgh fh fgh fh fdh fh fh fdh fdh fdh fdhfdh fdh fdh fdh fdh dfh fdh dfh fdh dfh dfh dfh dfh fd dfh df diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
		</p>
		<span class="big-image__image-description-copyright">©2018 imageworks</span>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link