Make background images editable with CMS

Hi,
I’m studying the possibility to create editable templates for my clients. The idea would be to use Webflow for the static design and CushyCMS (or another system) for the dynamic part. I’d like my clients could update text and do some templates customization using their own styles: Images, backgrounds and some color options.

I’m really struggling about how to integrate my Webflow designs into "LightCMS systems”. Specifically, I’m trying to figure out a way of making background images editable.

Imagine that you have a section with a background image and a text block over… Or that you have a Slider with background images per slide and some text or button over.
How to make those images editable via CMS?
I’ve tried with several CMS: CushyCMS, CouchCMS, SimpleCMS, SurrealCMS, PageLimeCMS, and so on…

To make it clearer, here’s the process that I’m following:

  1. Create Webflow design
  2. Export code
  3. Edit code in Sublime to add the defined “editableCMS” class.
  4. Upload to server and connection to CMS via FTP.

As Webflow creates a separate CSS file (which is great), the only updatable content I’m getting is text :frowning: Also some background images, defined to be 100% background, appear in a weird resolution in the CMS, too big…
I tried to include inline styles directly into the html but: or I’m doing it wrong or something is missing, as when I use inline styles the image simply doesn’t show.

I also know that Webflow team is working on some CMS system; It would be great to have news upon that.

Any experienced Webflow/CMS users over here? Could you please give me a help on this?
At this point I feel my brain is about to explode with so many frustrated attempts…
Appreciate your help guys! :wink:

The problem is that you’re setting images as a background, which is not recognized as an editable property for most CMS applications. Your best option is to convert your Webflow design into a WordPress theme but it might be more work then you’re looking to do.

I promised a long time ago to do a series on various content management systems but I just got overrun with work and couldn’t do personal projects. Things have settled down a bit now and I started the process of laying out how to move from Webflow into WordPress in the cleanest way possible. It’s still a ways off from being complete.

That and I keep end up going back to Foundation. If Webflow would someday let us choose our framework when creating a project I think that would really allow us to streamline our workflow. I can move from Foundation to WordPress in no time.

There is a way to port Webflow to Wordpress using Ultimatum. There’s a tutorial here somewhere

Yeah but that’s using a theme and its a very hacky solution that doesn’t lend itself to any sort of standard or best practice. You could also never sell the site to a client that way. Making a real theme is a much better solution IMO.

I think the easiest way to go here is to design the slider with usual images and not background images. As you say you tried a lot of cms:s and they don’t support it. The image is loaded from the css file and think there’s the problem. I’m sure the problem is solvable but more coding is required. Good luck =)

I tried your approach @jorn and have been playing around with positioning and including static images over sections instead of giving them a background.

I’m getting somewhere… The CMS’s now recognize images as editable, but… new issue:
On the CMS all images appear grew and with a broken image symbol.

I’m leaving you an example:
Webflow: http://techbyte.webflow.com/

Pagelime snapshot:

SimpleCms snapshot:

I tested with different servers and the result is the same.
Any ideas about why this is happening? Thx again.

Just figured it out… I had some permission enabled on the server. It’s up and running now.

I’m looking forward for the CMS features with Webflow…
Could you guys let us know if we can wait for a special X-Mas gift? :wink:

1 Like

You can also do some jquery to convert the image into a background-image for the container, on the fly. Bartosz made a js for me. If you need it I can ask him for permission and I will release it for the community. Though, the background image would be inline css if you don’t mind.

@topelovely: Althow Im not a coder at all, It would be great if Bartosz didn’t mind sharing the script.

Meanwhile I discovered Concrete5 and seem all the features I was looking for, are just there!! Awesome!
I’ll try a Webflow integration really soon :slight_smile:

2 Likes

This is the code as modified:

<script>
$(document).ready(function() {
	$('.myclass or id').each(function() {
                var imgurl = $(this).find('img').attr('src');
               var height =$(this).css("height");
               $(this).find('img').remove();
                $(this).css({

                        'height' : height,
                        'background-image' : 'url(' + imgurl + ')',
                        'background-position' : '50% 50%',
                        'background-size' : 'cover',
                        'background-repeat' : 'no-repeat'
                });
                 });
                 
                 </script>

replace “my class or id” with classname or id of the div box or section or ul or li container

Hi Jorn, I think it is better if WF can allow us to a tick option to create page by page css, instead of the central css.

Thanks for the code! I’ll give it a try.
I’m strugelling with Concrete5 … I’m soooo waiting for cms news from the Webflow team…

Why don’t you try business catalyst it is quite straight forward.

Pricing…
BC is out of my price range attending my target and the service I’m looking to offer.
It’s a great tool but, at this point, I really don’t need that many features and it’s definitively out of my price range.

Hi I have looked for a solution on this also for a while and just found out that Tidycms (http://www.tidycms.com) now has support for editable background images. Looks promising.

It really does looks promissing, but at this point, it still has too many bugs…Double login screen in Chrome, messy with ie and not quite stable with Firefox…

I’m still looking for the perfect CMS for including my html & styles at a reasonable price.

I’ve been playing around with TidyCMS and although the bugs are still there, I found a great support from their team and they’re looking at the issues that are annoying me.

Great team, awesome features, Webflow compatible, easy integration… With bugs at this time, but I think those will be fixed soon.

1 Like

I was also just looking for the possibility of editors changing background images. Disappointed that this deosn’t seem to work.

Is there a way to apply a background image dynamically from collection items?

Hi spirelli,

This feature is already implemented. You can now change background images with the editor, just as any other image:

Just be sure to no have any blocks over the image that might not give you access to this option.

1 Like