updated readme with details on configuration. Fixed cropping when wid…

…th and height are either set to null.

README.md

@@ -76,6 +76,20 @@ Using the Twig thumbnail function generates images under the directory public/th
  rm -rf public/thumbs/400×300×c/instagram/
 ```
 
+### Configuration
+The configuration file is found at ``config\extensions\andersbjorkland-instagramdisplayextension.yaml``. 
+
+* You can configure upload location, though default *files/instagram* is recommended to make the thumbnail-function work. 
+
+* Specify if you want the default style for the twig-partial (*_div.html.twig*) to be active.
+
+* Specify height and width for the media-files. This will crop the image to the specified dimensions. Setting either to null will keep the media file's original aspect ratio. Setting both to null will keep the image's original size.
+
+* Dictate what colors to use for the pagination button and links.
+
+* Determine if you want to show video media, and weather it should be stored on your server.
+
+
 ## Feedback is Welcome
 Please reach out to me at [email protected] if you have suggestions for features or improvements. You may open issues and push requests for said issues as well.   
 

assets/instagram-display-extension/asyncControl.js

@@ -165,9 +165,10 @@ const manageFollowLink = (data) => {
 }
 
 const manageWrapper = (data) => {
-    if ("icon_color" in data) {
+    if ("icon_color" in data && "link_color" in data) {
         let color = data["icon_color"];
-        wrapper.setAttribute("style", "--fill-color:" + color + " ; --stroke-color: " + color + ";");
+        let linkColor = data["link_color"];
+        wrapper.setAttribute("style", "--fill-color:" + color + " ; --stroke-color: " + color + "; --link-color: " + linkColor + ";");
     }
 
     if ("default_style" in data) {

composer.json

@@ -1,7 +1,7 @@
 {
     "name": "andersbjorkland/instagram-display-extension",
     "description": "📸 Instagram Display Extension connects your Instagram account photos to Bolt CMS.",
-    "version": "0.1.1.1",
+    "version": "1.0",
     "type": "bolt-extension",
     "license": "MIT",
     "authors": [

config/config.yaml

@@ -13,13 +13,13 @@ default_style: true
 # Define the color for the instagram-link to your media posts.
 icon_color: 'rgba(237, 237, 237, 1)'
 overlay_color: 'rgba(0, 0, 0, 0.6)'
+link_color: 'rgba(237, 237, 237, 1)'
 
 # Show a link for 'Follow on Instagram'
 show_follow_on_instagram: true
 follow_classname: 'instagram-follow--right'
 
 upload_location: 'files/instagram'
-max_upload_size: 8M
 
 # Set this to true if you want to display videos in your feed.
 allow_video: false

src/Controller/Controller.php

@@ -298,12 +298,21 @@ public function getAsyncMedia(Request $request, EntityManagerInterface $entityMa
             $thumbnailWidth = $configs->get('thumbnail_width');
             $thumbnailHeight = $configs->get('thumbnail_height');
 
-            $parsedResponse["video_width"] = $configs->get('thumbnail_width');
-            $parsedResponse["video_height"] = $configs->get('thumbnail_height');
+            $thumbnailWidth = strcmp(strtolower("" . $thumbnailWidth), "null") === 0 ? null : $thumbnailWidth;
+            $thumbnailHeight = strcmp(strtolower("" . $thumbnailHeight), "null") === 0 ? null : $thumbnailHeight;
+
+            $cropping = 'c';
+            if ($thumbnailWidth === null || $thumbnailHeight === null) {
+                $cropping = null;
+            }
+
+            $parsedResponse["video_width"] = $thumbnailWidth;
+            $parsedResponse["video_height"] = $thumbnailHeight;
 
 
             $parsedResponse["icon_color"] = $configs->get('icon_color');
             $parsedResponse["overlay_color"] = $configs->get('overlay_color');
+            $parsedResponse["link_color"] = $configs->get('link_color');
             $parsedResponse["default_style"] = $configs->get('default_style');
 
             $showFollow = $configs->get('show_follow_on_instagram');
@@ -323,14 +332,21 @@ public function getAsyncMedia(Request $request, EntityManagerInterface $entityMa
                         ];
                     }
 
+
+                    if ($thumbnailWidth === null && $thumbnailHeight === null ) {
+                        $thumbnailPath = $mediaEntity->getFilepath();
+                    } else {
+                        $thumbnailPath = (new ThumbnailHelper($this->getBoltConfig()))->path(str_replace("files/", "", $mediaEntity->getFilepath()), $thumbnailWidth, $thumbnailHeight, null, null, $cropping);
+                    }
+
                     $mediaContent = [
                         "media_type" => $mediaEntity->getMediaType(),
                         "filepath" => $mediaEntity->getFilepath(),
                         "caption" => $mediaEntity->getCaption(),
                         "instagram_url" => $mediaEntity->getInstagramUrl(),
                         "instagram_username" => $mediaEntity->getInstagramUsername(),
                         "permalink" => $mediaEntity->getPermalink(),
-                        "thumbnail" => (new ThumbnailHelper($this->getBoltConfig()))->path(str_replace("files/", "", $mediaEntity->getFilepath()), $thumbnailWidth, $thumbnailHeight, null, null, 'c')
+                        "thumbnail" => $thumbnailPath
                     ];
                     array_push($media, $mediaContent);
                 }