From Static Content to Widgets

From Static Content to Widgets

If you have content, e.g. static HTML markup, and want to adapt it for delivery by your Scrivito-based website app, this short tutorial gives you an example and a general idea of how to proceed.

This guide is based on our instructions for integrating Scrivito. You can complete it in no time after creating your Scrivito account.

Utilizing the “Page” model class

For the sake of simplicity, we're assuming that you have a “Page” model class from your initial SDK integration and want your app to deliver a page like the one shown here.

If you would like to take a look at the “Page” model, here it is:

As you can see, the model includes an attribute, body, whose type is widgetlist. This is the attribute we're going to populate with widgets later on.

Adapting the “Page” view

Your app is equipped with an “index” view for rendering instances of the “Page” model: “app/views/page/index.html.erb.” It's a good idea to have this view render the static content first, just to see how it fits into the rest of the layout, for example.

So, first put the relevant parts of the markup (presumably the contents of the body tag) into this view.

Then fire up your Rails app and open its URL in your browser. Make sure that you are in editing mode, then create a page of the “Page” type using the top right menu:

Utilizing the page view, the static content should be displayed on the new page. Usually, you'd proceed by providing the images and replacing various tags with Rails tag helpers (e. g. image_tag). With Scrivito, you replace ​everything​ with Scrivito tag helpers. Also, unwanted or conflicting styles presumably require some cleanup.

Making the view accept widgets

Now, this is the crucial step that lets you transfer your content to widgets: Remove the content from the view, the headline, the paragraphs, the image, everything, including the tags. Then insert the Scrivito helper call for rendering the body attribute where the static content was:

That's it! Reload the page in your browser. Can you see the gray box representing the body attribute?

Restoring the content in place

Let’s add some content! If we have static content like the document shown above, we can immediately discriminate three types of content: a headline, one or more paragraphs, and an image. And this is where widgets come into play:

  • Click the plus sign in the gray box. This opens the widget browser, letting you select the kind of widget to insert into this box.
  • Select the ”Headline” widget.
  • Copy the headline from your static page to the clipboard.
  • On your Scrivito page, click inside the “Headline” widget, then paste the text from your clipboad to the widget.

When you hover over a widget, its borders as well as handles become visible. Click the bottom plus handle to add another widget to the page, this time a “Text” widget. Then repeat the steps above to transfer the paragraphs to the Scrivito page.

Finally, add an image widget below the text widget(s). Simply save the image from your static page to your desktop, then drag it onto the placeholder of the image widget to upload it and include it on the page.

After transferring the static content to widgets, this is roughly what the resulting page should look like:

As you can see, we've used a single “Text” widget for the three paragraphs. Alternatively, you might of course dedicate an individual “Text” widget to each paragraph.

That's it!

Congratulations, you've made your Scrivito-based app ready to accept existing content and have rebuilt a page using widgets.

If you have other types of content you would like to include on pages, please take a look at the widget gallery first, so you don't have to reinvent the wheel. Or, create another page type or a new widget type.