[SOLVED] How do I properly represent my tile in mosaic editor mode?

Plone Support Add-on Development
,
1

Hi. I'm hoping this is easy.

I have about 40 hours of experience with Mosaic, so I need an eli5 here. I also a not a javascript guru, more like a javascript tinkerer, so the js here is way over my head (today).

I have created 3 new tiles in mosaic, using the method described here: https://blog.toms-projekte.de/create-html-tiles-for-plone-mosaic.html and once the page is saved, and tweaked a bit, it looks great.

What I would like is for these tiles to be represented a bit better to the user while editing, so I can reduce the "drag, drop, save, preview" cycle.

I think I want want to replace the <div class=".. mosaic-tile mosaic-myproduct.tiles.mytile .."> with, at best, an actual render of the tile, but I will settle with a smoke-and-mirror png image that can be close to the same dimentions that the actual rendered tile will be.

My 3 tiles are easily seen here on the right side: Affectionately called "Listen", "Most read", and "editors pick" https://www.rfa.org/english/news/china/invade-07242019161124.html I want them to look as close as possible to this while dragging them around the mosaic layout editor - replacing the dashed-border and tile-name tag.

How can I do that? CSS image on mosaic-myproduct.tiles.mytile? Where is the best place to put this CSS for development first, then best-practice for product deployment?

I'd like to become much more knowledgeable about the magic of mosaic and see how the sausage is really made. This is obviously the closest to the killer editing app in plone 5.x and customers will be happy.

I can also add anyone to the private repo here: https://github.com/RadioFreeAsia/rfasite It just has to be private because mgmt says so.

2

Do you want to drag the images around in 1 tile ?

Or do you want something like this (PS: made in a hurry, with two broken fingers so there is a some 'pauses and mistyping … )

3

That's slick! Sorry about your fingers. Did you forget to pay a contractor?

No, I do not need to drag images within a tile, but drag a tile onto the grid, and have that tile 'well represented' before the user clicks save.

The block countdown is the best example.

The clock would not have to 'tick' when editing.

How is each tile represented when in editor mode? All I get is a blank tile, 1em height, the width of the column, and the 'drag box' outline on mouseover.

I guess I should take 'image' out of the title of the post.

4

Playing football (actually, it happened last year and this year too .... )

I made this once, but switched to using theme fragments since it was much simpler and easy to customise. GitHub - espenmn/medialog.tiles: tiles for mosaic I dont use it (it had issues), but maybe there is something that you can use there (?)

5

In your template you can check for the existence of the data, and create your markup based on that. So, instead of using this markup from the blog post:

<div class="vcard" tal:define="context nocall:view/content_context;">
  <a class="url fn" href="#"
     tal:attributes="href context/absolute_url"
     tal:content="context/fullname">Tom Gross</a>
</div>

you could do:

<tal:tile tal:define="context nocall:view/content_context;">
  <div class="preview" tal:condition="not:context">
    <!-- Some preview content or placeholder image -->
  </div>
  <div class="vcard" tal:condition="context">
    <a class="url fn" href="#"
        tal:attributes="href context/absolute_url"
        tal:content="context/fullname">Tom Gross</a>
  </div>
</tal:tile>
2 Likes
6

you can also 'swallow errors' / not yet defined fields with

<p>${context/something|None}</p>
7

Excellent model, Implemented, but not working. I think the problem is deeper. I'm going to pick on a tile that has no context, nor a view to ask for one: It's called "RFA Listen Box" It's nothing but a template. I'll spare you the html because there is no tal in it at all!

But here is the zcml:

  <plone:tile 
     name="rfasite.basetheme.tiles.listen"
     title="Listen Box"
     description="Listen to RFA links"
     permission="zope.Public"
     add_permission="cmf.ModifyPortalContent"
     for="*"
     template="templates/listen.pt"
     />

And the registry:

<records prefix="plone.app.mosaic.app_tiles.listen"
         interface="plone.app.mosaic.interfaces.ITile">
 <value key="name">rfasite.basetheme.tiles.listen</value>
 <value key="label">RFA Listen box</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>

Note how I'm not rendering things in my
This is what my edit screen looks like (after pressing 'alt')

Screenshot%20from%202019-07-26%2013-43-38
Screenshot%20from%202019-07-26%2013-43-381098×284 20.6 KB

And this is what my 'saved' and rendered view looks like:

Screenshot%20from%202019-07-26%2013-47-29
Screenshot%20from%202019-07-26%2013-47-291140×425 149 KB

Next hurdles will be the "lead image preview" and the "audio file field" render. There is some base key knowledge on mosaic I'm missing and I'm sure that's whats going to pull it all together.

8

Solved!

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

Looking through @espenmn 's repo showed me that his templates were wrapped in <html><body>

The first tag in my templates was <div>
Thanks for the examples!

Comments and thoughts still welcome.

1 Like