Widget:Image Anchor

From Open Energy Information

This widget builds (wraps) an anchor for buttons and tiles that contain only images (or a tile with only a label).

Dependencies

There are a few dependencies that are required to use this widget.

  1. it requires the use of an element with a btn or tile class.
  2. it requires use data attributes with elements using the classes listed above to set anchor attributes and element styles:

REQUIRED

  1. data-image
    • use to set the background image
    • e.g. data-image="/w/images/6/69/URDB-logo.png"
  2. data-link
    • use to set the anchor href
    • e.g. data-link="Utility_Rate_Database"
  3. data-alt
    • use to set the anchor alt text
    • e.g. data-alt="Utility Rate Database"

OPTIONAL

  1. data-style
    • use to apply styles to an element property:value
    • e.g. data-style="background-size:85%;"
    • use semicolons ( ; ) to separate multiple styles
    • e.g. data-style="height:200px;width:200px;background-size:85%;"

Markup

In order to use this widget, call the widget using wiki syntax:

{{#Widget:Image Anchor}}

The widget should only be called once per page.

Then use HTML markup on the page to build each element:

<span class="img-a btn" data-image="/w/images/6/69/URDB-logo.png" data-link="Utility_Rate_Database" data-alt="Utility Rate Database"></span>

Examples

Button

Placing this on your wiki page:

{{#Widget:Image Anchor}}
<span class="img-a btn" data-image="/w/images/6/69/URDB-logo.png" data-link="Utility_Rate_Database" data-alt="Utility Rate Database"></span>

Results in this:

Tile

Placing this on your wiki page:

{{#Widget:Image Anchor}}
<span class="box img-a tile" onclick="void(0)" data-image="/w/images/8/89/New_York_buildings.png" data-link="Gateway%3aBuildings" data-alt="OpenEI Buildings Gateway" data-style="background-size:105%;"><span class="tile-label">Buildings</span></span>

Results in this:
Buildings

Using External Images

The above example used an image file that was uploaded to OpenEI. A URL to an external image may also be used, but be aware that by using external images, there is no guarantee that the image will always be available. It is recommended to use images that have been added to OpenEI.

<span class="box img-a tile" onclick="void(0)" data-image="https://images.unsplash.com/photo-1476158085676-e67f57ed9ed7?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=" data-alt="OpenEI Buildings Gateway" data-style="background-size:105%;"><span class="tile-label">External Image</span></span>


Extnernal Image