Clickable image banners

Version 6
    Share:|

    We know the default functionality of an image is for it to be clickable to open up the original size of itself (example the 'Hide header and Border' blue image below).

     

    To use it as a banner, i.e. to make the image clickable to go to a website/ community resource of your choice, you have to edit the html.

    Here are the steps.hide header border.png

    1. Available size options (width only: 450px for the center col & 200px for the side cols) for your standard 3 col Overview page layout and 640px (max) for use within a document/blogpost. So please scale your pic to fit the specs.
    2. Include the image banner on the Overview page of your Community/ group.
        • preferably through a 'Formatted Text' widget
        • Hiding it's Header & border option (so as to get full width)
        • Position it center if it is an image smaller than the full available width
    3. Edit html
        • Wrap an <a href=""> tag around your <img> to hardcode the url you want to point to
        • Specify the width and height of your image.
        • You can start with the embed code for the square banner on BMC Engage
          <body><p><a href="http://engage.bmc.com/" onclick=""><img alt="BMC Engage." class="image-0 jive-image" src="/servlet/JiveServlet/downloadImage/73-30244-70366/Engage_logo_lockup_0609_Engage_GUC_2014_DL.jpg" style="height: 200px; width: 200px; display: block; margin-left: auto; margin-right: auto;" __jive_id="70366" /></a></p></body>
    4. Save properties and publish