Amy-Content Blocks

V000-23

Geef contentblokken met een afbeeldingen, een titel en een uitklapbare tekst weer. Ideaal om grote hoeveelheden content netjes op een website te zetten.

Het beste te gebruiken met 3 of 4 blokken naast elkaar. Onderstaande code gaat uit van 4. Mocht je 3 naast elkaar willen hebben, pas dan even de styling aan van 25% naar 33% en verwijder de preset-list "row-4".

Hoe te gebruiken?

Kopieer onderstaande code in je template. (HTML, CSS en Javascript)

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.

HTML
<section class="amy-content-blocks">
	<div class="container">
		<div class="row">
			<nc-preset-list name="row-1" attributes="class=amy-block-col">
				<div class="position-relative amy-block-top mt-4 w-100">
					<nc-image name="{%name%}-image" width="275" height="200"></nc-image>
					<nc-text name="{%name%}-title" default="Title" attributes="class=amy-block-title"></nc-text>
					<nc-text name="{%name%}-more" default="Verder lezen" attributes="class=amy-extra-text,id=amy-read-more-{%name%},data-amy-read-more=Verder lezen,data-amy-close=Sluiten"></nc-text>
				</div>
				<div class="position-relative overflow-hidden amy-block-wrap">
					<div class="amy-block-bottom">
						<nc-text name="{%name%}-description"></nc-text>
					</div>
				</div>
			</nc-preset-list>
			<nc-preset-list name="row-2" attributes="class=amy-block-col">
				<div class="position-relative amy-block-top mt-4 w-100">
					<nc-image name="{%name%}-image" width="275" height="200"></nc-image>
					<nc-text name="{%name%}-title" default="Title" attributes="class=amy-block-title"></nc-text>
					<nc-text name="{%name%}-more" default="Verder lezen" attributes="class=amy-extra-text,id=amy-read-more-{%name%},data-amy-read-more=Verder lezen,data-amy-close=Sluiten"></nc-text>
				</div>
				<div class="position-relative overflow-hidden amy-block-wrap">
					<div class="amy-block-bottom">
						<nc-text name="{%name%}-description"></nc-text>
					</div>
				</div>
			</nc-preset-list>
			<nc-preset-list name="row-3" attributes="class=amy-block-col">
				<div class="position-relative amy-block-top mt-4 w-100">
					<nc-image name="{%name%}-image" width="275" height="200"></nc-image>
					<nc-text name="{%name%}-title" default="Title" attributes="class=amy-block-title"></nc-text>
					<nc-text name="{%name%}-more" default="Verder lezen" attributes="class=amy-extra-text,id=amy-read-more-{%name%},data-amy-read-more=Verder lezen,data-amy-close=Sluiten"></nc-text>
				</div>
				<div class="position-relative overflow-hidden amy-block-wrap">
					<div class="amy-block-bottom">
						<nc-text name="{%name%}-description"></nc-text>
					</div>
				</div>
			</nc-preset-list>
			<nc-preset-list name="row-4" attributes="class=amy-block-col">
				<div class="position-relative amy-block-top mt-4 w-100">
					<nc-image name="{%name%}-image" width="275" height="200"></nc-image>
					<nc-text name="{%name%}-title" default="Title" attributes="class=amy-block-title"></nc-text>
					<nc-text name="{%name%}-more" default="Verder lezen" attributes="class=amy-extra-text,id=amy-read-more-{%name%},data-amy-read-more=Verder lezen,data-amy-close=Sluiten"></nc-text>
				</div>
				<div class="position-relative overflow-hidden amy-block-wrap">
					<div class="amy-block-bottom">
						<nc-text name="{%name%}-description"></nc-text>
					</div>
				</div>
			</nc-preset-list>
		</div>
	</div>
</section>

CSS
/* Amy content blocks */
.amy-block-col {
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

@media screen and (min-width: 768px) {
	.amy-block-col {
		width: 50%;
	}
}

@media screen and (min-width: 1200px) {
	.amy-block-col {
		width: 25%;
		/* width: 33%; voor 3 blokken naast elkaar */
	}
}

html[data-logged="true"] .amy-content-blocks .amy-block-col{
	width: 100%;
}

html[data-logged="true"] .amy-content-blocks div[data-partial="preset-list"]{
	width: 25%;
	/* width: 33%; voor 3 blokken naast elkaar */
}

.amy-content-blocks .amy-block-top img {
	border-radius: var(--panel-radius);
	transition: 0.4s filter;
	pointer-events: none;
	filter: brightness(0.8);
}

.amy-content-blocks .amy-block-top:hover .img-fluid {
	filter: brightness(0.6);
}

.amy-content-blocks .amy-block-top * {
	cursor: pointer;
}

.amy-content-blocks .amy-block-title {
	position: absolute;
	left: 20px;
	bottom: 30px;
	color: #fff;
	text-shadow: 1px 1px 10px #000A;
}

.amy-content-blocks .amy-block-bottom {
	position: relative;
	margin: 1rem 0;
}

body:not([data-editor-mode="content"]) .amy-content-blocks .amy-block-top .amy-extra-text::after{
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	font-size: 80%;
	content: "\f061";
	margin-left: 0.5rem;
	transition: 0.4s transform;
}

.amy-content-blocks .amy-block-top.active .amy-extra-text::after {
	transform: rotatez(90deg);
}

.amy-content-blocks .amy-block-wrap {
	width: 100%;
	transition: height 0.75s;
}

body[data-editor-mode="content"] .amy-content-blocks .amy-block-bottom,
body[data-editor-mode="content"] .amy-content-blocks .amy-block-title,
body[data-editor-mode="content"] .amy-content-blocks .amy-block-wrap {
	position: relative;
	bottom: 0;
	color: #000;
	height: 100%;
}

JS
const items = document.querySelectorAll(".amy-block-top");
		const itemsText = document.querySelectorAll(".amy-block-wrap");

		const readMoreElements = document.querySelectorAll(".amy-read-more-button");
		const closeButtonElements = document.querySelectorAll(".amy-close-button");

		const readMoreInner = readMoreElements.length > 0 ? readMoreElements[0].getAttribute('data-amy-read-more') : 'Lees meer';
		const closeButtonInner = closeButtonElements.length > 0 ? closeButtonElements[0].getAttribute('data-amy-close') : 'Sluit';

		let itemsTextHeights = [];
		itemsText.forEach(item => {
			itemsTextHeights.push(item.clientHeight);
		});

		items.forEach((item, i) => {
			itemsText[i].style.height = '0px';
			item.addEventListener('click', () => {
				if (item.classList.contains('active')) {
					item.classList.remove("active");
					itemsText[i].style.height = '0px';
					item.querySelector(".amy-extra-text").innerHTML = readMoreInner;
				} else {
					item.classList.add("active");
					itemsText[i].style.height = itemsTextHeights[i] + 'px';
					item.querySelector(".amy-extra-text").innerHTML = closeButtonInner;
				}
			});
		});