Content is now 70% Off - get it ASAP

The Content-Templates are in charge of simple layouts like arrangements of images with text. They have grown in complexity, but thanks to new features in 2sxc 12 and now 12.04 we could now simplify them like crazy. 

TL;DR - What this Means for You

We dramatically simplified the Content-Templates reducing the amount of code used and making much of the functionality Settings-based. This helps you ensure a consistent look/feel/functionality across your sites and apps, and makes it much easier to customize.

70% Less Code

The Razor should generate HTML to determine the layout and sizes of the elements we show. With time though, additional automation and complexity became necessary - like to detect the CSS-framework in the theme or to create URLs for Image Resizing. This is now almost fully automated:

• The amount of razor/cs files was reduced by 50%
• The size of the files was reduced by 50%
• ...and of that, much more is comments
• Resulting in a code-reduction of 70%

What made this possible?

1. New View-Settings made it possible to have fewer files which vary by setting
2. New Link.Image feature with Settings.Images allowed for much shorter code
3. New WebResources features in 12.04 reduced ca. 50 lines of C# code
4. Removing jQuery and using turnOn reduced more than 100 lines of TypeScript code

Consistent Image Resizing with Settings

All the images now use the the Link.Image(...) method to generate image-resize URLs based on the Settings. This varies by use (Content, Lightbox, etc.) and use case (like full-width, 4-in-a-row etc.). It's now fully automatic - so you can reconfigure these settings at global, site or app-level to get the results you need. 

Lazy Images by Default

Many websites have special javascripts which check if an image is visible to the user or if it's far away and not yet relevant. This speeds up page loading but has it's issues. HTML 5 now has a concept of lazy-loaded images which is built into most browsers. This is now built in everywhere - so horray PageSpeed 🚀.

Settings Based WebResource JS/CSS Management

Just like the images, WebResources (like the third-party fancybox-library) are integrated based on settings. Check out the PageService.Activate feature to learn more. 

No more jQuery

We are really concerned with performance - and that includes getting rid of jQuery where possible. The previous Content-Templates used jQuery for lightboxes and integrating google-maps. Fortunately fancybox4 was just released which didn't require jQuery, and with newer features like turnOn we were able to completely remove jQuery from the dependencies. Horray for even more points on Google PageSpeed 🚀.

turnOn for Lightboxes and Maps

An old pattern to start JavaScript was to either use $(loadFunction) or to let it auto-load once loaded, usually scanning the entire DOM for instances of a class or something. This had many issues like scripts initializing multiple times, or scripts which didn't do their job right when the content was lazy/ajax loaded. 

Now the Content-Templates use turnOn for all the JS activation, and everything is under control with a clear flow of initialization. It also ensures that things stay separate when needed - for example, the fancybox in the content won't mix with the fancybox in the gallery. 

Prepared for Bootstrap5

Bootstrap5 is here and already the default on Oqtane 2.2, so we really had to hurry and make some adjustments so our new content-templates work with BS5. It's not perfect yet, but we also re-organized the folders and everything so that BS5 can be included later on with minimal changes. 

CSS Generation with SASS Improved

CSS generated in Apps often require some parameters - like the $primaryColor. Previously we linked to the variables of the theme to get these - which is great for sophisticated solutions. But if people are just getting started and maybe have never heard of SASS before, this makes it harder to get going because the need a theme which has variables, and they must adjust folders - so easy to get wrong. 

In our latest release, everything is included so you can just run npm ci and then npm run build-bs4 to build everything. It will work without the Theme variables, but you can also use them if you want.

100% Hybrid Best Practice - for Dnn and Oqtane

Everything we did now adheres to the best-practices of Hybrid Razor/C# code, so it works for Dnn and Oqtane right out of the box. This makes it easier to learn Hybrid Razor and also ensures that Sites created like this could be migrated to the other platform as needed. 

Get it Now

These Content-Templates only work if you have 2sxc 12.04 installed, and they will be auto-installed on new sites. 

Love from Switzerland,
iJungleboy, Roman and Tom