Displaying External Content as Thumbnails

Hi, we’d like to display external content as a thumbnail on our site. It should pull the meta data header and image from the link and then display it like this.

This is a sample implem that I’ve done in the past with DatoCMS. It should work similar to how Facebook pulls header and image when you share an article to your newsfeed.

Hello Mica,

there are different ways how you could achieve that:

  1. You can use a multi options field to select stories which you would like to have in the slider or newsfeed:

    The uuids of the stories which are being referenced with the multi options field are being added to the JSON of the example1 which looks like this:
"Slider": [
                "c9c5a54d-d60d-49e0-b9f1-cb14cf802a4f",
                "d3db3066-40a8-49ad-872a-e7b6e7057fc5",
                "304e15aa-59e0-4270-a9ec-bfb40951aa23"
            ],

Those stories can be resolved and inserted instead of having only the uuids by using the resolve_relations parameter and adding the components name + the field name:
https://api.storyblok.com/v1/cdn/stories/example_articles/example1?version=draft&token=paLxXl2Qi7vJjyUzhPHKYAtt&cv=1602854162&resolve_relations=example1.Slider

With this solution you can access the content of the referenced stories and eventually also images which then can be used to create thumbnails using our image service.
In the case that you’re using the new asset field you can add Alt, Title/Caption and Copyright information directly to the asset:

The image links delivered in the asset field type look like the following example:
https://a.storyblok.com/f/89533/3024x4032/a0dfe4b5d3/pexels-alex-kozlov-5587738.jpg

Which can be changed ( https://www.storyblok.com/docs/image-service#code-examples ) into https://img2.storyblok.com/150x0/f/89533/3024x4032/a0dfe4b5d3/pexels-alex-kozlov-5587738.jpg or with blur https://img2.storyblok.com/150x0/filters:blur(3)/f/89533/3024x4032/a0dfe4b5d3/pexels-alex-kozlov-5587738.jpg
You can find more information about the available filters here:
https://www.storyblok.com/docs/image-service

  1. You can create a blocks field which contains instances of a component which holds the link to an image, the name or a description and a link to a story:

Observation: The component in the example shows you a preview of the fields created inside of the component which can be achieved with the schema review feature https://www.storyblok.com/docs/schema-configuration#topic-preview
You can take a look at the configuration of the example2 story:

What can you do with the linked story? Exactly! You can also resolve it:


You can choose between resolve_links=url which will give you the link object of the linked story or resolve_links=story which will equally to resolve_relations will give you the complete story object from which you can then take any information inside of your code.
  1. The possibly most flexible way to implement a news feed which is being shown below your articles is to use a logic which is being controlled from a story or a component that doesn’t contain any content but information how many stories to show in the news feed or slider. This can be achieved by linking a story which can then be reused including its settings. The linking can be done like explained in 1. with the option field where you can choose a single option field instead of a multi option field.
    The configuration could look like in this story:

    The content part contains the following data:
"content": {
        "Name": "Newsfeed",
        "_uid": "110b615d-b131-40fd-96ae-b2418902686e",
        "component": "example3",
        "Rows_Count": "2",
        "Items_Count": "2",
        "Fetch_Latest": true,
        "Category_To_Fetch": "0b87cb6f-b089-4dd2-a1e3-87f9427d0700",
    },

The information can be used to construct a request like the following:
https://api.storyblok.com/v1/cdn/stories?version=draft&token=paLxXl2Qi7vJjyUzhPHKYAtt&cv=1603196689&filter_query[categories][in_array]=0b87cb6f-b089-4dd2-a1e3-87f9427d0700&per_page=2&sort_by=published_at:desc

This request will give you the two newest stories of the category “Web Design” which is also a story and referenced using a multi option field as you can also pass a list of UUIDs you can also find article which belong to more than only one category.

The explanations and more examples of the different parameters can be found here in the documentation: