• Support
  • Community Site
  • Login
617.471.4440
PaperThin Inc.
Web Content & Experience Management
  • Solutions

    Solutions That Drive Value

    Solutions By Category

    Solutions By Topic

    Solutions By Industry

    All Solutions

    Solutions That Drive Value

    • Web Content Management
    • Experience & Content Marketing
    • Website Optimization
    • Mobile & Responsive Design
    • IT Excellence
    • System Management & Development

    Solutions By Industry

    • Higher Education
    • Government
    • Healthcare
    • Associations
    • Legal
    • All Solutions
    • Solutions List
  • Product

    Product Offerings

    Features

    CommonSpot Cloud

    Cloud or On Premises

    Widget Gallery

    Product Offerings

    • CommonSpot CMS
    • Digital Marketing Engine
    • Marketing Optimization Tools
    • IT & Developer Tools
    • Cloud or On Premises
    • CommonSpot Cloud
    • Deployment Options
    • Widget Gallery

    Features For:

    • Marketers
    • Designers & Developers
    • Administrators
    • Content Contributors
    • All Features
    • Feature List
  • Services

    Services Overview

    CommonSpot Training

    Customer Support

    Professional Services

    World Class Services

    • CommonSpot Training
    • Customer Support
    • Professional Services
  • Customers

    Spotlight Customers

    Testimonials

    Our Customers

    • Spotlight Customers
    • Testimonials
  • Company

    About PaperThin

    Contact Us

    Directions

    Blog

    Videos & Webinars

    PaperThin Community

    About PaperThin

    • About Us
    • News
    • Employment
    • Contact Us
    • Directions

    PaperThin Resources

    • Blog
    • Videos & Webinars
    • PaperThin Community
  • Blog
  • Subscribe
  • Search
  • Login
Get Demo Subscribe

Image Textblock

Get Demo
  • Home
  •  Widget Gallery
  •  Image Textblock
Renders simple constructs with an image, title, text, and a link which can be setup to display in various responsive column and layout configurations.
Image Textblock Image Above - 4 column left justified
Image Textblock ImageAbove - 3 column centered
Image Textblock ImageRight
  • Overview
  • General Properties
  • Element Properties
  • Installation
  • Docs

This CommonSpot Widget, Image/TextBlock renders an image, title and text content in stacked responsive sets. The image, title and description text with an optional link rendered at the bottom may be placed in varied positions in over a dozen layout options. Using this widget on your homepage or landing pages will allow you to select and highlight your site's deeper content with a modern responsive style.

Bind this widget’s Generic Render Handler and Metadata Form to your own Custom Element content object or use the optional Example Global Custom Element. With many options, like selecting the number Grid Columns for Large, Medium, Small and X-Small devices, and setting Color and/or Alignment for the Title and Description text, this widget can be configured to display your content in a an almost unlimited variety of ways.

For developers, the Generic Render Handler file and included Cascading Style Sheet can be customized to fit your specific content display requirements.

The Image TextBlock Widget offers many layout options for your content. The position of the Title, Sub-title, Description and Image, as well as the colors and spacing are all controllable with the associated custom metadata form. Using CommonSpot's out-of-the-box Show-Hide feature, the forms present just the options you need for each of the layout choices. The fields presented in the metadata forms therefore vary by layout selection. For instance, only the 2x2 Image Center layout has a Center Image fields on it's Image Properties tab.

Available layout options include:

  • Stacked Vertically
  • Stacked Vertically - Title Overlay
  • Stacked Vertically - Custom Separators
  • Stacked Vertically - Title & Subtitle Above
  • Title & Subtitle in Block Above
  • Content in Block Below
  • Major & Minor
  • Major & Minor Overlayed
  • Stacked Horizontally
  • Image on Side
  • 2 Column Image on Side Alternating
  • Text Overlayed
  • Alternating Blocks Vertical
  • 2x2 Image Center

Layout & Card Properties (tab)

The "Stacked Vertically", "Stacked Horizontally", "Major & Minor", "Image on Side", "2 Column Image" and "Text Overlayed" layout options present these options.

    

  • Layout - over a dozen layout options:
  • Card - potential fields:
    • Align - left, center, right or inherit
    • Border Size - 1 to 50 pixels in various sizes
    • Background Color - many options including 'not set'
    • Border Color - many options including 'not set'
    • Style - several different border options
    • Padding - top, right, bottom and left in pixels from 1 to 999
    • Theme - font color and background color
    • Hover Item - text color and background color

 When "Title & Subtitle in Block Above" or "Content in Block Below" is selected from the Layout select list, more fields are displayed as shown in the screenshot below.

  • Card
    • Align
    • Border Size
    • Background Color - many options including 'not set'
    • Border Color - many options including 'not set'
    • Style - 9 different options
      • border only
      • small shadow
      • medium shadow
      • bottom shadow
      • full shadow
      • left edge turned up
      • right edge turned up
      • bottom edges turned up
    • Padding - top, right, bottom and left in pixels from 1 to 999
  • Block
    • Background Color - many options including 'not set'
    • Padding - top, right, bottom and left in pixels from 1 to 999
  • Block Margin - Top, Right, Bottom and Left in pixels in various sizes between 0 and 200

Alternating Blocks Vertical options add "Theme" Font and Background Color:

2x2 Image Center adds this field to the options in the above screen shot:

Animated Text Rollover adds the Block Margin options:

