Let's fix the CMS problem

Surreal CMS creator here. I’ve been following these discussions for awhile, and now that Surreal CMS 7.0 has launched, I’m ready to tackle some of the problems that Blocs users are having with content management.

From what I’m hearing, the biggest problem is syncing changes after content is published. I have a few ideas to solve this, but I’d like to learn more about YOUR workflows before proceeding.

Surreal is agile, so let’s identify all the major pain points and figure out how to solve them.

I think everyone here is at least familiar with Surreal CMS, but for those who aren’t I’ll summarize:

  • Connect to your website using FTP, FTPS, SFTP, Amazon S3, or WebDAV
  • Enable the pages you want you and your clients to edit
  • Define content regions using class="cms-editable"
  • Edit your pages visually (inline)
  • Publishes changes directly back to your server

Aside from what you’d like to see be done better, I’m happy to answer any questions you have about Surreal or content management in general.

Cheers! :beers:

1 Like

Regarding the syncing problem, I’ve made some changes to how revisions are handled in 7.0. Instead of 180 days, the last 20 revisions are stored indefinitely.

This data will be exposed in the upcoming API, so as long as you don’t delete or change the id of your content regions, Blocs could fetch the updated content and inject it into your pages. There are some edge cases that we’d need to consider (e.g. new pages in Surreal wouldn’t propagate back to Blocs), but I’m sure we can come up with a solid solution.

Not sure how deep @Norm wants to go with this, but if Blocs allowed you enter a Surreal API key we could get a lot done with that.

1 Like

Thinking about this more, another option that wouldn’t require any effort from Blocs would be a “republish” feature. After you overwrite changes from your local copy, you’d select a special option that would republish all changes based on the most recent revision.

This isn’t as elegant and it means your visitors could see an outdated page if they requested it at just the right time.

Ultimately, I’d rather see Blocs fetch the updated content and import it somehow, but @Norm would have to determine if that would even be feasible.

I’m open to other ideas, too.

Hi @claviska.

Although I’ve incorporated your Surreal CMS into several sites now, as far as I am aware none of my clients have actually made any modifications yet. FYI I’ve set up my account settings so that I receive notifications from Surreal when any changes are made.

However, here are a couple of initial thoughts that come to mind regarding what currently won’t work for me and my clients using Blocs + Surreal.

I’ve discovered over the past year that there is a heavy use of background images within Blocs - particularly for features like parallax images, full-width hero images etc. Yes, these add sparkle to a site, but I also know that some of my clients will want to change these background images from time to time. As far as I am aware there is no way in Blocs to specify that background images can be Surreal CMS editable regions. What I don’t want to have to do is go through code and manually tag images which will then enable a client to do this.

Similarly features like Video Galleries created in Blocs appear to be tricker to change in Surreal CMS - i.e. video thumbnail doesn’t appear in Surreal, and there is no easy way to see/change the YouTube / Vimeo link without going into the code. By comparison, when I was trying out CushyCMS with Blocs, this process was made a lot simpler for people with limited technical know-how.

And of course, as you’ve already pointed out, incorporate amendments made by clients to their sites back into the original Blocs file is a key feature. For me, in-browser editing and auto-sync were the two main features that encouraged me to invest in using Adobe Muse. It made maintaining and managing simple, but great looking sites a real breeze! Here’s hoping that you and @Norm can conjure up something similar over time.

I’m sure I’ll think of other things as I develop and test more sites, but these are the top three things that I can see me being asked by one or two of my clients in the not too distant future.


As of 7.0, Surreal supports editable backgrounds. This wasn’t possible in previous versions, so that’s probably why it hasn’t been implemented yet.

What’s the HTML code that gets generated for videos? Is it just the raw YouTube/Vimeo embed code?

I’ve heard of so many issues with CMS, so does this one fit in the category?
Are there any known problem?


Yes I’m aware that 7.0 supports editable backgrounds. Fingers-crossed that Blocs can incorporate your code into future product updates.

Here’s the dialog box that appears when I click on a YouTube video iFrame in CushyCMS. Something like this, where the URL link is isolated and clearly signposted, is much easier for non-techies to deal with. I want to empower my clients to make changes themselves, not scare them off by having to pick their way through HTML code. Does this make sense?

