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 Consolidated Program Support Services Program, Planning, and Control Contractor
            [item.link] => http://www.nasa.gov/press-release/nasa-selects-consolidated-program-support-services-program-planning-and-control
            [item.description] => NASA has selected Manufacturing Technical Solutions Inc. of Huntsville, Alabama, to provide the Consolidated Program Support Services (CPSS) Program, Planning, and Control (PP&C) at the agency’s Marshall Space Flight Center in Huntsville and Johnson Space Center in Houston, with the potential to provide these services to other NASA centers.
            [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-selects-consolidated-program-support-services-program-planning-and-control
            [item.guid.isPermaLink] => false
            [item.pubDate] => Wed, 12 May 2021 16:07 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470952
        )

    [1] => Array
        (
            [item.title] => NASA’s OSIRIS-REx Spacecraft Heads for Earth with Asteroid Sample
            [item.link] => http://www.nasa.gov/press-release/nasa-s-osiris-rex-spacecraft-heads-for-earth-with-asteroid-sample
            [item.description] => After nearly five years in space, NASA’s Origins, Spectral Interpretation, Resource Identification, Security, Regolith Explorer (OSIRIS-REx) spacecraft is on its way back to Earth with an abundance of rocks and dust from the near-Earth asteroid Bennu.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/3_lauretta_bennu_particle_jets_0.jpg?itok=4g6Mhu-9
            [item.enclosure.length] => 242882
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-s-osiris-rex-spacecraft-heads-for-earth-with-asteroid-sample
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 10 May 2021 15:22 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470882
        )

    [2] => Array
        (
            [item.title] => NASA Announces New Associate Administrator
            [item.link] => http://www.nasa.gov/press-release/nasa-announces-new-associate-administrator
            [item.description] => NASA Administrator Sen. Bill Nelson announced Monday Robert D. Cabana, who has served as director of NASA’s Kennedy Space Center since 2008, will serve as associate administrator effective Monday, May 17.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/cabana_1_0.jpg?itok=QEgpgmpX
            [item.enclosure.length] => 15393834
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-announces-new-associate-administrator
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 10 May 2021 13:00 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470873
        )

    [3] => Array
        (
            [item.title] => Jurczyk Retires as NASA Associate Administrator
            [item.link] => http://www.nasa.gov/press-release/jurczyk-retires-as-nasa-associate-administrator
            [item.description] => Steve Jurczyk, who served as acting NASA administrator from Jan. 20 to May 3, 2021, announced Monday he will retire on Friday, May 14, after more than three decades of service at NASA.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/jurczyk_0_0.jpg?itok=OvXcxSM-
            [item.enclosure.length] => 4143764
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/jurczyk-retires-as-nasa-associate-administrator
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 10 May 2021 12:43 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470872
        )

    [4] => Array
        (
            [item.title] => NASA, Axiom Agree to First Private Astronaut Mission on Space Station
            [item.link] => http://www.nasa.gov/press-release/nasa-axiom-agree-to-first-private-astronaut-mission-on-space-station
            [item.description] => NASA and Axiom Space have signed an order for the first private astronaut mission to the International Space Station to take place no earlier than January 2022.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/44911461494_2d46902c0e_k.jpeg?itok=kv1LS2rZ
            [item.enclosure.length] => 507228
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-axiom-agree-to-first-private-astronaut-mission-on-space-station
            [item.guid.isPermaLink] => false
            [item.pubDate] => Mon, 10 May 2021 09:54 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470847
        )

    [5] => Array
        (
            [item.title] => NASA Administrator Statement on Chinese Rocket Debris
            [item.link] => http://www.nasa.gov/press-release/nasa-administrator-statement-on-chinese-rocket-debris
            [item.description] => NASA Administrator Sen. Bill Nelson released the following statement Saturday regarding debris from the Chinese Long March 5B rocket.
            [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-administrator-statement-on-chinese-rocket-debris
            [item.guid.isPermaLink] => false
            [item.pubDate] => Sat, 08 May 2021 23:42 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470844
        )

    [6] => Array
        (
            [item.title] => NASA Selects Contractor for Quiet Supersonic Flight Community Testing
            [item.link] => http://www.nasa.gov/press-release/nasa-selects-contractor-for-quiet-supersonic-flight-community-testing
            [item.description] => NASA has awarded a contract to Harris Miller Miller & Hanson Inc. of Burlington, Massachusetts, to support a national campaign of community overflight tests using the agency’s X-59 Quiet SuperSonic Technology research aircraft.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/flying_004_2.jpg?itok=at0gYPAc
            [item.enclosure.length] => 2915559
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-selects-contractor-for-quiet-supersonic-flight-community-testing
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 07 May 2021 15:11 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470842
        )

    [7] => Array
        (
            [item.title] => Texas Students to Hear from Astronauts on International Space Station
            [item.link] => http://www.nasa.gov/press-release/texas-students-to-hear-from-astronauts-on-international-space-station
            [item.description] => Students from Brownsville, Texas will hear from astronauts aboard the International Space Station during a call at 10:15 a.m. EDT Tuesday, May 11 that will air live on NASA Television, the NASA app, and the agency’s website.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/iss050e011129.jpg?itok=YJ6H82Ad
            [item.enclosure.length] => 1972663
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/texas-students-to-hear-from-astronauts-on-international-space-station
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 07 May 2021 14:49 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470841
        )

    [8] => Array
        (
            [item.title] => NASA, Axiom Space to Host Media Briefing on Private Astronaut Mission
            [item.link] => http://www.nasa.gov/press-release/nasa-axiom-space-to-host-media-briefing-on-private-astronaut-mission
            [item.description] => NASA and Axiom Space have signed a mission order for the first private astronaut mission to the International Space Station and will host a teleconference with media at 11 a.m. EDT on Monday, May 10, to discuss more details about the mission.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/45585656432_277f158027_k.jpeg?itok=6PgIniNA
            [item.enclosure.length] => 461382
            [item.enclosure.type] => image/jpeg
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-axiom-space-to-host-media-briefing-on-private-astronaut-mission
            [item.guid.isPermaLink] => false
            [item.pubDate] => Fri, 07 May 2021 13:20 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470839
        )

    [9] => Array
        (
            [item.title] => NASA Invites Public, Media to Watch Asteroid Mission Begin Return to Earth
            [item.link] => http://www.nasa.gov/press-release/nasa-invites-public-media-to-watch-asteroid-mission-begin-return-to-earth
            [item.description] => NASA invites the public and the media to watch its first asteroid sample return mission begin a two-year cruise home at 4 p.m. EDT Monday, May 10, on NASA Television, the NASA app, and the agency’s website.
            [item.enclosure.url] => http://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/osiris-rex_departure_0.png?itok=Any5viP8
            [item.enclosure.length] => 1273967
            [item.enclosure.type] => image/png
            [item.guid.text] => http://www.nasa.gov/press-release/nasa-invites-public-media-to-watch-asteroid-mission-begin-return-to-earth
            [item.guid.isPermaLink] => false
            [item.pubDate] => Thu, 06 May 2021 16:41 EDT
            [item.source.text] => NASA Breaking News
            [item.source.url] => http://www.nasa.gov/rss/dyn/breaking_news.rss
            [item.dc:identifier] => 470821
        )

)
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 Consolidated Program Support Services Program, Planning, and Control Contractor

Wed, 12 May 2021 16:07 EDT

NASA has selected Manufacturing Technical Solutions Inc. of Huntsville, Alabama, to provide the Consolidated Program Support Services (CPSS) Program, Planning, and Control (PP&C) at the agency’s Marshall Space Flight Center in Huntsville and Johnson Space Center in Houston, with the potential to provide these services to other NASA centers.

NASA’s OSIRIS-REx Spacecraft Heads for Earth with Asteroid Sample

Mon, 10 May 2021 15:22 EDT

After nearly five years in space, NASA’s Origins, Spectral Interpretation, Resource Identification, Security, Regolith Explorer (OSIRIS-REx) spacecraft is on its way back to Earth with an abundance of rocks and dust from the near-Earth asteroid Bennu.

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.