How to create a custom tile for Mosaic and edit a custome Plone template used by a Mosaic tile

Hi, I've found an old guide on How to Create HTML Tiles for Plone (Mosaic) (thank for the author and archive.org). I've followed the instructions and the following steps inside my Plone 5.2 theme:

  1. Created a new tile:
    • a template inside browser/templates/news_card.pt
    • a class (NewsCardTile) and a schema (INewsCardTile) for the content type 'News Item' inside browser/tile.py
    • registered inside browser/configure.zcml

I got stuck in the step to register the tile.

I tried to add inside profiles/default/registry.xml the following:

<record name="plone.app.tiles">
    <field type="plone.registry.field.List">
        <title>Tiles</title>
        <value_type type="plone.registry.field.TextLine" />
    </field>
    <value purge="false">
        <element>example.tiles.newscard</element>
    </value>
</record>

And reinstalled my theme. I don't know where to register the configuration for Mosaic:

<records prefix="plone.app.mosaic.app_tiles.contact_person"
 interface="plone.app.mosaic.interfaces.ITile">
 <value key="name">example.tiles.contactcard</value>
 <value key="label">Contact Card</value>
 <value key="category">advanced</value>
 <value key="tile_type">app</value>
 <value key="default_value"></value>
 <value key="read_only">false</value>
 <value key="settings">true</value>
 <value key="favorite">false</value>
 <value key="rich_text">false</value>
 <value key="weight">20</value>
 </records>

to see my tile while editing a page. May someone support on how to register this new tile?

What if I want to customize some of the custom plone templates, for instance, the plone.app.contenttypes.browser.templates.listing_summary.pt? Can I choose a template of mine for an existing tile, for instance, a new Display mode for a 'Content listing' tile (which is a collection):

image

In lack of a manual, I think a good reference is existing code. GitHub - collective/collective.tiles.sliders: A collection of slider tiles for Mosaic. for instance - but also the code below.

The selection there lists all views registered in the Plone configuration registry under the key plone.app.standardtiles.listing_views. These are normal Plone views. You can write your own (this is documented well).

How do I know? Well, I didn't. I looked at the code. OK, I at least knew where to look, which is always the most difficult part:

Looking further in the package I suspect a registry.xml in the default profile where this is defined:

1 Like

If you find it difficult, you could consider using theme fragments instead (it is MUCH easier).

