Bio link

P306-00 / V306-00

Maak een pagina aan waar je vanuit social media naar toe linkt.

Hoe te gebruiken?

Neem het subtemplate over in de content module, ik adviseer de naam "bio_link.php", en zet de styling in het stylesheet van de pagina. Maak vervolgens de pagina aan met het template om te bekijken of alles er degelijk uit ziet.

Let op de pagina moet niet in zoekmachines voorkomen dus zet in "Titel, omschrijving en SEO" de vindbaarheid uit!

Voorvertoning

PHP
Kopiëren<?php

/** @var \Core\Config */
$config = Locator::get('Config');
?>
<div class="content-template-default content-subtemplate-bio_link">
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
				<div class="bio_link-header">
					<nc-preset-list name="header" limit="1">
						<template nc-preset-key="custom-image" nc-preset-title="Zelf een afbeelding kiezen">
							<nc-image name="{%name%}-image" allow-link="true" attributes="class=text-center" width="240" ratio="1"></nc-image>
						</template>

						<template nc-preset-key="logo" nc-preset-title="Website logo">
							<?= NCCMS::getView('sections/logo') ?>
						</template>

						<template nc-preset-key="logo-footer" nc-preset-title="Website logo uit de footer">
							<?= NCCMS::getView('sections/logo-footer') ?>
						</template>
					</nc-preset-list>
				</div>

				<div class="bio_link-bio">
					<nc-module-output></nc-module-output>
				</div>

				<nc-preset-list name="content">
					<template nc-preset-key="social_media-icons" nc-preset-title="Sociale media iconen">
						<div class="social_media-icons">
							<?php foreach ($config->get('contact.socials', []) as $name => $link) { ?>
								<?php if (!empty($link)) { ?>
									<a class="social" href="<?= $link ?>" target="_blank" rel="noopener" title="<?= \Util\CaseStyles::kebabToName($name) ?> link">
										<?= NCCMS::getView('cms/icon', 'fa-brands fa-fw fa-2x fa-' . $name) ?>
									</a>
								<?php } ?>
							<?php } ?>
						</div>
					</template>

					<template nc-preset-key="social_media-buttons" nc-preset-title="Sociale media knoppen">
						<div class="links">
							<?php foreach ($config->get('contact.socials', []) as $name => $link) { ?>
								<?php if (!empty($link)) { ?>
									<p>
										<a class="btn btn-primary" href="<?= $link ?>" target="_blank" rel="noopener" title="<?= \Util\CaseStyles::kebabToName($name) ?> link">
											<?= NCCMS::getView('cms/icon', 'fa-brands fa-fw fa-lg fa-' . $name) ?>
											<?= \Util\CaseStyles::kebabToName($name) ?>
										</a>
									</p>
								<?php } ?>
							<?php } ?>
						</div>
					</template>

					<template nc-preset-key="text-for-links" nc-preset-title="Tekst voor links">
						<div class="links">
							<nc-text name="{%name%}-text" default="<a class='btn btn-primary' target='_blank' href='index.php?action=item&id=2&moduleid=<?= \Modules\Content\Content::getID() ?>'>Neem contact op</a>"></nc-text>
						</div>
					</template>

					<?php if (!$config->empty('contact.mail')) { ?>
						<template nc-preset-key="link-to-mail" nc-preset-title="Mail knop">
							<div class="links">
								<a class="btn btn-primary" href="mailto:<?= $config->contact['mail'] ?>">
									<?= NCCMS::getView('cms/icon', 'fa-envelope fa-fw fa-lg mr-2') ?>
									<?= $config->contact['mail'] ?>
								</a>
							</div>
						</template>
					<?php } ?>

					<?php if (!empty($config->contact['tel'])) { ?>
						<template nc-preset-key="link-to-tel" nc-preset-title="Bel knop">
							<div class="links">
								<a class="btn btn-primary" href="tel:<?= $config->contact['tel'] ?>">
									<?= NCCMS::getView('cms/icon', 'fa-phone fa-fw fa-lg mr-2') ?>
									<?= $config->contact['tel'] ?>
								</a>
							</div>
						</template>
					<?php } ?>

					<template nc-preset-key="addresses-list" nc-preset-title="Adressen als lijst">
						<?= NCCMS::getView('sections/addresses') ?>
					</template>

					<template nc-preset-key="addresses-maps" nc-preset-title="Adressen op kaart">
						<?= NCCMS::getView('sections/addresses-iframe') ?>
					</template>

					<template nc-preset-key="photo-with-link" nc-preset-title="Foto met link en tekst">
						<nc-image name="{%name%}-image" attributes="class=large-image" alt-visible="true" allow-link="true" ratio="1" width="640"></nc-image>
					</template>

					<template nc-preset-key="video" nc-preset-title="Video">
						<nc-youtube name="{%name%}-video" attributes="class=large-video"></nc-youtube>
					</template>

					<template nc-preset-key="content-slider" nc-preset-title="Content pagina selectie" nc-preset-access="content-select">
						<nc-content-select name="{%name%}-content-slider" view="slider" attributes="carousel-controls,carousel-indicators"></nc-content-select>
					</template>

					<template nc-preset-key="blog-slider" nc-preset-title="Extra module pagina selectie" nc-preset-access="blog-select">
						<nc-blog-select name="{%name%}-blog-slider" view="slider" attributes="carousel-controls,carousel-indicators"></nc-blog-select>
					</template>

					<template nc-preset-key="blog-item-last" nc-preset-title="Laatste module pagina weergeven" nc-preset-access="blog-feed">
						<nc-blog-feed name="{%name%}-blog-last" columns="1" rows="1"></nc-blog-feed>
					</template>
				</nc-preset-list>
			</div>
		</div>
	</div>
