An image stack with choice for source type

Summary

We will code a stack that inserts an image in the web page. The source of the image can be of two types:

• Drag and drop
• Referenced through a URL (also known as a warehouse image)

The plan is the following

1. First we create the stack interface to use both kinds of image source
2. We create the necessary code in the template HTML file for each kind of source
3. We implement the logic that lets the user chose which kind of image source he will use:

• To do so, we create a checkbox control to chose the image source
• Depending on the value of the checkbox control, we will display the interface that reflects the choice of image source
• Depending on the same checkbox value, we implement different code in the HTML page

Before starting the lesson, download our first example stack package; it will be a starting point for the lesson.

Drag and drop

Stack control

We will use a drag and drop zone in the control sidebar of the stack page. The reference for this is image. The entries are very simple:

• an id (we will use dragAndDrop)
• a title (for instance Drag image here, make it short!)
• and the type, which must be image

You should have no difficulty creating this stack control by using a PLIST editor.

Template code

The documentation says that the output of the control is an img tag. Actually, it is the URL of the image file that the the control value has; in other words, %id=dragAndDrop% will output the URL of the image in the HTML code. To turn this bit of code into a valid image HTML code, let us take look at what w3schools says about it. The syntax for an image HTML element is

<img src="image_URL" alt="image_description">

We already have the image URL, we need to provide some text for the alt property. This text is displayed when the image is not available through the internet; it is also used for people with visual disabilities.

The solution is simple: create an input control for the stack that will give the value for the alt parameter. Assuming that the id of the description is alt, the following code should work in the template:

<img src="%id=dragAndDrop%" alt="%id=alt%">

This works rather well in edit mode, but in preview mode, if your image is rather wide, you will see that it is cropped (and it will be cropped in your web page too).

To correct this problem, we must use the CSS property max-width: 100%. The template code becomes:

<img src="%id=dragAndDrop%" alt="%id=alt%" style="max-width: 100%;">

For further info on the max-width property, see w3schools.

URL

Stack control

As seen before for the imgtag syntax, an image in HTML is actually a URL to the actual image file. Therefore it makes sense to incorporate an image directly by using the URL of the image. We inplement the interface for this as a text input. In what follows, we shall assume that the id of this text input is url.

Template code

The code in the template file is almost the same as for the drag and drop option, except that the id of the control is now url. This should look like this:

<img src="%id=dragAndDrop%" alt="%id=alt%" style="max-width: 100%;">
<img src="%id=url%" alt="%id=alt%" style="max-width: 100%;">

You can use the following image URL https://webmagic.services/uploads/teddyBear.jpg to incorporate a teddy bear image in your page.

Note that you can use resource images instead of distant images. To do so, right click the image in the Resource window, select Copy Macro and paste the macro into the URL text input. This may not display the image in edit mode, but it works in preview and for the actual published site.

Incorporating some logic

Actually we do not want to display two images in the stack. To publish only one, we will add a checkbox control to the stack. If checked, a URL will be used; if not, the drag and drop interface will be used. The default mode will be drag and drop.

Stack control

The checkbox control has the following properties

• type (checkbox)
• id
• title
• trueValue
• falseValue
• default (which is the default value)

Since the output of the checkbox will be used to control the logic of the code in the template file, it is sensible to attribute a boolean to the three possible values of the control. In the whole generality, any type of output can be used.

You already know about type, id and title, so you should have no problem creating the checkbox control. In the PLIST, put it in first position, before the drag and drop zone. We will assume that the idof the control is mode.

We will now use a property of stack controls that you may have seen almost in every control description in the documentation, but that we have not used until now: the enable entry.

The enable property of a control links the visibility of this control to the value of another control. Here, we will show or hide an image source control depending on the value of the checkbox.

For instance, the drop zone control is enabled/visible when the value of the checkbox control is set to the boolean false. The URL control is visible for thetrue value of the checkbox.

To achieve this logic, all you have is to add a suitable enable property to these two controls, based on the value of the control with id mode.

Once this is done, clicking on the checkbox will show/hide these controls.

Template code

Now the controls work as expected, but we still have two images on the web page! This means that we have to replicate our logic in the template code file. To do so, we will use conditional macros.

The syntax is the following

%[if <boolean_value> ]%
    code chunk to be used when <boolean_value> is true
%[endif]%

To negate a boolean, prefix it with the ! negation operator.

Use this to modify the HTML code that is injected from the template file into the web page, depending on the state of the checkbox.

Project download

Now your stack should be fully functional. You can download the project here