SimpleLayout provides block based content pages
Project description
Introduction
SimpleLayout provides an intuitive way of adding and arranging the different elements of a page such as paragraphs, images, files and links using drag-and-drop functionality. These elements are implemented as addable and easily arrangeable “blocks”. Because of the restricted dimensions of text, images and other content elements, the general result is content with a uniform look and feel throughout the site.
Alpha state
This package is ready for production, but has no uninstall profile. Minor and Major changes may occur until the final version, but we will provide an uprade path. Plone 4.3.x stylings only covers the essentials, you may install ftw.simplelayout along with plonetheme.onegovbear,which ships with a nice simpelayout interface.
Compatibility
Plone 4.3.x
Plone 5
Plone 5 is supported but without any default contenttypes.
Installation
Add the package to your buildout configuration (Plone 4.3.x with ContentTypes):
[instance]
eggs +=
...
ftw.simplelayout[contenttypes]
With mapblock:
[instance]
eggs +=
...
ftw.simplelayout[contenttypes, mapblock]
Or wihtout any extras (Plone 5 is supported):
[instance]
eggs +=
...
ftw.simplelayout
Then you got several profile from wich you can choose from:
ftw.simplelayout lib profile - Just the basics without any ContentTypes. This profile is also available for Plone 5
ftw.simplelayout default profile - Installs Simplelayout with default ContentTypes and everything you need to create content the Simplelayout way.
ftw.simplelayout development profile - Installs non minified versions of simplelayout.js and simplelayout.css - for DEV environments. You need to install this profile on top of lib or the default profile
This package uses the Simplelayout Javascript Lib, which provides the basic functionality. Further this package provides a Plone integration of the Simplelayout Lib:
Overlays for manipulate blocks, such as adding, deleting and modifying.
Saving the current Simplelayout state.
Loading the configuration of a simplelayout page.
Reloading blocks with additional parameters, view, or data attributes.
Usage
First steps
It’s a good idea to install the default profile, which ships some basic contenttypes, such as ContentPage and TextBlock.
Simply add a new ContentPage instead of a Plone Document. A Toolbox appears on right, which allows you to create content on/in your ContentPage with Simplelayout.
By default you can choose between a 1 column, 2 Column or 4 Column layout. Simplelayout adds an empty 1 column layout for you by default, so you can directly start adding a Block.
Just drag the Block of your choice, for example a TextBlock, into the layout. Enter title, body text and/or an image. Then click save.
As you see, you never going to leave the ContentPage, all actions with Simplelayout are asynchronous. This means adding, deleting and editing always opens an overlay, where you can make the modifications.
Contenttypes
Simplelayout ships by default with two content types. One folderish type, the ContentPage and one block type, the TextBlock.
ContentPage
The ContentPage is a simple folderish dexterity based contenttype, which does nearly nothing, but has the @@simplelayout-view view configured by default. It’s possible to add a ContentPage within a ContentPage
TextBlock
The TextBlock provides the following fields:
Title (Well, this will be the title of the block, rendered as h2).
Show title? (Decide if the title will be displayed or not).
Text
Image
Title, or Text, or the image is needed to successfully add a new block
The TextBlock configuration allows you to use this block to show text only or images only, or of course both. There’s no need of a single block for images and a single block for text.
Add TextBlock
Behaviors
The Teaser behavior is enabled by default on TextBlock. It allows you to add an internal or external link to the block.
Portlets
ftw.simplelayout provides a Simplelayout Portlet which alows you to move Blocks into the right, or left column. You simply have to assign the portlet on a specific context, or type.
Example (How to assign the portlet by default to all Simplelayout ContentPages).
portlets.xml:
<?xml version="1.0"?>
<portlets>
<assignment
manager="plone.rightcolumn"
category="content_type"
key="ftw.simplelayout.ContentPage"
type="ftw.simplelayout.portlet"
insert-before="*">
</assignment>
</portlets>Simplelayout your site
Yes it’s simple:
Add layouts by Drag’n’Drop
Add Blocks by Drag’n’Drop
Upload images directly by Drag’n’Drop [Comming soon]
Change representation of blocks directly on the Block itself
Responsive by default
Create multiple column pages with ease.
Uninstall profile
Development
Python:
Fork this repo
Clone your fork
Shell: ln -s development.cfg buidlout.cfg
Shell: python boostrap.py
Shell: bin/buildout
Run bin/test to test your changes.
Or start an instance by running bin/instance fg.
Create new Block
Make your content blockish, needs only two steps.
The only difference between a block and other DX content types is the SimplelayoutBlockBehavior. You can simply add the Block behavior to your content by adding the following line to FTI:
<property name="behaviors">
<element value="ftw.simplelayout.interfaces.ISimplelayoutBlock" />
</property>In order you block knows how to represent himself on a simplelayout page you need to register a block_view for your Block.
Register view with zcml:
<browser:page
for="my.package.content.IMyBlock"
name="block_view"
permission="zope2.View"
class=".myblock.MyBlockView"
template="templates/myblockview.pt"
/>Corresponding template:
<h2 tal:content="context/Title">Title of block</h2>
<!-- Assume you got a text field on your content -->
<div tal:replace="structure here/text/output | nothing" />Well basically that’s it :-) You just created a new block!!
Create custom actions for Blocks
Global Simplelayout configuration
Create new Block representations
Run custom JS code
Some Blocks need to run some JS code after rendering or for the widget itself while adding/editing. For this use case you can simply listen to the jquerytools overlay events.
Run JS after adding and editing a Block
This example has been taken from the MapBlock. It uses the onBeforeClose event of jquerytools Overlay to load the collectivegeo map.
$(function(){
$(document).on('onBeforeClose', '.overlay', function(){
if ($.fn.collectivegeo) {
$('.widget-cgmap').filter(':visible').collectivegeo();
}
});
});Run JS after the overlay has been displayed
This example has been taken from the MapBlock. It uses the onLoad event of jquerytools Overlay to load the collectivegeo map in edit mode.
$(function(){
$(document).on('onLoad', '.overlay', function(){
if ($.fn.collectivegeo) {
var maps = $('.widget-cgmap').filter(':visible');
var map_widgets = $('.map-widget .widget-cgmap').filter(':visible');
maps.collectivegeo();
map_widgets.collectivegeo('add_edit_layer');
map_widgets.collectivegeo('add_geocoder');
}
});
});More JS events
jQueryTools Overlay provides two more events:
onBeforeLoad
onClose
Modify the Simplelayout configuration
The simplelayout JS lib can be modified by the data-sl-settings on the simplelayout container. Currently supported settings:
layouts
canChangeLayouts
You’re able to modify those settings globally through the Simplelayout control panel. For example:
{"layouts": [1]}All Simplelayout sites are configured to have only 1 column Layouts
Using a ISimplelayoutContainerConfig Adapter, which adapts a context and request, which means you can have different settings for different Simplelayout enabled types.
Example:
from ftw.simplelayout.contenttypes.contents.interfaces import IContentPage
from ftw.simplelayout.interfaces import ISimplelayoutContainerConfig
class ContenPageConfigAdapter(object):
implements(ISimplelayoutContainerConfig)
def __init__(self, context, request):
pass
def __call__(self, settings):
settings['layouts'] = [1]
def default_page_layout():
return None
provideAdapter(ContenPageConfigAdapter,
adapts=(IContentPage, Interface))Note 1: The adapter gets called with the settings Dictionary, so you don’t have to return it.
Note 2: With the default_page_layout method you can also define default layouts, which are pre renderd on a empty page.
Using the View itself, by overwrite the update_simplelayout_settings method.
from ftw.simplelayout.browser.simplelayout import SimplelayoutView
class CustomSimplelayoutView(SimplelayoutView):
def update_simplelayout_settings(self, settings):
settings['layouts'] = [1, 4]By default the canChangeLayouts option is injected by the Simplelayout provider. It checks if the current logged in user has the ftw.simplelayout: Change Layouts permission.
OpenGraph support
Simplelayouts provides a basic OpenGraph integration. You can disable (Simplelayout Settings - Control Panel) Opengraph for the plone root as you wish, because it’s enabled by default. On Simplelayout sites itself the OpenGraph meta tags can be controlled by the OpenGraph marker behavior.
TODO
Update/Finish examples.
Update/Add images (animated gifs).
Improve Plone 5 support (probably with plone 5 contentttypes).
Archetypes block integration (for legacy packages).
JS Refactoring of @bierik needs to be tested.
Links
Copyright
This package is copyright by 4teamwork.
ftw.simplelayout is licensed under GNU General Public License, version 2.
Changelog
1.5.1 (2016-05-26)
Fix IE11 issues on succeding edits with TinyMCE by foucusing first input field. [jone]
1.5.0 (2016-05-26)
Implement request tracker. [Kevin Bieri]
Block Views: Check for extisting viewname before setting the view_name value. [mathias.leimgruber]
Make getting the og:image url more robust by checking for the scale. [mathias.leimgruber]
1.4.2 (2016-05-25)
BugFix for IE11 VideoBlock: Prevent iframe from stopping event bubbling in IE [Kevin Bieri]
1.4.1 (2016-05-24)
Fix editing issues in IE 11. [jone]
1.4.0 (2016-05-24)
Add css class to simplelayout container if the user is permitted to edit the content. [Kevin Bieri]
Implement statekeeter to track DOM changes. [Kevin Bieri]
1.3.0 (2016-05-20)
Update z3c.form to 2.9.3. Fixes error when adding a filelisting-block in IE11. [Kevin Bieri]
Remove block bottom margin from textblocks containing only a title. [mathias.leimgruber]
Do not show empty block warning on textblock if there is only a title. [mathias.leimgruber]
GalleryBlock: Show 4 images in a row for 1 col, 2 in a row for 2 col and 1 a row for 4 col. [mathias.leimgruber]
Add min-height to SimplelayoutBlock empty columns. [mathias.leimgruber]
Fix mouse pointer position according to openlayers pointer. [mathias.leimgruber]
Add image caption field to textblock. [mathias.leimgruber]
Hide main scrollbar when overlay is opened. [jone]
Lead-Image: support all slots. [jone]
Lead-Image: support gallery blocks. [jone]
Remove “Review State” column from file listing block. It is usually not in use, since files has no workflow on simplelayout sites. [mathias.leimgruber]
1.2.1 (2016-04-14)
Reset default scale behavior for textblock images. [Kevin Bieri]
Some blocks can be hidden now. Users allowed to edit the block will see the block anyway. [mbaechtold]
1.2.0 (2016-03-30)
Match the image scaling dimensions on media breakpoints from ftw.theming. [Kevin Bieri]
Use crop scale for textblock images. [Kevin Bieri]
Make textblock images full with for medium screen. [Kevin Bieri]
Extend documentation with class diagram. [Kevin Bieri]
1.1.0 (2016-03-03)
Configure TinyMCE resource types. [jone]
Respect disable_border key in request and do not load simplelayout if present. [mathias.leimgruber]
Remove leadimage cache key. [jone]
Show hint on empty listing and galeryblock. [mathias.leimgruber]
Implement better image alt text for galleryblock and textblock. Improves Accessibility. [mathias.leimgruber]
Right column overlapps the toolbar, apply fixed z-index. [Kevin Bieri]
Move styling from client library to ftw.theming integration using base variables from ftw.theming. [Kevin Bieri]
Fix simplelayout dynamic scss resource, so it does not return invalid code if the selector is empty. [mathias.leimgruber]
Use default table listing for the listingblock styles. Also implement some sane default withs for columns. [mathias.leimgruber]
Add Simlelayout view as possible front page layout + addable types on the plone site. This change provides no upgrade step, since it may break the configuration. [mathias.leimgruber]
1.0a1 (2015-12-04)
Init Release
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
