diff --git a/README.md b/README.md
index f6ff2cc..ed9591d 100644
--- a/README.md
+++ b/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.md)
-## Installation
+
+Example in action from Lipp&Leuthold
+
+
+# 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?
diff --git a/docs/images/lippundleuthold.webp b/docs/images/lippundleuthold.webp
new file mode 100644
index 0000000..8252156
Binary files /dev/null and b/docs/images/lippundleuthold.webp differ
diff --git a/templates/Kraftausdruck/InstagramFeed/Elements/ElementInstagramFeed.ss b/templates/Kraftausdruck/InstagramFeed/Elements/ElementInstagramFeed.ss
index 8520ee5..1142b91 100644
--- a/templates/Kraftausdruck/InstagramFeed/Elements/ElementInstagramFeed.ss
+++ b/templates/Kraftausdruck/InstagramFeed/Elements/ElementInstagramFeed.ss
@@ -5,7 +5,7 @@
<% loop $InstagramFeed.Media %>
<% if $media_type == "IMAGE" %>
-
+ {$caption}
@@ -15,7 +15,7 @@
<% loop $Children.Limit(1) %><%-- per default we show just one - may just incrase limit? --%>
<% if $media_type == "VIDEO" %>
-
+
@@ -23,11 +23,11 @@
{$Up.Up.caption}
-
+
<% else_if $media_type == "IMAGE" %>
-
+ {$Up.Up.caption}
@@ -37,7 +37,7 @@
<% end_if %>
<% if $media_type == "VIDEO" %>
-
+
@@ -45,7 +45,7 @@
{$caption}
-
+
<% end_if %>
<% end_loop %>