Tips & Tricks

Here are some of the most commonly used tips, tricks and bits of code used with Contao.


Isotope - Displaying SKU with product name on ISOTOPE > Orders page

In the event you are upgrading an Isotope site, or making a new one, and you want to display the product's SKU beside its' name on the Orders page, modify the 'iso_collection"default.html5' template. Making this note because it had been so long since it was done on Butler nobody could remember easily how it was accomplished.

Using 'sr_only' or 'invisible' classes

If you would like to hide an element but still have it accessible to screen readers you can either use 'invisible' which is built into Contao or 'sr_only' from the Framework. They will both give the same result.

<!-- Lets hide this screen reader only text for a Fontawesome icon using the Framework -->
<i class="fab fa-smile"></i><span class="sr_only">Fontawesome Icon</span>

<!-- Lets hide this screen reader only text for a Fontawesome icon using Contao -->
<i class="fab fa-smile"></i><span class="invisible">Fontawesome Icon</span>

Isotope - Custom Gallery Template

While creating a Product Reader page you might find yourself in a situation where you need to customize the gallery's HTML markup. Use the following code snippet to specify a custom template when using Isotope's generateGallery() function.

<?php
	// Specify the gallery in question
	$gallery = $this->getGallery('product_lightbox_gallery');
	// Specify the custom template
	$gallery->setTemplate('iso_gallery_inline_lightbox');
	// Display the gallery
	echo $gallery->generateGallery();
?>

Templating - If User Logged In

If you are creating a template and want to add unique code depending on if the user is logged in you can use Contao's 'FE_USER_LOGGED_IN' flag. Check the code sample below for an if statement example.

<?php
	// IF user IS logged in
	if(FE_USER_LOGGED_IN == true) { echo "User is logged in"; }
	// IF user IS NOT logged in
	if(FE_USER_LOGGED_IN != true) { echo "User is not logged in"; }
?>

Generate CSS Gradients & Drop Shadows

Shadow Generator: https://shadows.brumm.af/
Gradient Generator: https://cssgradient.io/