collective/collective.behavior.banner

Add banners and create slider/carousel from banners

collective.behavior.banner

A behavior to create banners and sliders from banners.

Features

Banner

A banner is usually some text and an image that is displayed above of the content.

The behavior collective.behavior.banner.banner.IBanner has various fields (image, title, subtitle, richtext, link, linkcaption etc) that are combined to build a banner. You can enable the behavior on any Dexterity type (tested with plone.app.contenttypes) or for the whole Plone site.

Slider

The behavior collective.behavior.banner.slider.ISlider adds the option to add relations to several banners (i.e. items that have the Banner behavior enabled). These banners are then displayed like a banner but fade.

The slider viewlet uses the javascript library http://responsiveslides.com and fades from one banner to another. You can easily use a different javascript libray by overriding the viewlet templates (see below).

Before you use a slider/carousel on your website, please take time to read http://shouldiuseacarousel.com.

Inheriting

Banners are inherited by child objects. In a controlpanel you can configure which types should display inherited banners. You can also prevent inheriting banners for an item and its child objects by enabling the option Do not inherit banner from parents on the banner tab. If you want a banner for the entire site, you can assign one to the default content of the Navigation Root (or Plone site root).

Customization

To change the appearance (e.g. if you use a bootstrap theme or want to use a different effect in the slider) you can easily override the respective viewlets with z3c.jbot or plone.app.themingplugins (if you use plone.app.theming). The names of the files to create would be collective.behavior.banner.browser.banner.pt and collective.behavior.banner.browser.slider.pt.

Demo

collective.behavior.banner is used on the following sites:

• http://www.plone.de
• http://python-verband.org
• http://www.bildungswerk-bayern.de

Compatibility

collective.behavior.banner works in Plone 4, 5 and 6.

• Plone 6: 2.x
• Plone 5: 1.x
• Plone 4: 0.x

Installation

To install collective.behavior.banner you simply add collective.behavior.banner to the list of eggs in your buildout, run buildout and restart Plone. Then, install collective.behavior.banner using the Add-ons control panel.

Enable the behavior by hand or in the FTI <your_package>/profiles/default/types/Folder.xml:

<?xml version="1.0"?>
<object name="Folder" meta_type="Dexterity FTI">
 <property name="behaviors" purge="False">
  <element value="collective.behavior.banner.banner.IBanner"/>
 </property>
</object>

Contribute

• Source Code: https://github.com/collective/collective.behavior.banner
• Issue Tracker: https://github.com/collective/collective.behavior.banner/issues

Support

If you are having issues, please let us know at https://github.com/collective/collective.behavior.banner/issues.

collective.behavior.banner's Issues

AttributeError: 'generator' object has no attribute 'insert'

I enabled the Banner-Behavior on my Folders in the Dexterity Tab. But if I want to edit a Folder now, I get following Traceback:

Es ist leider ein Fehler aufgetreten…

Dies ist die vollständige Fehlermeldung:

Zeige Fehlerbericht als Text

Traceback (innermost last):

Module ZPublisher.Publish, line 138, in publish
Module ZPublisher.mapply, line 77, in mapply
Module ZPublisher.Publish, line 48, in call_object
Module plone.z3cform.layout, line 66, in __call__
Module plone.z3cform.layout, line 50, in update
Module plone.dexterity.browser.edit, line 58, in update
Module plone.z3cform.fieldsets.extensible, line 59, in update
Module plone.z3cform.patch, line 30, in GroupForm_update
Module z3c.form.group, line 141, in update
Module z3c.form.group, line 52, in update
Module z3c.form.group, line 48, in updateWidgets
Module z3c.form.field, line 277, in update
Module plone.formwidget.contenttree.widget, line 198, in update
Module z3c.formwidget.query.widget, line 227, in update

AttributeError: 'generator' object has no attribute 'insert'

I just installed the Behavior over buildout and tried to allow it on some Dexterity ContentTypes.

Enviroment:
Plone 5.0.7 (5017)
CMF 2.2.10
Zope 2.13.26
Python 2.7.9
PIL 3.4.2 (Pillow)

Would it make sense to use a RelationChoice for the banner_image?

Right now we have

    banner_image = namedfile.NamedBlobImage(
        title=_(u"Banner Image"),
        description=u"",
        required=False,
    )

