Hi!
The other day I told you how I created my first webcomponents. Today I wanted to tell you that I have implemented a wordpress plugin that loads the webcomponent into your blog and allows you to insert the instagram widget wherever you want: html box, post or in the theme.
👔 Screenshot
Wordpress default theme + instagram widget:
🚀 Installation (Wordpress)
- Download wordpress-plugin and install it.
- Add code to your html widget, example:
Appearance
-->Widget
--> insertHTML Widget
and paste html code (and replace@ptkdev
with your instagram username):
<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>
You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box.
Resources: [DEMO] [NPM] [GITHUB]
🧰 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 |
💫 License
- Code and Contributions have MIT License
- Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
- Documentations and Translations have CC BY 4.0 License
Top comments (0)