ScrivitoLinklistWidget
A Scrivito widget for adding a list of links to a page. You can also use the titles of the individual links as CSS class names to style the links individually.
Installation
Add this line to your application's Gemfile:
gem 'scrivito_linklist_widget'
Localization
The following code represents the default localization for English. Copy it to your en.yml
and change it if necessary:
en:
scrivito_linklist_widget:
thumbnail:
title: Linklist
description: Add a Linklist for your page.
details:
show_as_css: Use link title as CSS class
links: Links
show_in_row: Show lists elems in a row
styles: Styles
``
## Customization
Usually, the widget just renders a list of links. To apply the CSS classes mentioned above, define the classes, for example, as follows:
```css
ul.list-with-css li {
float: left;
}
ul.list-with-css li a {
border-radius: 50%;
width: 100px;
height: 100px;
margin-left: 5px;
background-color: blue;
display: block;
}
ul.list-with-css li.my_css_class a:before {
content: '$'; // also using icon fonts is possible
margin: 0 auto;
display: block;
height: 20px;
width: 20px;
font-size: 20px;
line-height: 20px;
margin-top: 40px;
}
Your own list style
You can overwrite the partial to change the html for a list element. Create a partial at views/listlist_widget/_element.html.erb
and add your html. The partial get two parameters. widget
contains the widget and with widget.show_as_css?
and widget.show_in_row?
you can get if the option is set to Yes. The parameter link
contains the scrivito link. Look at http://www.rubydoc.info/gems/scrivito_sdk/Scrivito/Link to see how to use.
Example to add an icon from bootstraps glyphicon:
<li class="<%= widget.show_as_css? ? link.title : '' %>">
<% if widget.show_as_css? %>
<i class="glyphicon glyphicon-<%= link.title %>"></i>
<% end %>
<% if link.url %>
<%= link_to link.title, link.url %>
<% else %>
<%= link.title %>
<% end %>
</li>