Why don't we use a RelationChoice instead of a NamedBlobImage, or in addition to it?
What would be a good pattern?

New pypi release

Hello @pbauer,

Could you please make a new release, to include PR #26 ?

Thank you in advance.

Best regards,
Nicolas

New release

Hello @pbauer !

Is it possible to make a new release of this package ? or give me the rights to do so on Pypi (user: laz) ?

Thank you !
Regards,

Laurent.

New release

@pbauer could you please make a new release (or give me the rights to do it on Pypi - user : laz) ?
We would like to merge #33 after the release.

Thanks 🙏

Order of slider images can not be set manually

I have a client who wants the images in a slider to appear in a very specific order, but this is not currently possible. In fact, the behavior is explicitly set to do the opposite, by returning the images in random order.
Is there a widget pattern that could be used to drag and drop items in a specific order?

Unset banner leaves empty container

In banner.pt, a tal:condition checks whether the context object has a banner and if not, omit most of the HTML. However, the #portal-banner container div is not subject to this check, which makes for a large block with a background but no content. If there is no reason for displaying a hint to an empty banner, the whole template should be omitted if there is no banner available.

grok alert: use of plone.directives.form

form is imported from plone.directives, which depends on five.grok.
So it should be replaced with plone.autoform.directives.

0.2 is still default version on pypi

@pbauer You are listed as the maintainer for the package on pypi. Could you please switch pypi to 1.0b2 as pypi.org is still serving collective.behavior.banner 0.2 as latest 'released' version when 1.0bX has a lot of relevant Plone 5 fixes. Thanks!

RelationList widget does not get populated without specifying form.widget.

@pbauer got any idea why the slider_relation widget comes up empty if I don't use the form.widget directive?

    form.widget('slider_relation', RelatedItemsFieldWidget,
                vocabulary='plone.app.vocabularies.Catalog')
    slider_relation = RelationList(
        title=_(u"Slider Banners"),
        description=_(u"These banners will be used in the slider"),
        default=[],
        value_type=RelationChoice(
            title=_(u'Target'),
            source=ObjPathSourceBinder(
                object_provides=IBanner.__identifier__,
            )),
        required=False,
    )

Without form.widget, the widget gets rendered fine, but it's empty. The key piece making it work is the vocabulary.

Somehow, the ObjPathSourceBinder does not seem to do its job. I tried using a portal_type filter, instead of object_provides, does not make a difference. The portal_catalog has plenty of objects indexed with object_provides=IBanner.__identifier__.
Basically, this is the same as http://docs.plone.org/external/plone.app.dexterity/docs/advanced/references.html, and it doesn't work.

I also tried stepping via /pdb, creating an ObjPathSourceBinder by hand:

(Pdb) foo = ObjPathSourceBinder(object_provides=IBanner.__identifier__)
(Pdb) foo(self.context).selectable_filter.criteria
{'object_provides': ['collective.behavior.banner.banner.IBanner']}
(Pdb) [i.title for i in foo(self.context).search('')]

And it returns plenty of items.

Also:
http://stackoverflow.com/questions/24638057/how-to-make-a-dexterity-reference-field

Wrong template used (banner vs slider)

I have observed the following situation:

• News items have banners but no sliders, pages have sliders but no banners, folder have none of the two.
• I have a folder with a page as index view, containing news items with (hidden) banners, which may or may not have to do with the issue.
• The page that is the folder's index view displays an empty banner container. While this empty container is the subject of #19 this shows that for some reason, the banner.pt is being used on the page which shouldn't have banners in the first place.

What happens here? The banner template shouldn't even be looked at in this case.

Behavior is available when product isn't installed

It's globally available to all Plone sites instead of only in the one the product was installed. It'd be solvable with a browser layer but that seems to be unsupported by the plone:behavior directive, raising ConfigurationError: ('Unrecognized parameters:', 'layer').

Would it be the case to open the issue there?

Add option to display banner image in background

It can be useful to show banner image via background-url instead of <img> tag (for responsive matters, etc.).

I would propose to add a global option to choose between the two possibilities (default : <img>).

Pick a default js-library for the slider

At the moment this uses http://responsiveslides.com for sliders. It has less than 400 lines of js but is not really maintained.

