background image

[milancxe]

Hello, I want to support background image in my template that is 99% like versafix. Idea is that user uploads image and I use it as a background for his email. So I found somewhere in your old issues and tried to use this tag to create support for background image:

<center id="externalBackgroundImage"
  style="
  background-image: url(https://www.example.com/logo_en.jpg);
  -ko-background-image: url(@[image.src]);">

In style tab I have added image upload selection like this:

Select Background Image
      <div class="mo-uploadzone" style="position: relative; padding: 2em; border: 2px dotted #808080">
         <input class="fileupload" type="file" multiple name="files[]" data-bind="fileupload: { onerror: $root.notifier.error, onfile: $root.setBackgroundImage }" style="z-index: 10; position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; font-zie: 999px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; cursor: inherit; display: block">
         <span data-bind="text: $root.t('Click or drag files here')">Click or drag files here</span>
         <div class="workzone" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;">
           <div class="progress" style="opacity: .5; width: 80%; margin-left: 10%; position: absolute; bottom: 30%; height: 20px; border: 2px solid black;">
             <div class="progress-bar progress-bar-success" style="height: 20px; background-color: black; "></div>
           </div>
         </div>
      </div>

When image is uploaded I am calling my function ($root.setBackgroundImage) and I set external background color to transparent. So, everything works fine up until this point. I manage to set externalBackgroundColor to all blocks, but when I set background image and background they are set for me in preview. When I download my template or send email. Instead to use my background image, template sends the default one. (the one set in template : https://www.example.com/logo_en.jpg) I have tried to set background image in multiple ways:

   var image = $('#externalBackgroundImage');
   //  image[0].style.background = ('url(\''+img.url+'\')');
    image[0].style.backgroundImage = ('url(\''+img.url+'\')');
    $('#externalBackgroundImage').css('backgroundImage', 'url(\''+img.url+'\')'); 

Now, can you help me with some hints on how to make template use my background image ? I have read your instructions on wiki for templating language on this link:

https://github.com/voidlabs/mosaico/wiki/Template-language#-ko-properties-as-css-styles

I am new to knockout, so that makes things difficult for me too...

I would be very thankful if you can help me since I'm stuck on this for some time... Any kind of explanation or hint is very much helpful ! :)

[bago]

1) don't try to use jquery.. you CAN'T manipulate the template on your own altering the DOM as mosaico won't get that and you'll break everything.

2) What's wrong with the first step?

<center
  style="background-image: url(https://www.example.com/logo_en.jpg); -ko-background-image: url(@[backgroundSrc]);">

This way you should see a backgroundSrc property in your content tab for the template and if you fill it you should see this image in your html and in the export.

If you want to change this value via a function you do:

viewModel.setBackgroundImage = function(url) {
  viewModel.content().backgroundSrc('https://newurl');
};

or maybe you simply put onfile: $root.viewModel.content().backgroundSrc instead of onfile: $root.setBackgroundImage (even if I didn't understand where you tried to add this content.

[milancxe]

I saw that jquey manipulation is nearly impossible :)... Thanks for answer. As for the $root.setBackgroundImage I have put that in toolbox.tmpl.html. I was trying in the wrong way to change backgroundSrc. Now I have that, thanks a lot !

[sibbu2005]

For A single block: Add an Icon to open a upload zone in tool box File : /src/tmpl/block-wysiwyg.tmpl.html `

<!-- /ko -->`

FILE : /src/tmpl/toolbox.tmpl.html

`

X

Background Image:

Click or drag Image File here

`  **viewmodel DEFINE observables:** ` bgImageTool:ko.observable(false), bgImageHolder:ko.observable(null), bgImageBlockIndex:ko.observable(null), bgImageBlockParent:ko.observable(null),` **GET BLOCK OBJECT** ` viewModel.backgroundImage = function(index,parent){ var oldIndex=viewModel.bgImageBlockIndex(); var idx = ko.utils.unwrapObservable(index); var unwrapped = ko.toJS(ko.utils.unwrapObservable(parent.blocks)[idx]); var bgImage = unwrapped.backgroundImage; viewModel.bgImageBlockIndex(idx); viewModel.bgImageBlockParent(parent); if(typeof unwrapped.backgroundImage != 'undefined'){ viewModel.bgImageHolder(unwrapped.backgroundImage); }else{ viewModel.bgImageHolder(null); }` **SET BGIMAGE AND THEN REPLACE OBJECT** ` viewModel.setbackgroundImage = function(img) { console.log('setbackgroundImage is called'); viewModel.galleryRecent.unshift(img); var newBgImageUrl = img.url; var oldBgImage = viewModel.bgImageHolder(); var parent = viewModel.bgImageBlockParent(); var idx = viewModel.bgImageBlockIndex(); oldBgImage.src = newBgImageUrl; viewModel.bgImageHolder(oldBgImage); var unwrapped = ko.toJS(ko.utils.unwrapObservable(parent.blocks)[idx]); if (typeof unwrapped.backgroundImage !== 'undefined') unwrapped.backgroundImage = viewModel.bgImageHolder(); parent.blocks.splice(idx,1, unwrapped); viewModel.notifier.success(viewModel.t('Background Image Changed...')); };` 

[godara-ravi]

@bago

i also tried to do set background image. And somehow i am able to do this with your sharing code: <center style="background-image: url(https://www.example.com/logo_en.jpg); -ko-background-image: url(@[backgroundSrc]);">

But i am facing an issue there is that i am not able to change background image from a button. I am able to do this with background image input field from the left panel with complete url of an image that not make sense. Can you please help me out this?

I tried to add this code:

But its not working for me. Thanks!