Example - From other sites

URL for third party content

When you want to show content from another site you own or from a third party, the Content Source  to use will be URL. You may have already seen this in use in Example - CSV Data, where a CSV file is pulled straight from an external source.

But such content doesn't always arrive nicely in a CSV file, so lets look at some other types of external content.

If its web content you are looking at, there is a good chance it comes in HTML. After pulling the content using the URL content source, we have options for working with that HTML. You could just use the Pass Through content transform, but that could get messy as it would also pass through all the page headers and boilerplate for the source. 

In practice, you need to be a little more sophisticated with the application of Content Transform.

  1. Selector - extract a section of the pulled (HTML) content
  2. Multi Selector - extract a multi dimensional array using selectors within selectors ... to however deep you want to go.
  3. Table From HTML - Multi Selector is complicated, if all you want is to get a table from the source, this can be a quick and easy solution.

Here is some content pulled from the ConcreteCMS documentation at https://documentation.concretecms.org/developers/toc.

This isn't particularly exciting content to pull from the ConcreteCMS documentation pages, but it serves a purpose to show it can be pulled into this site and transformed in various ways.

You may want to open up that page in another tab and with your browser developer console open on that tab to help follow what is being pulled.

To provide a basic overview, the Selector transform has been used. Settings:

  • css selector: main .container:first-child
  • remove classes: container ccm-block-page-list-page-entry ccm-block-page-list-title

The css selector main .container:first-child gets us to the first container in the main section. 

That would be usable in itself, but including here would be well spread out down the page, so some of the page list formatting classes have been added to the removed classes to make the content a bit more basic and compact.

So you can easily see where the pulled content starts and ends,  block design has been used to add an outline.

View settings

To get at the data in a more structured way, we can use the Multi Selector transform. You may have already seen this in action in the Example - RSS Feed. With Mutli Selector each level of selector lists the items within the level above to build a multi-dimensional array of data.

A selector list at the inner level enables both headings and links to be retrieved. The transformed data is an array of HTML (or XML) snippets.

  • Container css selector - main
  • Level 1 - .container
  • Level 2 - h1,.ccm-block-page-list-title a

There is potentially a lot of data, so the transform is set to slice columns 0,5 so we have just the first few items in each section.

To display this data, we only have 2 dimensions, so it could go in to a Table content display, or more flexibly in a Multi Level List content display. 

The Multi Level List settings used below are

  • Level 1 - Paragraphs + Capitalised First Child
  • Level 2 - Unordered List, Unstyled + None (no heading). Filter 1 (first row).

Installation & Introduction

  • System Requirements
  • Supported Browsers
  • Installing Concrete CMS
  • Version History

Building A Concrete5 Website

  • Introduction
  • Create A Technical Outline Of Work
  • Install Concrete5
  • Create Your Package And Theme

Pages & Themes

  • Blocks
  • Express
  • Overview
  • Getting Data about a Page

Javascript & Css

  • Packages
  • File Management
  • Overview
  • Registering an Asset

Localization & Translation

  • Custom attributes, Tags & Taxonomy
  • Interface Customization
  • Overview
  • Creating Custom Attribute Types

Users, Groups & Permissions

  • Security & XSS Protection
  • REST API
  • Overview
  • User vs. UserInfo

View settings

The Multi Leve List content display has many options. Here is the same data with the display set for a Table, Headings Left at Level 1.

Installation & Introduction
  • System Requirements
  • Supported Browsers
  • Installing Concrete CMS
  • Version History
Building A Concrete5 Website
  • Introduction
  • Create A Technical Outline Of Work
  • Install Concrete5
  • Create Your Package And Theme
Pages & Themes
  • Blocks
  • Express
  • Overview
  • Getting Data about a Page
Javascript & Css
  • Packages
  • File Management
  • Overview
  • Registering an Asset
Localization & Translation
  • Custom attributes, Tags & Taxonomy
  • Interface Customization
  • Overview
  • Creating Custom Attribute Types
Users, Groups & Permissions
  • Security & XSS Protection
  • REST API
  • Overview
  • User vs. UserInfo
View settings

Additional Pages

About this Sidebar

Creating a sidebar for a group of pages without messing about with stacks is an easy use-case for Universal Content Puller.

This sidebar is edited once, within the main addon page for Universal Content Puller.

It is then pulled into all UCP sub-pages using a UCP block.

The Content Source is Parent Page, set to pull the Sidebar area from 2 pages from the top. The Content Transform is Selector, set to remove container and row classes that, when unnecessarily nested, could mess up the Bootstrap grid. The Content Display is Plain, which just outputs the transformed text.

In the advanced settings, sanitization is disabled as we trust the source page and don't want to strip out any formatting or functionality from the pulled sidebar.