Skip to content

Image Link Blocks in Panels

Jump to bottom
Sarah Carney edited this page Mar 8, 2018 · 8 revisions

Note: Image Link Blocks have been replaced with the luggage_bean_card module. This method is still supported, but we recommend switching to the module so you can take advantage of new features, bug fixes, and other updates.

Suitcase Interim 1.0.6 added CSS support for image link block HTML mini-templates, which are just right for Mega Panels.

Codepen Demo: http://codepen.io/biology-it/pen/XMwVzB/

Options

class="image-link link-red" Option for an image with a colored button and icon below.

class="image-overlay" Option for an image with dark overlay caption

class="image-overlay overlay-full" Option for an image with full with caption overlay

Set Up

  1. Ensure you are using a content authoring text format that allows HTML input, and does not filter out <div>, <span>, or the class attribute.
  2. Create a block. Structure > Blocks > Add Block
  3. Insert the snippet in the Block body

Snippet

<div class="image-link link-red"><!-- Use desired classes -->
    <a href="YOUR LINK URL">
        <img src="YOUR IMAGE URL" alt="YOUR ALT TEXT">
        <h2><span class="fa fa-YOUR-ICON" aria-hidden="true"></span>YOUR LINK TEXT</h2>
    </a>
</div>
  1. Replace link url, image url, link text, and Font Awesome icon class

Customization

  1. Use the appropriate class to customize the design.
  2. There are three designs available. Use the classes provided. (See above.)
  3. There are six link colors available. These are Iowa State University brand colors, and have sufficient contrast with white text to satisfy WCAG AA standard.
    • link-red for #cc0000
    • link-green for #76881d
    • link-blue for #006ba6
    • link-dark-red for #7c2529
    • link-dark-green for #3E4827
    • link-dark-blue for #003D4C
  4. Icons are Font Awesome. See a list of all Font Awesome icons: http://fontawesome.io/icons/

Add Block to Mega Panels

  1. Open the Panel where the new Block will go
  2. Click the gear icon in the desired panel and select "Add content" Screenshot of panels editing screen with the gear icon outlined
  3. Find your new Block under Custom blocks Screenshot of the where to find the new block under custom blocks
  4. Select "Override title" and leave field blank
  5. Finish
  6. Update and Save your Panel changes

Notes

  • Choose an image size that will have the desired width and behavior on tablet and mobile screens. Recommended width is 750px.
  • Icons are not required, and can be moved around in the <h2.
Clone this wiki locally