ScrivitoSectionWidgets

This gem adds Scrivito widgets for sections, header videos and parallax effects to your app.

Add this line to your application's Gemfile:

gem 'scrivito_section_widgets'

Add this line to your stylesheet manifest:

*= require scrivito_section_widgets

If you use sass-rails for your application stylesheet manifest (e.g. application.scss or application.css.scss) add the following:

@import "scrivito_section_widgets/base_section";
@import "scrivito_section_widgets/parallax_section";
@import "scrivito_section_widgets/colors";

Add this line to your JavaScript manifest:

//= require scrivito_section_widgets

Using Bootstrap 3? Nothing to do.

If you are not using Bootstrap, the width of the DOM element defining the page, should be set to 100%. The widget adds a new DOM element named section. The class named .container defines the width of the page.

For Example:

#wrap { // This comes from your CSS or CSS framework
  width: 100%;
  padding: 0;
  margin: 0;
}

section .container { // This is the style for the widget
  width: 1170px; // Change for your main width if needed
  padding: 15px 0;
  margin: 0 auto;
}

If your app already includes a class named Video, please make sure that it defines the blob attribute as a binary.

class Video < Obj
  attribute :blob, :binary
  ...
end

We recommend to define the valid widget class method in your obj.rb. It lets you specify that sections can only be created at the top level of a page.

def valid_widget_classes_for(field_name)
  if field_name == "body" # This is your main content field
    Obj.section_widgets
  else
    Scrivito.models.widgets.to_a - Obj.section_widgets
  end
end

def self.section_widgets
  [SectionContentWidget, SectionVideoWidget, SectionParallaxWidget]
end

The following code represents the default localization for English. Copy it to your en.yml and change it if necessary:

en:
  scrivito_section_content_widget:
    thumbnail:
      title: Section
      description: Add a section for your content. A Section can have a Background color to seperate some content
    details:
      background_color: Background Color
      padding_size: Padding top and bottom
      styles: Styles
  scrivito_section_parallax_widget:
    thumbnail:
      title: Parallax
      description: Add an image with parallax effect
    details:
      background_image: Background Image
      speed: Speed
      height: Height
  scrivito_section_video_widget:
    thumbnail:
      title: Background Video
      description: Add a background Video as section to your page
    details:
      background_video_mp4: Video MP4
      background_video_webm: Video WebM
      background_video_ogg: Video OGG
      background_image: Background Image
      height: Height

There is also an attribute for different styles. It holds a class for different styles like drop_shadow, more_margin, highlight, ...

Using advance editors, you can define the selectable classes by adding a class method to your obj.rb:

  class Obj < Scrivito::BasicObj
    ...
    def self.scrivito_selectable_style_classes
      ['drop_shadow','margin_top','move_left','highlight', 'rounded']
    end
    ...
  end

Than you have to define a css class for your selections:

  .drop_shadow {
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.3);
  }

  .margin_top {
    margin-top: 10px;
  }

  .move_left {
    width: auto;
    margin-left: -20px;
  }

  .highlight {
    outline: #cc0000 solid 3px;
  }

  .rounded {
    border-radius: 5px;
  }