templates/base.html.twig line 1
{% set is_homepage = (content.url == '/') ? true : false %}
{% set title = "" %}
{% if content.title is defined %}
{% set title = content.title ~ " | NDH" %}
{% endif %}
{% set subline = "" %}
{% for item in content.blocks %}
{% if item.type == "heading_dynamic" %}
{% if item.heading is defined and item.heading != "" %}
{% set subline = subline ~ item.heading %}
{% endif %}
{% if item.subline is defined and item.subline != "" %}
{% set subline = subline ~ " - " ~ item.subline %}
{% endif %}
{% endif %}
{% endfor %}
{% set media = sulu_content_path("/") ~ "/uploads/media/pageImage/05/715-NDH_DüsseldorfHafen_Containerterminal_nacht_DSC_0882.jpg?v=1-0" %}
{% if (content.image is defined) and (content.image is not empty) %}
{% set socialImage = sulu_resolve_media(content.image, app.request.locale) %}
{% if socialImage is not null %}
{% set media = sulu_content_path(socialImage.thumbnails["pageImage"]) %}
{% endif %}
{% endif %}
<!doctype html>
<html class="no-js" lang="{{ app.request.locale|split('_')[0] }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% block meta %}
{% include "@SuluWebsite/Extension/seo.html.twig" with {
"seo": extension.seo|default([]),
"content": content|default([]),
"localizations": localizations|default([]),
"shadowBaseLocale": shadowBaseLocale|default(),
"defaultLocale": app.request.locale
} %}
{% endblock %}
<meta itemprop="name" content="{{ extension.seo.title|default(title) }}">
<meta itemprop="description" content="{{ extension.seo.description|default(subline) }}">
<meta itemprop="image" content="{{ media }}">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="{{ extension.seo.title|default(title) }}">
<meta property="twitter:domain" content="{{ app.request.host|default('ndh.de') }}">
<meta property="twitter:url" content="{{ sulu_content_path(content.url)|default('https://ndh.de') }}">
<meta property="twitter:description" content="{{ extension.seo.description|default(subline) }}">
<meta property="twitter:image" content="{{ media }}">
<meta property="og:title" content="{{ extension.seo.title|default(title) }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ sulu_content_path(content.url) }}" />
<meta property="og:image" content="{{ media }}" />
<meta property="og:description" content="{{ extension.seo.description|default(subline) }}" />
<meta property="og:site_name" content="NDH" />
<meta name="google-site-verification" content="lTalCtrbJkvln6o2b1ZGmY3tx1lpKd9j3pEJ6CkJ0eA" />
{% block style %}{% endblock %}
<!-- Compressed CSS -->
<link rel="stylesheet" href="{{ asset("/library/css/app.css") }}">
<link rel="stylesheet" href="{{ asset("/library/css/style.css") }}?v={{ "now"|date("YmdHis") }}">
<link rel="stylesheet" href="{{ asset("/library/css/cookieconsent.css") }}">
<link rel="stylesheet" href="{{ asset("/library/css/fontawesome.all.min.css") }}">
<link rel="stylesheet" href="{{ asset("/library/css/motion-ui.min.css") }}" />
<link rel='stylesheet' href={{ asset("/library/css/slim-lightbox.min.css") }} type='text/css' media='all'>
<script type="text/javascript" src={{ asset("/library/js/slim-lightbox.min.js") }}></script>
<style>
/* Custom play button image url */
div[class^="youtube-player"] .play {
background: url({{ asset("/library/img/playbutton.png") }}) no-repeat;
}
</style>
</head>
<body {% if is_homepage %}class="is-homepage"{% endif %} data-sticky-container>
<div class="sticky header-bar" data-sticky data-options="marginTop:0;">
<div class="title-bar hide-for-large" data-hide-for="large" data-responsive-toggle="animated-menu">
<a href="/">
<img src="{{ asset("/library/img/NDH-Logo-small.png") }}" alt="NDH" style="max-width: 209px;">
</a>
<button class="menu-icon btn" type="button" data-toggle></button>
</div>
<header id="animated-menu" class="top-bar nd-top-bar" style="width:100%">
<div class="top-bar-left">
<nav class="grid-x grid-margin-x grid-padding-x align-justify align-middle">
<div class="cell small-auto large-shrink text-center large-text-left show-for-large logocontainer">
<a href="/">
<img src="{{ asset("/library/img/NDH-Logo-small.png") }}" alt="NDH" style="max-width: 209px;">
</a>
</div>
<ul class="cell auto vertical menu large-horizontal align-special"
data-responsive-menu="accordion large-dropdown"
data-submenu-toggle="true"
data-multi-open="false"
data-hover-delay="50"
data-closing-time="0"
aria-label="Hauptmenü">
{# This navigation doesn't need recursive logic because it's only 2 levels deep #}
{% for item in sulu_navigation_root_tree('main', 3) %}
<li {{ app.request.uri starts with sulu_content_path(item.url) ? 'class="is-active-special"' : '' }}>
<a href="{{ sulu_content_path(item.url) }}">
{{ item.title }}
{{ item.children|length > 0 ? '<span class="sub-arrow"> <i class="fas fa-plus-square"></i></span>' : '' }}
{{ app.request.uri starts with sulu_content_path(item.url) ? '<span class="sr-only">(current)</span>' : '' }}
</a>
{% if item.children|length > 0 %}
<ul class="nested menu">
{% for child in item.children %}
<li {{ app.request.uri starts with sulu_content_path(child.url) ? 'class="is-active"' : '' }}>
<a href="{{ sulu_content_path(child.url) }}">
{{ child.title }}
{{ child.children|length > 0 ? '<span class="sub-arrow"> <i class="fas fa-plus-square"></i></span>' : '' }}
{{ app.request.uri starts with sulu_content_path(child.url) ? '<span class="sr-only">(current)</span>' : '' }}
</a>
{% if child.children|length > 0 %}
<ul class="nested menu">
{% for grandchild in child.children %}
<li {{ app.request.uri starts with sulu_content_path(grandchild.url) ? 'class="is-active"' : '' }}>
<a href="{{ sulu_content_path(grandchild.url) }}">
{{ grandchild.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</header>
</div>
<main>
{% block content %}{% endblock %}
</main>
{# Page-based breadcrumb section with custom News adaption #}
{% if app.request is defined %}
<nav aria-label="Sie sind hier:" role="navigation" class="large">
<article class="grid-container">
<ul class="breadcrumbs pull-width">
{% if "/news/" in app.request.pathInfo %}<li>
<a href="/news">News</a>
{% if news %}
<img aria-hidden="true" class="nd-breadcrumb-icon" src="{{ asset('/library/img/nd_icon_breadcrumbs.png') }}" alt="ND Group Icon" />
<a href="{{ app.request.pathInfo }}" aria-current="page">{{ news.title }}</a>
{% endif %}
</li>
{% else %}
{% if uuid is defined %}
{% for item in sulu_breadcrumb(uuid)|slice(1) %}
<li>
<a href="{{ sulu_content_path(item.url) }}" {{ loop.last ? 'aria-current="page"' : '' }}>{{ item.title }}</a>
{% if not loop.last %}
<img aria-hidden="true" class="nd-breadcrumb-icon" src="{{ asset('/library/img/nd_icon_breadcrumbs.png') }}" alt="ND Group Icon" />
{% endif %}
</li>
{% endfor %}
{% endif %}
{% endif %}
</ul>
</article>
</nav>
{% endif %}
<footer class="callout large primary">
<article class="grid-container">
<div class="grid-x pull-width">
<div class="large-3 cell">
<ul class="menu vertical">
{% for item in sulu_navigation_root_tree('meta', 2) %}
<li><a href="{{ sulu_content_path(item.url) }}" target="_self">{{ item.title }}</a></li>
{% endfor %}
<li><a href="javascript:void(0);" id="cc-revoke-choice" target="_self">Cookie-Einstellungen</a></li>
</ul>
</div>
<div class="large-4 large-offset-1 cell">
<p><strong>Neuss-Düsseldorfer Häfen</strong><br>Hammer Landstraße 3<br>41460 Neuss<br>Tel.: +49
2131 5323-0<br>Fax: +49 2131 5323-105<br>E-Mail: <a href="mailto:info@nd-haefen.de" class="contact-email">info@nd-haefen.de</a>
</p>
<p><strong>Geschäftsführer:</strong><br>Ass. iur. Sascha Odermatt, Rechtsanwalt</p>
</div>
<div class="large-3 large-offset-1 cell"><strong>NDH im Social Web</strong>
<div class="social-icons-wrapper d-flex justify-content-start gap-5 mt-2">
<a href="https://www.facebook.com/NDHaefen" target="_blank" class="button-wrapper socialicon">
<span class="btn btn-primary"><i class="fab fa-facebook-f text-dark"></i></span>
</a>
<a href="https://www.instagram.com/ndhaefen" target="_blank" class="button-wrapper socialicon">
<span class="btn btn-primary"><i class="fab fa-instagram text-dark"></i></span>
</a>
<a href="https://de.linkedin.com/company/neuss-d%C3%BCsseldorfer-h%C3%A4fen-gmbh-&-co.-kg" target="_blank" class="button-wrapper socialicon">
<span class="btn btn-primary"><i class="fab fa-linkedin-in text-dark"></i></span>
</a>
</div>
</div>
</div>
</article>
</footer>
<button class="scrollToTopBtn" aria-description="An den Seitenanfang scrollen">TOP</button>
<script src="{{ asset('/library/js/jquery-3.7.1.min.js') }}"></script>
<!-- Compressed JavaScript -->
<script src="{{ asset('/library/js/foundation.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.core.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.mediaQuery.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.keyboard.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.motion.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.triggers.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.nest.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.touch.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.util.box.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.drilldown.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.accordion.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.accordionMenu.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.dropdown.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.dropdownMenu.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.responsiveMenu.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.responsiveToggle.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.orbit.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.sticky.min.js') }}"></script>
<script src="{{ asset('/library/js/foundation.toggler.min.js') }}"></script>
<script>
$(document).foundation();
let scrollBefore = 0;
let ticking = false;
let hidden = false;
let lockHide = false;
let mobileIndicatorEl = document.querySelector('.title-bar');
let mobileIndicatorStyle = window.getComputedStyle ? getComputedStyle(mobileIndicatorEl, null) : mobileIndicatorEl.currentStyle;
let isMobile = (mobileIndicatorStyle.display !== "none");
document.querySelector('header').addEventListener('mouseenter', (e) => {
lockHide = true;
});
document.querySelector('header').addEventListener('mouseleave', (e) => {
lockHide = false;
});
window.addEventListener("scroll", handleScroll);
// get a reference to our predefined button
var scrollToTopBtn = document.querySelector(".scrollToTopBtn");
function handleScroll() {
if (!isMobile) {
if (!ticking) {
window.requestAnimationFrame(() => {
const scrolled = window.scrollY;
if (scrollBefore > scrolled) {
if (hidden) {
ticking = true;
$('header').fadeTo('fast', 1, () => { ticking = false; hidden = false; });
if(scrollToTopBtn.classList.contains("showScrollBtn"))
scrollToTopBtn.classList.remove("showScrollBtn")
} else {
ticking = false;
}
scrollBefore = scrolled;
} else {
if (!hidden && !lockHide) {
ticking = true;
$('header').fadeTo('fast', 0, () => { ticking = false; hidden = true; });
if(!scrollToTopBtn.classList.contains("showScrollBtn"))
scrollToTopBtn.classList.add("showScrollBtn")
} else {
ticking = false;
}
scrollBefore = scrolled;
}
});
ticking = true;
}
}
}
scrollToTopBtn.addEventListener("click", scrollToTop);
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
}
function decryptEmail(encoded) {
var address = atob(encoded);
window.open("mailto:" + address, '_blank') || window.location.replace("mailto:" + address);
}
</script>
<script type='text/javascript' src={{ asset("/library/js/cookieconsent2.min.js") }} id='cookieconsent-js' defer></script>
<link rel="stylesheet" id="cookieconsent-css" href={{ asset("/library//css/cookieconsent2.css") }} type="text/css" media="all">
{% set snippets = sulu_snippet_load_by_area('cookieconsent') %}
{% if snippets %}
{% set cookies = snippets.content %}
<script defer>
window.addEventListener('load', function() {
const CC = window.CookieConsent;
const cc = new CC({
mode: 'disabled',
type: 'opt-in',
revokable: true,
consentSettingsElementId: 'cc-revoke-choice',
cookie: {
domain: '{{ app.request.host }}',
},
layout: 'categories',
showLink: false,
palette:{
popup: {background: "{{ cookies.popup_bg|default("#FFFFFF") }}", text: "{{ cookies.popup_text|default("#000000") }}", link: "{{ cookies.popup_text|default("#000000") }}"},
button: {background: "{{ cookies.button_bg|default("#0069b2") }}", text: "{{ cookies.button_text|default("#FFFFFF") }}", link: "{{ cookies.button_text|default("#FFFFFF") }}"},
},
position: '{{ cookies.position|default("bottom-left") }}',
content: {
header: '{{ cookies.title }}',
message: `{{ cookies.description|raw }}`,
allow: '{{ cookies.btn_accept }}',
dismiss: '{{ cookies.btn_decline }}',
deny: '{{ cookies.btn_decline }}',
customize: '{{ cookies.btn_settings }}',
acceptSelected: "Auswahl speichern",
close: "❌",
policy: 'Cookie-Richtlinie',
target: '_blank',
link: 'Datenschutzerklärung',
href: '/datenschutz',
privacyPolicyLink: '/datenschutz',
cookiePolicyLink: '/datenschutz',
customizeHeader: '<strong>Ihre Einstellungen</strong>',
categoryUncategorizedDisplayName: 'Ohne Kategorie',
categoryEssentialDisplayName: 'Notwendige Cookies (immer aktiv)',
categoryPersonalizationDisplayName: 'Personalisierungs-Cookies',
categoryAnalyticsDisplayName: 'Analytische Cookies',
categoryMarketingDisplayName: 'Marketing Cookies',
categoryEssential: `Diese Cookies sind notwendig, damit diese Website ordnungsgemäß und sicher funktioniert.`,
categoryAnalytics: 'Diese Cookies sammeln Informationen über unsere Besucher, einschließlich des geografischen Standorts und der für den Zugriff auf die Website verwendeten Technologie. Wir fassen diese Daten zusammen und verwenden sie, um unsere Website und Produkte zu verbessern.',
customizeMessage: `Hier finden Sie eine Übersicht über die Cookies, die wir auf dieser Website verwenden. Bitte wählen Sie die Kategorien aus, mit denen Sie einverstanden sind:`,
},
elements: {
policiesLinks: '',
},
showCategories: {
[CC.UNCATEGORIZED]: false,
[CC.PERSONALIZATION]: false,
[CC.ESSENTIAL]: true,
[CC.ANALYTICS]: true,
[CC.MARKETING]: false,
},
{#
/*
overrideHTML: '<div role="dialog" aria-live="polite" aria-label="cookieconsent" aria-describedby="cookieconsent:desc" class="cc-window cc-floating cc-type-opt-in cc-theme-block cc-bottom cc-left cc-color-override--1391549038" style="background-color:{{ cookies.popup_bg }};text-align: left;color: {{ cookies.popup_text }};font-family: \'Open Sans\', Sans-serif !important; font-size: 1em;font-weight: 400;font-style: normal; box-shadow: rgb(0 0 0 / 6%) 0px 0px 20px 10px">' +
'<!--googleoff: all-->' +
'<span class="cc-header">' +
'{{ cookies.title }}' +
'</span>' +
' ' +
'<span id="cookieconsent:desc" class="cc-message">' +
'{{ cookies.description|raw }}' +
'</span>' +
'<div class="cc-compliance cc-highlight">' +
'<a aria-label="dismiss cookie message" role="button" tabindex="0" class="cc-btn cc-DISMISS" style="background-color: {{ cookies.button_bg }}; color: {{ cookies.button_text }}; border: none; text-decoration: none; font-family: \'Open Sans\', Sans-serif; text-transform: uppercase;">{{ cookies.btn_decline }}</a>' +
'<a data-bs-toggle="modal" data-bs-target="#ccSETTINGSmodal" aria-label="settings cookie message" role="button" tabindex="0" class="cc-btn cc-SETTINGS" style="background-color: {{ cookies.button_bg }}; color: {{ cookies.button_text }}; border: none; text-decoration: none; font-family: \'Open Sans\', Sans-serif; text-transform: uppercase;">{{ cookies.btn_settings }}</a>' +
'</div>' +
'<div class="cc-compliance" style="margin-top: 10px;">' +
'<a aria-label="allow cookies" role="button" tabindex="0" class="cc-btn cc-ALLOW" style="background-color: {{ cookies.button_bg }}; color: {{ cookies.button_text }}; border: none; text-decoration: none; font-family: \'Open Sans\', Sans-serif; text-transform: uppercase;">{{ cookies.btn_accept }}</a>' +
'</div>' +
'<!--googleon: all-->' +
'</div>'
*/
#}
});
cc.on( "initialized", ( ...args ) => {
console.log(args);
const hasConsented = cc.popup.hasConsented().includes(true);
if (hasConsented) {
var _paq = window._paq = window._paq || [];
// tracker methods like "setCustomDimension" should be called before "trackPageView"
_paq.push(["setDomains", ["*.ndh.de","*.www.ndh.de","ndhaefen-web-01.ndhaefen.recast-it.net","*.ndhaefen-web-01.ndhaefen.recast-it.net"]]);
_paq.push(["enableCrossDomainLinking"]);
_paq.push(["setDoNotTrack", true]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['rememberConsentGiven']);
(function() {
var u="//ndhaefen-web-01.ndhaefen.recast-it.net/rc-matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
}
});
cc.on( "statusChanged", ( ...args ) => {
var status = [...args];
console.log(status);
if (status[0] === "cookieconsent_status_ANALYTICS"
&& status[1] === "ALLOW") {
var _paq = window._paq = window._paq || [];
// tracker methods like "setCustomDimension" should be called before "trackPageView"
_paq.push(["setDomains", ["*.ndh.de","*.www.ndh.de","ndhaefen-web-01.ndhaefen.recast-it.net","*.ndhaefen-web-01.ndhaefen.recast-it.net"]]);
_paq.push(["enableCrossDomainLinking"]);
_paq.push(["setDoNotTrack", true]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['rememberConsentGiven']);
(function() {
var u="//ndhaefen-web-01.ndhaefen.recast-it.net/rc-matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
}
$(".cc-window").hide();
{#
// TODO:
//Matomo akin to https://developer.matomo.org/guides/tracking-consent
//implement with
// remember tracking consent was given for all subsequent page views and visits
//_paq.push(['rememberConsentGiven']);
// OR remember cookie consent was given for all subsequent page views and visits
//_paq.push(['rememberCookieConsentGiven']);
#}
});
cc.on( "revokeChoice", () => {
// Call revoke
$(".cc-window").hide();
});
cc.on('popupClosed', function () {
cc.initCookies();
});
cc.on( "error", console.error );
cc.initCookies = function(grantAll = false) {
const allowedCategories = cc.getAllowedCategories(grantAll);
const scripts = cc.getScripts();
for (item of allowedCategories) {
if (scripts[item].length > 0) {
for (script of scripts[item]) {
cc.enableScript(script);
}
}
}
}
cc.getAllowedCategories = function(grantall = false) {
const permissions = [], allPermissions = [];
const userConsents = cc.consents;
for (const category in userConsents) {
allPermissions.push(category.toLowerCase());
if (userConsents[category] === 'ALLOW') {
permissions.push(category.toLowerCase())
}
}
return (!grantall) ? permissions : allPermissions;
}
cc.getScripts = function() {
// Get all scripts that are hooked by the CC plugin.
return {
uncategorized: document.querySelectorAll('[data-cc-consent-uncategorized]'),
essential: document.querySelectorAll('[data-cc-consent-essential]'),
personalization: document.querySelectorAll('[data-cc-consent-personalization]'),
analytics: document.querySelectorAll('[data-cc-consent-analytics]'),
marketing: document.querySelectorAll('[data-cc-consent-marketing]')
};
}
});
</script>
{% endif %}
</body>
</html>