Having Issues Using Mosaic Custom Content Layouts

Hey all,

We are using some custom content layouts in Mosaic for a client. Things seem to work pretty well when the user creates a page, changes to Mosaic View and selects one of the layouts. the problem comes when trying to edit their content in those layouts. Many times, some of the tiles are missing in edit mode and changes aren't getting saved.

Here is one of our layout templates:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-layout="./@@page-site-layout">
  <body>
    <div data-panel="content"         data-max-columns="4">
      <div class="mosaic-grid-row">
        <div class="mosaic-grid-cell mosaic-width-full mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-IDublinCore-title-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.field?field=IDublinCore-title"></div>
          </div>
          </div>
        </div>
      </div>
      <div class="mosaic-grid-row factcheck-blue-band">
          <div class="container">
        <div class="mosaic-grid-cell mosaic-width-full mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.html-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.html/b613350c-5727-47e9-a291-1dcdd6b92a81?content=%3Cp%3ELorem%20ipsum%20dolor%20sit%20amet,%20consectetuer%20adipiscing%20elit.%20Sed%20posuere%20interdum%20sem.%20Quisque%20ligula%20eros%20ullamcorper%20quis,%20lacinia%20quis%20facilisis%20sed%20sapien.%20Mauris%20varius%20diam%20vitae%20arcu.%20Sed%20arcu%20lectus%20auctor%20vitae,%20consectetuer%20et%20venenatis%20eget%20velit.%20Sed%20augue%20orci,%20lacinia%20eu%20tincidunt%20et%20eleifend%20nec%20lacus.%3C/p%3E%0A%3Cp%3E%C2%A0%3C/p%3E%0A%3Cp%3EDonec%20ultricies%20nisl%20ut%20felis,%20suspendisse%20potenti.%20Lorem%20ipsum%20ligula%20ut%20hendrerit%20mollis,%20ipsum%20erat%20vehicula%20risus,%20eu%20suscipit%20sem%20libero%20nec%20erat.%20Aliquam%20erat%20volutpat.%20Sed%20congue%20augue%20vitae%20neque.%20Nulla%20consectetuer%20porttitor%20pede.%20Fusce%20purus%20morbi%20tortor%20magna%20condimentum%20vel,%20placerat%20id%20blandit%20sit%20amet%20tortor.%3C/p%3E%0A"></div>
          </div>
          </div>
          </div>
        </div>
      </div>
      <div class="mosaic-grid-row factcheck-blue-band-sub">
          <div class="container">
        <div class="mosaic-grid-cell mosaic-width-full mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.html-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.html/3b857afb-5a68-4b33-811c-3d094af594f4?content=%3Cp%3ELorem%20ipsum%20dolor%20sit%20amet,%20consectetuer%20adipiscing%20elit.%20Sed%20posuere%20interdum%20sem.%20Quisque%20ligula%20eros%20ullamcorper%20quis,%20lacinia%20quis%20facilisis%20sed%20sapien.%20Mauris%20varius%20diam%20vitae%20arcu.%20Sed%20arcu%20lectus%20auctor%20vitae,%20consectetuer%20et%20venenatis%20eget%20velit.%20Sed%20augue%20orci,%20lacinia%20eu%20tincidunt%20et%20eleifend%20nec%20lacus.%3C/p%3E%0A%3Cp%3E%C2%A0%3C/p%3E%0A%3Cp%3EDonec%20ultricies%20nisl%20ut%20felis,%20suspendisse%20potenti.%20Lorem%20ipsum%20ligula%20ut%20hendrerit%20mollis,%20ipsum%20erat%20vehicula%20risus,%20eu%20suscipit%20sem%20libero%20nec%20erat.%20Aliquam%20erat%20volutpat.%20Sed%20congue%20augue%20vitae%20neque.%20Nulla%20consectetuer%20porttitor%20pede.%20Fusce%20purus%20morbi%20tortor%20magna%20condimentum%20vel,%20placerat%20id%20blandit%20sit%20amet%20tortor.%3C/p%3E%0A"></div>
          </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </body>
</html>

So here is the use case:

  1. User Creates a page
  2. User changes the Display to 'Mosaic layout'
  3. User selects this particular layout
  4. Mosaic Edit page is populated with lorem ipsum text
  5. User edits the text by adding their own.
  6. User saves page.

Sometimes the content gets saved, sometimes only the top row/tile gets saved. In editing the page to try to change/add content to the bottom row/rich text tile and saving, nothing occurs.

Using: Plone 5.0.6, Mosaic 2.0.0rc2

