Table of Contents

Overview

Presentation is set from a dropdown at the bottom of the Image asset window.  BloxCMS will not edit images automatically.  Image Assets can be cropped within the Image Asset Edit window.  Any other editing needs to be done with Image Editing Software.

There are eight ways to present images:

  • None - (default) - No special presentation is applied.
  • Cutout - An image that should be cut out of the background.
  • Mugshot - A close-up view of a person's face.
  • Panorama - A wide, panoramic image that will require horizontal scrolling.
  • Masthead - A column-spanning image intended to appear above an article's content.
  • Zoom - An image with a lot of detail that would benefit from a zoom-in feature.
  • Showcase - A particularly stunning image that should receive special attention.
  • Infographic - Charts, maps, and other non-photographic visual representations of information.
image presentation main

NOTE: Viewing an Image Asset using any of the Presentations will only work as intended when it is used in an Article Asset as a Child Asset.  

NOTE: Presentations will not work as intended if they are used as an Inline Image in an Article Asset.


None

This is the default Presentation.  No special presentation is applied.  The title of the Article Asset is displayed at the top with the Byline directly underneath it and aligned left. The Image Asset is featured above the article content with the Image Asset Byline and Caption displayed directly underneath it. On the left of the Article Asset content will be additional content such as Maps or Sibling Assets. The Author is displayed at the bottom on the left of the Article Asset.  

+8 
Image Presentation None Flex

Cutout

This Presentation should be used when an image should be cut out of the background and you want to bring attention to some specific detail within the image. Here is an example of an image using the Cutout Presentation after it was edited from the original. To demonstrate, in this example, the original image is at the top and the Cutout Image Asset is aligned left underneath the original. When using the Cutout Presentation, the Image Asset will be displayed left of the content of the Article Asset. The title of the Article Asset is at the top with the Byline directly underneath it. The Byline and Caption of the Image Asset are also displayed directly underneath and aligned left. Any additional content such as Maps or Sibling Assets are positioned on the far left with the Author displayed at the very bottom left of the Article Asset.


BEST PRACTICE: This Presentation will not display as intended if the Article Asset is using Long-Form Presentation.  


+8 
Image Presentation Cutout Flex

How a Cutout Presentation Image Asset appears in a normal Article Asset.

+8 
Image Presentation | Cutout Normal (Flex)

Mugshot

The Mugshot Presentation is intended to achieve a close-up view of a person. The title of the Article Asset will display at the top with the Byline directly underneath it. The Mugshot Presentation Image Asset will display to the left of the content of an Article Asset.  The caption and Byline also display directly underneath the Image Asset and align left. Additional content such as Maps and Sibling Assets will display on the left of the Article Asset content with the Author at the bottom left of the Article Asset.


BEST PRACTICE:  This Presentation will not display as intended if the Article Asset is using Long-Form Presentation.  

NOTE:  Mugshot Images will display at the top of the story (including any Related Child Images) on Mobile devices.


+8 
Image Presentation Mugshot Flex

NOTE: You will need to crop the image. The Image Asset Editor in your BLOX CMS Admin provides a cropping function. To learn how to crop an image, click here.


Panorama

This presentation is ideal for larger, wider image assets that can't fit onto the page of the website. Setting the image to present as Panorama will enable the viewer to navigate the photo within its original parameters. The title of the Article Asset is at the top with the Byline directly underneath. The Image Asset caption is directly underneath the image. Additional content is displayed to the left of the Article Asset content and below the Panoramic Image. The Author is displayed at the very bottom of the Article Asset and aligned left.


BEST PRACTICE:  This Presentation will only work in an Article Asset using the Presentation of "None."


Masthead

Masthead Images have two primary applications. They are primarily used for Article Assets and are used for customizing a Featured Business Storefront.

Article Assets

Masthead is a column-spanning image intended to be placed above an Article Asset's content. Images with this presentation are intended to illustrate the article without further explanation. If your image needs a title or caption to explain why it is being used in the article, you should consider using the Showcase Presentation. The title of the Article Asset is displayed below the Masthead Image with the Byline directly underneath. Additional content such as Maps or Sibling assets are displayed on the left of the Article Asset content with the Author at the bottom and aligned left.


BEST PRACTICE:  We recommend that you use an image that is 1170 px x 250 px for optimal display. This image will be fully viewable regardless of the resolution size or device type the Featured Business is being viewed in.


+8 
Image Presentation Masthead Flex

Featured Business Storefront

Then using a Masthead image for a Featured Business Storefront, a Business Logo is first required (see Business Directory Storefronts (Flex Only). The Masthead image is positioned at the top of the Featured Business Listing and the Business Logo is positioned on the left, on top of the Masthead image.


NOTE:  The logo is still required for the Business Listing but it can be hidden from appearing on the Masthead image by going to the Business Listing in the BLOX CMS Admin and under Other / Custom Properties, add in the property Name = hide_logo | Value = true.

NOTE: There is a Default Masthead Image that will appear (via the Google Map API ID) which will generate a Street View of the business. You can also use the 'pano-url' custom property to use an alternative street view masthead image.  These can be over-ridden by uploading a Masthead Image.  For more information, Click Here.


+8 
masthead

Zoom

This Presentation is a great way to let site visitors interact with your content.  Use this Presentation for an image with a lot of detail that would benefit from a zoom-in feature.  The title of the Article Asset is displayed at the top of the page with the Zoom presented image just below it.  The caption of the image is directly underneath the image followed by the content of the Article Asset.  Additional content such as Maps or Sibling assets are displayed on the left of the Article Asset content with the Author at the bottom and aligned left.


BEST PRACTICE: This Presentation will only work in an Article Asset using the Presentation of "None."


Showcase

A particularly stunning image that should receive special attention. The Showcase Presentation will display any caption in the lower left corner of the image. If the caption is lengthy, a toggle will appear in the upper right corner to collapse the caption.  The title of the Article Asset is displayed at the top with the Byline directly underneath it. The content of the Article Asset is displayed below the image. Additional content such as Maps or Sibling assets are displayed on the left of the Article Asset content with the Author at the bottom and aligned left.

+8 
Image Presentation Showcase Flex

Infographic

This Presentation is most suited for Charts, maps, and other non-photographic visual representations of information. The title of the Article Asset is displayed at the top of the page with the Image Asset below it. The caption will be displayed horizontally directly underneath the Image Asset with the content of the Article Asset following below that. Additional content such as Maps or Sibling assets are displayed on the left of the Article Asset content with the Author at the bottom and aligned left.


BEST PRACTICE: This presentation will not display as intended if the Article Asset is using the Long-Form Presentation.


+8 
Image Presentation Infographic Flex