Teaser layouts

Overview of standard teaser layouts to choose from in Base theme 2.

There are five main teaser types you can use:

• Teaser Image Top (default)

• Teaser Image Right

• Teaser Image Bottom

• Teaser Image Left

• Notice teaser - with and without image

The first 4 teaser layouts at different widths.

The deprecated teaser layouts (see below), and Notice teaser layout, at different widths.

Teasers can flex in height so every column in each row has the same height regardless how much text it contains.

These can be used in all central features of Naviga Web:

• Article List and Most Read widgets

• OC List and Content Container widgets

• Board widget and column teaser fallback

• Custom built solution can add and use these

Deprecated layouts

These old layouts are still available, but are going to be removed in version 2.0.0.

• Standard teaser: will default to Teaser Image Top in version 2.0.0 if left unchanged.

• Headline teaser: use Teaser Image Bottom instead. Looks the same.

• Small teaser: use Teaser Image Right instead. Looks almost the same.

What teasers are used?

You can configure what teaser layouts should be are available in Boards.

Create own addition teaser layout

Yes, you can easily develop your own teasers, and use your own in parallell with the Base theme teasers.

You can copy base theme teasers to start from if you want.

It is almost always easier to create an own teaser than trying to modify or override Base theme teasers. Use good naming convention for your own teaser code so you avoid conflicts on upgrades.

Please verify your own teasers and own style dependencies when upgrading Base theme on your site.

Customise existing teasers?

You have to decide what is best for you. Making changes means maintaining and testing on Base theme upgrades.

To give some guidance, these are probably ok to override:

• Minor css additions is usually ok, like color, font or background in a base theme teaser. Override with your own css in your child theme. - Low risk

• Hiding blocks with css is usually ok, like always hide teaser text, label or pubdate. - Low risk

And these are probably own code:

• Layout css can be done, but risky (margin, padding, separator). Not recommended. Creating your own teaser layout with own css will probably be safer on upgrades.
• Moving image position is not recommended. It you want to move around elements in the teaser, like image for example, you should create your own teaser.
• Modifying image crop is not recommended in existing base theme teasers. They are all 16:9. If you want another crop, you should create your own teaser layout instead.