You can do that in Surreal.

  1. Go to + > Video:

  1. Paste the embed code or a URL (all oEmbed providers are supported):

  1. Select Insert Video:

To edit an existing video, double-click on it or select it and go to + > Video in the toolbar.

Just one thing to note…if you’re adding the video manually (i.e. not through the editor), you’ll need to wrap it a cms-embed container.

<div class="cms-embed">
  [embed code here]

Perhaps I’m not expressing myself clearly enough. Here is a screenshot from a page on my website – built in Blocs and has Surreal CMS editable areas – of a section that contains 3 YouTube videos.

For a client who wants to switch-out one of these YouTube videos, and replace it with another one, the only option they have is to go in to code and do it there. The whole region is selected, not just the one video that they want to change.

Unless I’ve missed a step in the Blocs / Surreal CMS process?

In your particular case, the responsive embed styles are conflicting with the embed container.

What’s Happening?

Surreal always adds a wrapper <div> around embedded content so it can identify videos and such and handle them correctly in the editor. The wrapper doubles as a way to style embeds consistently.

However, your responsive embed expects the <iframe> to be the first child of the .embed-responsive container, but Surreal has added its own container around the iframe. Because of that, the styles aren’t being applied correctly.

There are two ways to fix this.

Option 1: Adjust the HTML

This is the “harder” method, but it better explains what’s happening and how it can be fixed, so I’m putting it first.

I’d suggest removing the extra <div> to make things work properly. For example, here’s the first video from the original markup (indented for clarity):

<div class="col-md-4 col-sm-12">
  <div id="gym-page-video-1" class="embed-responsive embed-responsive-16by9">
    <div data-embed="true">
      <iframe class="embed-responsive-item lazyload" src="img/lazyload-ph.png" data-src="https://www.youtube.com/embed/AibNEz22pxQ" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
  <h6 id="gym-page-video-1-title" class="mg-md">LBF Testimonal</h6>
  <p id="gym-page-video-1-description">A short video testimonial I did for Luke Bremner Fitness in 2015.</p>

Let’s remove the <div data-embed="true"> element and add data-embed="true" to the <div> above it instead:

<div class="col-md-4 col-sm-12">
  <div id="gym-page-video-1" class="embed-responsive embed-responsive-16by9" data-embed="true">
    <iframe class="embed-responsive-item lazyload" src="img/lazyload-ph.png" data-src="https://www.youtube.com/embed/AibNEz22pxQ" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
  <h6 id="gym-page-video-1-title" class="mg-md">LBF Testimonal</h6>
  <p id="gym-page-video-1-description">A short video testimonial I did for Luke Bremner Fitness in 2015.</p>

Now you’ll see the first video appear and you’ll be able to edit it in Surreal :slight_smile:

Option 2: Adjust the CSS

If changing the HTML is inconvenient, you can do it through your stylesheet instead. This is the easier option, but it may conflict with other videos elsewhere on your website.

Use with caution and consider making the CSS selectors more specific to the page you want them to affect.

  .embed-responsive-16by9::before {
    padding-top: 0;
    display: none;

  div[data-embed] {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
  div[data-embed]::before {
    padding-top: 56.25%;
    content: '';
    display: block;

Once you’ve applied either fix, you’ll see your videos appear in the editor.

To edit the video, double-click on it or click once and select Video (or Embed in Surreal 5) from the toolbar. In both versions, you can:

  • Paste embed code (from a share widget) or
  • Paste a URL (from any oEmbed provider)

And Surreal will update the video for you.


Thanks for the detailed explanation @claviska. I’ll give your suggestions a test-drive and let you know how I get on.

However, my initial thought is that I’m going to get very frustrated, if I have to go in the code or CSS each time I update a client’s site to make changes there manually.

I would have expected the Blocs app itself to have automatically performed tasks like removing extra divs and adding in the correct code, as I select elements and specify that they are Surreal CMS editable regions. That seems the smartest way to me.

Have you spoken to @Norm about this?