About 'display mode': I did not figure it out 'how to do it properly' ( Collective.collectionfilter Mosaic: to do - #16 by espenmn ) so please give feedback if you get it to work.

1 Like

Here is a sample browser/configure.zcml

    <plone:tile
        name="tile_content_summary"
        title="Content Summary"
        description="A tile which previews a content object"
        add_permission="cmf.ModifyPortalContent"
        class=".tiles.ContentSummaryTile"
        for="*"
        permission="zope.Public"
        schema=".tiles.IContentSummaryTile"
        template="templates/tile_content_summary.pt"
        />

and the registration XML. Note there is no plone.app.tiles record

  <records prefix="plone.app.mosaic.app_tiles.custom_tiles_content_summary"
           interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">tile_content_summary</value>
    <value key="label">Content Summary</value>
    <value key="category">advanced</value>
    <value key="tile_type">app</value>
    <value key="default_value" />
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">40</value>
  </records>
1 Like

Is this for the 'display mode' ?

It was just by way of example. Above tile configuration results in this:

Okay, by looking the registry.xml plone.app.standardtiles posted by @jensens, I could find my error on it, I need to wrap everything around <?xml version="1.0"?><registry></registry>, so now I made wrote a profile/default/registry.xml on my theme like this:

<?xml version="1.0"?>
<records prefix="plone.app.mosaic.app_tiles.news_card" interface="plone.app.mosaic.interfaces.ITile">
    <value key="name">tiles.newscard</value>
    <value key="label">News Card</value>
    <value key="category">advanced</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">40</value>
</records>
<record name="plone.app.standardtiles.listing_views">
    <field type="plone.registry.field.Dict">
      <title>Listing Views</title>
      <key_type type="plone.registry.field.TextLine" />
      <value_type type="plone.registry.field.TextLine" />
    </field>
    <value purge="false">
      <element key="listing_view">Listing view</element>
      <element key="summary_view">Summary view</element>
      <element key="tabular_view">Tabular view 2</element>
    </value>
  </record>

So I can see now under the advanced category of Mosaic my News card tile and I can also see that I could change a display mode name for a 'Existing content' tile.

I could now the news card


and I can select a news:

But I have to debug the error that is appearing in the browser console:

Uncaught TypeError: can't access property 0, /<body[^>]>[^]</body>/im.exec(...) is null
parseBodyTag plone-compiled.js:502
redraw plone-compiled.js:5766
success plone-compiled.js:5173
success plone-compiled.js:3594
jQuery 6
b plone-compiled.js:3753
ajaxSubmit plone-compiled.js:3650
handleFormAction plone-compiled.js:5116
form plone-compiled.js:5066
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
jQuery 6
render plone-compiled.js:5322
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
jQuery 7
render plone-compiled.js:5319
jQuery 2
render plone-compiled.js:5310
render plone-compiled.js:5653
_show plone-compiled.js:5720
createHtmlModal plone-compiled.js:5494
show plone-compiled.js:5660
r plone-mosaic.js:3
success plone-mosaic.js:3
jQuery 6
exec plone-mosaic.js:3
mosaicExecAction plone-mosaic.js:3
jQuery 2
mosaicExecAction plone-mosaic.js:3
a plone-mosaic.js:2
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
jQuery 6
triggerChange plone-editor-tools-compiled.js:2211
onSelect plone-editor-tools-compiled.js:3529
selectHighlighted plone-editor-tools-compiled.js:2941
init plone-editor-tools-compiled.js:1699
bind plone-editor-tools-compiled.js:1573
dispatch jQuery
dispatch plone-logged-in-compiled.js:8311
handle jQuery
plone-compiled.js:502:43
Source map error: Error: request failed with status 404
Resource URL: http://localhost:8080/Plone/++plone++mosaic/++unique++2021-11-29%2017%3A08%3A57.878780/plone-mosaic.js
Source Map URL: plone-mosaic.js.map

I will come back to work on this later, but I already appreciate the feedback from all @jensens @mtrebron @espenmn.

I know how to create a view (following this), but I would need to see how to add it to this list of views pointed out by @jensens we can find here: plone.app.standardtiles/contentlisting.py at 2ba83af92052eb3a3c28d8a4df071c4dfbc25cab · plone/plone.app.standardtiles · GitHub

Just to complement, I've added the following on my browser/configure.zcml:

<include package="plone.app.mosaic" />

  <plone:tile
    name="tiles.newscard"
    title="Custom News Card"
    description="A tile which displays a news"
    add_permission="cmf.ModifyPortalContent"
    class=".tiles.NewsCardTile"
    for="*"
    permission="zope.Public"
    schema=".tiles.INewsCardTile"
    template="templates/news_tile.pt"
    />

And this is my broswer/tile.py just for testing

from plone.app.vocabularies.catalog import CatalogSource
from plone.supermodel import model
from zope import schema

class INewsCardTile(model.Schema):
   content_uid = schema.Choice(
   title=u"Select a news item object",  
   required=True,
   source=CatalogSource(portal_type=['News Item',]),
   )

from plone.app.standardtiles.existingcontent import ExistingContentTile

class NewsCardTile(ExistingContentTile):
 """ A tile for mosaic representing a news card """

My template prints just a <h1>Hellow world</h1>.

I never managed to get this working with a catalogsource.

    content_uid = schema.Choice(
        title=_(u"Select an existing content"),
        required=True,
        vocabulary='plone.app.vocabularies.Catalog',
    )
    form.widget(
        'content_uid',
        RelatedItemsFieldWidget,
        vocabulary='plone.app.vocabularies.Catalog',
        pattern_options={
            'recentlyUsed': True,
            'folderTypes': ['Folder', 'LIF', 'LRF'],
            'selectableTypes' : ['News Item'],
        }
    )

" The template Needs the <html><body> tags, and maybe even <!DOCTYPE>"

1 Like

That made it work. Thank you, @yurj. Now I believe I can write my customized tile with my template.

I can write a more updated guide later how I did.

3 Likes

You're welcome :wave:

Plone Foundation Code of Conduct