add screenshot, typos

README.md

@@ -1,31 +1,35 @@
 # Silverstripe instagram-basic-display-feed-element
-Instagram feed in a dnadesign/silverstripe-elemental-element. It utilizes [espresso-dev/instagram-basic-display-php](https://github.com/espresso-dev/instagram-basic-display-php) and caches api-response for performance reasons. Since different scrapers led to all sorts of problems - mostly cookie/session related, this module came to existence. `appId` & `appSecret` are stored in `yml` and the rotating token is stored in DB. The API is read-only for "public" data anyway.
+Instagram feed in a dnadesign/silverstripe-elemental-element. It utilizes [espresso-dev/instagram-basic-display-php](https://github.com/espresso-dev/instagram-basic-display-php) and caches the API-response for performance reasons. Since different scrapers led to all sorts of problems - mostly cookie/session related, this module came to existence. `appId` & `appSecret` are stored in `yml` and the rotating token is stored in DB. The API is read-only for "public" data anyway.
 
 Note: This module utilizes the [Instagram **Basic** Display API](https://developers.facebook.com/docs/instagram-basic-display-api/).
 
 [![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](LICENSE.md)
 
-## Installation
+![Instagram feed module screenshot](docs/images/lippundleuthold.webp)
+Example in action from <a href="https://lippundleuthold.ch/shows#instafeed" target="_blank">Lipp&Leuthold</a>
+
+
+# Installation
 Composer is the recommended way installing Silverstripe modules.
 ```
 composer require lerni/instagram-basic-display-feed-element
 ```
 * Run a `dev/build?flush`
 
-# Requirements
+## Requirements
 * Silverstripe 4.x & 5.x
 * dnadesign/silverstripe-elemental
 * espresso-dev/instagram-basic-display-php 1.x
 
-# Configuration
-You'll need to setup a [FB App](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started/) for basic display and set `appId` & `appSecret` ([Instagram not FB](https://stackoverflow.com/questions/60258144/invalid-platform-app-error-using-instagram-basic-display-api)). `redirectUri` 'll be `DYNAMICALLY-SET-HOST.TLD/_instaauth/` but you can also set it explicit with a domain per yml-config. Make sure to configure the correct values (e.g. dev-url) in your FB App! If no token is generated yet, you'll find a link to generate one in the setting-tab of the element. The token 'll be renewed automatically (on request basis) if older than 30 days.
+## Configuration
+You'll need to setup a [FB App](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started/) for basic display and set `appId` & `appSecret` ([Instagram not FB](https://stackoverflow.com/questions/60258144/invalid-platform-app-error-using-instagram-basic-display-api)). `redirectUri` will be `DYNAMICALLY-SET-HOST.TLD/_instaauth/` but you can also set it explicit with a domain per yml-config. Make sure to configure the correct values (e.g. dev-url) in your FB App! If no token is generated yet, you'll find a link to generate one in the setting-tab of the element. The token 'll be renewed automatically (on request basis) if older than 30 days.
 
 1. Install the module
 2. Create a [FB App](https://developers.facebook.com/docs/instagram-basic-display-api/getting-started/) use `https://DOMAIN.TLD/_instaauth/` as redirectUri
 3. Add `appId` & `appSecret` in yml-config like below & `?flush`
 4. Create an Instagram Feed Element & click on the Link in the setting-tab to authenticate
-5. reload CMS to see the generated token
-6. That's it. Token 'll be updated if older than 30 days on request basis. This means, if a token is older than 30 day and from there on no request is made (element never shown to any visitor), the token invalidates and a warning is thrown. To fix this you'll need to delete all tokens and regenerate one with the link provided in CMS.
+5. Reload CMS to see the generated token
+6. That's it. Token 'll be updated if older than 30 days on request basis. This means, if a token is older than 30 days and from there on no request is made (element never shown to any visitor), the token invalidates and a warning is thrown. To "fix" this, you'll need to delete all tokens and regenerate one with the link provided in CMS.
 
 ```yaml
 Kraftausdruck\InstagramFeed\Control\InstaAuthController:
@@ -35,12 +39,14 @@ Kraftausdruck\InstagramFeed\Control\InstaAuthController:
     # redirectUri: 'https://example.tld/_instaauth/'
 ```
 # Styling
-Example SCSS customisation. [Feather Icons](https://feathericons.com/) are suggested - you need to load those yourself.
+Example SCSS square-styles with text as hover overlay. [Feather Icons](https://feathericons.com/) are suggested - you need to load those yourself.
 ```scss
 $lh: 1.41;
 $white: #fff;
 
 .instafeed {
+    display: flex;
+    flex-wrap: wrap;
 	margin-left: -1px;
 	margin-right: -1px;
 	width: calc(100% + 2px);
@@ -124,7 +130,7 @@ $white: #fff;
 }
 ```
 # Troubleshooting
-If things go wrong you may want to check [Facebooks Plattformstatus](https://developers.facebook.com/status/dashboard/).
+If things go wrong, you may want to check [Facebooks Plattform Status](https://developers.facebook.com/status/dashboard/).
 
 # Todo
 * how is pagination supposed to work?

templates/Kraftausdruck/InstagramFeed/Elements/ElementInstagramFeed.ss

@@ -5,7 +5,7 @@
     <% loop $InstagramFeed.Media %>
         <% if $media_type == "IMAGE" %>
             <a class="$media_type.LowerCase" href="$permalink" target="_blank" rel="noopener">
-                <figure >
+                <figure>
                     <img loading="auto" src="$media_url" alt="$caption" />
                     <figcaption>{$caption}<span data-feather="instagram"></span></figcaption>
                 </figure>
@@ -15,19 +15,19 @@
             <% loop $Children.Limit(1) %><%-- per default we show just one - may just incrase limit? --%>
                 <% if $media_type == "VIDEO" %>
                     <a class="$media_type.LowerCase" href="$permalink" target="_blank" rel="noopener">
-                        <figure >
+                        <figure>
                             <video muted poster="$thumbnail_url" width="100%" autoplay loop playsinline>
                                 <source src="$media_url" type="video/mp4">
                             </video>
                             <figcaption>
                                 {$Up.Up.caption}
                                 <span data-feather="instagram"></span>
                             </figcaption>
-                        </figure >
+                        </figure>
                     </a>
                 <% else_if $media_type == "IMAGE" %>
                     <a class="$media_type.LowerCase" href="$permalink" target="_blank" rel="noopener">
-                        <figure >
+                        <figure>
                             <img loading="auto" src="$media_url" alt="$caption" />
                             <figcaption>{$Up.Up.caption}<span data-feather="instagram"></span></figcaption>
                         </figure>
@@ -37,15 +37,15 @@
         <% end_if %>
         <% if $media_type == "VIDEO" %>
             <a class="$media_type.LowerCase" href="$permalink" target="_blank" rel="noopener">
-                <figure >
+                <figure>
                     <video muted poster="$thumbnail_url" width="100%" autoplay loop playsinline>
                         <source src="$media_url" type="video/mp4">
                     </video>
                     <figcaption>
                         {$caption}
                         <span data-feather="instagram"></span>
                     </figcaption>
-                </figure >
+                </figure>
             </a>
         <% end_if %>
     <% end_loop %>