Example - List Picker

In Example - RSS Feed we used the Multi Selector content source to extract a subset of the feed data, then filtered and shuffled it down to just the data we wanted to display using the Multi Level List content display.

The List Picker content display provides an alternative way of getting to the same kind of result. Rather than extracting a bit more than what we need with Multi Selector  content transform and then filtering out what we don't need in the Multi Level List content display , we make all the data available to the display as a 2-dimensional list via the List Selector content transform and then pick the few items we actually want from that in the List Picker content display.

For some types of data and display, its easier to filter out what isn't wanted. For some types of data and sisplay, its easier to pick only what is wanted. In may cases, its a matter of personal preference as to what you are most comfortable working with.

In Detail

The content source is URL configured exactly the same as previously. In the List Selector content transform, the source content type is 'XML / XHTML', the outer selector is 'channel' and the item selector is 'item'. So far, very similar to our previous use of Multi Selector. However, we don't want to end our data there, so at the bottom of the transform we select to Flatten to list with.dot.notation within each item

Rather than go straight to the display, first have a quick look at the data available using the Serialize content display. This is generally a useful intermediary stage when viewing complex data and becomes essential with List Picker because we need to know the keys to pick from.

To avoid cluttering the page, in the below the data has been sliced to just the first item.

Array
(
    [0] => Array
        (
            [item.title] => NASA Selects Intuitive Machines to Land Water-Measuring Payload on the Moon
            [item.link] => http://www.nasa.gov/press-release/nasa-selects-intuitive-machines-to-land-water-measuring-payload-on-the-moon
            [item.description] => NASA has awarded Intuitive Machines of Houston approximately $47 million to deliver a drill combined with a mass spectrometer to the Moon by December 2022 under the agency’s Commercial Lunar Payload Services initiative.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/prime-_moon_drill.jpg?itok=i8H877tH
            [item.enclosure.length] => 5369946
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-selects-intuitive-machines-to-land-water-measuring-payload-on-the-moon
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 16 Oct 2020 15:12 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465560
        )

    [1] => Array
        (
            [item.title] => Landing Coverage Set for NASA Astronaut Chris Cassidy, Space Station Crew
            [item.link] => http://www.nasa.gov/press-release/landing-coverage-set-for-nasa-astronaut-chris-cassidy-space-station-crew
            [item.description] => NASA will provide live coverage of the return to Earth for agency astronaut Chris Cassidy and two Russian cosmonauts Wednesday, Oct. 21, after six months aboard the International Space Station.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/49784242052_40d3cb8fdf_k_0.jpg?itok=glc1fkjm
            [item.enclosure.length] => 492625
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/landing-coverage-set-for-nasa-astronaut-chris-cassidy-space-station-crew
            [item.guid.isPermaLink] => false
            [item.pubDate] => Thu, 15 Oct 2020 11:41 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465508
        )

    [2] => Array
        (
            [item.title] => Update: NASA to Broadcast OSIRIS-REx Asteroid Sample Collection Activities
            [item.link] => http://www.nasa.gov/press-release/update-nasa-to-broadcast-osiris-rex-asteroid-sample-collection-activities
            [item.description] => NASA will broadcast coverage of a first for the agency as its Origins, Spectral Interpretation, Resource Identification, Security-Regolith Explorer (OSIRIS-REx) mission attempts to collect a sample of asteroid Bennu on Tuesday, Oct. 20, at 6:12 p.m. EDT.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/o-rex_approach.png?itok=lNkK_oo2
            [item.enclosure.length] => 6614989
            [item.enclosure.type] => image/png
            [item.guid.text] => http://www.nasa.gov/press-release/update-nasa-to-broadcast-osiris-rex-asteroid-sample-collection-activities
            [item.guid.isPermaLink] => false
            [item.pubDate] => Wed, 14 Oct 2020 15:24 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465471
        )

    [3] => Array
        (
            [item.title] => NASA Announces Partners to Advance ‘Tipping Point’ Technologies for the Moon, Mars
            [item.link] => http://www.nasa.gov/press-release/nasa-announces-partners-to-advance-tipping-point-technologies-for-the-moon-mars
            [item.description] => NASA has selected 14 American companies, including several small businesses, as partners to develop a range of technologies that will help forge a path to sustainable Artemis operations on the Moon by the end of the decade.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/shiiver_13.jpg?itok=ZOAXeL0d
            [item.enclosure.length] => 16603987
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-announces-partners-to-advance-tipping-point-technologies-for-the-moon-mars
            [item.guid.isPermaLink] => false
            [item.pubDate] => Wed, 14 Oct 2020 10:02 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465447
        )

    [4] => Array
        (
            [item.title] => NASA Astronaut Kate Rubins, Crewmates Arrive Safely at Space Station
            [item.link] => http://www.nasa.gov/press-release/nasa-astronaut-kate-rubins-crewmates-arrive-safely-at-space-station
            [item.description] => NASA astronaut Kate Rubins and two Russian cosmonauts arrived aboard the International Space Station on Oct. 14, returning a medical researcher to the orbiting laboratory ahead of the 20th anniversary of uninterrupted human presence in space.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/exp-64-launch.jpg?itok=JlYPNvRn
            [item.enclosure.length] => 2113286
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-astronaut-kate-rubins-crewmates-arrive-safely-at-space-station
            [item.guid.isPermaLink] => false
            [item.pubDate] => Wed, 14 Oct 2020 04:46 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465439
        )

    [5] => Array
        (
            [item.title] => NASA, International Partners Advance Cooperation with First Signings of Artemis Accords
            [item.link] => http://www.nasa.gov/press-release/nasa-international-partners-advance-cooperation-with-first-signings-of-artemis-accords
            [item.description] => International cooperation on and around the Moon as part of the Artemis program is taking a step forward today with the signing of the Artemis Accords between NASA and several partner countries.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/aa_square.jpg?itok=o6uUlKKb
            [item.enclosure.length] => 145505
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-international-partners-advance-cooperation-with-first-signings-of-artemis-accords
            [item.guid.isPermaLink] => false
            [item.pubDate] => Tue, 13 Oct 2020 11:12 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465419
        )

    [6] => Array
        (
            [item.title] => Media Invited to Virtual Briefing on Launch of Sentinel-6 Michael Freilich Satellite
            [item.link] => http://www.nasa.gov/press-release/media-invited-to-virtual-briefing-on-launch-of-sentinel-6-michael-freilich-satellite
            [item.description] => Officials from NASA and partner agencies will discuss the upcoming launch of the Sentinel-6 Michael Freilich ocean-monitoring satellite during a media briefing at 10 a.m. EDT (7 a.m. PDT), Friday, Oct. 16. The launch is scheduled for Tuesday, Nov. 10.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/pia24105-1041_0.jpg?itok=TIMZk86b
            [item.enclosure.length] => 109351
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/media-invited-to-virtual-briefing-on-launch-of-sentinel-6-michael-freilich-satellite
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 09 Oct 2020 15:57 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465407
        )

    [7] => Array
        (
            [item.title] => NASA Administrator to Announce New Space Tech Public-Private Partnerships
            [item.link] => http://www.nasa.gov/press-release/nasa-administrator-to-announce-new-space-tech-public-private-partnerships
            [item.description] => NASA Administrator Jim Bridenstine will give a keynote address at the virtual fall Lunar Surface Innovation Consortium meeting at 11:45 a.m. EDT Wednesday, Oct. 14.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/as08-13-2225_orig.jpg?itok=9DhbhtZu
            [item.enclosure.length] => 2016459
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-administrator-to-announce-new-space-tech-public-private-partnerships
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 09 Oct 2020 11:35 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465387
        )

    [8] => Array
        (
            [item.title] => NASA to Provide Coverage of 71st International Astronautical Congress
            [item.link] => http://www.nasa.gov/press-release/nasa-to-provide-coverage-of-71st-international-astronautical-congress
            [item.description] => NASA will broadcast key events, including an Artemis program update, of the 71st International Astronautical Congress (IAC), which takes place virtually Monday, Oct. 12, through Wednesday, Oct. 14.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/48936981953_86c24681b4_k_0.jpg?itok=CndEM_vd
            [item.enclosure.length] => 395654
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-to-provide-coverage-of-71st-international-astronautical-congress
            [item.guid.isPermaLink] => false
            [item.pubDate] => Thu, 08 Oct 2020 17:41 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465345
        )

    [9] => Array
        (
            [item.title] => NASA Hosts Virtual Destination Station with Astronaut Christina Koch, Scientists
            [item.link] => http://www.nasa.gov/press-release/nasa-hosts-virtual-destination-station-with-astronaut-christina-koch-scientists
            [item.description] => NASA astronaut Christina Koch, along with other representatives from the agency and the International Space Station U.S. National Laboratory, will participate in a virtual panel Wednesday, Oct. 14, to highlight how the International Space Station’s unique features and research capabilities can advance research and technology development.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/49464133183_f5a6af3bd0_k.jpg?itok=duZMCM-m
            [item.enclosure.length] => 785606
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-hosts-virtual-destination-station-with-astronaut-christina-koch-scientists
            [item.guid.isPermaLink] => false
            [item.pubDate] => Thu, 08 Oct 2020 14:29 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 465341
        )

)
View settings

