The Scrivito example app is a collection of some of the most used pages and widgets available with Scrivito integration. Some customers even use the example app as written and just update the content to fit their business. While the example app is designed to show you the many options available with Scrivito, they are not the only options. The flexibility of Scrivito allows you to customize just about every part to fit your needs. Add, remove, write your own... Scrivito was designed to put you in control, not to be in the way.

Recently we were asked how to add an image to the heading of a card widget. We thought this was a really nice option, was pretty easy to implement and shows just how flexible and easy Scrivito can be.

First, we want to add another attribute to the model. The heading_image attribute is of the reference type and serves as a pointer to the image to use.

Next, we want to add the option to select an image for the heading in the widget properties:

The scrivito_tag helper not only displays the image on the properties view but also lets you select one in Edit mode using the Content Browser.

Next, on the actual pages containing this widget, we want to add the image to the already existing “panel heading” div and show.heading “if” statement:

Finally, we need to sprinkle in a little jQuery to make the data tag work properly:

Don't forget to add this file to your Javascripts manifest.

That is it. Now, if an editor clicks the handle of a card widget (at the upper right corner) and selects “Widget properties” they will have the option to add a “Heading Background Image”.

Let us know what customizations you want. We are happy to work with you to make it happen.