</div>

CSS
Kopiëren/* Colours */
.content-subtemplate-bio_link {
	background-color: var(--secondary-bg);
	color: var(--primary);
}

.content-subtemplate-bio_link .large-image .image-alt {
	color: var(--primary);
}

.content-subtemplate-bio_link .social_media-icons a.social {
	color: var(--primary);
}

/* Whitespace */

.content-subtemplate-bio_link {
	min-height: 100vh;
}

.content-subtemplate-bio_link [data-preset-count]>* {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.content-subtemplate-bio_link .links+.links {
	margin-top: 1rem;
}

.content-subtemplate-bio_link .links:has(+ .links) {
	margin-bottom: 1rem;
}

.content-subtemplate-bio_link .flex-auto-responsive {
	gap: 15px;
}

.content-subtemplate-bio_link .flex-auto-responsive>* {
	min-width: 400px !important;
}

/* Header */

.content-subtemplate-bio_link .bio_link-header {
	margin-top: 2rem;
	margin-bottom: 1rem;
	text-align: center;
}

.content-subtemplate-bio_link .bio_link-header img {
	max-width: 240px !important;
	width: auto !important;
	border-radius: var(--panel-radius);
}

/* Description */

.content-subtemplate-bio_link .bio_link-bio {
	text-align: center;
}

.content-subtemplate-bio_link .bio_link-bio>*:last-child {
	margin-bottom: 0;
}

/* Image with link */

.content-subtemplate-bio_link .large-image {
	position: relative;
	border-radius: var(--panel-radius);
	overflow: hidden;
}

.content-subtemplate-bio_link .large-image .image-alt {
	position: absolute;
	left: var(--panel-padding);
	bottom: calc(var(--panel-padding) / 2);

	font-size: 1.5em;
	pointer-events: none;
	text-shadow: 0px 0px 4px rgb(0, 0, 0, 1);
}

.content-subtemplate-bio_link .large-image a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5em;
	z-index: 1;
	background-image: linear-gradient(to bottom, transparent, rgb(0, 0, 0, 0.75));
}

.content-subtemplate-bio_link .large-image a img {
	transition-property: transform;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
}

.content-subtemplate-bio_link .large-image a:active img,
.content-subtemplate-bio_link .large-image a:focus img,
.content-subtemplate-bio_link .large-image a:hover img {
	transform: scale(1.1);
}

/* Social media icons */

.content-subtemplate-bio_link .social_media-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.content-subtemplate-bio_link .social_media-icons a.social {
	color: inherit;
	text-decoration: none;
}

.content-subtemplate-bio_link .social_media-icons .fa-brands {
	transition-property: transform;
	transition-duration: 250ms;
	transition-timing-function: ease-in-out;
}

.content-subtemplate-bio_link .social_media-icons .fa-brands:active,
.content-subtemplate-bio_link .social_media-icons .fa-brands:focus,
.content-subtemplate-bio_link .social_media-icons .fa-brands:hover {
	transform: scale(1.5);
}

.content-subtemplate-bio_link .btn:not(.btn-admin) {
	width: 100%;
}

.content-subtemplate-bio_link .contact-address-content {
	text-align: center;
	margin-bottom: 1rem;
}

.content-subtemplate-bio_link .contact-address-content address {
	margin-bottom: 0;
}

/* Sliders */

.content-subtemplate-bio_link .slider-indicators .disabled {
	display: none;
}

.content-subtemplate-bio_link .slider-control-prev,
.content-subtemplate-bio_link .slider-control-next,
.content-subtemplate-bio_link .slider-indicators li::after {
	font-size: 1.25em;
}

/* Menu en footer */

body:has(.content-subtemplate-bio_link) .nav-header {
	display: none;
}

body:has(.content-subtemplate-bio_link) .nav-footer .top {
	display: none;
}