Blog - Blocks - Infographic Code Block

Infographic Code Block

The Infographic Code Block lets you to share an image on your site with a code box allowing your visitors to copy/paste the HTML code on to their site, with link and sttribution back to the source page on your site.

Settings Overview

  • Block Editor
    • Infographic Title : You may enter a title to include above the image in your infographic code. Choose which HTML tag to use, and add style tags using the toolbar buttons.
    • Image/Preview Label : You may enter a label to display above the image/title in this block on your site. This is not included in the HTML copy/paste code.
    • Code Box Label : You may enter a label to display above the code box in this block on your site. This is not included in the HTML copy/paste code.
  • Toolbar
    • Image : Choose an image from your Media Library to be used as the infographic. [tutorial]
    • Title Tag : Choose a heading tag value or non-heading (div) tag to be used in the infographic code and displayed on the target site.
    • Layout : Choose whether to display the image beside the code box in a “preview window”, or display the image normally over the code box.
    • Title Text Styles : Choose to bold, italicize and/or underline the infographic title.
  • Block Settings
    • Image : same as toolbar
    • Layout : same as toolbar
    • Image Alt Text : Enter an image description to be copied into the infographic object on your visitor’s websites. “Alt” is a tag attribute used by browsers, search engines and text readers to describe an object, most browsers will display this text when you mouse over the image.

Object Map (DOM)

  • root object (div) targeted node from Block Settings panel : Optional settings that apply to this block.
    • internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are the block’s children.
      • preview wrapper (div) untargeted node : Used to support layout options.
        • preview label (div) : untargeted node : Optional text label for the preview section of the block.
        • preview object (div) untargeted node : Render the image and infographic title as it would be seen on the target site.
          • title (div) targeted node from block toolbar format buttons : Optional infographic title text modified with heading and format/style tags.
          • image (div) untargeted node : Render the infographic image with a link back to the source site/page.
      • code box wrapper (div) untargeted node : Used to support layout options.
        • code box label (div) : untargeted node : Optional text label for the code box section of the block.
        • codebox object (pre) untargeted node : “pre” tag used to contain the actual “code” object.
          • code object (code) untargeted node : “code” tag used to render HTML that can be copied to the clipboard.

Example #1 – Normal Layout

Infographic Preview

Please include attribution to ampwptools.com with this graphic.
Copy/paste this HTML into your site.
<p><div><strong>Please include attribution to ampwptools.com with this graphic.</strong></div><a href="https://ampwptools.com/infographic-code-block/"><img src="https://ampwptools.com/wp-content/uploads/2019/04/accelerate.jpg"  border="0" /></a></p>

Example #2 – Preview Mode

Infographic Preview

Please include attribution to ampwptools.com with this graphic.
Copy/paste this HTML into your site.
<p><div><strong>Please include attribution to ampwptools.com with this graphic.</strong></div><a href="https://ampwptools.com/infographic-code-block/"><img src="https://ampwptools.com/wp-content/uploads/2019/04/accelerate.jpg"  border="0" /></a></p>