Looking at the data we make note of the keys:

  • item.title
  • item.link
  • item.enclosure.url
  • item.pubDate
  • item.description

We can then use those keys to pick out the data in List Picker. It uses the same Header Extra Content styles to layout and format the feed items. 

A nice trick we can do with List Picker is to assign an item as a link behind another item, so rather than just having the full URL text as a link, we can link to it directly from the title and from the image.

 

NASA Selects Intuitive Machines to Land Water-Measuring Payload on the Moon

Fri, 16 Oct 2020 15:12 EDT

NASA has awarded Intuitive Machines of Houston approximately $47 million to deliver a drill combined with a mass spectrometer to the Moon by December 2022 under the agency’s Commercial Lunar Payload Services initiative.

Landing Coverage Set for NASA Astronaut Chris Cassidy, Space Station Crew

Thu, 15 Oct 2020 11:41 EDT

NASA will provide live coverage of the return to Earth for agency astronaut Chris Cassidy and two Russian cosmonauts Wednesday, Oct. 21, after six months aboard the International Space Station.

View settings

Settings as JSON

If you haven't already noticed, many of our example Universal Content Puller blocks have a small View settings button to the top right, where you can view the block settings as JSON data and even copy them to paste into your own UCP blocks using using the Import button in the Support tab of the edit dialog.

