Growth

P202-24 / V202-24

Een blog template die voor het weergeven van projecten, nieuws of blog artikelen gebruikt kan worden. De blog bevat ook het product "blog filters". Het ondersteunde veld voor de filters is "Categorie". Meerdere blog velden wordt ondersteund, maar 1 (het veld Categorie) is ideaal.

Hoe te gebruiken?

Zet wanneer p202-artikelen verkocht is de blog "growth" aan in het NASA systeem en kopieer onderstaande code in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

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

HTML
<!-- Blog feed voor eventuele homepagina  -->

<div class="container">
	<div class="blog-template-growth">
		<div class="blog-related">
			<nc-blog-feed name="blog-related-feed" collection="FIXME:" columns="2" rows="2" attributes="class=blog-related-feed" item-view="growth"></nc-blog-feed>
		</div>
	</div>
</div>

CSS
/* Blog Growth */

.blog-template-growth.blog-item .btn-back {
	font-size: 12px;
	color: #fff;
	font-weight: 400;
	padding-left: 0;
	margin: 2rem 0;
	text-transform: none;
}

.blog-template-growth.blog-item .btn-back::before {
	content: "<";
	margin-right: 0.25rem;
}

.blog-template-growth.blog-item .blog-content {
	background-color: var(--tertiary);
	padding: 1rem;
	border-radius: var(--panel-radius);
}

.blog-template-growth.blog-item .blog-content ul li {
	text-transform: uppercase;
	font-weight: 700;
}

.blog-template-growth.blog-item .blog-content img {
	border-radius: var(--panel-radius);
	overflow: hidden;
}

.blog-template-growth.blog-item .blog-extra-content {
	padding-top: 2rem ;
}

.blog-template-growth .blog-related {
	margin: 2rem 0;
	padding: 1rem;
	background-color: var(--primary-bg);
	border-radius: var(--panel-radius);
}

@media only screen and (min-width: 992px) {
	.blog-template-growth .blog-related {
		padding: 4rem 2rem;
	}
}

.blog-template-growth .blog-collection {
	background-color: var(--primary-bg);
	padding: 1rem;
	border-radius: var(--panel-radius);
}

@media only screen and (min-width: 922px) {
	.blog-template-growth .blog-collection {
		padding: 1rem 2rem;
	}
}

.blog-template-growth .blog-collection .blog-collection-filters {
	padding: 2rem 0;
}

.blog-template-growth .blog-collection .blog-collection-filters p {
	color: var(--primary);
}

.blog-template-growth .blog-collection .blog-collection-filters input:checked+label,
.blog-template-growth .blog-collection .blog-collection-filters label:hover {
	background-color: var(--tertiary);
	color: #fff;
}

.blog-template-growth .blog-item-preview {
	background-color: var(--tertiary);
	padding: 1rem;
	border-radius: var(--panel-radius);
	margin-bottom: 0.75rem;
}

@media only screen and (min-width: 992px) {
	.blog-template-growth .blog-item-preview {
		padding: 0.5rem 0.5rem 0.5rem 2rem;
	}
}

.blog-template-growth .blog-item-preview ul li,
.blog-template-growth .blog-item-preview .title,
.blog-template-growth .blog-item-preview p {
	color: #fff;
}

.blog-template-growth .blog-item-preview .fields ul li::before,
.blog-template-growth.blog-item .fields ul li::before {
	content: "";
	display: inline-block;
	background-color: var(--secondary);
	height: 18px;
	width: 18px;
	border-radius: 50%;
	transform: translateY(3px);
}

.blog-template-growth .blog-item-preview .content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem 0;
}

.blog-template-growth .blog-item-preview .title {
	margin: 1rem 0;
}

.blog-template-growth .blog-item-preview .intro .text {
	display: none;
}

.blog-template-growth .blog-item-preview .image img {
	border-radius: var(--panel-radius);
}

.blog-template-growth .blog-item-preview .blog-item-link {
	display: flex;
	flex-direction: column-reverse;
}

@media only screen and (min-width: 992px) {
	.blog-template-growth .blog-item-preview .blog-item-link {
		flex-direction: row-reverse;
	}

	.blog-template-growth .blog-item-preview .content {
		width: 54%;
	}

	.blog-template-growth .blog-item-preview .title {
		margin: 2rem 0;
	}


	.blog-template-growth .blog-item-preview .image {
		width: 45%;
	}

	.blog-template-growth .blog-item-preview .image img {
		height: 100%;
		object-fit: cover;
		border-radius: var(--panel-radius);
	}

}

.blog-template-growth .blog-item-preview .intro .readmore {
	border: 2px solid var(--white);
	padding: calc(var(--button-padding) / 2) var(--button-padding);
	border-radius: var(--button-radius);
	border-width: var(--button-border);
	transition: background-color, color, 0.4s;
}

.blog-template-growth .blog-item-preview .image {
	transition: filter 0.4s;
}

.blog-template-growth .blog-item-preview a:hover .image,
.blog-template-growth .blog-item-preview a:focus .image {
	filter: brightness(0.6);
}

.blog-template-growth .blog-item-preview a:hover .readmore,
.blog-template-growth .blog-item-preview a:focus .readmore {
	background-color: var(--white);
	color: var(--primary);
}

/* Custom blog feed */

.blog-template-growth .blog-item-preview.growth-preview {
	padding: 0;
}

.blog-template-growth .growth-preview a {
	color: #fff;
}

.blog-template-growth .growth-preview .fields {
	max-width: 95%;
}

.blog-template-growth .growth-preview .title {
	font-size: 25px;
	max-width: 95%;
}

.blog-template-growth .growth-preview .content {
	padding: 1rem 2rem;
	transition: opacity 0.4s;
}

