Skip to main content
Home  ›  Blog

Content Templates 10.24 Massively Improved

We've done a major overhaul of the Content-Templates for 2sxc 10.25. What's new:

Folder Structure

All templates are now organized by Content-Type, so all the video-templates are in the folder Video etc. This makes it much easier to work with. 

FancyBox 3

The Content Templates now all come with Fancybox 3 for a more modern, sophisticated look 😉.

Now 31 Content Templates

We've added more video templates to the existing solution, so now you also have Video-Right, Left, etc. with preview images. Click on the video plays it in the super-nice Fancybox 3. 

FontAwesome 5.12 Update

The icon library was completely updated to FontAwesome 5.12.

What's even better is that the setting for what Icons to load is now in the App-Settings, thanks to an enhancement we added in 2sxc 10.25! This makes it easier to include a newer version if ever you need it. 

Bootstrap Detection and Code Separation with KOI

The Bootstrap 3 vs. Bootstrap 4 code is now completely separate, allowing you to better remove one or the other if you don't need it. This makes it much easier for you to make changes as you need them. 

Previously a lot of the code contained things like this:

<div @Koi.Class("bs3='col col-sm-12' bs4,oth='col-md-12'")>

This was logic which detected the Bootstrap in use and gave it different classes. It was nice because we could deploy the templates and they just worked like magic, but when you wanted to make changes later on it felt very messy. The new solution has separate files for BS3/4, so the same tag is now simply:

<div class="col-md-12">

The header that checks if it should switch to Bootstrap 3 looks like this - and you can just delete it if you don't need it :)

@if(Connect.Koi.Koi.Is("bs3")) {
 @RenderPage("../bs3/Content/_Image full-width text.cshtml")

Alignment to 2sxc 10.25 Coding

We've updated all the code to the latest conventions of 2sxc 10.25. This includes using RazorComponents, not loading jQuery when not needed and more. 

Performance Tuning for Mobile PageSpeed

With our changes we were able to get 97% on PageSpeed Mobile - how awesome is that 🚀!

To achieve this, we leveraged new features in 2sxc 10.25 which allows us to not load jQuery etc. when we don't need it. 

Google Maps API Key now in App-Settings

Whenever you use the content-templates you must create a Google-Maps API key for your site. This was difficult before, because you had to change JavaScript files. Now it's simply in the App-Setting, thanks to enhancements in 2sxc 10.25. 

Note: Bug in first Release 10.00

End of December 2019 we already released new content-templates with the version 10.00, but without the new video templates and without the jQuery enhancements. Because 2sxc 10.25 changed that jQuery wasn't always included, some fancyboxs may not work if you're using that. To fix this, simply update the /Shared/_Assets.cshtml files of your installation with the ones from the latest code

Get it now

Because the new code requires 2sxc 10.24+ it will only be provided on newer 2sxc installations. Get your latest 2sxc from github and try out the new content-templates now!

Love from Switzerland,

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler