# 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="https://1762916841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZt2Ms0YHBOTLKVUW9x%2Fuploads%2FQLX3jYdeqVNPeyt1iXdE%2Fimage.png?alt=media&#x26;token=8e2afef4-a4d1-4843-8afb-269591d647a1" alt=""><figcaption><p>Example of Media Collection</p></figcaption></figure>

## Implementation

The media collection can be implemented with the [JS-Loader](https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/mfn-widgets/broken-reference) as shown bellow. It can also be implemented with shortcodes using the [Datablocks plugin](https://modfin.gitbook.io/mfn-integration-guide/-MbDBLBpI3LuyvwyWLVw/mfn-widgets/broken-reference).&#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;