weebly

Default images in template level in Weebly

Is there any way to set default image sources in the 'header type html' in order for page editors to see an image in the page edit mode?

Because when I add an image as the following

<div class="text-center">
  {sec-two-image1:image global="false"}
</div>

What I see in the page edit is only an image icon which does not make a good sense for the user. See : http://prntscr.com/fqxmzf

My purpse is to present a proper view for him to understand how it will look like after publishing? But I guess the images given in the template level ( I mean the elements provided as a custom html ) are not rendered properly. Any way to succeed it?

Solution

  • Because the image that you are seeing is HTML, see screenshot, you wouldn't be able to change it with CSS.. AND you might not be able to do it with JavaScript or Jquery either.

    enter image description here

    But that being said, you can certainly change the white background area using CSS. You would do something like;

    #icontent .weebly-image-area-placeholder {
    background: url(background.png) no-repeat;
    background-position: 50% 0;
    box-shadow: inset 0px 0px 15px 0px #000000;
    cursor: pointer;
}

    Note that you really only need to use background: url(background.png) no-repeat; in the CSS noted above, but I have added all of the CSS for that placeholder so you can see that you can change the other aspects of it as well.

    Leaving the placeholder image in place, would at least let the user know that they can and should replace that image.