.blog-template-growth .growth-preview .image {
	position: relative;
}

.blog-template-growth .growth-preview .image img {
	padding: 0.5rem;
	transition: padding 0.4s;
	border-radius: var(--panel-radius);
}

.blog-template-growth .growth-preview .growth-preview-button:hover,
.blog-template-growth .growth-preview .image:hover {
	cursor: pointer;
}

.blog-template-growth .growth-preview .growth-preview-button {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	background-color: var(--tertiary);
	border-radius: 50%;
	aspect-ratio: 1/1;
}

.blog-template-growth .growth-preview .growth-preview-button i {
	font-size: 1.5rem;
	color: #fff;
}

.blog-template-growth .growth-preview.active .growth-preview-button i.fa-plus {
	--fa: "\f068";
}

.blog-template-growth .blog-related-feed {
	position: relative;
}

.blog-template-growth .blog-related-feed .row>div:nth-child(1) .growth-preview .growth-preview-button,
.blog-template-growth .blog-collection-items .row>div:has(.growth-preview):nth-child(3) .growth-preview .growth-preview-button {
	display: none;
}

.blog-template-growth .blog-related-feed .row>div:nth-child(2) .growth-preview {
	position: relative;
	transition: 0.4s all;
	z-index: 2;
}

/* Till 991px */
@media only screen and (max-width: 991px) {

    /* blog-related-feed */
    .blog-template-growth .blog-related-feed .row > div:nth-child(2) {
        position: relative;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(2) .growth-preview:not(.growth-preview.active) {
        background-color: transparent;
        z-index: 2;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(3) .growth-preview {
        position: relative;
        transition: 0.4s all;
        z-index: 1;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(2) .growth-preview .content {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(2) .growth-preview:not(.growth-preview.active) .image img {
        padding: 0;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(3) .growth-preview:not(.growth-preview.active) {
        background-color: transparent;
        z-index: 1;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(3) .growth-preview .content {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(3) .growth-preview:not(.growth-preview.active) .image img {
        padding: 0;
    }

    .blog-template-growth .blog-collection-items .row > div:nth-child(3) .growth-preview {
        position: relative;
        transition: 0.4s all;
        z-index: 1;
    }

    .blog-template-growth .blog-collection-items .row > div:nth-child(3) .growth-preview .content {
        opacity: 1;
        pointer-events: all;
        display: block;
    }

    .blog-template-growth .blog-collection-items .row > div:nth-child(n+4) .growth-preview:not(.growth-preview.active) {
        background-color: transparent;
        z-index: 1;
    }

    .blog-template-growth .blog-collection-items .row > div:nth-child(n+4) .growth-preview .content {
        opacity: 0;
        pointer-events: none;
        display: none;
    }

    .blog-template-growth .blog-collection-items .row > div:nth-child(n+4) .growth-preview:not(.growth-preview.active) .image img {
        padding: 0;
    }

    .blog-template-growth .blog-related-feed .row > div:nth-child(2) .growth-preview.active .content,
    .blog-template-growth .blog-related-feed .row > div:nth-child(3) .growth-preview.active .content,
    .blog-template-growth .blog-collection-items .row > div:nth-child(n+3) .growth-preview.active .content {
        opacity: 1;
        pointer-events: all;
		display: block;
	}

}

/* From 992px */

@media only screen and (min-width: 992px) {

	.blog-template-growth .blog-related-feed .row>div:nth-child(1) .growth-preview .growth-preview-button {
		display: none;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(2) {
		position: absolute;
		left: 22%;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(2) .growth-preview:not(.growth-preview.active) {
		background-color: transparent;
		z-index: 2;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(3) .growth-preview {
		position: relative;
		transition: 0.4s all;
		z-index: 1;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(2) .growth-preview .content {
		opacity: 0;
		pointer-events: none;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(2) .growth-preview:not(.growth-preview.active) .image img {
		padding: 0;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(3) {
		position: absolute;
		left: 44%;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(3) .growth-preview:not(.growth-preview.active) {
		background-color: transparent;
		z-index: 1;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(3) .growth-preview .content {
		opacity: 0;
		pointer-events: none;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(3) .growth-preview:not(.growth-preview.active) .image img {
		padding: 0;
	}

	/* Show content when active */

	.blog-template-growth .blog-related-feed .row>div:nth-child(2) .growth-preview.active .content {
		opacity: 1;
		pointer-events: all;
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(3) .growth-preview.active .content {
		opacity: 1;
		pointer-events: all;
	}

	/* Filter when other is active */

	.blog-template-growth .blog-related-feed .row>div:nth-child(1):has(+ div > .growth-preview.active) {
		filter: brightness(0.8);
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(1):has(+ div + div + div)>.growth-preview.active {
		filter: brightness(1);
	}

	.blog-template-growth .blog-related-feed .row>div:nth-child(2):has(+ div > .growth-preview.active) {
		filter: brightness(0.8);
	}

	/* 4th item should never be visible in blog feed */

	.blog-template-growth .blog-related-feed .row>div:nth-child(4) {
		display: none;
	}

}

JS
document.querySelectorAll(".growth-preview-button, .growth-preview .image").forEach(button => {
	button.addEventListener("click", function(event) {
		let parentDiv = this.closest(".growth-preview");
		if (parentDiv) {
			event.stopImmediatePropagation();
			parentDiv.classList.toggle("active");
			if (window.innerWidth <= 991) {
				if (parentDiv.classList.contains("active")) {
					let blogContent = parentDiv.closest("#growth-item-preview");
					if (blogContent) {
						blogContent.scrollIntoView({ behavior: "smooth" });
					}
				}
			}
		}
	});
});