diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d1965f..3cc0cfa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# v2.6.1 (May 19, 2020) +* New: Wordpress Plugin available on [store](https://wordpress.org/plugins/last-9-photos-webcomponent/). + +[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) + + # v2.6.0 (May 18, 2020) * Feature: Overwrite CSS Style with selector `::part` * New attribute: mouse-hover @@ -5,9 +11,6 @@ * New attribute: shadows * Fix: Wordpress Plugin -[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) - - # v2.5.0 (May 04, 2020) * Fix: now you can use multiple webcomponents in the same html page (#3) * NOTE: better to use the full close tag `` than short `/>` diff --git a/README.md b/README.md index 152064e..16155ed 100755 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 🌉 WebComponent: Instagram Widget -[![](https://img.shields.io/badge/version-v2.6.0-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io) +[![](https://img.shields.io/badge/version-v2.6.1-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io) Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account. (Unofficial Instagram Widget) @@ -79,7 +79,7 @@ import '@ptkdev/webcomponent-instagram-widget'; See folder `examples`, run with `npm run example`. Below is available a description of `options` values and all logger methods. ## 📖 Installation (Wordpress) -1. Download [wordpress-plugin](https://github.com/ptkdev-components/webcomponent-instagram-widget/raw/master/dist/wordpress/instagram-widget-wordpress-plugin.zip) and install it. +1. Download wordpress plugin from [official store](https://wordpress.org/plugins/last-9-photos-webcomponent/) or [mirror](https://github.com/ptkdev-components/webcomponent-instagram-widget/raw/master/dist/wordpress/instagram-widget-wordpress-plugin.zip) and install it. 1. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code (and replace `@ptkdev` with your instagram username): ```html diff --git a/dist/lib/en/instagram-widget.js b/dist/lib/en/instagram-widget.js index 7f62cc2..11631a2 100644 --- a/dist/lib/en/instagram-widget.js +++ b/dist/lib/en/instagram-widget.js @@ -1,4 +1,4 @@ -// WebComponent: InstagramWidget 2.6.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] +// WebComponent: InstagramWidget 2.6.1 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget (function() { /** * InstagramWidget WebComponent @@ -15,7 +15,7 @@ class InstagramWidget extends HTMLElement { super(); const template = document.createElement("template"); - template.innerHTML = `
+ template.innerHTML = `
    diff --git a/dist/lib/en/instagram-widget.min.js b/dist/lib/en/instagram-widget.min.js index f275191..5193614 100644 --- a/dist/lib/en/instagram-widget.min.js +++ b/dist/lib/en/instagram-widget.min.js @@ -1,3 +1,3 @@ -// WebComponent: InstagramWidget 2.6.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] +// WebComponent: InstagramWidget 2.6.1 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget -(function() { class InstagramWidget extends HTMLElement{constructor(){super();const t=document.createElement("template");t.innerHTML='
    \n\t
    \n\t\t
    \n\t\t\t
      \n\t\t
      \n\t
      \n
      ',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.json=null,this.options_default={username:"@ptkdev","items-limit":"9","image-width":"100%","image-height":"100%",grid:"responsive",cache:"enabled","border-spacing":"2px","border-corners":"5","force-square":"yes",shadows:"disabled","mouse-hover":"disabled","show-title":"enabled"},this.options=Object.create(this.options_default),this.resizeAction=function(t){this.resize(t)}.bind(this)}connectedCallback(){window.addEventListener("resize",this.resizeAction)}buildHTML(){let t=this.json.graphql.user.edge_owner_to_timeline_media.edges,e=[];for(let i=0;i${`;switch(this.shadowRoot.querySelector(".instagram-widget-photos").innerHTML=i,this.options["mouse-hover"]){case"type1":this.shadowRoot.querySelector("#instagram-widget-style").innerHTML=this.shadowRoot.querySelector("#instagram-widget-style").innerHTML+"\n\t\t\t\t#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}\n\t\t\t\t#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}"}if(""!==this.options.grid&&null!==this.options.grid&&"responsive"!==this.options.grid){let t=this.options.grid.split("x"),e=100/parseInt(t[0]),i=this.shadowRoot.querySelectorAll(".instagram-widget-photos img");for(let s=0;s#instagram-widget *{margin:0;padding:0;line-height:0}#instagram-widget .instagram-widget-container{text-align:center;justify-content:center;font-weight:500}#instagram-widget .instagram-widget-photos li img{border-radius:5%;background-color:#f8f8ff;object-fit:cover;object-position:50% 50%;max-width:300px;max-height:300px;min-width:80px;min-height:80px;margin:2px}#instagram-widget .instagram-content ul{list-style-type:none;padding-inline-start:0;width:100%}#instagram-widget .instagram-widget-photos li{list-style-type:none;display:inline}
      \n\t
      \n\t\t
      \n\t\t\t
        \n\t\t
        \n\t
        \n
        ',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.json=null,this.options_default={username:"@ptkdev","items-limit":"9","image-width":"100%","image-height":"100%",grid:"responsive",cache:"enabled","border-spacing":"2px","border-corners":"5","force-square":"yes",shadows:"disabled","mouse-hover":"disabled","show-title":"enabled"},this.options=Object.create(this.options_default),this.resizeAction=function(t){this.resize(t)}.bind(this)}connectedCallback(){window.addEventListener("resize",this.resizeAction)}buildHTML(){let t=this.json.graphql.user.edge_owner_to_timeline_media.edges,e=[];for(let i=0;i${`;switch(this.shadowRoot.querySelector(".instagram-widget-photos").innerHTML=i,this.options["mouse-hover"]){case"type1":this.shadowRoot.querySelector("#instagram-widget-style").innerHTML=this.shadowRoot.querySelector("#instagram-widget-style").innerHTML+"\n\t\t\t\t#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}\n\t\t\t\t#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}"}if(""!==this.options.grid&&null!==this.options.grid&&"responsive"!==this.options.grid){let t=this.options.grid.split("x"),e=100/parseInt(t[0]),i=this.shadowRoot.querySelectorAll(".instagram-widget-photos img");for(let s=0;s +// WebComponent: InstagramWidget 2.6.1 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget (function() { /** * InstagramWidget WebComponent @@ -15,7 +15,7 @@ class InstagramWidget extends HTMLElement { super(); const template = document.createElement("template"); - template.innerHTML = `
        + template.innerHTML = `
          diff --git a/dist/lib/it/instagram-widget.min.js b/dist/lib/it/instagram-widget.min.js index f275191..5193614 100644 --- a/dist/lib/it/instagram-widget.min.js +++ b/dist/lib/it/instagram-widget.min.js @@ -1,3 +1,3 @@ -// WebComponent: InstagramWidget 2.6.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] +// WebComponent: InstagramWidget 2.6.1 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget -(function() { class InstagramWidget extends HTMLElement{constructor(){super();const t=document.createElement("template");t.innerHTML='
          \n\t
          \n\t\t
          \n\t\t\t
            \n\t\t
            \n\t
            \n
            ',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.json=null,this.options_default={username:"@ptkdev","items-limit":"9","image-width":"100%","image-height":"100%",grid:"responsive",cache:"enabled","border-spacing":"2px","border-corners":"5","force-square":"yes",shadows:"disabled","mouse-hover":"disabled","show-title":"enabled"},this.options=Object.create(this.options_default),this.resizeAction=function(t){this.resize(t)}.bind(this)}connectedCallback(){window.addEventListener("resize",this.resizeAction)}buildHTML(){let t=this.json.graphql.user.edge_owner_to_timeline_media.edges,e=[];for(let i=0;i${`;switch(this.shadowRoot.querySelector(".instagram-widget-photos").innerHTML=i,this.options["mouse-hover"]){case"type1":this.shadowRoot.querySelector("#instagram-widget-style").innerHTML=this.shadowRoot.querySelector("#instagram-widget-style").innerHTML+"\n\t\t\t\t#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}\n\t\t\t\t#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}"}if(""!==this.options.grid&&null!==this.options.grid&&"responsive"!==this.options.grid){let t=this.options.grid.split("x"),e=100/parseInt(t[0]),i=this.shadowRoot.querySelectorAll(".instagram-widget-photos img");for(let s=0;s#instagram-widget *{margin:0;padding:0;line-height:0}#instagram-widget .instagram-widget-container{text-align:center;justify-content:center;font-weight:500}#instagram-widget .instagram-widget-photos li img{border-radius:5%;background-color:#f8f8ff;object-fit:cover;object-position:50% 50%;max-width:300px;max-height:300px;min-width:80px;min-height:80px;margin:2px}#instagram-widget .instagram-content ul{list-style-type:none;padding-inline-start:0;width:100%}#instagram-widget .instagram-widget-photos li{list-style-type:none;display:inline}
            \n\t
            \n\t\t
            \n\t\t\t
              \n\t\t
              \n\t
              \n
              ',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.json=null,this.options_default={username:"@ptkdev","items-limit":"9","image-width":"100%","image-height":"100%",grid:"responsive",cache:"enabled","border-spacing":"2px","border-corners":"5","force-square":"yes",shadows:"disabled","mouse-hover":"disabled","show-title":"enabled"},this.options=Object.create(this.options_default),this.resizeAction=function(t){this.resize(t)}.bind(this)}connectedCallback(){window.addEventListener("resize",this.resizeAction)}buildHTML(){let t=this.json.graphql.user.edge_owner_to_timeline_media.edges,e=[];for(let i=0;i${`;switch(this.shadowRoot.querySelector(".instagram-widget-photos").innerHTML=i,this.options["mouse-hover"]){case"type1":this.shadowRoot.querySelector("#instagram-widget-style").innerHTML=this.shadowRoot.querySelector("#instagram-widget-style").innerHTML+"\n\t\t\t\t#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}\n\t\t\t\t#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}"}if(""!==this.options.grid&&null!==this.options.grid&&"responsive"!==this.options.grid){let t=this.options.grid.split("x"),e=100/parseInt(t[0]),i=this.shadowRoot.querySelectorAll(".instagram-widget-photos img");for(let s=0;s +// WebComponent: InstagramWidget 2.6.1 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget (function() { /** * InstagramWidget WebComponent @@ -15,7 +15,7 @@ class InstagramWidget extends HTMLElement { super(); const template = document.createElement("template"); - template.innerHTML = `
              + template.innerHTML = `
                diff --git a/dist/lib/pl/instagram-widget.min.js b/dist/lib/pl/instagram-widget.min.js index f275191..5193614 100644 --- a/dist/lib/pl/instagram-widget.min.js +++ b/dist/lib/pl/instagram-widget.min.js @@ -1,3 +1,3 @@ -// WebComponent: InstagramWidget 2.6.0 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] +// WebComponent: InstagramWidget 2.6.1 - Collection of WebComponents by Patryk Rzucidlo [@PTKDev] // https://github.com/ptkdev-components/webcomponent-instagram-widget -(function() { class InstagramWidget extends HTMLElement{constructor(){super();const t=document.createElement("template");t.innerHTML='
                \n\t
                \n\t\t
                \n\t\t\t
                  \n\t\t
                  \n\t
                  \n
                  ',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.json=null,this.options_default={username:"@ptkdev","items-limit":"9","image-width":"100%","image-height":"100%",grid:"responsive",cache:"enabled","border-spacing":"2px","border-corners":"5","force-square":"yes",shadows:"disabled","mouse-hover":"disabled","show-title":"enabled"},this.options=Object.create(this.options_default),this.resizeAction=function(t){this.resize(t)}.bind(this)}connectedCallback(){window.addEventListener("resize",this.resizeAction)}buildHTML(){let t=this.json.graphql.user.edge_owner_to_timeline_media.edges,e=[];for(let i=0;i${`;switch(this.shadowRoot.querySelector(".instagram-widget-photos").innerHTML=i,this.options["mouse-hover"]){case"type1":this.shadowRoot.querySelector("#instagram-widget-style").innerHTML=this.shadowRoot.querySelector("#instagram-widget-style").innerHTML+"\n\t\t\t\t#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}\n\t\t\t\t#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}"}if(""!==this.options.grid&&null!==this.options.grid&&"responsive"!==this.options.grid){let t=this.options.grid.split("x"),e=100/parseInt(t[0]),i=this.shadowRoot.querySelectorAll(".instagram-widget-photos img");for(let s=0;s#instagram-widget *{margin:0;padding:0;line-height:0}#instagram-widget .instagram-widget-container{text-align:center;justify-content:center;font-weight:500}#instagram-widget .instagram-widget-photos li img{border-radius:5%;background-color:#f8f8ff;object-fit:cover;object-position:50% 50%;max-width:300px;max-height:300px;min-width:80px;min-height:80px;margin:2px}#instagram-widget .instagram-content ul{list-style-type:none;padding-inline-start:0;width:100%}#instagram-widget .instagram-widget-photos li{list-style-type:none;display:inline}
                  \n\t
                  \n\t\t
                  \n\t\t\t
                    \n\t\t
                    \n\t
                    \n
                    ',this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.content.cloneNode(!0)),this.json=null,this.options_default={username:"@ptkdev","items-limit":"9","image-width":"100%","image-height":"100%",grid:"responsive",cache:"enabled","border-spacing":"2px","border-corners":"5","force-square":"yes",shadows:"disabled","mouse-hover":"disabled","show-title":"enabled"},this.options=Object.create(this.options_default),this.resizeAction=function(t){this.resize(t)}.bind(this)}connectedCallback(){window.addEventListener("resize",this.resizeAction)}buildHTML(){let t=this.json.graphql.user.edge_owner_to_timeline_media.edges,e=[];for(let i=0;i${`;switch(this.shadowRoot.querySelector(".instagram-widget-photos").innerHTML=i,this.options["mouse-hover"]){case"type1":this.shadowRoot.querySelector("#instagram-widget-style").innerHTML=this.shadowRoot.querySelector("#instagram-widget-style").innerHTML+"\n\t\t\t\t#instagram-widget .instagram-widget-photo{transition: opacity 0.3s ease-in-out;}\n\t\t\t\t#instagram-widget .instagram-widget-photo:hover{opacity: 0.70;}"}if(""!==this.options.grid&&null!==this.options.grid&&"responsive"!==this.options.grid){let t=this.options.grid.split("x"),e=100/parseInt(t[0]),i=this.shadowRoot.querySelectorAll(".instagram-widget-photos img");for(let s=0;s (https://ptk.dev)", "license": "MIT", diff --git a/wordpress/last9photos.php b/wordpress/last_9_photos_webcomponent.php similarity index 100% rename from wordpress/last9photos.php rename to wordpress/last_9_photos_webcomponent.php diff --git a/wordpress/readme.txt b/wordpress/readme.txt index f95d223..5875090 100644 --- a/wordpress/readme.txt +++ b/wordpress/readme.txt @@ -1,11 +1,11 @@ -=== {{ translate.title_wordpress }} - WebComponent === +=== {{translate.title_wordpress}} - WebComponent === Contributors: ptkdev Donate link: https://www.patreon.com/ptkdev Tags: instagram, widget, last 9 photos, instagram widget, webcomponents Requires at least: 5.0 Tested up to: 5.2 Requires PHP: 7.2 -Stable tag: {{ package.version }} +Stable tag: {{package.version}} License: MIT License URI: https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/nightly/LICENSE.md @@ -15,18 +15,30 @@ Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics fro # 🌉 WebComponent: Instagram Widget -[![](https://img.shields.io/badge/version-v{{ package.version }}-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io) +[![](https://img.shields.io/badge/version-v2.6.0-lightgrey.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/releases) [![](https://img.shields.io/npm/v/@ptkdev/webcomponent-instagram-widget.svg)](https://www.npmjs.com/package/@ptkdev/webcomponent-instagram-widget) [![](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://github.com/ptkdev-components/webcomponent-instagram-widget/blob/master/LICENSE.md) [![](https://img.shields.io/badge/ES-9-F7DF1E.svg)](https://wikipedia.org/wiki/ECMAScript) [![](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget/badge.svg)](https://snyk.io/test/github/ptkdev-components/webcomponent-instagram-widget) [![](https://discordapp.com/api/guilds/383373985666301975/embed.png)](http://discord.ptkdev.io) -> Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account. (Unofficial Instagram Widget) +Last 9 Photos: Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics from your instagram account. > ⛔ **DISCLAIMER**: This is an **unofficial** instagram library and offers no warranty! All trademarks and logos belong to their respective owners. -## 🎁 Support: Donate -> This project is **free**, **open source** and I try to provide excellent **free support**. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. **THANK YOU!** - -[![](https://img.shields.io/badge/donate-paypal-005EA6.svg?logo=paypal)](https://www.paypal.me/ptkdev) [![](https://img.shields.io/badge/donate-patreon-F87668.svg?logo=patreon)](https://www.patreon.com/ptkdev) [![](https://img.shields.io/badge/donate-sponsors-ea4aaa.svg?logo=github)](https://github.com/sponsors/ptkdev/) [![](https://img.shields.io/badge/donate-ko--fi-29abe0.svg?logo=ko-fi)](https://ko-fi.com/ptkdev) - -![](https://img.shields.io/badge/bitcoin-35jQmZCy4nsxoMM3QPFrnZePDVhdKaHMRH-E38B29.svg?logo=bitcoin) ![](https://img.shields.io/badge/ethereum-0x8b8171661bEb032828e82baBb0B5B98Ba8fBEBFc-4E8EE9.svg?logo=ethereum) +## 📎 Menu +- 💡 [Features](https://github.com/ptkdev-components/webcomponent-instagram-widget#-features) +- 🕹 [Demo](https://codepen.io/ptkdev/pen/WNQOYqy) +- 👔 [Screenshot](https://github.com/ptkdev-components/webcomponent-instagram-widget#-screenshot) +- 🚀 [How to use](https://github.com/ptkdev-components/webcomponent-instagram-widget#-installation) +- - 🌎 [Web](https://github.com/ptkdev-components/webcomponent-instagram-widget#-installation-web) +- - 📦 [Webpack/Browserify](https://github.com/ptkdev-components/webcomponent-instagram-widget#-installation-npm-module---browserifywebpack) +- - 📖 [Wordpress](https://github.com/ptkdev-components/webcomponent-instagram-widget#-installation-wordpress) +- - ⚛️ [React](https://github.com/ptkdev-components/webcomponent-instagram-widget#%EF%B8%8F-installation-react) +- - 🅰️ [Angular](https://github.com/ptkdev-components/webcomponent-instagram-widget#🅰%EF%B8%8F-installation-angular) +- 📚 [Documentation](https://github.com/ptkdev-components/webcomponent-instagram-widget#-documentation) +- - 🧰 [Options / Attributes](https://github.com/ptkdev-components/webcomponent-instagram-widget#-options--attributes) +- - 🎨 [CSS Customization](https://github.com/ptkdev-components/webcomponent-instagram-widget#-css-customization) +- 🔨 [Developer Mode](https://github.com/ptkdev-components/webcomponent-instagram-widget#-developer-mode) +- 👨‍💻 [Contributing](https://github.com/ptkdev-components/webcomponent-instagram-widget#-contributing) +- 🐛 [Known Bugs](https://github.com/ptkdev-components/webcomponent-instagram-widget/issues?q=is%3Aopen+is%3Aissue+label%3Abug) +- 🍻 Community: + - [Discord](http://discord.ptkdev.io) ([🇬🇧 English Channel](https://discord.gg/YkMG26f) | [🇮🇹 Italian Channel](https://discord.gg/HFtdBAJ) | [🇵🇱 Polish Channel](https://discord.gg/TV5EXFd)) ## 💡 Features * [✔️] Easy to use @@ -37,64 +49,38 @@ Instagram Widget of your Instagram Profile for your blog. Show latest 9 pics fro * [✔️] Photos Widget of your Instagram Profile for your blog or website with this WebComponent * [✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️) +## 📖 Installation +1. Download wordpress-plugin and install it. +2. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code: + + +``` + + +``` + +NOTE: Replace `@ptkdev` with your instagram username. More settings are available [here](https://github.com/ptkdev-components/webcomponent-instagram-widget#-options--attributes). + +You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box. + == Screenshots == -## 👔 Screenshot See [Demo here](https://codepen.io/ptkdev/pen/WNQOYqy). Photos from @ptkdev account: -[![WebComponent: InstagramWidget ](https://raw.githubusercontent.com/ptkdev-components/webcomponent-instagram-widget/nightly/.github/assets/screenshot/webcomponent-instagram-widget-screen1.png?)](https://raw.githubusercontent.com/ptkdev-components/webcomponent-instagram-widget/nightly/.github/assets/screenshot/webcomponent-instagram-widget-screen1.png) - == Installation == -## 📖 Installation (Wordpress) -1. Download wordprss plugin and install it. -1. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code (and replace `@ptkdev` with your instagram username): -```html - +1. Download wordpress-plugin and install it. +2. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code: + + ``` + + +``` + +NOTE: Replace `@ptkdev` with your instagram username. More settings are available [here](https://github.com/ptkdev-components/webcomponent-instagram-widget#-options--attributes). + +You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box. + -## 🧰 Options / Attributes - -| Parameter | Description | Values | Default value | Available since | -| --- | --- | --- | --- | --- | -| username | Set your instagram username | Your instagram username with or without @ | `@ptkdev` | v1.0.0 | -| items-limit | Set the max number of pictures | number: from `0` to `12` | `9` | v1.1.0 | -| grid | Set grid aspect ratio | `1x1`, `2x2`, `3x3`, etc... or `responsive` | `responsive` | v1.1.0 | -| image-width | Set width of images (NOTE: grid different than `responsive` overwrite this value) | length units: `100%`, `100px`, `100pt` | `100%` | v1.1.0 | -| image-height | Set height of images | length units: `100%`, `100px`, `100` | `100%` | v1.1.0 | -| border-spacing | Set spacing around images | length units: `5%`, `5px`, `5pt` | `2px` | v2.1.0 | -| border-corners | Set border radius of corners: `0`: square / `15`: rounded / `100`: circle | number: from `0` to `100` | `5` | v2.1.0 | -| force-square | Force square aspect ratio if you post photos with different size on your instagram | `yes` / `no` | `yes` | v2.4.0 | -| cache | Enable/disable cache | `enabled` / `disabled` | `enabled` | v2.1.0 | - -== Changelog == - -= v2.5.0 (May 04, 2020) = -* Fix: now you can use multiple webcomponents in the same html page (#3) -* NOTE: better to use the full close tag `` than short `/>` - -= v2.4.0 (May 02, 2020) = -* New attribute: `force-square` -* Feature: wordpress-plugin - -= v2.3.0 (May 01, 2020) = -* Fix: `border-corners` and `border-spacing` now work without `grid` attribute. -* Fix: NPM Module give errors with require/import -* Update: examples - -= v2.2.0 (April 30, 2020) = -* Fix: `grid` now is more responsive (now use `calc()` function: `100%` - `spacing/padding/margin`) -* Fix: default values now work (hello object reference my old dark friend) - -= v2.1.1 (April 28, 2020) = -* New attribute: cache -* New attribute: border-corners -* New attribute: border-spacing -* Performance: now component send api request only if you change `username` -* Fix: refresh attributes random don't work - -= v2.0.0 (April 28, 2020) = -* Removed "ptkdev-" prefix -* Module for Browserify/Webpack (run: `npm install @ptkdev/webcomponent-instagram-widget`) -* Fix: Grid bug -* Installation guidelines: Browserify / Webpack / ReactJS / Angular / Wordpress \ No newline at end of file +== Changelog == \ No newline at end of file