Table of Contents

Overview

We've added software updates to the BLOX CMS Flex Templates that improve the ability to utilize various asset types in-line with Article Assets. We've also added some new styles, new presentation styles for images (i.e.: Parallax, Full-Bleed), and new alignment options for them. We call these improvements, "Article Designer tools." The Long-Form Presentation for an Article Asset is the most effective using the Article Designer tools but it will work with any Article Presentation. These tools enhance the look and feel of your sites content and helps keep users more engaged with your site, hence increasing the time they spend on your site especially in articles that are 1,500 + words. 

The Article Designer tools give you the ability to pull inline images and other asset types that relate to a specific paragraph or section of the story making it more relative and in-depth to the story which helps keep users engaged.


NOTE: If you are using Automatic Ads for in-story placement, it will likely disrupt the content from wrapping around inline assets set to display half, left or right depending on the paragraph count those ads are set to. The smaller the paragraph count, the more likely the ads will interfere.


Asset Types 

All Asset Types can be pulled inline to an Article Asset. Each Asset Type has a specific design applied to it regarding Style and Presentation with options you can choose on how to make it appear on your site. Types include:

Asset Type Example | Collections Timeline

+24 
Inline_CollectionTimeline.png

Asset Type Example | Collections Mosaic

+24 
Inline_Mosaic.png

Asset Type Example | Collections Mapped

+24 
Inline_CollectionMap

Asset Type Example | Table

+24 
Inline_Table.png

Asset Type Example | Image Right Align

+24 
Inline_ImageRight.png

Asset Type Example | Audio

+24 
Inline_Audio.png

Asset Type Example | Poll

+24 
Inline_Poll

Asset Type Example | Related Content Info Box Default

+24 
Inline_RelatedInfoDefault.png

Asset Type Example | Related Content Info Box Right

+24 
Inline_RelatedInfoRight.png

Asset Type Example | Related Content Bio Box

+24 
Inline_RelatedBio.png

Asset Type Example | Related Content If You Go

+24 
Inline_RelatedIfYouGo.png

Asset Type Example | Related Content Pull Quote

+24 
Inline_RelatedPullQuote.png

Asset Type Example | Calendar Event

+24 
Inline_CalendarEvent.png

Asset Type Example | Business Listing

+24 
Inline_BusinessListing.png

Asset Type Example | Classified Coupon

+24 
Inline_ClassifiedCoupon.png

Asset Type Example | Classified Real Estate

+24 
Inline_ClassifiedRealEstate.png

Related Content

Related Content are set up in Editorial / Assets - Application Settings (click on the gear icon in the upper right corner). Whatever is listed, automatically appears as an option within each asset. These can all be pulled inline to an Article. For more information on Asset Application Settings / Related Content Styles, Click Here.

Inline Options

Options available for Related Content are Alignment and Width. Sibling assets will default to full-width when pulled inline. 

Drag inline a Related Content item and then right click (or double click) to set the Inline Display Properties.

+24 
Inline_Related

How it Works

In the BLOX CMS Admin, go to Editorial / Assets. On Article assets, click on Related and add assets you want for the Article. Then pull them inline to the Article where you want them positioned. You can then Right Click (or double-click) the inline asset and select Edit Display Properties and modify them the way you want them displayed. The Long-Form presentation style works best.

+24 
ArticleAssetInlineRightClick.png

The Inline Display Properties window opens. Make your selections and click Apply.

+24 
ArticleAssetInlineDisplayProperties.png

The settings for the Inline Asset are listed in the lower right corner of the asset.

+24 
ArticleAssetInlineDisplayPropertiesSet.png

Inline Styles

There are three Inline Styles for each Asset Type: Default (normal view), Summary, Short Summary and Headline Link.

Summary

+24 
Inline Style: Summary

Headline Link

+24 
Inline Style: Headline link

Short Summary

+24 
Short Summary

Specialty Styles

Editorial Assets will have additional Inline Styles you can choose from and they are based on the type of asset. For example, the Mosaic Style is available for Collection Assets but not to Image Assets. Currently the following Specialty Styles are available:

  • Asset Presentation - Available for Article, Image, Video , and Collection Editorial Asset Types. Click the Asset Type for documentation and examples for all the Asset Presentation Styles.
  • Parallax - Available for Image Asset Types. This option only works using the Long-Form presentation in Article assets and set to Full Width when pulled inline. Parallax uses the Full-Bleed style image (entire image) but creates a specific viewport or window in which to view an image in. The viewport stays stationary on your page and the unseen portion of the image appears in the viewport as you scroll.

