Adding in Images

Before we added dynamic text to our theme.

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <mb-edit ng-model="page.title" single="true"></mb-edit>
    </div>
    <div class="col-sm-12">
      <mb-edit ng-model="page.content.body1"></mb-edit>
    </div>
  </div>
</div>

Now we will add dynamic images.

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <mb-edit ng-model="page.title" single="true"></mb-edit>
    </div>
    <div class="col-sm-12">
      <mb-choose-image property="body1">
        <img mb-src="body1" class="img-responsive"/>
       </mb-choose-image>
     </div>
    <div class="col-sm-12">
      <mb-edit ng-model="page.content.body1"></mb-edit>
    </div>
  </div>
</div>

Choosing images is a two step process. First we create an element, be it an image or div and give it an mb-src attribute.

mb-src="body1"

mb-src

belongs-to

mb-src will listen for changes on the property passed in. By default it listens for that property on the page.images object. That can be overridden by passing a belongs-to attribute saying what the object is should look for that property on. We might use this in the case of a list of items, where we want to property to be attached to each item of the list

<img mb-src="image" belongs-to="sellingPoint">

works on divs

mb-src can also be attached to div's and will become a background image.

<choose-image property="header1">
  <div class="bg-banner-image" mb-src="header1">
  </div>
</choose-image>

placeholder image

If no image is showing in editMode, then it uses a placeholder image.

how to darken then image

In some cases you want a background image that is darkened so that text can display in front of it. You can add a background-prefix attribute to use this feature

<div class="bg-banner-image" mb-src="image-1" background-prefix="linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) )">
</div>

choose-image

Choose image is meant to surround an image so that when you click on that image, meanbase will pull up an image library that you may choose an image from.

belongs-to

Choose image also supports belongs-to

<mb-choose-image property="image" belongs-to="listItem">
  <img mb-src="image" belongs-to="listItem" class="img-responsive"/>
</mb-choose-image>

Combining the two

Now choose image wrapped the mb-src allowing people to edit images by clicking directly on the image.

disable-click

Sometimes if you have a background image and a hidden div in front of it you want to be able to click-through the invisible div to select the image behind it.

We can make this happen by passing

pointer-events: none

which I have conveniently done in a class name called

disable-click.

If you add this to the invisible div which blocks the image behind it, clicks will pass through the div and allow you to click the image behind. However if you disable a div so clicks will not register with it, all of that div's children will be disabled too, meanbase any editable text you have won't be able to be clicked on. So we must re-enable the click on a child div.

enable-click

Add the enable-click class name to your inner div too allow clicks to register on it so you can edit text on top of background images.

Example

<mb-choose-image property="image-1">
    <div class="bg-banner-image" mb-src="image-1" background-prefix="linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) )">
        <div class="container disable-click">
            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-message">
                      <div class="enable-click">
                        <mb-edit ng-model="page.title" single="true"></mb-edit>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</mb-choose-image>

Multiple images

You need to need to select multiple images just pass, multiple="true" to the directive

<mb-choose-image property="images" belongs-to="listItem.data" multiple="true">
    <button class="btn btn-block btn-success disable-click mb-bootstrap-gallery-choose-images-button">Choose Images</button>
</mb-choose-image>

Choosing image size

You can choose what size image you want the directive to return with size="size"

<mb-choose-image property="images" belongs-to="listItem.data" multiple="true" size="original">
</mb-choose-image>

It supports

• small
• medium
• large
• original