Example - List Picker
In Example - RSS Feed we used the Multi Selector content transform 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 or the Preview button on the display tab to review the incoming data to the 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 and wrapped in a single element accordion (expander) using Magic Tabs.
RSS - XML Source
Array
(
[0] => Array
(
[item.title] => AI for Earth: How NASA’s Artificial Intelligence and Open Science Efforts Combat Climate Change
[item.link] => https://science.nasa.gov/earth/ai-open-science-climate-change/
[item.dc:creator] =>
[item.pubDate] => Thu, 18 Apr 2024 21:06:28 +0000
[item.category] => Earth
[item.guid.text] => https://science.nasa.gov/earth/ai-open-science-climate-change/
[item.guid.isPermaLink] => false
[item.description] => As extreme weather events increase around the world due to climate change, the need for further research into our warming planet has increased as well. For NASA, climate research involves not only conducting studies of these events, but also empowering outside researchers to do the same. The artificial intelligence (AI) efforts spearheaded by the agency […]
[item.content:encoded] => <div id="" class="padding-top-5 padding-bottom-3 width-full maxw-full hds-module hds-module-full wp-block-nasa-blocks-article-intro">
<div class="width-full maxw-full article-header">
<div class="margin-bottom-2 width-full maxw-full">
<p class="label carbon-60 margin-0 margin-bottom-3 padding-0">4 min read</p>
<h1 class="display-48 margin-bottom-2">AI for Earth: How NASA’s Artificial Intelligence and Open Science Efforts Combat Climate Change</h1>
</div>
</div>
</div>
<div class="hds-media hds-module wp-block-image">
<div class="margin-left-auto margin-right-auto nasa-block-align-inline">
<div class="hds-media-wrapper margin-left-auto margin-right-auto">
<figure class="hds-media-inner hds-cover-wrapper hds-media-ratio-none"><img width="1041" height="693" src="https://science.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?w=1041" class="attachment-2048x2048 size-2048x2048" alt="Lights brighten the night sky in this image of Europe" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg 1041w, https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?resize=300, 200 300w, https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?resize=768, 511 768w, https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?resize=1024, 682 1024w, https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?resize=400, 266 400w, https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?resize=600, 399 600w, https://smd-cms.nasa.gov/wp-content/uploads/2023/12/main_image-83.jpg?resize=900, 599 900w" /></figure><figcaption class="hds-caption padding-y-2">
Lights brighten the night sky in this image of Europe, including Poland, taken from the International Space Station.</figcaption></div>
<div class="hds-credits">NASA</div>
</div>
</div>
<p>As extreme weather events increase around the world due to climate change, the need for further research into our warming planet has increased as well. For NASA, climate research involves not only conducting studies of these events, but also empowering outside researchers to do the same. The artificial intelligence (AI) efforts spearheaded by the agency offer a powerful tool to accomplish these goals.</p>
<p>In 2023, NASA teamed up with IBM Research to create an AI geospatial foundation model. Trained on vast amounts of NASA’s widely used <a href="https://hls.gsfc.nasa.gov/" rel="noopener">Harmonized Landsat and Sentinel-2 (HLS)</a> data, the model provides a base for a variety of AI-powered studies to tackle environmental challenges. In keeping with open science principles, <a href="https://www.earthdata.nasa.gov/news/impact-ibm-hls-foundation-model" rel="noopener">the model is freely available for anyone to access</a>.</p>
<p>Foundation models serve as a baseline from which scientists can develop a diverse set of applications, enabling powerful and efficient solutions. “Foundation models only know what things are represented in the data,” explained Manil Maskey, the data science lead at NASA’s Office of the Chief Science Data Officer (OCSDO). “It’s like a Swiss Army Knife—it can be used for multiple different things.”</p>
<p>Once a foundation model is created, it can be trained on a small amount of data to perform a specific task. To date, the Interagency Implementation and Advanced Concept Team (IMPACT) along with collaborators have demonstrated the geospatial foundation model’s capabilities by fine-tuning it to detect burn scars, to delineate flood water, and to classify crop and other land use categories.</p>
<div class="hds-media hds-module wp-block-image">
<div class="margin-left-auto margin-right-auto nasa-block-align-inline">
<div class="hds-media-wrapper margin-left-auto margin-right-auto">
<figure class="hds-media-inner hds-cover-wrapper hds-media-ratio-none"><img width="2048" height="1366" src="https://science.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?w=2048" class="attachment-2048x2048 size-2048x2048" alt="Green and white aquaculture ponds extend across the Tumbes River Delta shown in this image, acquired on March 14, 2024, by the OLI-2 (Operational Land Imager-2) on Landsat 9. The ponds on the west side of the delta are likely topped with white pond covers, providing some shade." style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg 2539w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=300, 200 300w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=768, 512 768w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=1024, 683 1024w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=1536, 1024 1536w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=2048, 1366 2048w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=400, 267 400w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=600, 400 600w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=900, 600 900w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=1200, 800 1200w, https://smd-cms.nasa.gov/wp-content/uploads/2023/06/tumbesperu-oli2-20240314-lrg.jpg?resize=2000, 1334 2000w" /></figure><figcaption class="hds-caption padding-y-2">
Rectangular ponds for shrimp farming line the coast of northern Peru in this image captured on March 14, 2024 by the OLI-2 (Operational Land Imager-2) on Landsat 9.</figcaption></div>
<div class="hds-credits">NASA Earth Observatory / Lauren Dauphin</div>
</div>
</div>
<p>Because of the computational resources required to create the initial foundation model, a partnership was necessary for success. In this case, NASA brought the data and scientific knowledge, while IBM brought the computing power and AI algorithm optimization expertise. The team’s shared commitment to making their research accessible through open science principles ensures that their model can be useful to as many researchers as possible.</p>
<p>“To build a foundation model at scale, we realized early on that it’s not feasible for one institution to build it,” Maskey said. “Everything we have done on our foundation models has been open to the public, all the way from pre-training data, code, best practices, model weights, fine-tuning training data, and publications. There’s transparency, so researchers can trace why certain things were used in terms of data or model architecture.”</p>
<p>Following on from the success of their geospatial foundation model, NASA and IBM Research are continuing their partnership to create a new, similar model for weather and climate studies. They are collaborating with Oak Ridge National Laboratory (ORNL), NVIDIA, and several universities to bring this model to life.</p>
<p>This time, the main dataset will be the <a href="https://gmao.gsfc.nasa.gov/reanalysis/MERRA-2/" rel="noopener">Modern-Era Retrospective analysis for Research and Applications, Version 2 (MERRA-2)</a>, a huge collection of atmospheric reanalysis data that spans from 1980 to the present day. Like the geospatial foundation model, the weather and climate model is being developed with an open science approach, and will be available to the public in the near future.</p>
<p>Covering all aspects of Earth science would take several foundation models trained on different types of datasets. However, Maskey believes those future models might someday be combined into one comprehensive model, leading to a “digital twin” of the Earth that would provide unparalleled analysis and predictions for all kinds of climate and environmental events.</p>
<p>Whatever innovations the future holds, NASA and IBM’s geospatial and climate foundation models will enable leaps in Earth science like never before. Though powerful AI tools will enhance researchers’ work, the team’s dedication to open science supercharges the possibilities for discovery by allowing anyone to put those tools into practice and pave the way for groundbreaking research to help better care for the planet.</p>
<p>For more information about open science at NASA, visit:<br /><a href="https://science.nasa.gov/open-science/" target="_blank" rel="noreferrer noopener">https://science.nasa.gov/open-science/</a></p>
<p><strong><em>By <a href="mailto:lauren.leese@nasa.gov">Lauren Leese</a></em><br /><em>Web Content Strategist for the Office of the Chief Science Data Officer</em></strong></p>
<div class="nasa-gb-align-full width-full maxw-full padding-x-3 padding-y-0 nasa_template_article_a hds-module hds-module-full wp-block-nasa-blocks-credits-and-details">
<section class="padding-x-0 padding-top-5 padding-bottom-2 desktop:padding-top-7 desktop:padding-bottom-9">
<div class="grid-row grid-container maxw-widescreen padding-0">
<div class="grid-col-12 desktop:grid-col-2 padding-right-4 margin-bottom-5 desktop:margin-bottom-0">
<div class="padding-top-3 border-top-1px border-color-carbon-black">
<div class="margin-bottom-2">
<h2 class="heading-14">Share</h2>
</div>
<div class="padding-bottom-2">
<ul class="social-icons social-icons-round">
<li class="social-icon social-icon-x">
<a href="https://x.com/intent/tweet?via=NASA&text=AI%20for%20Earth%3A%20How%20NASA%26%238217%3Bs%20Artificial%20Intelligence%20and%20Open%20Science%20Efforts%20Combat%20Climate%20Change&url=https%3A%2F%2Fscience.nasa.gov%2Fearth%2Fai-open-science-climate-change%2F" aria-label="Share on X."><br />
<br />
</a>
</li>
<li class="social-icon social-icon-facebook">
<a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fscience.nasa.gov%2Fearth%2Fai-open-science-climate-change%2F" aria-label="Share on Facebook." rel="noopener"><br />
<br />
</a>
</li>
<li class="social-icon social-icon-linkedin">
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fscience.nasa.gov%2Fearth%2Fai-open-science-climate-change%2F" aria-label="Share on LinkedIn." rel="noopener"><br />
<br />
</a>
</li>
<li class="social-icon social-icon-rss">
<a href="/feed/" aria-label="Subscribe to RSS feed."><br />
<br />
</a>
</li>
</ul></div>
</div>
</div>
<div class="grid-col-12 desktop:grid-col-5 padding-right-4 margin-bottom-5 desktop:margin-bottom-0">
<div class="padding-top-3 border-top-1px border-color-carbon-black">
<div class="margin-bottom-2">
<h2 class="heading-14">Details</h2>
</div>
<div class="grid-row margin-bottom-3">
<div class="grid-col-4">
<div class="subheading">Last Updated</div>
</div>
<div class="grid-col-8">Apr 18, 2024</div>
</div>
</div>
</div>
<div class="grid-col-12 desktop:grid-col-5 padding-right-4 margin-bottom-5 desktop:margin-bottom-0">
<div class="padding-top-3 border-top-1px border-color-carbon-black">
<div class="margin-bottom-2">
<h2 class="heading-14">Related Terms</h2>
</div>
<ul class="article-tags">
<li class="article-tag"><a href="https://science.nasa.gov/earth/" rel="noopener">Earth</a></li>
</ul>
</div>
</div></div>
</section></div>
<div class="nasa-gb-align-full width-full maxw-full padding-x-3 padding-y-0 hds-module hds-module-full wp-block-nasa-blocks-related-articles">
<section class="hds-related-articles padding-x-0 padding-y-3 desktop:padding-top-7 desktop:padding-bottom-9">
<div class="w-100 grid-row grid-container maxw-widescreen padding-0 text-align-left">
<div class="margin-bottom-4">
<h2 style="max-width: 100%;" class="width-full w-full maxw-full">Explore More</h2>
</div></div>
<div class="grid-row grid-container maxw-widescreen padding-0">
<div class="grid-col-12 desktop:grid-col-4 margin-bottom-4 desktop:margin-bottom-0 desktop:padding-right-3">
<a href="https://science.nasa.gov/earth/nasa-data-shows-how-drought-changes-wildfire-recovery-in-the-west/" class="color-carbon-black" rel="noopener">
<div class="margin-bottom-2">
<div class="hds-cover-wrapper cover-hover-zoom bg-carbon-black minh-mobile">
<figure class="hds-media-background"><img width="300" height="169" src="https://science.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?w=300" class="attachment-medium size-medium" alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg 1440w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=300, 169 300w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=768, 432 768w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=1024, 576 1024w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=400, 225 400w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=600, 338 600w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=900, 506 900w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/3-25-24-fire-drought-main-art-ed.jpg?resize=1200, 675 1200w" /></figure>
</div>
</div>
<div class="padding-right-0 desktop:padding-right-10">
<div class="subheading margin-bottom-1">4 min read</div>
<div class="margin-bottom-1">
<h3 class="related-article-title">NASA Data Shows How Drought Changes Wildfire Recovery in the West</h3>
</div>
<div class="display-flex flex-align-center label related-article-label margin-bottom-1 color-carbon-60">
<span class="display-flex flex-align-center margin-right-2"><br />
<br />
<span>Article</span><br />
</span><br />
<span class=""><br />
3 weeks ago </span>
</div>
</div>
<p> </p></a>
</div>
<div class="grid-col-12 desktop:grid-col-4 margin-bottom-4 desktop:margin-bottom-0 desktop:padding-right-3">
<a href="https://science.nasa.gov/earth/oceans/early-adopters-of-nasas-pace-data-to-study-air-quality-ocean-health/" class="color-carbon-black" rel="noopener">
<div class="margin-bottom-2">
<div class="hds-cover-wrapper cover-hover-zoom bg-carbon-black minh-mobile">
<figure class="hds-media-background"><img width="300" height="225" src="https://science.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?w=300" class="attachment-medium size-medium" alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg 2400w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=300, 225 300w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=768, 576 768w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=1024, 768 1024w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=1536, 1152 1536w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=2048, 1536 2048w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=400, 300 400w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=600, 450 600w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=900, 675 900w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=1200, 900 1200w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gsfc-20171208-archive-e001997orig.jpg?resize=2000, 1500 2000w" /></figure>
</div>
</div>
<div class="padding-right-0 desktop:padding-right-10">
<div class="subheading margin-bottom-1">5 min read</div>
<div class="margin-bottom-1">
<h3 class="related-article-title">Early Adopters of NASA’s PACE Data to Study Air Quality, Ocean Health</h3>
</div>
<div class="display-flex flex-align-center label related-article-label margin-bottom-1 color-carbon-60">
<span class="display-flex flex-align-center margin-right-2"><br />
<br />
<span>Article</span><br />
</span><br />
<span class=""><br />
3 weeks ago </span>
</div>
</div>
<p> </p></a>
</div>
<div class="grid-col-12 desktop:grid-col-4 margin-bottom-4 desktop:margin-bottom-0 desktop:padding-right-3">
<a href="https://science.nasa.gov/missions/gpm/nasas-global-precipitation-measurement-mission-10-years-10-stories/" class="color-carbon-black" rel="noopener">
<div class="margin-bottom-2">
<div class="hds-cover-wrapper cover-hover-zoom bg-carbon-black minh-mobile">
<figure class="hds-media-background"><img width="300" height="158" src="https://science.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?w=300" class="attachment-medium size-medium" alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" srcset="https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png 2872w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=300, 158 300w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=768, 405 768w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=1024, 541 1024w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=1536, 811 1536w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=2048, 1081 2048w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=400, 211 400w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=600, 317 600w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=900, 475 900w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=1200, 633 1200w, https://smd-cms.nasa.gov/wp-content/uploads/2024/03/gpmraindrop.png?resize=2000, 1056 2000w" /></figure>
</div>
</div>
<div class="padding-right-0 desktop:padding-right-10">
<div class="subheading margin-bottom-1">4 min read</div>
<div class="margin-bottom-1">
<h3 class="related-article-title">NASA’s Global Precipitation Measurement Mission: 10 years, 10 stories</h3>
</div>
<div class="display-flex flex-align-center label related-article-label margin-bottom-1 color-carbon-60">
<span class="display-flex flex-align-center margin-right-2"><br />
<br />
<span>Article</span><br />
</span><br />
<span class=""><br />
2 months ago </span>
</div>
</div>
<p> </p></a>
</div>
</div>
</section></div>
<div class="hds-topic-cards nasa-gb-align-full maxw-full width-full padding-y-6 padding-x-3 color-mode-dark hds-module hds-module-full wp-block-nasa-blocks-topic-cards">
<div class="grid-container grid-container-block-lg padding-x-0">
<div class="grid-row flex-align-center margin-bottom-3">
<div class="desktop:grid-col-8 margin-bottom-2 desktop:margin-bottom-0">
<div class="label color-carbon-60 margin-bottom-2">Keep Exploring</div>
<h2 class="heading-36 line-height-sm">Discover Related Topics</h2>
</div>
</div>
<div class="grid-row grid-gap-2 hds-topic-cards-wrapper">
<a href="#" class="mobile:grid-col-12 tablet:grid-col-6 desktop:grid-col-3 topic-card margin-bottom-4 desktop:margin-bottom-0">
<div class="hds-topic-card hds-cover-wrapper cover-hover-zoom bg-carbon-black">
<div class="skrim-overlay skrim-overlay-dark skrim-left mobile-skrim-top padding-3 display-flex flex-align-end flex-justify-start z-200">
<div>
<p class="hds-topic-card-heading heading-29 color-spacesuit-white line-height-sm margin-top-0 margin-bottom-1">
<span>Missions</span><br />
</p>
</div>
</div>
<figure class="hds-media-background"><img alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" src="https://smd-cms.nasa.gov/wp-content/plugins/nasa-blocks/assets/images/topic-cards/topic-card-sample-1.jpg" /></figure>
</div>
<p> </p></a><br />
<a href="#" class="mobile:grid-col-12 tablet:grid-col-6 desktop:grid-col-3 topic-card margin-bottom-4 desktop:margin-bottom-0">
<div class="hds-topic-card hds-cover-wrapper cover-hover-zoom bg-carbon-black">
<div class="skrim-overlay skrim-overlay-dark skrim-left mobile-skrim-top padding-3 display-flex flex-align-end flex-justify-start z-200">
<div>
<p class="hds-topic-card-heading heading-29 color-spacesuit-white line-height-sm margin-top-0 margin-bottom-1">
<span>Humans in Space</span><br />
</p>
</div>
</div>
<figure class="hds-media-background"><img alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" src="https://smd-cms.nasa.gov/wp-content/plugins/nasa-blocks/assets/images/topic-cards/topic-card-sample-2.jpg" /></figure>
</div>
<p> </p></a><br />
<a href="#" class="mobile:grid-col-12 tablet:grid-col-6 desktop:grid-col-3 topic-card margin-bottom-4 desktop:margin-bottom-0">
<div class="hds-topic-card hds-cover-wrapper cover-hover-zoom bg-carbon-black">
<div class="skrim-overlay skrim-overlay-dark skrim-left mobile-skrim-top padding-3 display-flex flex-align-end flex-justify-start z-200">
<div>
<p class="hds-topic-card-heading heading-29 color-spacesuit-white line-height-sm margin-top-0 margin-bottom-1">
<span>Climate Change</span><br />
</p>
</div>
</div>
<figure class="hds-media-background"><img alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" src="https://smd-cms.nasa.gov/wp-content/plugins/nasa-blocks/assets/images/topic-cards/topic-card-sample-3.jpg" /></figure>
</div>
<p> </p></a><br />
<a href="#" class="mobile:grid-col-12 tablet:grid-col-6 desktop:grid-col-3 topic-card margin-bottom-4 desktop:margin-bottom-0">
<div class="hds-topic-card hds-cover-wrapper cover-hover-zoom bg-carbon-black">
<div class="skrim-overlay skrim-overlay-dark skrim-left mobile-skrim-top padding-3 display-flex flex-align-end flex-justify-start z-200">
<div>
<p class="hds-topic-card-heading heading-29 color-spacesuit-white line-height-sm margin-top-0 margin-bottom-1">
<span>Solar System</span><br />
</p>
</div>
</div>
<figure class="hds-media-background"><img alt="" style="transform: scale(1); transform-origin: 50% 50%; object-position: 50% 50%; object-fit: cover;" src="https://smd-cms.nasa.gov/wp-content/plugins/nasa-blocks/assets/images/topic-cards/topic-card-sample-4.jpg" /></figure>
</div>
<p> </p></a>
</div>
</div>
</div>
)
)
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. Our example also 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.
Climate Change Research
Thu, 18 Apr 2024 15:00:00 +0000
Science in Space: April 2024 Everyone on Earth is touched by the effects of climate change, such as hotter temperatures, shifts in rain patterns, and sea level rise. Collecting climate data helps communities better plan for these changes and build more resilience to them. The International Space Station, one of dozens of NASA missions contributing […]
Hubble Goes Hunting for Small Main Belt Asteroids
Thu, 18 Apr 2024 14:00:13 +0000
Like boulders, rocks, and pebbles scattered across a landscape, asteroids come in a wide range of sizes. Cataloging asteroids in space is tricky because they are faint and they don’t stop to be photographed as they zip along their orbits around the Sun. Astronomers recently used a trove of archived images taken by NASA’s Hubble […]
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_remove_selector",
"value": ""
},
{
"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": "ucp_ct_list_selector_ucp_ct_flatten_method",
"value": "Arr::dot"
},
{
"name": "ucp_ct_list_selector_ucp_ct_transpose",
"value": "0"
},
{
"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.pubDate"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][0]",
"value": ""
},
{
"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.description"
},
{
"name": "ucp_cd_list_picker_ucp_cd_list_item_value_linked[col][1]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_level[0]",
"value": "1"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_heading_comparison[0]",
"value": "not_contains"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_content_comparison[0]",
"value": "ignore"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_heading_comparison_value[0]",
"value": "%"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_content_comparison_value[0]",
"value": ""
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_classes[0]",
"value": "float-start pull-left"
},
{
"name": "ucp_cd_list_picker_ucp_cd_class_rules_context[0]",
"value": "content"
},
{
"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_pagination_window",
"value": "0"
},
{
"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": "0"
},
{
"name": "options[ajax_mode_proximity]",
"value": "0"
},
{
"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": "0"
},
{
"name": "options[show_exporter]",
"value": "show_exporter"
},
{
"name": "whitelabel",
"value": "off"
}
]