General Properties (tab)

 

 

  • Element
    • Background Color - many options to pick from
    • Padding - top, right, bottom and left in pixels from 1 to 999
  • Columns for Device - Options for determining how many columns you wish to display for 5 different screen sizes.
  • Gutter Width - none, 15px, 30px, 45px, 60px
    • The amount of gutter space in pixels around each image textblock
  • Background Image - optional image that loads underneath this widget as a background
  • Background Image Focal Point
    • top left, top middle, top right
    • center left, center middle, center right
    • bottom left, bottom middle, bottom right

Image Properties (tab)

The options on the Image Properties tab are also dependent on the Layout option chosen on the Layout Properties tab.

Image Height set to 'auto' has these options.

  • Image Movement
    • none
    • slide right
    • slide down
    • zoom in
    • zoom out
    • zoom out & slide right
    • resize in
  • Initial Shading - The shading over the image when the mouse is not over the image. If no color is set, it will have no effect.
    • Color
    • Style
    • Opacity
  • Rollover Shading - The shading over the image on rollover. If no color is set, it will have no effect.
    • Color
    • Style
    • Opacity
  • Center Image - the image that will appear in the center of the 2x2 grid
  • Center Image Focal Point
    • top left, top middle, top right
    • center left, center middle, center right
    • bottom left, bottom middle, bottom right

Image Height set to 'percentage of width' adds this field:

Image Height set to 'fixed height' adds this field:

When different choices are made on the Layout & Card Properties tab - Layout field, these fields change even more.

Title, Ssubsites & Description Properties (tab)

  • Title
    • Tag - h1, h2, h3, h4, h5, p, div
    • Align - left, center, right, inherit
    • Size - 12 sizes to choose from
    • Font Settings - bold, italic, underlined, Initial Case, Title Case, Upper Case, Lower Case
    • Color - many options including 'not set'
    • Background Color - many options including 'not set'
    • Padding - top, right, bottom, left in pixels
  • Subtitle - yes or no (yes provides more options)
    • Tag - div, h1, h2, h3, h4, h5
    • Align - inherit, left, center, right
    • Size - 12 sizes to choose from
    • Font Settings - bold, italic, underlined, Initial Case, Title Case, Upper Case, Lower Case
    • Color - many options including 'not set'
  • Line: Show - yes or no (yes provides more options)
    • Align - inherit, left, center, right
    • Size - 12 sizes to choose from
    • Color - many options including 'not set'
    • Style - 10% to 100% in increments of 10 - determines the amount of width the line is drawn in the available space
  • Minor Line: Show - yes or no (yes provides more options)
    • Align - inherit, left, center, right
    • Size - 12 sizes to choose from
    • Color - many options including 'not set'
    • Style - 10% to 100% in increments of 10 - determines the amount of width the line is drawn in the available space
  • Description: Show - yes or no (yes provides more options)
    • Tag - div, h1, h2, h3, h4, h5
    • Align - inherit, left, center, right
    • Size - 12 sizes to choose from
    • Font Settings - bold, italic, underlined, Initial Case, Title Case, Upper Case, Lower Case
    • Color - many options including 'not set'

Link / Button Properties (tab)

  • Click here for details about the Link/Button Properties options.

The default Custom Element that comes with the Image Textblock Widget has the following fields:

Title and Image (tab)

  • Title - Required. The title of the item
  • Image - Required. The image to display with the item.
  • Subtitle - The subtitle of the item
  • Link URL - The target URL to link to
  • Link Text - The link/button text
  • Image Focal Point - The focal point position of the image

Description (tab)

  • Description - The descriptive text for the item.

 

The Image TextBlock Widget has the following importable components in the master import packet:

  • Global Custom Element
  • Metadata Form
  • Generic Render Handler

Because this widget's render handler is written as a “generic" render handler you can either use the provided Custom Element , or use your own existing Custom Element on your site instead.

If you want to use the provided global Custom Element, do the following:

  1. Download the master import packet
  2. Import all seven items listed in the step 2 of 2 import dialog.
  3. Confirm the Metadata Form is bound to the Render Handler

If you plan on using your own custom element, do the following:

  1. Download the master import packet
  2. Import the Metadata Form
  3. Import the Render Handler
  4. Confirm the Metadata Form is bound to the Render Handler
  5. Map your Custom Element fields to the Generic Render Handler

For detailed information on how to import the various components, please see Importing Widgets.

General Widget Documentation

What makes up a Widget?
Common Widget Properties
Importing Widgets
Widget Documentation for Developers
Widget Style Sheets
Author: PaperThin
Version: 1.0
Dependencies:
  • ADF 2.3
  • Bootstrap 3.3
  • Font Awesome 4.7
At this time Bootstrap 4.x or Font Awesome 5.x are not supported.
Master Import Packet
File Version: 2022-12-23 01:14 PM

Master Import Packet for Image Textblock

PaperThin, Inc.

PaperThin, Inc. is a privately held, US-based company since 1993. Our flagship product CommonSpot™ helps organizations create world-class Web experiences. PaperThin's customers span multiple industries, including: government, healthcare, higher education, and association/non-profit sectors.

Contact Us

 617.471.4440
 info@paperthin.com

Learn More

  • Get a Demo
  • Try Now
  • All Features
  • Cloud vs. On-Premises
  • Spotlight Customers
  • Testimonials

CommonSpot is for:

  • Marketers
  • Designers & Developers
  • Administrators
  • Content Owners

Customer Links

  • Contact Support
  • Community Site
  • Professional Services
  • Training
  • Give Feedback

General

  • Contact Us
  • About PaperThin
  • Site Map
  • Career Opportunities
  • Privacy Policy
  • Terms of Use

Copyright © 2025 PaperThin, Inc. / All rights reserved.