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?

Sorry to revive this old post. Is this still an issue?

We are using Plone 5.2.15 with plone.app.mosaic 2.2.5. If I read the change notes correctly, the issue was fixed long ago with 2.0.0rc1 here:

Use POST to render tiles through the editor so default query parameters provided in url can be utilized with latest plone.tiles [vangheem]

We use a custom page layout that was saved from an existing mosaic page.

Here, the mosaic edit view keeps displaying the original content of the template when attempting to edit again after an initial succesful edit followed by viewing the page.

This ONLY happens on the production site, I can not replicate this at all on my staging instance. The (what I think) relevant nginx and varnish logs show a content-length discrepancy (58283 vs 13252) that did not go away after inserting larger nginx proxy parameters:

    proxy_buffer_size       64k;
    proxy_buffers           8 64k;
    proxy_busy_buffers_size 128k;

But, after reconsidering I may be chasing the wrong artifact, nginx reflects the gzipped response size?

varnish:

127.0.0.1 - - [12/Oct/2025:15:44:05 +0200] "POST http://varnish_www/VirtualHostBase/https/www.example.com:443/PNZ/VirtualHostRoot/de/mosaic-styled-test-folder/@@edit HTTP/1.0" 302 0 "https://www.example.com/de/mosaic-styled-test-folder/edit?_authenticator=6a0b583967f669c658cf603abeeb3d18436912fa" "Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0"
127.0.0.1 - - [12/Oct/2025:15:44:05 +0200] "GET http://varnish_www/VirtualHostBase/https/www.example.com:443/PNZ/VirtualHostRoot/de/mosaic-styled-test-folder HTTP/1.0" 200 58283 "https://www.example.com/de/mosaic-styled-test-folder/edit?_authenticator=6a0b583967f669c658cf603abeeb3d18436912fa" "Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0"

nginx:

nn.nn.nn.nn - - [12/Oct/2025:15:44:05 +0200] "POST /de/mosaic-styled-test-folder/@@edit HTTP/2.0" 302 0 "https://www.example.com/de/mosaic-styled-test-folder/edit?_authenticator=6a0b583967f669c658cf603abeeb3d18436912fa" "Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0"
nn.nn.nn.nn - - [12/Oct/2025:15:44:06 +0200] "GET /de/mosaic-styled-test-folder HTTP/2.0" 200 13252 "https://www.example.com/de/mosaic-styled-test-folder/edit?_authenticator=6a0b583967f669c658cf603abeeb3d18436912fa" "Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0"