KSPR kaspar-allenbach

Craft 3 Learning Curve

I try to create a comprehensive tag list of Old vs new craft tags. SO lets start Craft 3 Changes

All loops have to be called with .all()
Macros have to be imported in EVERY file they apear. Not just in the parent file 🤬
_self macros have to be imported into the parent macro with {% import _self as macro %} SE Querstion

Accessing the settings in general.php

Craft CMS Language Switcher


{% set otherLocales = craft.i18n.getSiteLocaleIds() %}
<li class="languageSwitch">
  {% for locale in otherLocales %}
 {% set localeEntry = craft.entries.id(entry.id).locale(locale).first %}

In Craft CMS 3 there are some minor adjustements to make when setting up a localized website. The Old Guide to setup a localized Site is still valid with some differences.

File Setup

You have to create a language folder in the public directory with a .htaccess and a index.php

Let's say you want english as a second language with the url extension yourdomain.com/en.

create a folder en.

Nobody Likes FOUT

Use: Webfontloader https://github.com/typekit/webfontloader
Figthing the FOUT: https://www.paulirish.com/2009/fighting-the-font-face-fout/

It's best to inline all this stuff in the header. Then it will be loaded at first.

	// ----
	// Sass (vundefined)
	// Compass (vundefined)
	// dart-sass (v1.18.0)
	// ----

	$gridBaseNumber: 12;

	//check for ie methods
	var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

	//start if ie
	if (isIE11 == true) {
	//add tags to body to write scoped css
	document.body.className += " " + "internetExplorer ie11"
	//add div element to warn users that they are using an outdated browser
	window.document.body.insertAdjacentHTML( 'afterbegin', '<div class="oldIE">You are using an outdated Browser…</div>' );
	}

	{# Set parameters for prev/next elements list #}
	{% set params = craft.entries.section('blogEntry').order('title asc') %}

	{# Get the prev/next elements #}
	{% set prevEntry = entry.getPrev(params) %}
	{% set nextEntry = entry.getNext(params) %}

	{# And make sure to only output the links if the element exists #}
	<div class="blogPagination">
	{% if prevEntry %}

	.parentElement {
	display: grid; // yeah okay
	grid-template-columns: repeat(12, 1fr); // make 12 columns with 1 fraction each
	//alt: grid-template-columns: 3fr 1fr 1fr 1fr 3fr; // make a column 3fr wide at the beginning and end (px % vw allowed)
	grid-auto-rows: minmax(5vh, auto); // make each row min 5vh in height otherwise apply autogrow
	grid-gap: 20px; // add grid
	}
	.childItem {
	grid-column: 2/6; // .childItem runs from axis 2 to axis 6
	@include smDown {

	@mixin fade($fadeValue: color) {
	transition: $fadeValue 0.3s linear;
	-webkit-transition: $fadeValue 0.3s linear;
	-moz-transition: $fadeValue 0.3s linear;
	}

	$hamburgerLineSize: 5px;
	$hamburgBtnSize: 20px;

	.mmenuToggle {

	// Addaption of https://davidwalsh.name/write-media-queries-sass

	$xl-width: '1200px';
	$lg-width: '992px';
	$md-width: '786px';
	$sm-width: '576px';

	@mixin xlUp {
	@media (min-width: #{$xl-width}) { @content; }
	}