How to show an image on a Catalog Item?

[Luuk Vonk]

Hi,

We want to create a printing service, with options about paper size, the color of the front page, etc... To give this an easy look and feel we want to let the customer select an option with an image instead of text. For example we don't want a bullet with the word "landscape" but we want to show an image of an landscape page.

Thanx for your help!

[Slava Savitsky · Accepted solution]

You can write a UI macro that will render whatever you like and then add it to your catalog item as a variable of "Macro" or "Macro with Label".

[Luuk Vonk]

Thnx Slava,

I hoped there was an easier way to do this.

I've never created a Macro, does someone has an example what fits my question? Or can someone give me a start?

[Slava Savitsky]

In fact, you will need two variables. One will be a regular variable (could be radio buttons, a dropdown list, or just text) that will be hidden from the user by a catalog client script or UI policy. The other one will be a macro with images presented to the user. Your macro can be as simple as this:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

         <table width="100%">

                   <tr>

                             <td width="50%">

                                       <img src="portrait.png" id="portrait" onClick="myChoice(this.id)"/>

                             </td>

                             <td width="50%">

                                       <img src="landscape.png" id="landscape" onClick="myChoice(this.id)"/>

                             </td>

                   </tr>

         </table>

</j:jelly>

myChoice function needs to be defined in an onLoad client script and should set the value of the hidden variable when the users clicks on an image in the visible "macro" variable.

[VaranAwesomenow]

I tried this slightly differently usinga UI page and was able to show the image on the catalog item.

Created a UI page to show the image.

UI page code :

UI page - Name = IT Comms, HTML = <?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<table width="100%">  

                  <tr>  

                            <td width="100%">  

                                          <img src="comms_example.png" width="977" height="509"/>

                            </td>  

  </tr>

  </table>

</j:jelly>

I uploaded image to System UI > Images with the name comms_example.png.