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] => Vice President Kamala Harris Calls NASA Astronaut Victor Glover
            [item.link] => http://www.nasa.gov/press-release/vice-president-kamala-harris-calls-nasa-astronaut-victor-glover
            [item.description] => In celebration of Black History Month, NASA astronaut Victor Glover welcomed Vice President Kamala Harris to the International Space Station for a virtual chat.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/thumb_no_text_horizontal.png?itok=QSvzPQoV
            [item.enclosure.length] => 1792585
            [item.enclosure.type] => image/png
            [item.guid.text] => http://www.nasa.gov/press-release/vice-president-kamala-harris-calls-nasa-astronaut-victor-glover
            [item.guid.isPermaLink] => false
            [item.pubDate] => Sat, 27 Feb 2021 12:38 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468737
        )

    [1] => Array
        (
            [item.title] => NASA Celebrates ‘Hidden Figure’ Mary W. Jackson With Building Naming Ceremony
            [item.link] => http://www.nasa.gov/press-release/nasa-celebrates-hidden-figure-mary-w-jackson-with-building-naming-ceremony
            [item.description] => On Friday, NASA celebrated the agency’s first African American female engineer, Mary W. Jackson, with a ceremony to formally name the agency’s headquarters building in Washington in her honor.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/jackson_naming_ceremoney_2.jpg?itok=dKUm-1vx
            [item.enclosure.length] => 1184304
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-celebrates-hidden-figure-mary-w-jackson-with-building-naming-ceremony
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 26 Feb 2021 16:59 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468735
        )

    [2] => Array
        (
            [item.title] => NASA Awards Launch Service Contract for TROPICS Mission to Study Storm Processes
            [item.link] => http://www.nasa.gov/press-release/nasa-awards-launch-service-contract-for-tropics-mission-to-study-storm-processes
            [item.description] => NASA has selected Astra Space Inc. to provide a launch service for the agency’s Time-Resolved Observations of Precipitation Structure and Storm Intensity with a Constellation of SmallSats (TROPICS) mission.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/nasa-logo-web-rgb_0.jpg?itok=mrBnB_c9
            [item.enclosure.length] => 189751
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-awards-launch-service-contract-for-tropics-mission-to-study-storm-processes
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 26 Feb 2021 15:56 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468730
        )

    [3] => Array
        (
            [item.title] => NASA to Honor ‘Hidden Figure’ Mary W. Jackson During Headquarters Naming Ceremony
            [item.link] => http://www.nasa.gov/press-release/nasa-to-honor-hidden-figure-mary-w-jackson-during-headquarters-naming-ceremony
            [item.description] => Acting NASA Administrator Steve Jurczyk will lead a ceremony at 1 p.m. EST Friday, Feb. 26, officially naming the NASA Headquarters building in Washington in honor of Mary W. Jackson
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/maryjackson.png?itok=jfI3VhOT
            [item.enclosure.length] => 8417473
            [item.enclosure.type] => image/png
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-to-honor-hidden-figure-mary-w-jackson-during-headquarters-naming-ceremony
            [item.guid.isPermaLink] => false
            [item.pubDate] => Wed, 24 Feb 2021 17:16 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468671
        )

    [4] => Array
        (
            [item.title] => NASA’s Perseverance Rover Gives High-Definition Panoramic View of Landing Site
            [item.link] => http://www.nasa.gov/press-release/nasa-s-perseverance-rover-gives-high-definition-panoramic-view-of-landing-site
            [item.description] => NASA’s Mars 2020 Perseverance rover got its first high-definition look around its new home in Jezero Crater on Feb. 21, after rotating its mast, or “head,” 360 degrees, allowing the rover’s Mastcam-Z instrument to capture its first panorama after touching down on the Red Planet on Feb 18.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/pia2464-mastcam-zs_first_360-degree_panorama2.jpg?itok=X3Nba0zj
            [item.enclosure.length] => 3458244
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-s-perseverance-rover-gives-high-definition-panoramic-view-of-landing-site
            [item.guid.isPermaLink] => false
            [item.pubDate] => Wed, 24 Feb 2021 13:12 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468661
        )

    [5] => Array
        (
            [item.title] => NASA Takes Steps to Reduce Aviation Emissions, Invigorate US Economy
            [item.link] => http://www.nasa.gov/press-release/nasa-takes-steps-to-reduce-aviation-emissions-invigorate-us-economy
            [item.description] => NASA is seeking proposals for ground and flight demonstrations of integrated megawatt-class powertrain systems for subsonic aircraft.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/nasa_illustration_of_mw_class_parallel_hybrid_turbo-prop_advanced_concept.png?itok=EUqFQs9N
            [item.enclosure.length] => 2218880
            [item.enclosure.type] => image/png
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-takes-steps-to-reduce-aviation-emissions-invigorate-us-economy
            [item.guid.isPermaLink] => false
            [item.pubDate] => Tue, 23 Feb 2021 16:58 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468607
        )

    [6] => Array
        (
            [item.title] => NASA Awards Contract for Engineering, Programmatic Support Services
            [item.link] => http://www.nasa.gov/press-release/nasa-awards-contract-for-engineering-programmatic-support-services
            [item.description] => NASA has awarded the Spectrum and Resource Management, Engineering and Programmatic Support Services (SpectRE) contract to Agile Decision Sciences LLC of Beltsville, Maryland.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/nasa-logo-web-rgb_0.jpg?itok=mrBnB_c9
            [item.enclosure.length] => 189751
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-awards-contract-for-engineering-programmatic-support-services
            [item.guid.isPermaLink] => false
            [item.pubDate] => Tue, 23 Feb 2021 15:47 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468590
        )

    [7] => Array
        (
            [item.title] => NASA to Host Briefings, Interviews for Next Crew Rotation Mission with SpaceX
            [item.link] => http://www.nasa.gov/press-release/nasa-to-host-briefings-interviews-for-next-crew-rotation-mission-with-spacex
            [item.description] => NASA will highlight the second crew rotation flight of a U.S. commercial spacecraft with astronauts to the International Space Station with a pair of news conferences beginning 12:30 p.m. EST Monday, March 1.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/jsc2021e007025_large.jpg?itok=Cg8wAzyk
            [item.enclosure.length] => 199419
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-to-host-briefings-interviews-for-next-crew-rotation-mission-with-spacex
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 22 Feb 2021 16:53 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468536
        )

    [8] => Array
        (
            [item.title] => NASA’s Mars Perseverance Rover Provides Front-Row Seat to Landing, First Audio Recording of Red Planet
            [item.link] => http://www.nasa.gov/press-release/nasa-s-mars-perseverance-rover-provides-front-row-seat-to-landing-first-audio
            [item.description] => New video from NASA’s Mars 2020 Perseverance rover chronicles major milestones during the final minutes of its entry, descent, and landing (EDL) on the Red Planet on Feb. 18 as the spacecraft plummeted, parachuted, and rocketed toward the surface of Mars.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/pia24422-c1-3000.jpg?itok=cEEkBrxq
            [item.enclosure.length] => 455783
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-s-mars-perseverance-rover-provides-front-row-seat-to-landing-first-audio
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 22 Feb 2021 13:25 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468529
        )

    [9] => Array
        (
            [item.title] => NASA to Reveal New Video, Images from Mars Perseverance Rover
            [item.link] => http://www.nasa.gov/press-release/nasa-to-reveal-new-video-images-from-mars-perseverance-rover
            [item.description] => NASA will hold a virtual briefing at 2 p.m. EST (11 a.m. PST) today to unveil the “How to Land on Mars” video, which will present first-of-its-kind footage the Perseverance rover captured as it touched down on the Red Planet Feb. 18. The agency also will show new images the rover took on the Martian surface.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/rover_drop.jpg?itok=7AdetTCZ
            [item.enclosure.length] => 2537340
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-to-reveal-new-video-images-from-mars-perseverance-rover
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 22 Feb 2021 08:15 EST
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 468513
        )

)
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.

 

Vice President Kamala Harris Calls NASA Astronaut Victor Glover

Sat, 27 Feb 2021 12:38 EST

In celebration of Black History Month, NASA astronaut Victor Glover welcomed Vice President Kamala Harris to the International Space Station for a virtual chat.

NASA Celebrates ‘Hidden Figure’ Mary W. Jackson With Building Naming Ceremony

Fri, 26 Feb 2021 16:59 EST

On Friday, NASA celebrated the agency’s first African American female engineer, Mary W. Jackson, with a ceremony to formally name the agency’s headquarters building in Washington in her honor.

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.