Maybe we should change to something more versatile or canonical. Seometimes I use cycle2 (http://jquery.malsup.com/cycle2) but I don't really have a string opinion.
I guess it is not super-important since in most use-cases people will override the templates anyway to better match the design and add the library of their choice along the way.

Allow to define a global sliders

We should be able to define global sliders for the site.

I propose to add a new boolean option in the configlet ("Use global slider if there is one"), to avoid breaking existing use-cases.
The global slider would be defined on the navigation root or its default content (cf #24).

js problem when Slider behavior is enabled

I could reproduce this issue both on 5.0 and coredev.

If I enable just the Banner behavior, everything seems to work fine.
But as soon as I enable Slider, when I edit a corresponding content item, the page loads without the usual tabs (Default, Categorization, Ownership, Settings, etc), and there is an error in the js console:

Uncaught ReferenceError: formwidget_autocomplete_parser is not defined

The error is thrown in this script tag:

    <script type="text/javascript">    (function($) {
        $().ready(function() {
            $('#form-widgets-ISlider-slider_relation-input-fields').data('klass','contenttree-widget relationlist-field').data('title','None').data('input_type','checkbox').data('multiple', true);
            $('#form-widgets-ISlider-slider_relation-buttons-search').remove();
            $('#form-widgets-ISlider-slider_relation-widgets-query').autocomplete('http://localhost:8080/Plone/news/++add++News%20Item/++widget++form.widgets.ISlider.slider_relation/@@autocomplete-search', {
                autoFill: true,
                minChars: 2,
                max: 10,
                mustMatch: false,
                matchContains: true,
                formatItem: function(row, idx, count, value) {  return row[1] + " (" + row[0] + ")"; },
                formatResult: function(row, idx, count) { return ""; },
                parse: formwidget_autocomplete_parser(function(row, idx, count) { return ""; }, 1)
            }).result(formwidget_autocomplete_ready);
            $('#form-widgets-ISlider-slider_relation-widgets-query').each(function() {
    if ($(this).siblings('input.searchButton').length != 0) {
        return;
    }
    var input = document.createElement('input');
    $(input)
        .attr({
            'type': 'button',
            'value': 'browse...'
        })
        .addClass('searchButton')
        .click(function () {
            var parent = $(this).parents("*[id$='-autocomplete']");
            var window = parent.siblings("*[id$='-contenttree-window']");
            window.showDialog('http://localhost:8080/Plone/news/++add++News%20Item/++widget++form.widgets.ISlider.slider_relation/@@contenttree-fetch', 200);
            $('#' + parent.attr('id').replace(
                    'autocomplete', 'contenttree')).contentTree({
                script: 'http://localhost:8080/Plone/news/++add++News%20Item/++widget++form.widgets.ISlider.slider_relation/@@contenttree-fetch',
                folderEvent: 'click',
                selectEvent: 'click',
                expandSpeed: 200,
                collapseSpeed: 200,
                multiFolder: true,
                multiSelect: true,
                rootUrl: '/Plone'
            },
            function(event, selected, data, title) {
            });
        })
        .insertAfter($(this));
});
$('#form-widgets-ISlider-slider_relation-contenttree-window').find('.contentTreeAdd')
                               .unbind('click')
                               .click(function () {
    $(this).contentTreeAdd();
});
$('#form-widgets-ISlider-slider_relation-contenttree-window').find('.contentTreeCancel')
                               .unbind('click')
                               .click(function () {
    $(this).contentTreeCancel();
});
$('#form-widgets-ISlider-slider_relation-widgets-query').after(" ");

        });
    })(jQuery);
    </script>

Slider should work even with 1 slider

If you have 2 sliders on your site, then remove one of them, the viewlet doesn't display the slider anymore (len(context.slider_relation) > 1 & len(banners) > 1).

It should work, but without the next / previous arrows.

Allow to define a global banner

We should be able to define a global banner for the site, inherited everywhere we need.

Unfortunately, the behavior is not usable on Plone site root.
Thus, if I have 10 contents and want the same banner everywhere on my site, I need to edit the 10 contents and define the same banner.

Couldn't we say that if Plone site root has a default view object, the banner defined there is used as "global" ?