NOTE: Parallax - When used in any presentation form other than Long-Form, will only display the image without any effects; this includes mobile too.


+24 
Inline Image Parallax Anim Gif
  • Full-Bleed - Available for Image and Video Asset Types. This option only works using the Long-Form presentation in Article assets and set to Full Width when pulled inline. This is a full image that spans the width of the browser without a Parallax viewport. As you scroll through the page, the image will scroll with the rest of that pages content.
+24 
ArticleAssetFullBleed.png
  • Mosaic - Available for Collection Asset Types. There are two ways to present the Mosaic Style. For the purpose of Article Design Tools, Collection Assets - when pulled inline to an Article Asset, has this mosaic style option. There is a block called Card: Mosaic that has additional appearance options within the block only. For more information on the block, Click Here.
  • Table - Available for Table Asset Types.
  • Video Player - Available for Video and YouTube Asset Types.
  • PDF Preview - Available for PDF Asset Types.
  • Poll - Available for Poll Asset Types.
  • HTML - Available for HTML Asset Types.

Frequently Asked Questions

  • Does content with these tools stay with the article when syndicated?
    Yes, if it is a Child Asset pulled inline. Sibling Assets will generate a link back to the original site when being syndicated.
  • What other BLOX CMS application assets are compatible with using these tools?
    All BLOX CMS applications that generate content (assets) such as Classified Ads, Calendar Events, etc. can be pulled inline to a story.
  • Will these tools work with Contributed Content?
    Yes. You can pull content inline to a contributed story or pull contributed content inline to an Article. However, this can only be done in the BLOX CMS Admin. The User Dashboard does not support the functionality of pulling other contributed assets inline to a Contributed Story.
  • Are these tools/functionality available for BLOX Total CMS?
    Yes. See your Regional Sales Representative or contact TownNews.com Customer Service - (800) 293-9576.
  • How does this affect mobile or smaller devices?
    Article Design tools are mobile friendly. The width display, if set other than Full, may display as Full depending on the viewport size of the mobile device.
  • Is this functionality compatible with the Zen templates?
    These were designed and developed for the Flex templates only. Inline assets still work with Zen templates but the styling will not be the same.
  • Can I pull a Google Map inline to an Artile or Collection Asset?
    A Google Map itself, is not an Asset Type. Maps are generated by BLOX CMS when an address (or longitude and latitude coordinates) are entered into an Asset. You can, however, have a Google Map generated in a Collection Asset if the Collection has Article Assets that have the Location fields filled out under Other in the Article Asset Editor (see example above).
  • Are Article Designer tools available on the User Dashboard?
    The User Dashboard is a form-based utility for users to submit and manage their content with minimal design options (for example, bold face fonts). The Article Designer tools are not part of the User Dashboard.

Best Practices

  • It is best to use the Long-Form Presentation in an Article Assets when using Article Design tools.
  • In situations where your story is 1,500 or more words, these tools can help keep users engaged. They help break up the flow of text by being able to add other relevant (or related) assets to a particular segment of the story. It adds visual interest.
  • Alternate between left and right alignments of inline assets. This helps create a more clean, professional, and balanced presentation of the story.
  • Article Design tools were designed with mobile use in mind first. As you write your story, keep mobile or smaller devices in mind by adding a visual element every two or three viewports.
  • When planning a new article, inform the photographer what your interested in and to try and take a few photos that can be used as a full-width image.
  • Full-width images such as a Full-Bleed or Parallax are more appropriately used at the top of the story in most cases.
  • Using Related Content such as Pull Quotes or Info Boxes can add drama to a story.
  • Target ads to keyword: full-longform to get ads specifically for full-page longform articles. A 970 px billboard ad is suggested. This keyword is automatically included for pages that are completely full width with no columns (Long-Form presentation).
  • Experiment with other assets, i.e.: Classified Ads, Calendar Events, Videos, Business Listings, etc. and other display properties. This helps you become more familiar with how to use Article Design tools when creating your story.