As a change from also showing screengrabs of some of the settings, for this example we have used the Export button in the Support tab of the block edit dialog to export the settings from the above UCP block and show them below. 

Open the accordion below to view the JSON. You can copy these settings and paste them into your own UCP blocks using the Import button.

Settings as JSON

        [
  {
    "name": "content_source_plugin",
    "value": "URL"
  },
  {
    "name": "ucp_cs_u_r_l_ucp_cs_source_url",
    "value": "https://www.nasa.gov/rss/dyn/breaking_news.rss"
  },
  {
    "name": "ucp_cs_u_r_l_ucp_cs_source_cache_enable",
    "value": "on"
  },
  {
    "name": "ucp_cs_u_r_l_ucp_cs_source_cache_duration",
    "value": "global"
  },
  {
    "name": "ucp_cs_u_r_l_ucp_cs_source_cache_duration_mins",
    "value": "360"
  },
  {
    "name": "content_transform_plugin",
    "value": "List Selector"
  },
  {
    "name": "ucp_ct_list_selector_ucp_ct_qp_obj",
    "value": "qp"
  },
  {
    "name": "ucp_ct_list_selector_ucp_ct_qp_selector",
    "value": "channel"
  },
  {
    "name": "ucp_ct_list_selector_ucp_ct_item_selector",
    "value": "item"
  },
  {
    "name": "ucp_ct_list_selector_ucp_ct_rows_offset",
    "value": "0"
  },
  {
    "name": "ucp_ct_list_selector_ucp_ct_rows_length",
    "value": "10"
  },
  {
    "name": "ucp_ct_list_selector_ucp_ct_flatten",
    "value": "list"
  },
  {
    "name": "content_display_plugin",
    "value": "ListPicker"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_format[row]",
    "value": "ph3"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading[row]",
    "value": "pick"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[row]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[row]",
    "value": "item.title"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[row]",
    "value": "item.link"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_filter[row]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_shuffle[row]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_format[col]",
    "value": "ph4"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading[col][0]",
    "value": "none"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[col][0]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[col][0]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[col][0]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][0]",
    "value": "item.enclosure.url"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][0]",
    "value": "item.link"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading[col][1]",
    "value": "none"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[col][1]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[col][1]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[col][1]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][1]",
    "value": "item.pubDate"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][1]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading[col][2]",
    "value": "none"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_user_heading[col][2]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_heading[col][2]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_heading_linked[col][2]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_picked_value[col][2]",
    "value": "item.description"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][2]",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_items_to_display",
    "value": "2"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_paginate_if_more",
    "value": "b"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_orphan_limit",
    "value": "0"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_block_in_pagination",
    "value": ""
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_striped",
    "value": "striped"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_condensed",
    "value": "condensed"
  },
  {
    "name": "ucp_cd_list_picker_ucp_cd_hover",
    "value": "hover"
  },
  {
    "name": "options[ajax_mode]",
    "value": "none"
  },
  {
    "name": "options[ajax_mode_delay]",
    "value": ""
  },
  {
    "name": "options[ajax_mode_proximity]",
    "value": ""
  },
  {
    "name": "options[placeholder_type]",
    "value": "marker"
  },
  {
    "name": "options[placeholder_label]",
    "value": "Loading..."
  },
  {
    "name": "options[placeholder_height]",
    "value": "25"
  },
  {
    "name": "options[placeholder_height_u]",
    "value": "vw"
  },
  {
    "name": "cache_permission",
    "value": "1"
  },
  {
    "name": "options[CacheBlockOutputLifetime]",
    "value": "0"
  },
  {
    "name": "options[sanitize_op]",
    "value": "safe"
  },
  {
    "name": "options[autolink]",
    "value": "youthweb_n"
  },
  {
    "name": "options[image_render]",
    "value": "***image"
  },
  {
    "name": "options[wrapper_enable]",
    "value": "wrap"
  },
  {
    "name": "options[wrapper_element]",
    "value": "div"
  },
  {
    "name": "options[wrapper_class]",
    "value": "ucp-body example-styled"
  },
  {
    "name": "options[edit_mode_marker]",
    "value": ""
  },
  {
    "name": "options[debug]",
    "value": ""
  },
  {
    "name": "options[show_exporter]",
    "value": "show_exporter"
  },
  {
    "name": "whitelabel",
    "value": "off"
  }
]    

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.