I have a quite similar layout, which is working,
I can not see why there should be 'problems'
I use mosaic 2 and Plone 5.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-layout="./@@page-site-layout">
  <body>
    <div data-panel="content"         data-max-columns="4">
      <div class="mosaic-grid-row">
        <div class="mosaic-grid-cell mosaic-width-full mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-IDublinCore-title-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.field?field=IDublinCore-title"></div>
          </div>
          </div>
        </div>
      </div>
      <div class="mosaic-grid-row ">
        <div class="mosaic-grid-cell mosaic-width-full mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-IDublinCore-description-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.field?field=IDublinCore-description"></div>
          </div>
          </div>
        </div>
      </div>
      <div class="mosaic-grid-row odd">
        <div class="mosaic-grid-cell mosaic-width-half mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.image-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.image/95c2bf3fcb1f45x2393d818afdd827cdd?content=%3Cimg%20src=%22http://xweb14d.plana.dk:8083/globeracer/bike-console/@@plone.app.standardtiles.image/95c2bf3fcb1f452393d818afdd827cdd/@@images/fbfada1e-7830-456b-b58c-0bbcbb913335.jpeg%22%20width=%221274%22%3E%0A%20%20%3Cscript%20src=%22http://xweb14d.plana.dk:8083/globeracer/++resource++protect.js%22%20type=%22application/javascript%22%20id=%22protect-script%22%20data-token=%22a7e45ff7c28e264ab84217d2a6e094bab3853f61%22%20data-site-url=%22http://xweb14d.plana.dk:8083/globeracer%22%3E%3C/script%3E%0A"></div>
          </div>
          </div>
        </div>
        <div class="mosaic-grid-cell mosaic-width-half mosaic-position-half">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.html-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.html/b83c933f-f7c9-4dx28-b90c-9c1c86a80107?content=%3Cp%3Ecvddhgsddfsgsdfgsdfg%3C/p%3E%0A"></div>
          </div>
          </div>
        </div>
      </div>
      <div class="mosaic-grid-row even">
        <div class="mosaic-grid-cell mosaic-width-half mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.image-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.image/95c2bf3fcb1fx452393d818afdd827cdd?content=%3Cimg%20src=%22http://xweb14d.plana.dk:8083/globeracer/bike-console/@@plone.app.standardtiles.image/95c2bf3fcb1f452393d818afdd827cdd/@@images/fbfada1e-7830-456b-b58c-0bbcbb913335.jpeg%22%20width=%221274%22%3E%0A%20%20%3Cscript%20src=%22http://xweb14d.plana.dk:8083/globeracer/++resource++protect.js%22%20type=%22application/javascript%22%20id=%22protect-script%22%20data-token=%22a7e45ff7c28e264ab84217d2a6e094bab3853f61%22%20data-site-url=%22http://xweb14d.plana.dk:8083/globeracer%22%3E%3C/script%3E%0A"></div>
          </div>
          </div>
        </div>
        <div class="mosaic-grid-cell mosaic-width-half mosaic-position-half">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.html-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.html/b83c933f-f7c9x-4d28-b90c-9c1c86a80107?content=%3Cp%3Ecvddhgsddfsgsdfgsdfg%3C/p%3E%0A"></div>
          </div>
          </div>
        </div>
      </div>
      <div class="mosaic-grid-row odd">
        <div class="mosaic-grid-cell mosaic-width-half mosaic-position-leftmost">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.image-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.image/95c2bf3fcb1f452x393d818afdd827cdd?content=%3Cimg%20src=%22http://xweb14d.plana.dk:8083/globeracer/bike-console/@@plone.app.standardtiles.image/95c2bf3fcb1f452393d818afdd827cdd/@@images/fbfada1e-7830-456b-b58c-0bbcbb913335.jpeg%22%20width=%221274%22%3E%0A%20%20%3Cscript%20src=%22http://xweb14d.plana.dk:8083/globeracer/++resource++protect.js%22%20type=%22application/javascript%22%20id=%22protect-script%22%20data-token=%22a7e45ff7c28e264ab84217d2a6e094bab3853f61%22%20data-site-url=%22http://xweb14d.plana.dk:8083/globeracer%22%3E%3C/script%3E%0A"></div>
          </div>
          </div>
        </div>
        <div class="mosaic-grid-cell mosaic-width-half mosaic-position-half">
          <div class="movable removable mosaic-tile mosaic-plone.app.standardtiles.html-tile">
          <div class="mosaic-tile-content">
          <div data-tile="./@@plone.app.standardtiles.html/b83c933f-f7c9-4d28x-b90c-9c1c86a80107?content=%3Cp%3Ecvddhgsddfsgsdfgsdfg%3C/p%3E%0A"></div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Espen, could you wrap that in a code tag/markup? hard to read exploded like that :).

sorry, fixed

By the way: this is on a site I am developing, so 'nothing in front and no caching'

I think we may have found the culprit. We can only put so much text in a single field for a mosaic page in order for it to render that text in the Mosaic Edit interface. The field WILL take as much text as you give it on INPUT and the page renders fine in 'View' mode. However, when Editing the page, the text from that field does not render.

We were surprised to see that the content HTML was being passed as a POST but the data was being passed as a query string. We are looking into our Varnish and haproxy servers, they may be truncating the string.

127.0.0.1 - Anonymous [01/Feb/2017:22:56:43 +0000] "POST /VirtualHostBase/https/www.site.com:443/Plone/VirtualHostRoot/new-test-page/@@plone.app.standardtiles.html/6efd797c-ce64-4564-9aa2-2efc038af081?content=<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus.</p>
<p> </p>
<p>Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
&X-Tile-Persistent=yes&_layouteditor=true HTTP/1.0" 200 2050 "https://www.site.com/new-test-page/edit?_authenticator=9dd9e8146c40d1148848569d83fe6d9a1b97f470" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36"
1 Like

OK looks like our Varnish servers were truncating the content. We modified the settings to allow for larger HTTP headers and things seem to be working fine.

1 Like

@vaporboy are you using a custom varnish/vcl setup, or were you using plone.recipe.varnish?