> For the complete documentation index, see [llms.txt](https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/mfn-widgets/media-collection.md).

# Media collection

Each media collection is added through the MFN Editor and then integrated using a TOKEN provided by Modular Finance.

The Media collection can be styled using CSS.

It can be used to show media for the press such as logos, products, and board members. 

<figure><img src="/files/2A6hzqZR1zkatgu9I9cp" alt=""><figcaption><p>Example of Media Collection</p></figcaption></figure>

## Implementation

The media collection can be implemented with the [JS-Loader](broken://spaces/qSwsJN2Cknwf0NarotZx) as shown bellow. It can also be implemented with shortcodes using the [Datablocks plugin](broken://spaces/-LRMlPFaftvytkVA2iUj/pages/-LzLr-Ws3y5uUA044EjG).&#x20;

```javascript
<div id="media-collection"></div>

<script>
   (function(widgets) {
        var url = "https://widget.datablocks.se/api/rose";
        if (!window._MF) {
            var b = document.createElement("script");
            b.type = "text/javascript";
            b.async = true;
            b.src = url + "/assets/js/loader-v5.js";
            document.getElementsByTagName("body")[0].appendChild(b);
            }
            window._MF = window._MF || {
            data: [],
            url: url,
            ready: !!0,
            render: function() { window._MF.ready = !0 },
            push: function(w) { window._MF.data.push(w) }
            };
            window._MF.push(widgets);
    })([{
        query: "#media-collection"
        ,widget: "media-collection"
        ,locale: "en"
        ,token: "<TOKEN>"
    }]);
</script>
```

### Exempel

The following examples have added their own custom styles

[**Haki Safety**](https://www.hakisafety.se/media/bildarkiv)

[**Eolus**](https://www.eolus.com/en/newsroom/media-library/)&#x20;