WordPress.org
Get WordPress

Plugin Directory

Changeset 3483700


Ignore:
Timestamp:
03/16/2026 10:28:36 AM (13 days ago)
Author:
razipathhan
Message:

update 1.5.1

Location:
wp-instagram-feed-awplife
Files:
42 added
6 deleted
13 edited

Legend:

Unmodified
Added
Removed

  • wp-instagram-feed-awplife/trunk/css/alw-style.css

    r2807675 r3483700  
    99}
    1010.insta-img-thumbnail{
     11    position: relative;
    1112    height: auto;
    1213    max-width: 100%;
    … …  
    5657    text-align: center;
    5758}
    58 .col-md-1 figcaption {
     59.ifgp-col-md-1 figcaption {
    5960    display: none;
    6061}

  • wp-instagram-feed-awplife/trunk/css/ifgp-settings.css

    r2797757 r3483700  
    7777.range-slider__range::-webkit-slider-thumb {
    7878  -webkit-appearance: none;
    79    appearance: none;
     79  appearance: none;
    8080  width: 20px;
    8181  height: 20px;
    … …  
    182182    border-radius:5px;
    183183}
     184
     185/* Upgrade Tab Styles moved from setting.php */
     186.awp-upgrade-container {
     187    padding: 30px;
     188    background: #fff;
     189    border-radius: 12px;
     190    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     191    color: #333;
     192}
     193
     194.awp-upgrade-hero {
     195    text-align: center;
     196    padding: 40px 20px;
     197    background: linear-gradient(135deg, #cd2757 0%, #e91e63 100%);
     198    color: #fff;
     199    border-radius: 10px;
     200    margin-bottom: 40px;
     201    box-shadow: 0 10px 25px rgba(205, 39, 87, 0.2);
     202}
     203
     204.awp-upgrade-hero h1 {
     205    font-size: 2.5em;
     206    font-weight: 800;
     207    margin-bottom: 15px;
     208    color: #fff;
     209}
     210
     211.awp-upgrade-hero p {
     212    font-size: 1.2em;
     213    opacity: 0.9;
     214    max-width: 800px;
     215    margin: 0 auto;
     216}
     217
     218.awp-offer-badge {
     219    display: inline-block;
     220    background: #ffc107;
     221    color: #000;
     222    padding: 5px 15px;
     223    border-radius: 50px;
     224    font-weight: bold;
     225    font-size: 0.9em;
     226    margin-bottom: 15px;
     227    text-transform: uppercase;
     228}
     229
     230.awp-features-grid {
     231    display: grid;
     232    grid-template-columns: repeat(3, 1fr);
     233    gap: 25px;
     234    margin-top: 40px;
     235}
     236
     237.awp-feature-card {
     238    padding: 25px;
     239    border: 1px solid #eee;
     240    border-radius: 10px;
     241    transition: all 0.3s ease;
     242    text-align: center;
     243    background: #fafafa;
     244}
     245
     246.awp-feature-card:hover {
     247    transform: translateY(-5px);
     248    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
     249    background: #fff;
     250    border-color: #cd2757;
     251}
     252
     253.awp-feature-card .dashicons {
     254    font-size: 40px;
     255    width: 40px;
     256    height: 40px;
     257    color: #cd2757;
     258    margin-bottom: 15px;
     259}
     260
     261.awp-feature-card h3 {
     262    margin: 15px 0 10px;
     263    font-size: 1.2em;
     264    font-weight: 700;
     265}
     266
     267.awp-feature-card p {
     268    font-size: 0.95em;
     269    color: #666;
     270}
     271
     272.awp-comparison-section {
     273    margin-top: 60px;
     274}
     275
     276.awp-comparison-table {
     277    width: 100%;
     278    border-collapse: collapse;
     279    background: #fff;
     280    border-radius: 10px;
     281    overflow: hidden;
     282    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
     283}
     284
     285.awp-comparison-table th,
     286.awp-comparison-table td {
     287    padding: 20px;
     288    text-align: center;
     289    border-bottom: 1px solid #f0f0f0;
     290}
     291
     292.awp-comparison-table th {
     293    background: #f8f9fa;
     294    font-weight: 700;
     295    color: #2c3e50;
     296}
     297
     298.awp-comparison-table .feature-name {
     299    text-align: left;
     300    font-weight: 600;
     301    width: 40%;
     302}
     303
     304.awp-comparison-table .free-col {
     305    background: #fdfdfd;
     306    width: 30%;
     307}
     308
     309.awp-comparison-table .pro-col {
     310    background: rgba(205, 39, 87, 0.03);
     311    width: 30%;
     312    font-weight: bold;
     313}
     314
     315.check-icon {
     316    color: #4caf50;
     317    font-weight: bold;
     318    font-size: 1.2em;
     319}
     320
     321.cross-icon {
     322    color: #f44336;
     323    font-weight: bold;
     324    font-size: 1.2em;
     325}
     326
     327.awp-upgrade-buttons {
     328    display: flex;
     329    justify-content: center;
     330    gap: 20px;
     331    margin-top: 50px;
     332}
     333
     334.btn-premium {
     335    background: #cd2757 !important;
     336    color: #fff !important;
     337    padding: 15px 35px !important;
     338    font-size: 18px !important;
     339    font-weight: 700 !important;
     340    border-radius: 50px !important;
     341    text-decoration: none !important;
     342    box-shadow: 0 5px 15px rgba(205, 39, 87, 0.3) !important;
     343    transition: all 0.3s ease !important;
     344    border: none !important;
     345    display: inline-flex !important;
     346    align-items: center !important;
     347}
     348
     349.btn-premium:hover {
     350    background: #b01b46 !important;
     351    transform: translateY(-2px);
     352    box-shadow: 0 8px 20px rgba(205, 39, 87, 0.4) !important;
     353}
     354
     355.btn-demo {
     356    background: #333 !important;
     357    color: #fff !important;
     358    padding: 15px 35px !important;
     359    font-size: 18px !important;
     360    font-weight: 700 !important;
     361    border-radius: 50px !important;
     362    text-decoration: none !important;
     363    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
     364    transition: all 0.3s ease !important;
     365    border: none !important;
     366    display: inline-flex !important;
     367    align-items: center !important;
     368}
     369
     370.btn-demo:hover {
     371    background: #000 !important;
     372    transform: translateY(-2px);
     373    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
     374}

  • wp-instagram-feed-awplife/trunk/css/ifgp-shortcode.css

    r2807675 r3483700  
    11@media (min-width: 768px) {
    2     footer .col-md-4 svg.insta_svg_icon{
     2    footer .ifgp-col-md-4 svg.insta_svg_icon{
    33        top: 40% !important;
    44        right: 33% !important;
    55    }
    6     footer .col-md-2 svg.insta_svg_icon{
     6    footer .ifgp-col-md-2 svg.insta_svg_icon{
    77        top: 40% !important;
    88        right: 33% !important;
    … …  
    1111        display: none;
    1212    }
    13     footer .col-md-6 svg.insta_svg_icon{
     13    footer .ifgp-col-md-6 svg.insta_svg_icon{
    1414        top: 40% !important;
    1515        right: 40% !important;
    1616    }
    1717
    18     footer .col-md-3 svg.insta_svg_icon {
     18    footer .ifgp-col-md-3 svg.insta_svg_icon {
    1919        width: 30px;
    2020        height: 30px;
    2121    }
    22     footer .col-md-2 svg.insta_svg_icon {
     22    footer .ifgp-col-md-2 svg.insta_svg_icon {
    2323        width: 20px;
    2424        height: 20px;
    2525    }
    26     footer .col-md-2 svg.instagram-video {
     26    footer .ifgp-col-md-2 svg.instagram-video {
    2727        width: 10px;
    2828        height: 10px;
    … …  
    3030        top: 5px;
    3131    }
    32     footer .col-md-3 svg.instagram-video {
     32    footer .ifgp-col-md-3 svg.instagram-video {
    3333        width: 20px;
    3434        height: 20px;
    … …  
    3939
    4040@media (min-width: 768px) {
    41     .sidebar .col-md-4 svg.insta_svg_icon{
     41    .sidebar .ifgp-col-md-4 svg.insta_svg_icon{
    4242        top: 35% !important;
    4343        right: 30% !important;
    4444    }
    45     .sidebar .col-md-2 svg.insta_svg_icon{
     45    .sidebar .ifgp-col-md-2 svg.insta_svg_icon{
    4646        top: 40% !important;
    4747        right: 33% !important;
    4848    }
    49     .sidebar .col-md-3 svg.insta_svg_icon{
     49    .sidebar .ifgp-col-md-3 svg.insta_svg_icon{
    5050        top: 40% !important;
    5151        right: 33% !important;
    … …  
    5454        display: none;
    5555    }
    56     .sidebar .col-md-6 svg.insta_svg_icon{
     56    .sidebar .ifgp-col-md-6 svg.insta_svg_icon{
    5757        top: 40% !important;
    5858        right: 40% !important;
    5959    }
    60     .sidebar .col-md-4 svg.insta_svg_icon{
     60    .sidebar .ifgp-col-md-4 svg.insta_svg_icon{
    6161        width: 30px;
    6262        height: 30px;
    6363    }
    64     .sidebar .col-md-3 svg.insta_svg_icon {
     64    .sidebar .ifgp-col-md-3 svg.insta_svg_icon {
    6565        width: 20px;
    6666        height: 20px;
    6767    }
    68     .sidebar .col-md-2 svg.insta_svg_icon {
     68    .sidebar .ifgp-col-md-2 svg.insta_svg_icon {
    6969        width: 20px;
    7070        height: 20px;
    7171    }
    72     .sidebar .col-md-2 svg.instagram-video {
     72    .sidebar .ifgp-col-md-2 svg.instagram-video {
    7373        width: 20px;
    7474        height: 20px;
    7575    }
    76     .sidebar .col-md-3 svg.instagram-video {
     76    .sidebar .ifgp-col-md-3 svg.instagram-video {
    7777        width: 10px;
    7878        height: 10px;
    … …  
    8080        top: 10px;
    8181    }
    82     .sidebar .col-md-4 svg.instagram-video {
     82    .sidebar .ifgp-col-md-4 svg.instagram-video {
    8383        right: 10px;
    8484        top: 10px;
    … …  
    8787
    8888@media (min-width: 768px) {
    89     .col-md-1 svg.insta_svg_icon {
     89    .ifgp-col-md-1 svg.insta_svg_icon {
    9090        width: 20px;
    9191        height: 20px;
    9292    }
    93     .col-md-2 svg.insta_svg_icon{
     93    .ifgp-col-md-2 svg.insta_svg_icon{
    9494        width: 30px;
    9595        height: 30px;
    9696    }
    97     .col-md-2 .insta-img-thumbnail figcaption {
     97    .ifgp-col-md-2 .insta-img-thumbnail figcaption {
    9898        display: none;
    9999    }
    100100}
     101
     102/* Lightbox Styles moved from layout/lightbox.php */
     103.instagram-lightbox-modal .instagram-media {
     104    max-width: 85% !important;
     105    max-height: 85vh !important;
     106    width: auto !important;
     107    height: auto !important;
     108    object-fit: contain;
     109    margin: 0 auto;
     110    display: block;
     111}
     112
     113.instagram-lightbox-modal .instagram-image-section {
     114    display: flex;
     115    align-items: center;
     116    justify-content: center;
     117    padding: 20px;
     118}
     119
     120@media (max-width: 768px) {
     121    .instagram-lightbox-modal .instagram-media {
     122        max-width: 95% !important;
     123        max-height: 70vh !important;
     124    }
     125}

  • wp-instagram-feed-awplife/trunk/css/main.css

    r3374967 r3483700  
    493493.carouselGallery-scrollbox {
    494494    display: block;
    495     // max-height - set by javascript
     495    /* max-height - set by javascript */
    496496    overflow-x: hidden;
    497497    overflow-y: auto;
    … …  
    573573}
    574574
    575 .carouselGallery-modal .container{
     575.carouselGallery-modal .ifgp-container {
    576576    padding: 0;
    577577    font-family: "SwedenSans", Helvetica, Arial, sans-serif;
    … …  
    653653    height: 100%;
    654654}
    655 .carouselGallery-modal-text:hover { // ie10 transform glitch fix
     655.carouselGallery-modal-text:hover { /* ie10 transform glitch fix */
    656656    background-color: #fffffe;
    657657}
    … …  
    718718}
    719719@media (max-width: 1200px){
    720     .carouselGallery-modal .container{
     720    .carouselGallery-modal .ifgp-container{
    721721        padding-right: 0;
    722722        width: 100%;
    … …  
    743743}
    744744@media only screen and (min-width: 940px) and (max-width: 1200px) and (orientation: landscape) {
    745     .carouselGallery-modal .container{
     745    .carouselGallery-modal .ifgp-container{
    746746        padding-right: 334px;
    747747        width: 850px;
    … …  
    893893}
    894894
    895 // =================================
    896 // === Icons mixin =================
    897 // =================================
     895/* ================================= */
     896/* === Icons mixin ================= */
     897/* ================================= */
    898898.icons() {
    899899    font-family: 'icons';
    … …  
    16171617    }
    16181618
    1619 // -----------------------------------------------------------------------------
    1620 // -----------------------------------------------------------------------------
     1619/* ----------------------------------------------------------------------------- */
     1620/* ----------------------------------------------------------------------------- */

  • wp-instagram-feed-awplife/trunk/css/metabox.css

    r2797757 r3483700  
    1 /*  bhoechie tab */
    2 .list-group-item {
    3     font-weight:500;
    4     line-height:3;
     1.ifgp-list-group-item {
     2    font-weight:600;
     3    line-height:1.2;
     4    text-align: center;
     5    padding: 20px 10px !important;
     6    display: block;
     7    text-decoration: none;
     8    position: relative;
     9    border: 1px solid #e5e5e5;
     10    margin-bottom: -1px;
     11    background: #f9f9f9;
     12    color: #555;
     13    transition: all 0.2s ease;
     14}
     15.ifgp-list-group-item:hover {
     16    background: #fff;
     17    color: #cd2757;
     18}
     19.ifgp-list-group-item.active {
     20    background-color: #cd2757 !important;
     21    color: #fff !important;
     22    border-color: #cd2757;
     23    z-index: 2;
    524}
    625div.bhoechie-tab-container{
    726  z-index: 10;
    827  background-color: #ffffff;
    9   padding: 20px 0px 70px 0px;
     28  padding: 0 !important;
     29  display: flex !important;
     30  flex-wrap: wrap;
     31  width: 100% !important;
     32  box-sizing: border-box;
    1033  border-radius: 4px;
    1134  -moz-border-radius: 4px;
     35  border:1px solid #ddd;
     36  margin-top: 20px;
    1237  background-clip: padding-box;
    1338  opacity: 0.97;
    1439  filter: alpha(opacity=97);
     40  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    1541}
    1642div.bhoechie-tab-menu{
    … …  
    1945  padding-bottom: 0;
    2046}
    21 div.bhoechie-tab-menu div.list-group{
     47div.bhoechie-tab-menu div.ifgp-list-group{
    2248  margin-bottom: 0;
    2349  box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    2450}
    25 div.bhoechie-tab-menu div.list-group span{
    26     margin-bottom: 10px;
    27     margin-top: 15px;
    28     color: #1d3557 !impoprant;
    29     margin-right: 8px;
    30     line-height: 0.5;
    31 }
    32 div.bhoechie-tab-menu div.list-group>a{
     51div.bhoechie-tab-menu div.ifgp-list-group span{
     52    margin-bottom: 8px;
     53    margin-top: 0;
     54    color: inherit;
     55    margin-right: auto;
     56    margin-left: auto;
     57    line-height: 1;
     58    display: block;
     59    font-size: 28px;
     60    width: 28px;
     61    height: 28px;
     62}
     63div.bhoechie-tab-menu div.ifgp-list-group>a{
    3364  margin-bottom: 0;
    34   color: #616670;
    3565  box-shadow: none;
    3666  outline: none;
    37 }
    38 div.bhoechie-tab-menu div.list-group>a .glyphicon,
    39 div.bhoechie-tab-menu div.list-group>a .fa {
     67  font-size: 12px;
     68  text-transform: uppercase;
     69  letter-spacing: 0.5px;
     70}
     71div.bhoechie-tab-menu div.ifgp-list-group>a .ifgp-glyphicon,
     72div.bhoechie-tab-menu div.ifgp-list-group>a .fa {
    4073  color: #47b4ed;
    4174}
    42 div.bhoechie-tab-menu div.list-group>a:first-child{
     75div.bhoechie-tab-menu div.ifgp-list-group>a:first-child{
    4376  border-radius: 0;
    4477  -moz-border-top-right-radius: 0;
    4578}
    46 div.bhoechie-tab-menu div.list-group>a:last-child{
     79div.bhoechie-tab-menu div.ifgp-list-group>a:last-child{
    4780  border-bottom-right-radius: 0;
    4881  -moz-border-bottom-right-radius: 0;
    4982}
    50 div.bhoechie-tab-menu div.list-group>a.active,
    51 div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
    52 div.bhoechie-tab-menu div.list-group>a.active .fa{
     83div.bhoechie-tab-menu div.ifgp-list-group>a.active,
     84div.bhoechie-tab-menu div.ifgp-list-group>a.active .dashicons,
     85div.bhoechie-tab-menu div.ifgp-list-group>a.active .fa{
    5386  background-color: #cd2757  !important;
    54   color: #ffffff;
    55   line-height: 3;
     87  color: #ffffff !important;
    5688  border: none;
    5789  box-shadow: none;
    5890  outline: none;
    5991}
    60 div.bhoechie-tab-menu div.list-group>a.active:after{
     92div.bhoechie-tab-menu div.ifgp-list-group>a.active:after{
    6193  content: '';
    6294  position: absolute;
    6395  left: 100%;
    6496  top: 50%;
    65   margin-top: -13px;
     97  margin-top: -10px;
    6698  border-left: 0;
    67   border-bottom: 13px solid transparent;
    68   border-top: 13px solid transparent;
    69   border-left: 10px solid #cd2757  ;
     99  border-bottom: 10px solid transparent;
     100  border-top: 10px solid transparent;
     101  border-left: 10px solid #cd2757;
     102  z-index: 3;
    70103}
    71104
    72105div.bhoechie-tab-content {
    73     position:relative;
     106  position:relative;
    74107  background-color: #ffffff;
    75     display: table;
    76     width: 100%;
    77     padding: 12px;
     108  width: 100%;
     109  padding: 30px;
     110  box-sizing: border-box;
     111  min-height: 400px;
     112  flex-grow: 1;
    78113}
    79114
    … …  
    99134}
    100135
    101 .insta-settings .panel-body div {
    102     padding:0;
     136.insta-settings .ifgp-panel-body div {
     137    padding: 5px 0;
    103138}
    104139
    … …  
    119154}
    120155.ma_field_discription {
    121     width: 20%;
     156    width: 100%;
    122157    padding: 15px 20px 15px 0;
    123     display: table-cell;
     158    display: block;
    124159    height: 100%;
    125160    vertical-align: middle;
    126161    color: #34383c;
    127 
     162    box-sizing: border-box;
    128163}
    129164.meta_box_holder_inside {
    130165    border-left: 4px solid #d0cece;
    131     display: table;
     166    display: block;
    132167    width: 100%;
    133168    padding: 13px;
    134169    margin-left: 14px;
    135170    background: #f6f7f7;
     171    box-sizing: border-box;
    136172}
    137173.ma_field {
    138     width: 80%;
     174    width: 100%;
    139175    height: 100%;
    140176    vertical-align: middle;
    141177    color: #34383c;
     178    box-sizing: border-box;
    142179}
    143180
    … …  
    155192    padding: 0;
    156193}
    157 input[name=insta_layout] {
    158     visibility:hidden;
    159 }
    160 .gallery_layout {
    161     border:5px solid #312e2e
     194/* Layout Selection Refining */
     195input[name="ifgp_insta_layout"] {
     196    display: none !important;
     197}
     198
     199input[name="ifgp_insta_layout"] + label {
     200    display: block;
     201    cursor: pointer;
     202    border: 4px solid transparent;
     203    border-radius: 8px;
     204    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     205    padding: 0;
     206    overflow: hidden;
     207    position: relative;
     208    background: #fff;
     209}
     210
     211input[name="ifgp_insta_layout"] + label:hover {
     212    transform: translateY(-5px);
     213    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
     214}
     215
     216input[name="ifgp_insta_layout"]:checked + label {
     217    border-color: #cd2757;
     218    box-shadow: 0 15px 30px rgba(205, 39, 87, 0.25);
     219    transform: translateY(-5px) scale(1.02);
     220}
     221
     222input[name="ifgp_insta_layout"]:checked + label::after {
     223    content: '\f147';
     224    font-family: dashicons;
     225    position: absolute;
     226    top: 10px;
     227    right: 10px;
     228    background: #cd2757;
     229    color: #fff;
     230    width: 24px;
     231    height: 24px;
     232    display: flex;
     233    align-items: center;
     234    justify-content: center;
     235    border-radius: 50%;
     236    font-size: 16px;
     237    z-index: 10;
     238    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     239}
     240
     241input[name="ifgp_insta_layout"] + label img {
     242    margin: 0 !important;
     243    display: block;
     244    width: 100%;
    162245}
    163246.ma_field {
    … …  
    283366.range-slider__range {
    284367  -webkit-appearance: none;
    285   width: calc(98% - (73px)) !important;
     368  width: 100%;
     369  max-width: 350px;
    286370  height: 7px;
    287371  border-radius: 5px;
    … …  
    363447  outline: none;
    364448}
    365 .row {
     449.ifgp-row {
    366450  margin-right: 0;
    367451  margin-left: 0;
    368452}
    369453
    370 .panel-title {
     454.ifgp-panel-title {
    371455        padding: 15px 12px;
    372456    font-size: 14px;
    … …  
    374458        margin:0
    375459}
     460
     461.igp_pannel_bottom {
     462    background: #cd2757;
     463    margin-top: 20px;
     464    border-radius: 0 0 4px 4px;
     465    overflow: hidden;
     466}
     467
     468.igp_pannel_bottom .igp_button {
     469    font-weight: 700;
     470    transition: all 0.3s ease;
     471    border-radius: 4px;
     472    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     473}
     474
     475.igp_pannel_bottom .igp_button:hover {
     476    transform: translateY(-2px);
     477    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
     478}
     479
     480/* Sidebar Specifics */
     481.ifgp-col-md-3 .postbox {
     482    margin-top: 0 !important;
     483    margin-bottom: 20px;
     484}
     485
     486.ifgp-col-md-3 h2 {
     487    font-size: 14px !important;
     488    margin: 0 !important;
     489    padding: 10px 12px !important;
     490}

  • wp-instagram-feed-awplife/trunk/css/styles.css

    r2797757 r3483700  
    1 .panel {
     1.ifgp-panel {
    22    box-shadow: none
    33}
    4 .panel .panel-heading {
     4.ifgp-panel .ifgp-panel-heading {
    55    padding: 5px
    66}
    7 .panel-info .panel-footer,
    8 .panel-info>.panel-heading {
     7.ifgp-panel-info .ifgp-panel-footer,
     8.ifgp-panel-info>.ifgp-panel-heading {
    99    color: #fff;
    1010    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);/*custom*/
    … …  
    1515    color: #616670
    1616}
    17 .modal button.close {
     17.ifgp-modal button.ifgp-close {
    1818    position: absolute;
    1919    right: 15px;
    … …  
    2828    color: #494d55
    2929}
    30 .modal button.close:hover {
     30.ifgp-modal button.ifgp-close:hover {
    3131    -webkit-opacity: .6;
    3232    -moz-opacity: .6;
    3333    opacity: .6
    3434}
    35 .modal-title {
     35.ifgp-modal-title {
    3636    text-align: center
    3737}
    38 .panel-title {
     38.ifgp-panel-title {
    3939    font-size: 25px;
    4040    padding: 0px;

  • wp-instagram-feed-awplife/trunk/js/insta-color-picker.js

    r2797757 r3483700  
    1 jQuery(document).ready(function(jQuery){
    2     jQuery('.ig-color-picker').wpColorPicker();
     1jQuery(document).ready(function() {
     2    // tab切换
     3    jQuery("div.bhoechie-tab-menu>div.ifgp-list-group>a").click(function(e) {
     4        e.preventDefault();
     5        jQuery(this).siblings('a.active').removeClass("active");
     6        jQuery(this).addClass("active");
     7        var index = jQuery(this).index();
     8        jQuery("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
     9        jQuery("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
     10    });
     11
     12    // range slider
     13    var rangeSlider = function() {
     14        var slider = jQuery('.range-slider'),
     15            range = jQuery('.range-slider__range'),
     16            value = jQuery('.range-slider__value');
     17
     18        slider.each(function() {
     19            value.each(function() {
     20                var val = jQuery(this).prev().attr('value');
     21                jQuery(this).html(val);
     22            });
     23
     24            range.on('input', function() {
     25                jQuery(this).next(value).html(this.value);
     26            });
     27        });
     28    };
     29    rangeSlider();
     30
     31    // Color picker initialization
     32    jQuery('#ifgp_insta_lightbox_color').wpColorPicker();
    333});
    4 var CpickerOptions = {
    5     // you can declare a default color here,
    6     defaultColor: false,
    7     // a callback to fire whenever the color changes to a valid color
    8     change: function(event, ui){},
    9     // a callback to fire when the input is emptied or an invalid color
    10     clear: function() {},
    11     // hide the color picker controls on load
    12     hide: true,
    13     // show a group of common colors beneath the square
    14     palettes: true
    15 };
    16 jQuery('.ig-color-picker').wpColorPicker(CpickerOptions);
     34
     35function IgpGetShortcode() {
     36    var shortcode = '[IFG';
     37
     38    var ifgp_instagram_access_token = jQuery("#ifgp_instagram_access_token").val();
     39    if (ifgp_instagram_access_token) {
     40        shortcode = shortcode + ' ifgp_instagram_access_token="' + ifgp_instagram_access_token + '"';
     41    } else {
     42        shortcode = shortcode + ' ifgp_instagram_access_token="' + '"';
     43    }
     44
     45    var ifgp_insta_layout = jQuery('[name=ifgp_insta_layout]:checked').val();
     46    if (ifgp_insta_layout) {
     47        shortcode = shortcode + ' ifgp_insta_layout="' + ifgp_insta_layout + '"';
     48    } else {
     49        shortcode = shortcode + ' ifgp_insta_layout="' + 'insta_layout_grid' + '"';
     50    }
     51
     52    var ifgp_insta_grid_columns_l = jQuery("#ifgp_insta_grid_columns_l").val();
     53    if (ifgp_insta_grid_columns_l) {
     54        shortcode = shortcode + ' ifgp_insta_grid_columns_l="' + ifgp_insta_grid_columns_l + '"';
     55    } else {
     56        shortcode = shortcode + ' ifgp_insta_grid_columns_l="' + '' + '"';
     57    }
     58
     59    var ifgp_insta_image_limit = jQuery("#ifgp_insta_image_limit").val();
     60    if (ifgp_insta_image_limit) {
     61        shortcode = shortcode + ' ifgp_insta_image_limit="' + ifgp_insta_image_limit + '"';
     62    }
     63    var ifgp_insta_image_spacing = jQuery("#ifgp_insta_image_spacing").val();
     64    if (ifgp_insta_image_spacing) {
     65        shortcode = shortcode + ' ifgp_insta_image_spacing="' + ifgp_insta_image_spacing + '"';
     66    }
     67
     68    var ifgp_insta_icon_image = jQuery("#ifgp_insta_icon_image").val();
     69    if (jQuery("#ifgp_insta_icon_image").prop('checked') == true) {
     70        shortcode = shortcode + ' ifgp_insta_icon_image="' + ifgp_insta_icon_image + '"';
     71    }
     72
     73    var ifgp_insta_caption_image = jQuery("#ifgp_insta_caption_image").val();
     74    if (jQuery("#ifgp_insta_caption_image").prop('checked') == true) {
     75        shortcode = shortcode + ' ifgp_insta_caption_image="' + ifgp_insta_caption_image + '"';
     76    }
     77
     78    var ifgp_insta_link_redirection = jQuery("#ifgp_insta_link_redirection").val();
     79    if (jQuery("#ifgp_insta_link_redirection").prop('checked') == true) {
     80        shortcode = shortcode + ' ifgp_insta_link_redirection="' + ifgp_insta_link_redirection + '"';
     81    }
     82
     83    var ifgp_insta_lightbox = jQuery("#ifgp_insta_lightbox").val();
     84    if (jQuery("#ifgp_insta_lightbox").prop('checked') == true) {
     85        shortcode = shortcode + ' ifgp_insta_lightbox="' + ifgp_insta_lightbox + '"';
     86    }
     87    var ifgp_insta_lightbox_color = jQuery("#ifgp_insta_lightbox_color").val();
     88    if (ifgp_insta_lightbox_color) {
     89        shortcode = shortcode + ' ifgp_insta_lightbox_color="' + ifgp_insta_lightbox_color + '"';
     90    } else {
     91        shortcode = shortcode + ' ifgp_insta_lightbox_color="' + '' + '"';
     92    }
     93    shortcode = shortcode + ' ]';
     94    jQuery('#awl-shortcode').text(shortcode);
     95        // custom modal triggers
     96    const targetModal = document.querySelector('#insta-shortcode-modal');
     97    if (targetModal) {
     98        targetModal.style.display = 'block';
     99    }
     100   
     101    // Show tooltip trigger
     102    const trigger = document.querySelector('#ifgp-copy-trigger');
     103    if (trigger) {
     104        ifgp_show_tooltip(trigger);
     105    }
     106}
     107
     108function ifgp_copy_shortcode() {
     109    var copyText = document.getElementById("awl-shortcode");
     110    copyText.select();
     111    document.execCommand("copy");
     112}

  • wp-instagram-feed-awplife/trunk/layout/instagram-grid-layout-shortcode.php

    r3374967 r3483700  
    55 */
    66?>
    7 <style>
    8 .insta-gallery-div {
    9     padding: <?php echo esc_attr( $insta_image_spacing ); ?>px !important;
    10 }
    11 .carouselGallery-left, .carouselGallery-right {
    12     color: <?php echo esc_attr( $insta_lightbox_color ); ?>;
    13 }
    14 .carouselGallery-modal .iconscircle-cross {
    15     color: <?php echo esc_attr( $insta_lightbox_color ); ?>;
    16 }
    17 </style>
    18     <div class="row">
     7    <div class="ifgp-row">
    198            <?php
    209            if($instagram_response == 200) {
    … …  
    5847
    5948                    <?php if($insta_lightbox == 'yes') { ?>
    60                         <div class="col-md-<?php echo esc_attr( $insta_grid_columns_l ); ?> insta-gallery-div">
     49                        <div class="ifgp-col-md-<?php echo esc_attr( $insta_grid_columns_l ); ?> insta-gallery-div">
    6150                            <a class="insta-if-navigation insta-main-div carouselGallery-carousel" type="<?php echo esc_attr( $insta_media_type ); ?>" data-posturl="<?php echo esc_url( $insta_photos_link ); ?>" data-url="<?php echo esc_url( $thumbnail_url ); ?>" data-username="<?php echo esc_html( $insta_username ); ?>" data-imgdate="<?php echo esc_attr( $newDate ); ?>" data-index="<?php echo esc_attr( $key ); ?>" data-imagetext="<?php echo esc_html( $insta_photos_caption ); ?>" data-imagepath="<?php echo esc_url( $thumbnail_url ); ?>">
    6251                                <div class="insta-img-thumbnail">
    … …  
    7564                        </div>
    7665                    <?php } else { ?>   
    77                         <div class="col-md-<?php echo esc_attr( $insta_grid_columns_l ); ?> insta-gallery-div">
     66                        <div class="ifgp-col-md-<?php echo esc_attr( $insta_grid_columns_l ); ?> insta-gallery-div">
    7867                            <a class="insta-main-div" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $insta_link_redirection ); ?>">
    7968                                <div class="insta-img-thumbnail">
    … …  
    9786                ?>
    9887                   
    99                 <div><strong>Access Token Limit:</strong> calls within one hour = 200 * Number of Users | <strong>more details:</strong> <a href="https://developers.facebook.com/docs/graph-api/overview/rate-limiting#application-level-rate-limiting" target="_blank">Check Here</a></div>
     88                <div><strong><?php esc_html_e('Access Token Limit:', 'wp-instagram-feed-awplife'); ?></strong> <?php esc_html_e('calls within one hour = 200 * Number of Users |', 'wp-instagram-feed-awplife'); ?> <strong><?php esc_html_e('more details:', 'wp-instagram-feed-awplife'); ?></strong> <a href="https://developers.facebook.com/docs/graph-api/overview/rate-limiting#application-level-rate-limiting" target="_blank"><?php esc_html_e('Check Here', 'wp-instagram-feed-awplife'); ?></a></div>
    10089                <?php } else if($instagram_response == 400) { ?>
    101                         <?php echo $instagram_data_decode['body'];
     90                        <?php echo esc_html($instagram_data_decode['body']);
    10291                    }
    10392                ?>

  • wp-instagram-feed-awplife/trunk/layout/lightbox.php

    r3374967 r3483700  
    11<?php
    22if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
    3 $igp_hover_icon = sanitize_text_field(IFGP_PLUGIN_URL."/img/instagram-gallery-premium.png");
    43?>
    5 <style>
    6 .instagram-lightbox-modal .instagram-media {
    7     max-width: 85% !important;
    8     max-height: 85vh !important;
    9     width: auto !important;
    10     height: auto !important;
    11     object-fit: contain;
    12     margin: 0 auto;
    13     display: block;
    14 }
    15 
    16 .instagram-lightbox-modal .instagram-image-section {
    17     display: flex;
    18     align-items: center;
    19     justify-content: center;
    20     padding: 20px;
    21 }
    22 
    23 @media (max-width: 768px) {
    24     .instagram-lightbox-modal .instagram-media {
    25         max-width: 95% !important;
    26         max-height: 70vh !important;
    27     }
    28 }
    29 </style>
    30 <script type="text/javascript">
    31     jQuery(window).load(function() {
    32         jQuery(function($) {
    33             var scrollTo = 0;
    34             var updateArrows = function(){
    35                 $('.carouselGallery-right').removeClass('disabled');
    36                 $('.carouselGallery-left').removeClass('disabled');
    37                 var curIndex = $('.carouselGallery-carousel.active').data('index');
    38                 updateArrows.nbrOfItems = updateArrows.nbrOfItems || $('.carouselGallery-carousel').length -1;
    39 
    40                 curIndex === updateArrows.nbrOfItems && $('.carouselGallery-right').addClass('disabled');
    41                 curIndex === 0 && $('.carouselGallery-left').addClass('disabled');
    42             }
    43             $('.carouselGallery-carousel').on('click', function(e){
    44                 scrollTo = $('body').scrollTop();
    45             $('body').addClass('noscroll');
    46             $('body').css('position', 'fixed');
    47                 $('.carouselGallery-carousel').removeClass('active');
    48                 $(this).addClass('active');
    49                 showModal($(this));
    50                 updateArrows();
    51             });
    52 
    53             $('body').on('click', '.carouselGallery-right, .carouselGallery-left', function(e){
    54                 if($(this).hasClass('disabled')) return;
    55                 var curIndex = $('.carouselGallery-carousel.active').data('index');
    56                 var nextItemIndex = parseInt(curIndex+1);
    57                 if($(this).hasClass('carouselGallery-left')){
    58                     nextItemIndex-=2;
    59                 }
    60                 var nextItem = $('.carouselGallery-carousel[data-index='+nextItemIndex+']');
    61 
    62 
    63                 if(nextItem.length > 0){
    64                     $('.carouselGallery-carousel').removeClass('active');
    65 
    66 
    67                     $('.carouselGallery-wrapper').addClass('transitioning');
    68                     $('.instagram-lightbox-modal, .carouselGallery-modal').addClass('closing');
    69 
    70                     setTimeout(function(){
    71                         $('body').find('.carouselGallery-wrapper').remove();
    72                         showModal(nextItem);
    73                         nextItem.addClass('active');
    74                     }, 250);
    75                 }
    76                 updateArrows();
    77             });
    78             var modalHtml = '';
    79             showModal = function(that){
    80 
    81                 var rawData = {
    82                     username: that.data('username'),
    83                     imagedate: that.data('imgdate'),
    84                     imagetext: that.data('imagetext'),
    85                     imagepath: that.data('imagepath'),
    86                     url: that.data('url'),
    87                     posturl: that.data('posturl')
    88                 };
    89 
    90 
    91 
    92                 var username = (rawData.username && rawData.username !== 'undefined' && rawData.username !== '') ? rawData.username : 'Unknown User';
    93                 var imagedate = (rawData.imagedate && rawData.imagedate !== 'undefined' && rawData.imagedate !== '') ? rawData.imagedate : 'Recently';
    94                 var imagetext = (rawData.imagetext && rawData.imagetext !== 'undefined' && rawData.imagetext !== '') ? rawData.imagetext : 'No caption available';
    95                 var imagepath = (rawData.imagepath && rawData.imagepath !== 'undefined' && rawData.imagepath !== '') ? rawData.imagepath : '';
    96                 var carouselGalleryUrl = (rawData.url && rawData.url !== 'undefined' && rawData.url !== '') ? rawData.url : '#';
    97                 var postURL = (rawData.posturl && rawData.posturl !== 'undefined' && rawData.posturl !== '') ? rawData.posturl : '#';
    98 
    99                 maxHeight = $(window).height()-100;
    100                 var tags = (imagetext && imagetext !== 'No caption available') ? imagetext.split('#') : ['No caption available'];
    101                
    102                 if (jQuery('.carouselGallery-wrapper').length === 0) {
    103                         if(typeof imagepath !== 'undefined' && imagepath !== '' && imagepath !== null) {
    104                             modalHtml = "<div class='carouselGallery-wrapper instagram-lightbox-overlay'>";
    105                             modalHtml += "<div class='carouselGallery-modal instagram-lightbox-modal'>";
    106                             modalHtml += "<span class='carouselGallery-left instagram-nav-arrow' title='Previous'><svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M15 18l-6-6 6-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></span>";
    107                             modalHtml += "<span class='carouselGallery-right instagram-nav-arrow' title='Next'><svg width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M9 18l6-6-6-6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></span>";
    108                             modalHtml += "<span class='instagram-close-btn' title='Close'>&times;</span>";
    109                             modalHtml += "<div class='instagram-modal-container'>";
    110                             modalHtml += "<div class='instagram-content-wrapper'>";
    111                             modalHtml += "<div class='instagram-image-section'>";
    112                             if(that[0].attributes[1].value == 'VIDEO') {
    113                                 modalHtml += "<video class='instagram-media' controls>";
    114                                 modalHtml += "<source src='"+imagepath+"'>";
    115                                 modalHtml += "</video>";
    116                             } else {
    117                                 modalHtml += "<img class='instagram-media' src='"+imagepath+"' alt='Instagram Image'>";
    118                             }
    119                             modalHtml += "</div>";
    120                             modalHtml += "<div class='instagram-sidebar'>";
    121                             modalHtml += "<div class='instagram-header'>";
    122                             modalHtml += "<div class='instagram-user-info'>";
    123                             modalHtml += "<div class='instagram-avatar'>";
    124                             modalHtml += "<img src='<?php echo esc_attr( IFGP_PLUGIN_URL . "img/insta-icon.png" ); ?>' alt='User Avatar'>";
    125                             modalHtml += "</div>";
    126                             modalHtml += "<div class='instagram-username'>";
    127                             modalHtml += "<a href='"+postURL+"' target='_blank'>"+username+"</a>";
    128                             modalHtml += "</div>";
    129                             modalHtml += "</div>";
    130                             modalHtml += "<div class='instagram-follow-btn'>";
    131                             modalHtml += "<a href='https://www.instagram.com/"+username+"' target='_blank' class='instagram-follow-link'>Follow</a>";
    132                             modalHtml += "</div>";
    133                             modalHtml += "</div>";
    134                             modalHtml += "<div class='instagram-content'>";
    135                             modalHtml += "<div class='instagram-caption'>";
    136                             modalHtml += "<span class='instagram-username-caption'><a href='"+postURL+"' target='_blank'>"+username+"</a></span>";
    137                             modalHtml += "<span class='instagram-text'>";
    138                                     if(tags && tags.length > 0) {
    139                                         for(key in tags) {
    140                                             if(tags.hasOwnProperty(key)) {
    141                                                 if (key != 0 && tags[key] && tags[key].trim() !== ''){
    142                                                     var value = tags[key].trim();
    143                                                     modalHtml += "<a href='https://www.instagram.com/explore/tags/"+value+"' target='_blank' class='instagram-hashtag'>#"+value+"</a> ";
    144                                                 }
    145                                                 else if(key == 0 && tags[key] && tags[key].trim() !== ''){
    146                                                     var value = tags[key].trim();
    147                                                     modalHtml += value + " ";
    148                                                 }
    149                                             }
    150                                         }
    151                                     }
    152                             modalHtml += "</span>";
    153                             modalHtml += "</div>";
    154                             modalHtml += "</div>";
    155                             modalHtml += "<div class='instagram-actions'>";
    156                             modalHtml += "<div class='instagram-action-buttons'>";
    157                             modalHtml += "<a href='"+postURL+"' target='_blank' class='instagram-action-btn'>";
    158                             modalHtml += "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>";
    159                             modalHtml += "</a>";
    160                             modalHtml += "<a href='"+postURL+"' target='_blank' class='instagram-action-btn'>";
    161                             modalHtml += "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>";
    162                             modalHtml += "</a>";
    163                             modalHtml += "<a href='"+postURL+"' target='_blank' class='instagram-action-btn'>";
    164                             modalHtml += "<svg width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><polyline points='16,6 12,2 8,6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><line x1='12' y1='2' x2='12' y2='15' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>";
    165                             modalHtml += "</a>";
    166                             modalHtml += "</div>";
    167                             modalHtml += "<div class='instagram-date'>"+imagedate+"</div>";
    168                             modalHtml += "</div>";
    169                             modalHtml += "</div></div></div></div>";
    170                             $('body').append(modalHtml).addClass('instagram-lightbox-open');
    171                         }
    172                        
    173                     }
    174                    
    175 
    176                     var insta_lightbox_content_data = jQuery('.insta_lightbox_content_data').height();
    177                     //console.log(insta_lightbox_content_data);
    178                     if (insta_lightbox_content_data > 400) {
    179                         jQuery('.carouselGallery-modal-text').css('overflow-y','scroll');
    180                     }
    181                 };
    182                
    183              
    184                
    185 
    186                 jQuery('body').on('click', '.instagram-lightbox-overlay, .carouselGallery-wrapper', function(e) {
    187                     if(jQuery(e.target).hasClass('instagram-lightbox-overlay') || jQuery(e.target).hasClass('carouselGallery-wrapper')){
    188                         removeModal();
    189                     }
    190                 });
    191 
    192 
    193                 jQuery('body').on('click', '.instagram-close-btn', function(e){
    194                     e.preventDefault();
    195                     e.stopPropagation();
    196                     removeModal();
    197                 });
    198 
    199 
    200                 jQuery('body').on('click', '.carouselGallery-modal .iconscircle-cross', function(e){
    201                     e.preventDefault();
    202                     e.stopPropagation();
    203                     removeModal();
    204                 });
    205 
    206 
    207                 jQuery('body').on('click', '.instagram-lightbox-modal, .carouselGallery-modal', function(e){
    208                     e.stopPropagation();
    209                 });
    210 
    211 
    212                 jQuery('body').on('dblclick', '.instagram-media', function(e){
    213                     e.preventDefault();
    214                     removeModal();
    215                 });
    216 
    217                  var removeModal = function(){
    218 
    219                     jQuery('.instagram-lightbox-modal, .carouselGallery-modal').addClass('closing');
    220 
    221 
    222                     setTimeout(function() {
    223                         jQuery('body').find('.carouselGallery-wrapper').fadeOut(200, function() {
    224                             jQuery(this).remove();
    225                         });
    226                     }, 200);
    227 
    228                     jQuery('body').removeClass('noscroll instagram-lightbox-open');
    229                     jQuery('body').css('position', 'static');
    230                     jQuery('body').animate({scrollTop: scrollTo}, 0);
    231                 };
    232 
    233 
    234                 var carouselGalleryScrollMaxHeight = function() {
    235                     if (jQuery('.carouselGallery-scrollbox').length) {
    236                         maxHeight = $(window).height()-100;
    237                         jQuery('.carouselGallery-scrollbox').css('max-height',maxHeight+'px');
    238                     }
    239                 }
    240                 jQuery(window).resize(function() {
    241                     clearTimeout(this.id);
    242                     this.id = setTimeout(carouselGalleryScrollMaxHeight, 100);
    243                 });
    244                 document.onkeydown = function(evt) {
    245                     evt = evt || window.event;
    246                     if (evt.keyCode == 27) {
    247                         removeModal();
    248                     }
    249                 };
    250         });
    251 });
    252 </script>

  • wp-instagram-feed-awplife/trunk/readme.txt

    r3473624 r3483700  
    1 === Social Media Feed Gallery ===
     1=== Social Media Feed Gallery ===
    22Contributors: awordpresslife, razipathhan, hanif0991, muhammadshahid, fkfaisalkhan007, sharikkhan007, zishlife, FARAZFRANK
    33Donate link: https://paypal.me/awplife
    … …  
    55Requires at least: 5.0
    66Tested up to: 6.9
    7 Stable tag: 1.5.0
     7Stable tag: 1.5.1
    88Requires PHP: 7.0
    99License: GPLv2 or later
    … …  
    2525
    2626https://www.youtube.com/watch?v=VrqbUP67Jbw
     27
     28== External services ==
     29
     30This plugin relies on the **Instagram Graph API** to fetch media content (images and videos) from your Instagram account to display in your gallery.
     31
     32* **Service:** Instagram Graph API (Meta Platforms, Inc.)
     33* **What data is sent:** Your Instagram Access Token, media IDs, and query parameters to specify image/video fields and limits.
     34* **When data is sent:** Data is sent via a server-side request (`wp_remote_get`) every time the gallery shortcode is loaded on your site.
     35* **Privacy & Terms:**
     36  - [Instagram Data Policy](https://help.instagram.com/519522125107875)
     37  - [Meta Privacy Policy](https://www.facebook.com/privacy/policy/)
     38  - [Instagram Terms of Use](https://help.instagram.com/581066165581870)
    2739
    2840**Complete Setup Tutorial**
    … …  
    8597* Shortcode generator
    8698* Responsive design
    87 * Bootstrap 4.x framework
    8899* Translation ready
    89100
    … …  
    166177== Changelog ==
    167178
     179= 1.5.1 =
     180** UI Redesign: Implemented premium glassmorphism header and improved layout selection UI
     181* Fixed: Corrected "Instagramm" typo in main header title
     182* Enhanced "Upgrade to Pro" section with high-impact conversion button
     183* Improved UI consistency: Centered/aligned configuration buttons in settings tabs
     184* Compliance: Added proper resource versioning to all frontend and admin styles
     185* Security: Refined translatable strings with ordered placeholders and translator comments
     186* Clean Code: Removed discouraged legacy textdomain loading for modern WP compatibility
     187* Tested with WordPress 6.9
     188
    168189= 1.5.0 =
    169190* Redesigned "Upgrade to Pro" tab for a more premium experience

  • wp-instagram-feed-awplife/trunk/setting.php

    r3473624 r3483700  
    22if (! defined('ABSPATH')) exit; // Exit if accessed directly
    33// CSS
    4 wp_enqueue_style('ifgp-styles-css', IFGP_PLUGIN_URL . 'css/styles.css');
    5 wp_enqueue_style('ifgp-bootstrap-css', IFGP_PLUGIN_URL . 'css/ifgp-bootstrap.css');
    6 wp_enqueue_style('ifgp-metabox-css', IFGP_PLUGIN_URL . 'css/metabox.css');
    7 wp_enqueue_style('ifgp-settings-css', IFGP_PLUGIN_URL . 'css/ifgp-settings.css');
     4wp_enqueue_style('ifgp-styles-css', IFGP_PLUGIN_URL . 'css/styles.css', array(), IFGP_PLUGIN_VER);
     5wp_enqueue_style('ifgp-layout-css', IFGP_PLUGIN_URL . 'css/ifgp-layout.css', array(), IFGP_PLUGIN_VER);
     6wp_enqueue_style('ifgp-metabox-css', IFGP_PLUGIN_URL . 'css/metabox.css', array(), IFGP_PLUGIN_VER);
     7wp_enqueue_style('ifgp-settings-css', IFGP_PLUGIN_URL . 'css/ifgp-settings.css', array(), IFGP_PLUGIN_VER);
    88wp_enqueue_style('wp-color-picker');
    99
    10 //js
    11 wp_enqueue_script('ifgp-bootstrap-js', IFGP_PLUGIN_URL  . 'js/bootstrap.js', array('jquery'), '', true);
    12 wp_enqueue_script('ifgp-popper-js', IFGP_PLUGIN_URL  . 'js/popper.min.js');
    13 wp_enqueue_script('ifgp-insta-color-picker', IFGP_PLUGIN_URL  . 'js/insta-color-picker.js', array('jquery', 'wp-color-picker'), '', true);
     10// js
     11wp_enqueue_script('ifgp-admin-js', IFGP_PLUGIN_URL  . 'js/ifgp-admin.js', array('jquery'), IFGP_PLUGIN_VER, true);
     12wp_enqueue_script('ifgp-insta-color-picker', IFGP_PLUGIN_URL  . 'js/insta-color-picker.js', array('jquery', 'wp-color-picker', 'ifgp-admin-js'), IFGP_PLUGIN_VER, true);
    1413
    1514?>
    16 <style>
    17     .panel-info {
    18         border-color: #F5F5F5 !important;
    19     }
    20 
    21     .hndle.ui-sortable-handle {
    22         font-size: 1.3rem;
    23         padding: 10px 0px 0px 15px
    24     }
    25 
    26     .postbox-container {
    27         width: 100%;
    28     }
     15<style type="text/css">
     16    .instagg .ifgp-container { width: 100% !important; max-width: 100% !important; display: block !important; margin: 0 auto !important; }
     17    /* Outer layout stabilization */
     18    .instagg .ifgp-col-md-9 { flex: 0 0 75% !important; width: 75% !important; max-width: 75% !important; }
     19    .instagg .ifgp-col-md-3 { flex: 0 0 25% !important; width: 25% !important; max-width: 25% !important; }
     20    /* Inner tab stabilization */
     21    .instagg .bhoechie-tab-container { width: 100% !important; display: flex !important; min-height: 500px !important; flex-wrap: nowrap !important; }
     22    .instagg .bhoechie-tab-menu { width: 250px !important; flex: 0 0 250px !important; max-width: 250px !important; }
     23    .instagg .bhoechie-tab { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; }
     24    .instagg .bhoechie-tab-content { width: 100% !important; min-width: 900px !important; display: none; padding: 30px !important; box-sizing: border-box !important; }
     25    .instagg .bhoechie-tab-content.active { display: block !important; }
     26    .instagg .igp_pannel_bottom { width: 100% !important; min-width: 900px !important; box-sizing: border-box !important; }
     27    /* Form field stabilization */
     28    .instagg .ifgp-col-md-4 { flex: 0 0 33.33% !important; width: 33.33% !important; max-width: 33.33% !important; }
     29    .instagg .ifgp-col-md-8 { flex: 0 0 66.66% !important; width: 66.66% !important; max-width: 66.66% !important; }
     30    /* Hard pixel guards for desktop */
     31    @media (min-width: 900px) {
     32        .instagg .bhoechie-tab-content { min-width: 959px !important; width: 959px !important; }
     33        .instagg .ifgp-col-md-9 { min-width: 959px !important; }
     34    }
     35    /* Premium Header Styles */
     36    .instagg-header {
     37        display: flex;
     38        align-items: center;
     39        justify-content: space-between;
     40        width: 100%;
     41        padding: 5px 0;
     42    }
     43    .instagg-title-wrap {
     44        display: flex;
     45        align-items: center;
     46        gap: 12px;
     47    }
     48    .instagg-icon-circle {
     49        background: linear-gradient(135deg, #cd2757 0%, #e91e63 100%);
     50        color: #fff;
     51        width: 32px;
     52        height: 32px;
     53        border-radius: 50%;
     54        display: flex;
     55        align-items: center;
     56        justify-content: center;
     57        box-shadow: 0 4px 10px rgba(205, 39, 87, 0.3);
     58    }
     59    .instagg-icon-circle .dashicons {
     60        font-size: 18px;
     61        width: 18px;
     62        height: 18px;
     63    }
     64    .instagg-version-badge {
     65        background: #f0f0f1;
     66        color: #646970;
     67        font-size: 11px;
     68        font-weight: 600;
     69        padding: 2px 10px;
     70        border-radius: 50px;
     71        border: 1px solid #dcdcde;
     72        text-transform: uppercase;
     73        letter-spacing: 0.5px;
     74    }
     75    .instagg-main-title {
     76        font-size: 1.4em !important;
     77        font-weight: 700 !important;
     78        margin: 0 !important;
     79        color: #1d2327;
     80    }
     81    /* Premium Redesign Layer */
     82    .instagg-glass-header {
     83        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(246, 247, 247, 0.8) 100%) !important;
     84        backdrop-filter: blur(10px);
     85        -webkit-backdrop-filter: blur(10px);
     86        border-bottom: 1px solid rgba(205, 39, 87, 0.1) !important;
     87        padding: 12px 20px !important;
     88        border-radius: 8px 8px 0 0;
     89    }
     90    .instagg-resource-links {
     91        display: flex;
     92        gap: 20px;
     93        align-items: center;
     94    }
     95    .instagg-res-link {
     96        text-decoration: none !important;
     97        color: #646970 !important;
     98        font-size: 13px;
     99        font-weight: 500;
     100        display: flex;
     101        align-items: center;
     102        gap: 6px;
     103        transition: all 0.2s ease;
     104        padding: 5px 10px;
     105        border-radius: 4px;
     106    }
     107    .instagg-res-link:hover {
     108        color: #cd2757 !important;
     109        background: rgba(205, 39, 87, 0.05);
     110        transform: translateY(-1px);
     111    }
     112    .instagg-res-link .dashicons {
     113        font-size: 16px;
     114        width: 16px;
     115        height: 16px;
     116    }
     117    .instagg-version-badge {
     118        position: relative;
     119        background: #fff !important;
     120        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
     121    }
     122    .instagg-version-badge::after {
     123        content: '';
     124        position: absolute;
     125        top: -2px;
     126        right: -2px;
     127        width: 8px;
     128        height: 8px;
     129        background: #4caf50;
     130        border-radius: 50%;
     131        border: 2px solid #fff;
     132        animation: instagg-pulse 2s infinite;
     133    }
     134    @keyframes instagg-pulse {
     135        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
     136        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 175, 80, 0); }
     137        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
     138    }
     139    /* Slider UI Fix */
     140    .range-slider {
     141        max-width: 450px !important;
     142        display: flex !important;
     143        flex-direction: row !important;
     144        align-items: center !important;
     145        gap: 10px !important;
     146        height: 40px !important;
     147    }
     148    .range-slider__range {
     149        flex: 1 !important;
     150        margin: 0 !important;
     151        order: 1 !important;
     152    }
     153    .range-slider__value {
     154        order: 2 !important;
     155        margin: 0 !important;
     156        flex-shrink: 0 !important;
     157        display: flex !important;
     158        align-items: center !important;
     159        justify-content: center !important;
     160        height: 28px !important;
     161        width: 45px !important;
     162        font-size: 13px !important;
     163        font-weight: 600 !important;
     164        padding: 0 !important;
     165        border-radius: 4px !important;
     166    }
     167    .range-slider__value:after {
     168        top: 50% !important;
     169        transform: translateY(-50%) !important;
     170        left: -6px !important;
     171        border-right: 6px solid #cd2757 !important;
     172        border-top: 6px solid transparent !important;
     173        border-bottom: 6px solid transparent !important;
     174    }
     175    /* Upgrade Button Styles */
     176    .awp-hero-upgrade-btn {
     177        display: inline-flex !important;
     178        align-items: center !important;
     179        background: #fff !important;
     180        color: #cd2757 !important;
     181        padding: 12px 30px !important;
     182        border-radius: 50px !important;
     183        text-decoration: none !important;
     184        font-weight: 700 !important;
     185        font-size: 16px !important;
     186        margin-top: 25px !important;
     187        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
     188        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
     189    }
     190    .awp-hero-upgrade-btn:hover {
     191        transform: scale(1.05) translateY(-3px) !important;
     192        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
     193        background: #fdfdfd !important;
     194    }
     195    .awp-hero-upgrade-btn .dashicons {
     196        margin-right: 10px !important;
     197        font-size: 20px !important;
     198        width: 20px !important;
     199        height: 20px !important;
     200    }
    29201</style>
    30 <div class="row">
    31     <div class="col-md-10">
     202<div class="ifgp-container" style="margin-top:20px;">
     203    <div class="ifgp-row">
     204        <div class="ifgp-col-md-9">
    32205        <div class="postbox-container insta-settings" style="margin-top:20px; margin-bottom:20px;">
    33206            <div class="postbox">
    34                 <div class="postbox-header">
    35                     <h2 class="hndle ui-sortable-handle"><?php esc_html_e('Add Instagram Feed Gallery', 'wp-instagram-feed-awplife'); ?></h2>
    36                     <div class="handle-actions hide-if-no-js"></div>
     207                <div class="postbox-header instagg-glass-header">
     208                    <div class="instagg-header">
     209                        <div class="instagg-title-wrap">
     210                            <div class="instagg-icon-circle">
     211                                <span class="dashicons dashicons-instagram"></span>
     212                            </div>
     213                            <h2 class="instagg-main-title"><?php esc_html_e('Instagram Feed Gallery', 'wp-instagram-feed-awplife'); ?></h2>
     214                        </div>
     215                        <div class="instagg-resource-links">
     216                            <a href="https://awplife.com/documentation/instagram-feed-gallery/" target="_blank" class="instagg-res-link">
     217                                <span class="dashicons dashicons-editor-help"></span><?php esc_html_e('Docs', 'wp-instagram-feed-awplife'); ?>
     218                            </a>
     219                            <a href="https://awplife.com/contact/" target="_blank" class="instagg-res-link">
     220                                <span class="dashicons dashicons-sos"></span><?php esc_html_e('Support', 'wp-instagram-feed-awplife'); ?>
     221                            </a>
     222                            <a href="https://www.youtube.com/@awplife" target="_blank" class="instagg-res-link">
     223                                <span class="dashicons dashicons-video-alt3"></span><?php esc_html_e('Tutorials', 'wp-instagram-feed-awplife'); ?>
     224                            </a>
     225                        </div>
     226                        <div class="instagg-version-badge">
     227                            <?php echo 'v' . esc_html(IFGP_PLUGIN_VER); ?>
     228                        </div>
     229                    </div>
    37230                </div>
    38                 <div class="inside">
    39                     <div class="d-flex align-items-start bhoechie-tab-container">
    40                         <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
    41                             <div class="list-group">
    42                                 <a href="#" class="list-group-item active">
    43                                     <span class="dashicons dashicons-instagram"></span><?php esc_html_e('Instagram Tocken', 'wp-instagram-feed-awplife'); ?>
     231                <div class="inside instagg">
     232                    <div class="ifgp-row bhoechie-tab-container">
     233                        <div class="ifgp-col-lg-3 ifgp-col-md-3 bhoechie-tab-menu">
     234                            <div class="ifgp-list-group">
     235                                <a href="#" class="ifgp-list-group-item active">
     236                                    <span class="dashicons dashicons-instagram"></span><?php esc_html_e('Instagram Token', 'wp-instagram-feed-awplife'); ?>
    44237                                </a>
    45                                 <a href="#" class="list-group-item">
     238                                <a href="#" class="ifgp-list-group-item">
    46239                                    <span class="dashicons dashicons-layout"></span><?php esc_html_e('Layouts', 'wp-instagram-feed-awplife'); ?>
    47240                                </a>
    48                                 <a href="#" class="list-group-item">
     241                                <a href="#" class="ifgp-list-group-item">
    49242                                    <span class="dashicons dashicons-admin-generic"></span><?php esc_html_e('Config', 'wp-instagram-feed-awplife'); ?>
    50243                                </a>
    51                                 <a href="#" class="list-group-item">
     244                                <a href="#" class="ifgp-list-group-item">
    52245                                    <span class="dashicons dashicons-welcome-view-site"></span><?php esc_html_e('LightBox', 'wp-instagram-feed-awplife'); ?>
    53246                                </a>
    54                                 <a href="#" class="list-group-item">
     247                                <a href="#" class="ifgp-list-group-item">
    55248                                    <span class="dashicons dashicons-cart"></span><?php esc_html_e('Upgrade To Pro', 'wp-instagram-feed-awplife'); ?>
    56249                                </a>
    57250                            </div>
    58251                        </div>
    59                         <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bhoechie-tab">
     252                        <div class="ifgp-col-lg-9 ifgp-col-md-9 bhoechie-tab">
    60253                            <div class="bhoechie-tab-content active">
    61                                 <h2><?php esc_html_e('Type Instagram Accese Tocken', 'wp-instagram-feed-awplife'); ?></h2>
     254                                <h2><?php esc_html_e('Type Instagram Access Token', 'wp-instagram-feed-awplife'); ?></h2>
    62255                                <hr>
    63                                 <div class="row">
    64                                     <div class="col-md-4">
    65                                         <div class="ma_field_discription">
    66                                             <h4><?php esc_html_e('Instagram Accese Tocken', 'wp-instagram-feed-awplife'); ?></h4>
     256                                <div class="ifgp-row">
     257                                    <div class="ifgp-col-md-4">
     258                                        <div class="ma_field_discription">
     259                                            <h4><?php esc_html_e('Instagram Access Token', 'wp-instagram-feed-awplife'); ?></h4>
    67260                                            <p><?php esc_html_e('Enter access token to add the Instagram feed. You can generate access token easily from here', 'wp-instagram-feed-awplife'); ?> <a target="_blank" href="https://www.youtube.com/watch?v=VrqbUP67Jbw"><?php esc_html_e('Youtube Video', 'wp-instagram-feed-awplife'); ?></a></p>
    68261
    69262                                        </div>
    70263                                    </div>
    71                                     <div class="col-md-8">
    72                                         <div class="ma_field panel-body">
    73                                             <textarea class="form-control" rows="5" id="instagram_acces_token" name="instagram_acces_token"></textarea>
    74                                             <div><strong>Access Token Limit:</strong> calls within one hour = 200 * Number of Users | <strong>More details:</strong> <a href="https://developers.facebook.com/docs/graph-api/overview/rate-limiting#application-level-rate-limiting" target="_blank">check here</a></div>
     264                                    <div class="ifgp-col-md-8">
     265                                        <div class="ma_field ifgp-panel-body">
     266                                            <textarea class="ifgp-form-control" rows="5" id="ifgp_instagram_access_token" name="ifgp_instagram_access_token"></textarea>
     267                                            <div><strong><?php esc_html_e('Access Token Limit:', 'wp-instagram-feed-awplife'); ?></strong> <?php esc_html_e('calls within one hour = 200 * Number of Users |', 'wp-instagram-feed-awplife'); ?> <strong><?php esc_html_e('More details:', 'wp-instagram-feed-awplife'); ?></strong> <a href="https://developers.facebook.com/docs/graph-api/overview/rate-limiting#application-level-rate-limiting" target="_blank"><?php esc_html_e('check here', 'wp-instagram-feed-awplife'); ?></a></div>
    75268                                        </div>
    76269                                    </div>
    … …  
    80273                                <h2><?php esc_html_e('Choose Gallery Layout Type', 'wp-instagram-feed-awplife'); ?></h2>
    81274                                <hr>
    82                                 <div class="container">
    83                                     <div class="row">
    84                                         <div class="col-lg-3 col-md-4 col-sm-6">
    85                                             <input type="radio" name="insta_layout" id="insta_layout_grid" value="insta_layout_grid" checked>
    86                                             <label for="insta_layout_grid"><img class="img-fluid" style="box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);" src="<?php echo esc_url(IFGP_PLUGIN_URL . '/img/Grid-Layout.png'); ?>" /></label>
    87                                         </div>
    88                                         <!-- Pro Layouts Moved to Upgrade Tab -->
    89                                     </div>
     275                                <div class="ifgp-row">
     276                                    <div class="ifgp-col-md-3">
     277                                        <input type="radio" name="ifgp_insta_layout" id="ifgp_insta_layout_grid" value="insta_layout_grid" checked>
     278                                        <label for="ifgp_insta_layout_grid"><img class="ifgp-img-fluid" src="<?php echo esc_url(IFGP_PLUGIN_URL . '/img/Grid-Layout.png'); ?>" /></label>
     279                                    </div>
     280                                    <!-- Pro Layouts Moved to Upgrade Tab -->
    90281                                </div>
    91282                            </div>
    … …  
    93284                                <h2><?php esc_html_e('Configuration', 'wp-instagram-feed-awplife'); ?></h2>
    94285                                <hr>
    95                                 <div class="row insta_grid_column">
    96                                     <div class="col-md-4">
     286                                <div class="ifgp-row">
     287                                    <div class="ifgp-col-md-4">
    97288                                        <div class="ma_field_discription">
    98289                                            <h4><?php esc_html_e('Rows & Column', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    100291                                        </div>
    101292                                    </div>
    102                                     <div class="col-md-8">
    103                                         <div class="ma_field panel-body">
    104                                             <select id="insta_grid_columns_l" name="insta_grid_columns_l" class="form-control" style="margin-left: 15px; width: 300px;">
     293                                    <div class="ifgp-col-md-8">
     294                                        <div class="ma_field ifgp-panel-body">
     295                                            <select id="ifgp_insta_grid_columns_l" name="ifgp_insta_grid_columns_l" class="ifgp-form-control">
    105296                                                <option value="1"><?php esc_html_e('Columns 12', 'wp-instagram-feed-awplife'); ?></option>
    106297                                                <option value="2"><?php esc_html_e('Columns 6', 'wp-instagram-feed-awplife'); ?></option>
    … …  
    113304                                    </div>
    114305                                </div>
    115                                 <div class="row">
    116                                     <div class="col-md-4">
     306                                <div class="ifgp-row">
     307                                    <div class="ifgp-col-md-4">
    117308                                        <div class="ma_field_discription">
    118309                                            <h4><?php esc_html_e('Instagram Image Limit', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    120311                                        </div>
    121312                                    </div>
    122                                     <div class="col-md-8">
    123                                         <div class="ma_field panel-body">
     313                                    <div class="ifgp-col-md-8">
     314                                        <div class="ma_field ifgp-panel-body">
    124315                                            <p class="range-slider">
    125                                                 <input id="insta_image_limit" name="insta_image_limit" class="range-slider__range" type="range" value="24" min="1" max="50" step="1">
     316                                                <input id="ifgp_insta_image_limit" name="ifgp_insta_image_limit" class="range-slider__range" type="range" value="24" min="1" max="50" step="1">
    126317                                                <span class="range-slider__value"><?php esc_html_e('0', 'wp-instagram-feed-awplife'); ?></span>
    127318                                            </p>
    … …  
    129320                                    </div>
    130321                                </div>
    131                                 <div class="row">
    132                                     <div class="col-md-4">
     322                                <div class="ifgp-row">
     323                                    <div class="ifgp-col-md-4">
    133324                                        <div class="ma_field_discription">
    134325                                            <h4><?php esc_html_e('Instagram Image Spacing', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    136327                                        </div>
    137328                                    </div>
    138                                     <div class="col-md-8">
    139                                         <div class="ma_field panel-body">
     329                                    <div class="ifgp-col-md-8">
     330                                        <div class="ma_field ifgp-panel-body">
    140331                                            <p class="range-slider">
    141                                                 <input id="insta_image_spacing" name="insta_image_spacing" class="range-slider__range" type="range" value="3" min="0" max="20" step="1">
     332                                                <input id="ifgp_insta_image_spacing" name="ifgp_insta_image_spacing" class="range-slider__range" type="range" value="3" min="0" max="20" step="1">
    142333                                                <span class="range-slider__value"><?php esc_html_e('0', 'wp-instagram-feed-awplife'); ?></span>
    143334                                            </p>
    … …  
    145336                                    </div>
    146337                                </div>
    147                                 <div class="row">
    148                                     <div class="col-md-4">
     338                                <div class="ifgp-row">
     339                                    <div class="ifgp-col-md-4">
    149340                                        <div class="ma_field_discription">
    150341                                            <h4><?php esc_html_e('Icon On Photos', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    152343                                        </div>
    153344                                    </div>
    154                                     <div class="col-md-8">
    155                                         <div class="ma_field panel-body">
     345                                    <div class="ifgp-col-md-8">
     346                                        <div class="ma_field ifgp-panel-body">
    156347                                            <label class="switch">
    157                                                 <input type="checkbox" id="insta_icon_image" name="insta_icon_image" value="yes" checked>
     348                                                <input type="checkbox" id="ifgp_insta_icon_image" name="ifgp_insta_icon_image" value="yes" checked>
    158349                                                <div class="slider round"></div>
    159350                                            </label>
    … …  
    161352                                    </div>
    162353                                </div>
    163                                 <div class="row">
    164                                     <div class="col-md-4">
     354                                <div class="ifgp-row">
     355                                    <div class="ifgp-col-md-4">
    165356                                        <div class="ma_field_discription">
    166357                                            <h4><?php esc_html_e('Show Caption On Photos', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    168359                                        </div>
    169360                                    </div>
    170                                     <div class="col-md-8">
    171                                         <div class="ma_field panel-body">
     361                                    <div class="ifgp-col-md-8">
     362                                        <div class="ma_field ifgp-panel-body">
    172363                                            <label class="switch">
    173                                                 <input type="checkbox" id="insta_caption_image" name="insta_caption_image" value="yes">
     364                                                <input type="checkbox" id="ifgp_insta_caption_image" name="ifgp_insta_caption_image" value="yes">
    174365                                                <div class="slider round"></div>
    175366                                            </label>
    … …  
    177368                                    </div>
    178369                                </div>
    179                                 <div class="row">
    180                                     <div class="col-md-4">
     370                                <div class="ifgp-row">
     371                                    <div class="ifgp-col-md-4">
    181372                                        <div class="ma_field_discription">
    182373                                            <h4><?php esc_html_e('Instagram Image Link', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    184375                                        </div>
    185376                                    </div>
    186                                     <div class="col-md-8">
    187                                         <div class="ma_field panel-body">
     377                                    <div class="ifgp-col-md-8">
     378                                        <div class="ma_field ifgp-panel-body">
    188379                                            <label class="switch">
    189                                                 <input type="checkbox" id="insta_link_redirection" name="insta_link_redirection" value="_new">
     380                                                <input type="checkbox" id="ifgp_insta_link_redirection" name="ifgp_insta_link_redirection" value="_new">
    190381                                                <div class="slider round"></div>
    191382                                            </label>
    … …  
    198389                                <hr>
    199390
    200                                 <div class="row">
    201                                     <div class="col-md-4">
     391                                <div class="ifgp-row">
     392                                    <div class="ifgp-col-md-4">
    202393                                        <div class="ma_field_discription">
    203394                                            <h4><?php esc_html_e('Lightbox', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    205396                                        </div>
    206397                                    </div>
    207                                     <div class="col-md-8">
    208                                         <div class="ma_field panel-body">
     398                                    <div class="ifgp-col-md-8">
     399                                        <div class="ma_field ifgp-panel-body">
    209400                                            <label class="switch">
    210                                                 <input type="checkbox" id="insta_lightbox" name="insta_lightbox" value="yes">
     401                                                <input type="checkbox" id="ifgp_insta_lightbox" name="ifgp_insta_lightbox" value="yes">
    211402                                                <div class="slider round"></div>
    212403                                            </label>
    … …  
    214405                                    </div>
    215406                                </div>
    216                                 <div class="row">
    217                                     <div class="col-md-4">
     407                                <div class="ifgp-row">
     408                                    <div class="ifgp-col-md-4">
    218409                                        <div class="ma_field_discription">
    219410                                            <h4><?php esc_html_e('Lightbox Color', 'wp-instagram-feed-awplife'); ?></h4>
    … …  
    221412                                        </div>
    222413                                    </div>
    223                                     <div class="col-md-8">
    224                                         <div class="ma_field panel-body">
    225                                             <input type="text" id="insta_lightbox_color" name="insta_lightbox_color" value="#ffffff">
     414                                    <div class="ifgp-col-md-8">
     415                                        <div class="ma_field ifgp-panel-body">
     416                                            <input type="text" id="ifgp_insta_lightbox_color" name="ifgp_insta_lightbox_color" value="#ffffff">
    226417                                        </div>
    227418                                    </div>
    … …  
    229420                            </div>
    230421                            <div class="bhoechie-tab-content">
    231                                 <style>
    232                                     .awp-upgrade-container {
    233                                         padding: 30px;
    234                                         background: #fff;
    235                                         border-radius: 12px;
    236                                         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    237                                         color: #333;
    238                                     }
    239 
    240                                     .awp-upgrade-hero {
    241                                         text-align: center;
    242                                         padding: 40px 20px;
    243                                         background: linear-gradient(135deg, #cd2757 0%, #e91e63 100%);
    244                                         color: #fff;
    245                                         border-radius: 10px;
    246                                         margin-bottom: 40px;
    247                                         box-shadow: 0 10px 25px rgba(205, 39, 87, 0.2);
    248                                     }
    249 
    250                                     .awp-upgrade-hero h1 {
    251                                         font-size: 2.5em;
    252                                         font-weight: 800;
    253                                         margin-bottom: 15px;
    254                                         color: #fff;
    255                                     }
    256 
    257                                     .awp-upgrade-hero p {
    258                                         font-size: 1.2em;
    259                                         opacity: 0.9;
    260                                         max-width: 800px;
    261                                         margin: 0 auto;
    262                                     }
    263 
    264                                     .awp-offer-badge {
    265                                         display: inline-block;
    266                                         background: #ffc107;
    267                                         color: #000;
    268                                         padding: 5px 15px;
    269                                         border-radius: 50px;
    270                                         font-weight: bold;
    271                                         font-size: 0.9em;
    272                                         margin-bottom: 15px;
    273                                         text-transform: uppercase;
    274                                     }
    275 
    276                                     .awp-features-grid {
    277                                         display: grid;
    278                                         grid-template-columns: repeat(3, 1fr);
    279                                         gap: 25px;
    280                                         margin-top: 40px;
    281                                     }
    282 
    283                                     .awp-feature-card {
    284                                         padding: 25px;
    285                                         border: 1px solid #eee;
    286                                         border-radius: 10px;
    287                                         transition: all 0.3s ease;
    288                                         text-align: center;
    289                                         background: #fafafa;
    290                                     }
    291 
    292                                     .awp-feature-card:hover {
    293                                         transform: translateY(-5px);
    294                                         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    295                                         background: #fff;
    296                                         border-color: #cd2757;
    297                                     }
    298 
    299                                     .awp-feature-card .dashicons {
    300                                         font-size: 40px;
    301                                         width: 40px;
    302                                         height: 40px;
    303                                         color: #cd2757;
    304                                         margin-bottom: 15px;
    305                                     }
    306 
    307                                     .awp-feature-card h3 {
    308                                         margin: 15px 0 10px;
    309                                         font-size: 1.2em;
    310                                         font-weight: 700;
    311                                     }
    312 
    313                                     .awp-feature-card p {
    314                                         font-size: 0.95em;
    315                                         color: #666;
    316                                     }
    317 
    318                                     .awp-comparison-section {
    319                                         margin-top: 60px;
    320                                     }
    321 
    322                                     .awp-comparison-table {
    323                                         width: 100%;
    324                                         border-collapse: collapse;
    325                                         background: #fff;
    326                                         border-radius: 10px;
    327                                         overflow: hidden;
    328                                         box-shadow: 0 0 40px rgba(0, 0, 0, 0.05);
    329                                     }
    330 
    331                                     .awp-comparison-table th,
    332                                     .awp-comparison-table td {
    333                                         padding: 20px;
    334                                         text-align: center;
    335                                         border-bottom: 1px solid #f0f0f0;
    336                                     }
    337 
    338                                     .awp-comparison-table th {
    339                                         background: #f8f9fa;
    340                                         font-weight: 700;
    341                                         color: #2c3e50;
    342                                     }
    343 
    344                                     .awp-comparison-table .feature-name {
    345                                         text-align: left;
    346                                         font-weight: 600;
    347                                         width: 40%;
    348                                     }
    349 
    350                                     .awp-comparison-table .free-col {
    351                                         background: #fdfdfd;
    352                                         width: 30%;
    353                                     }
    354 
    355                                     .awp-comparison-table .pro-col {
    356                                         background: rgba(205, 39, 87, 0.03);
    357                                         width: 30%;
    358                                         font-weight: bold;
    359                                     }
    360 
    361                                     .check-icon {
    362                                         color: #4caf50;
    363                                         font-weight: bold;
    364                                         font-size: 1.2em;
    365                                     }
    366 
    367                                     .cross-icon {
    368                                         color: #f44336;
    369                                         font-weight: bold;
    370                                         font-size: 1.2em;
    371                                     }
    372 
    373                                     .awp-upgrade-buttons {
    374                                         display: flex;
    375                                         justify-content: center;
    376                                         gap: 20px;
    377                                         margin-top: 50px;
    378                                     }
    379 
    380                                     .btn-premium {
    381                                         background: #cd2757 !important;
    382                                         color: #fff !important;
    383                                         padding: 15px 35px !important;
    384                                         font-size: 18px !important;
    385                                         font-weight: 700 !important;
    386                                         border-radius: 50px !important;
    387                                         text-decoration: none !important;
    388                                         box-shadow: 0 5px 15px rgba(205, 39, 87, 0.3) !important;
    389                                         transition: all 0.3s ease !important;
    390                                         border: none !important;
    391                                         display: inline-flex !important;
    392                                         align-items: center !important;
    393                                     }
    394 
    395                                     .btn-premium:hover {
    396                                         background: #b01b46 !important;
    397                                         transform: translateY(-2px);
    398                                         box-shadow: 0 8px 20px rgba(205, 39, 87, 0.4) !important;
    399                                     }
    400 
    401                                     .btn-demo {
    402                                         background: #333 !important;
    403                                         color: #fff !important;
    404                                         padding: 15px 35px !important;
    405                                         font-size: 18px !important;
    406                                         font-weight: 700 !important;
    407                                         border-radius: 50px !important;
    408                                         text-decoration: none !important;
    409                                         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    410                                         transition: all 0.3s ease !important;
    411                                         border: none !important;
    412                                         display: inline-flex !important;
    413                                         align-items: center !important;
    414                                     }
    415 
    416                                     .btn-demo:hover {
    417                                         background: #000 !important;
    418                                         transform: translateY(-2px);
    419                                         box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    420                                     }
    421                                 </style>
    422422                                <div class="awp-upgrade-container">
    423423                                    <div class="awp-upgrade-hero">
    … …  
    429429                                            <span><?php esc_html_e('$39', 'wp-instagram-feed-awplife'); ?></span>
    430430                                        </div>
     431                                        <a href="https://awplife.com/wordpress-plugins/instagram-feed-gallery-premium/" target="_blank" class="awp-hero-upgrade-btn">
     432                                            <span class="dashicons dashicons-cart"></span>
     433                                            <?php esc_html_e('Upgrade To Pro Now', 'wp-instagram-feed-awplife'); ?>
     434                                        </a>
    431435                                    </div>
    432436
    … …  
    537541                        </div>
    538542                    </div>
    539                     <div class="panel panel-info igp_pannel_bottom ">
    540                         <div class="row panel-body notice notice-info notice-alt">
    541                             <div class="col-md-6 text-left">
    542                                 <h3 class="panel-title"><?php esc_html_e('Instagram Feed Gallery Premium', 'wp-instagram-feed-awplife'); ?> <span style="display:inline;"><?php esc_html_e('Version', 'wp-instagram-feed-awplife'); ?> - <?php echo esc_html(IFGP_PLUGIN_VER); ?><span></h3>
    543                             </div>
    544                             <div class="col-md-6 text-right">
    545                                 <div class="panel-heading">
    546                                     <button type="button" onclick="IgpGetShortcode();" class="igp_button btn-lg button_1"><?php esc_html_e('[ Generate Sortcode ]', 'wp-instagram-feed-awplife'); ?></button>
    547                                 </div>
     543                    <div class="ifgp-panel igp_pannel_bottom">
     544                        <div class="ifgp-row ifgp-panel-body ifgp-align-items-center" style="background: rgba(255,255,255,0.05); display: flex !important; justify-content: flex-end !important;">
     545                            <div class="ifgp-col-md-12" style="display: flex !important; justify-content: flex-end !important; text-align: right !important;">
     546                                <button type="button" class="igp_button button_1" onclick="IgpGetShortcode()" style="background: #fff; color: #cd2757; letter-spacing: 1px; padding: 12px 30px; margin-left: auto !important;"><?php esc_html_e('Generate Shortcode', 'wp-instagram-feed-awplife'); ?></button>
    548547                            </div>
    549548                        </div>
    550                     </div>
    551                     <div class="modal" id="modal-show-shortcode" tabindex="-1" role="dialog" aria-labelledby="modal-new-short-code-label">
    552                         <div class="modal-dialog" role="document" id="inner-modal">
    553                             <div class="modal-content">
    554                                 <div class="modal-header">
    555                                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    556                                     <h4 class="modal-title" id="modal-new-ticket-label"><?php esc_html_e('Instagram Feed Gallery Premium Shortcode', 'wp-instagram-feed-awplife'); ?></h4>
    557                                 </div>
    558                                 <div class="modal-body text-center">
    559                                     <textarea id="awl-shortcode" readonly rows="13" cols="120" style="width: 100%; font-size: 15px;">
     549                        <div class="ifgp-modal" id="insta-shortcode-modal">
     550                            <div class="ifgp-modal-dialog">
     551                                <div class="ifgp-modal-content">
     552                                    <div class="ifgp-modal-header">
     553                                        <h4 class="ifgp-modal-title" id="modal-new-ticket-label"><?php esc_html_e('Instagram Feed Gallery Premium Shortcode', 'wp-instagram-feed-awplife'); ?></h4>
     554                                        <button type="button" class="ifgp-close" data-ifgp-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     555                                    </div>
     556                                    <div class="ifgp-modal-body ifgp-text-center">
     557                                        <textarea id="awl-shortcode" readonly rows="13" cols="120" style="width: 100%; font-size: 15px;">
    560558                                        </textarea>
    561                                     <div class="center-block text-center">
    562                                         <button type="button" class="igp_button button_1" data-toggle="tooltip" title="Copied" onclick="CopyShortcode()"><i class="fa fa-copy" aria-hidden="true"></i> <?php esc_html_e('Copy Sortcode', 'wp-instagram-feed-awplife'); ?></button>
     559                                        <div class="ifgp-tooltip-trigger ifgp-text-center" id="ifgp-copy-trigger">
     560                                            <button type="button" class="igp_button button_1" title="Copied" onclick="ifgp_copy_shortcode()"><i class="fa fa-copy" aria-hidden="true"></i> <?php esc_html_e('Copy Shortcode', 'wp-instagram-feed-awplife'); ?></button>
     561                                            <span class="ifgp-tooltip-text"><?php esc_html_e('Copied!', 'wp-instagram-feed-awplife'); ?></span>
     562                                        </div>
    563563                                    </div>
    564564                                </div>
    … …  
    570570        </div>
    571571    </div>
    572     <div class="col-md-2">
     572    <div class="ifgp-col-md-3">
    573573        <div class="postbox-container" style="margin-top:20px; margin-bottom:10px;">
    574574            <div class="meta-box-sortables ui-sortable">
    575575                <div class="postbox">
    576576                    <div class="postbox-header">
    577                         <h2 class="hndle ui-sortable-handle" style="font-size: 16px; text-align: center;">Our Themes</h2>
    578                         <div class="handle-actions hide-if-no-js"><button type="button" class="handle-order-higher" aria-disabled="false" aria-describedby="pfg-themes-handle-order-higher-description"></div>
     577                        <h2 class="hndle ui-sortable-handle" style="font-size: 16px; text-align: center;"><?php esc_html_e('Our Themes', 'wp-instagram-feed-awplife'); ?></h2>
     578                        <div class="handle-actions hide-if-no-js"></div>
    579579                    </div>
    580580                    <div class="inside" style="padding: 0 6px 0px; line-height: 1.4; font-size: 13px;">
    581                         <a href="https://awplife.com/premium-wordpress-themes/" target="_new"><img src="<?php echo esc_url(IFGP_PLUGIN_URL . '/img/Premium-wordpress-themes.jpg'); ?>" width="250" height="280"></a>
     581                        <a href="https://awplife.com/premium-wordpress-themes/" target="_new"><img src="<?php echo esc_url(IFGP_PLUGIN_URL . '/img/Premium-wordpress-themes.jpg'); ?>" class="ifgp-img-fluid"></a>
    582582                    </div>
    583583                </div>
    584584            </div>
    585585            <div class="postbox ">
    586                 <h2 style="font-size: 16px; padding: 10px; border-bottom: 1px solid #c3c4c7;">Rate Our Plugin</h2>
     586                <h2 style="font-size: 16px; padding: 10px; border-bottom: 1px solid #c3c4c7;"><?php esc_html_e('Rate Our Plugin', 'wp-instagram-feed-awplife'); ?></h2>
    587587                <div class="inside">
    588588                    <div style="text-align:center">
    589                         <p>If you like our plugin then please <b>Rate us</b> on WordPress</p>
     589                        <p><?php
     590                        /* translators: 1: HTML bold start tag, 2: HTML bold end tag */
     591                        printf(esc_html__('If you like our plugin then please %1$sRate us%2$s on WordPress', 'wp-instagram-feed-awplife'), '<b>', '</b>');
     592                        ?></p>
    590593                    </div>
    591594                    <div style="text-align:center">
    … …  
    598601                    <br>
    599602                    <div style="text-align:center">
    600                         <a href="https://wordpress.org/support/plugin/wp-instagram-feed-awplife/reviews/" target="_new" class="button button-primary button-large" style="background: #cd2757; border:none; text-shadow: none;"><span class="dashicons dashicons-heart" style="line-height:1.4;"></span> Please Rate Us</a>
     603                        <a href="https://wordpress.org/support/plugin/wp-instagram-feed-awplife/reviews/" target="_new" class="button button-primary button-large" style="background: #cd2757; border:none; text-shadow: none;"><span class="dashicons dashicons-heart" style="line-height:1.4;"></span> <?php esc_html_e('Please Rate Us', 'wp-instagram-feed-awplife'); ?></a>
    601604                    </div>
    602605                </div>
    … …  
    605608    </div>
    606609</div>
    607 <script>
    608     jQuery(document).ready(function() {
    609         // tab
    610         jQuery("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
    611             e.preventDefault();
    612             jQuery(this).siblings('a.active').removeClass("active");
    613             jQuery(this).addClass("active");
    614             var index = jQuery(this).index();
    615             jQuery("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
    616             jQuery("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
    617         });
    618 
    619         //range slider
    620         var rangeSlider = function() {
    621             var slider = jQuery('.range-slider'),
    622                 range = jQuery('.range-slider__range'),
    623                 value = jQuery('.range-slider__value');
    624 
    625             slider.each(function() {
    626                 value.each(function() {
    627                     var value = jQuery(this).prev().attr('value');
    628                     jQuery(this).html(value);
    629                 });
    630 
    631                 range.on('input', function() {
    632                     jQuery(this).next(value).html(this.value);
    633                 });
    634             });
    635         };
    636         rangeSlider();
    637     });
    638 
    639     function IgpGetShortcode() {
    640 
    641         var shortcode = '[IFG';
    642 
    643         var instagram_acces_token = jQuery("#instagram_acces_token").val();
    644         if (instagram_acces_token) {
    645             shortcode = shortcode + ' instagram_acces_token="' + instagram_acces_token + '"';
    646         } else {
    647             shortcode = shortcode + ' instagram_acces_token="' + '"';
    648         }
    649 
    650         var insta_layout = jQuery('[name=insta_layout]:checked').val();
    651         if (insta_layout) {
    652             shortcode = shortcode + ' insta_layout="' + insta_layout + '"';
    653         } else {
    654             shortcode = shortcode + ' insta_layout="' + 'insta_layout_grid' + '"';
    655         }
    656 
    657         var insta_grid_columns_l = jQuery("#insta_grid_columns_l").val();
    658         if (insta_grid_columns_l) {
    659             shortcode = shortcode + ' insta_grid_columns_l="' + insta_grid_columns_l + '"';
    660         } else {
    661             shortcode = shortcode + ' insta_grid_columns_l="' + '' + '"';
    662         }
    663 
    664         var insta_image_limit = jQuery("#insta_image_limit").val();
    665         if (insta_image_limit) {
    666             shortcode = shortcode + ' insta_image_limit="' + insta_image_limit + '"';
    667         }
    668         var insta_image_spacing = jQuery("#insta_image_spacing").val();
    669         if (insta_image_spacing) {
    670             shortcode = shortcode + ' insta_image_spacing="' + insta_image_spacing + '"';
    671         }
    672 
    673         var insta_icon_image = jQuery("#insta_icon_image").val();
    674         if (jQuery("#insta_icon_image").prop('checked') == true) {
    675             shortcode = shortcode + ' insta_icon_image="' + insta_icon_image + '"';
    676         } else {
    677             shortcode = shortcode + '';
    678         }
    679 
    680 
    681         var insta_caption_image = jQuery("#insta_caption_image").val();
    682         if (jQuery("#insta_caption_image").prop('checked') == true) {
    683             shortcode = shortcode + ' insta_caption_image="' + insta_caption_image + '"';
    684         } else {
    685             shortcode = shortcode + '';
    686         }
    687 
    688         var insta_link_redirection = jQuery("#insta_link_redirection").val();
    689         if (jQuery("#insta_link_redirection").prop('checked') == true) {
    690             shortcode = shortcode + ' insta_link_redirection="' + insta_link_redirection + '"';
    691         } else {
    692             shortcode = shortcode + '';
    693         }
    694 
    695         var insta_lightbox = jQuery("#insta_lightbox").val();
    696         if (jQuery("#insta_lightbox").prop('checked') == true) {
    697             shortcode = shortcode + ' insta_lightbox="' + insta_lightbox + '"';
    698         } else {
    699             shortcode = shortcode + '';
    700         }
    701         var insta_lightbox_color = jQuery("#insta_lightbox_color").val();
    702         if (insta_lightbox_color) {
    703             shortcode = shortcode + ' insta_lightbox_color="' + insta_lightbox_color + '"';
    704         } else {
    705             shortcode = shortcode + ' insta_lightbox_color="' + '' + '"';
    706         }
    707         shortcode = shortcode + ' ]';
    708         jQuery('#awl-shortcode').text(shortcode);
    709         jQuery('#modal-show-shortcode').modal('show');
    710     }
    711 
    712     //color-picker
    713     (function(jQuery) {
    714         jQuery(function() {
    715             // Add Color Picker
    716             jQuery('#insta_lightbox_color').wpColorPicker();
    717         });
    718     })(jQuery);
    719 
    720     function CopyShortcode() {
    721         var copyText = document.getElementById("awl-shortcode");
    722         copyText.select();
    723         document.execCommand("copy");
    724     }
    725 </script>

  • wp-instagram-feed-awplife/trunk/shortcode.php

    r3473624 r3483700  
    99 * @return    Create Fontend  Output
    1010 */
    11 add_shortcode('IFG', 'wp_instagram_feed_shortcode');
    12 function wp_instagram_feed_shortcode($atts)
     11add_shortcode('IFG', 'ifgp_instagram_feed_shortcode');
     12function ifgp_instagram_feed_shortcode($atts)
    1313{
    1414    ob_start();
    … …  
    1717    wp_enqueue_script('jquery');
    1818
    19     // awp custom bootstrap css
    20     wp_enqueue_style('ifgp-bootstrap-css', IFGP_PLUGIN_URL . 'css/ifgp-bootstrap-frontend.css');
    21     wp_enqueue_style('ifgp-alw-style-css', IFGP_PLUGIN_URL . 'css/alw-style.css');
    22     wp_enqueue_style('ifgp-shortcode-css', IFGP_PLUGIN_URL . 'css/ifgp-shortcode.css');
    23     wp_enqueue_style('ifgp-main-css', IFGP_PLUGIN_URL . 'css/main.css');
     19    // Custom Layout CSS
     20    wp_enqueue_style('ifgp-layout-css', IFGP_PLUGIN_URL . 'css/ifgp-layout.css', array(), IFGP_PLUGIN_VER);
     21    wp_enqueue_style('ifgp-alw-style-css', IFGP_PLUGIN_URL . 'css/alw-style.css', array(), IFGP_PLUGIN_VER);
     22    wp_enqueue_style('ifgp-shortcode-css', IFGP_PLUGIN_URL . 'css/ifgp-shortcode.css', array(), IFGP_PLUGIN_VER);
     23    wp_enqueue_style('ifgp-main-css', IFGP_PLUGIN_URL . 'css/main.css', array(), IFGP_PLUGIN_VER);
     24
     25    // Lightbox JS
     26    wp_enqueue_script('ifgp-lightbox-js', IFGP_PLUGIN_URL . 'js/ifgp-lightbox.js', array('jquery'), IFGP_PLUGIN_VER, true);
     27    wp_localize_script('ifgp-lightbox-js', 'ifgp_lightbox_vars', array(
     28        'plugin_url' => IFGP_PLUGIN_URL,
     29        'unknown_user' => __('Unknown User', 'wp-instagram-feed-awplife'),
     30        'recently' => __('Recently', 'wp-instagram-feed-awplife'),
     31        'no_caption' => __('No caption available', 'wp-instagram-feed-awplife'),
     32        'previous' => __('Previous', 'wp-instagram-feed-awplife'),
     33        'next' => __('Next', 'wp-instagram-feed-awplife'),
     34        'close' => __('Close', 'wp-instagram-feed-awplife'),
     35        'follow' => __('Follow', 'wp-instagram-feed-awplife'),
     36        'instagram_image' => __('Instagram Image', 'wp-instagram-feed-awplife')
     37    ));
     38
     39    // Dynamic CSS for shortcode
     40    $insta_image_spacing_attr = isset($atts['ifgp_insta_image_spacing']) ? $atts['ifgp_insta_image_spacing'] : (isset($atts['insta_image_spacing']) ? $atts['insta_image_spacing'] : null);
     41    $insta_lightbox_color_attr = isset($atts['ifgp_insta_lightbox_color']) ? $atts['ifgp_insta_lightbox_color'] : (isset($atts['insta_lightbox_color']) ? $atts['insta_lightbox_color'] : null);
     42
     43    if ($insta_image_spacing_attr !== null || $insta_lightbox_color_attr !== null) {
     44        $spacing = $insta_image_spacing_attr !== null ? intval($insta_image_spacing_attr) : 3;
     45        $lb_color = $insta_lightbox_color_attr !== null ? sanitize_hex_color($insta_lightbox_color_attr) : '#ffffff';
     46       
     47        $custom_css = "
     48            .insta-gallery-div { padding: {$spacing}px !important; }
     49            .carouselGallery-left, .carouselGallery-right { color: {$lb_color}; }
     50            .carouselGallery-modal .iconscircle-cross { color: {$lb_color}; }
     51        ";
     52        wp_add_inline_style('ifgp-shortcode-css', $custom_css);
     53    }
    2454
    2555    //Access Token
    26     if (isset($atts['instagram_acces_token'])) $instagram_acces_token = $atts['instagram_acces_token'];
    27     else $instagram_acces_token = "";
    28     if (isset($atts['insta_image_limit'])) $insta_image_limit = $atts['insta_image_limit'];
    29     else $insta_image_limit = "";
     56    $instagram_access_token = isset($atts['ifgp_instagram_access_token']) ? sanitize_text_field($atts['ifgp_instagram_access_token']) : (isset($atts['instagram_access_token']) ? sanitize_text_field($atts['instagram_access_token']) : (isset($atts['instagram_acces_token']) ? sanitize_text_field($atts['instagram_acces_token']) : ""));
     57    $insta_image_limit = isset($atts['ifgp_insta_image_limit']) ? intval($atts['ifgp_insta_image_limit']) : (isset($atts['insta_image_limit']) ? intval($atts['insta_image_limit']) : 24);
    3058    if ($insta_image_limit > 50) $insta_image_limit = 50;
    3159
    32     $instagram_data_decode = wp_remote_get("https://graph.instagram.com/me/media?fields=id,media_type,permalink,thumbnail_url,timestamp,media_url,caption,username,children{media_url}&access_token=$instagram_acces_token&limit=$insta_image_limit");
    33     $instagram_response = $instagram_data_decode['response']['code'];
    34     $instagram_data = json_decode($instagram_data_decode['body'], true);
     60    // Caching via transients
     61    $transient_key = 'ifgp_feed_' . md5($instagram_access_token . $insta_image_limit);
     62    $instagram_data = get_transient($transient_key);
     63
     64    if (false === $instagram_data) {
     65        $instagram_data_decode = wp_remote_get("https://graph.instagram.com/me/media?fields=id,media_type,permalink,thumbnail_url,timestamp,media_url,caption,username,children{media_url}&access_token=$instagram_access_token&limit=$insta_image_limit");
     66        $instagram_response = isset($instagram_data_decode['response']['code']) ? $instagram_data_decode['response']['code'] : 0;
     67        $instagram_body = wp_remote_retrieve_body($instagram_data_decode);
     68        $instagram_data = json_decode($instagram_body, true);
     69
     70        if ($instagram_response == 200 && !empty($instagram_data['data'])) {
     71            set_transient($transient_key, $instagram_data, HOUR_IN_SECONDS);
     72        }
     73    } else {
     74        $instagram_response = 200; // Found in cache
     75    }
    3576
    3677    //Gallery
    37     if (isset($atts['insta_layout'])) $insta_layout = $atts['insta_layout'];
    38     else $insta_layout = "insta_layout_grid";
    39     if (isset($atts['insta_grid_row_l'])) $insta_grid_row_l = $atts['insta_grid_row_l'];
    40     else $insta_grid_row_l = "";
    41     if (isset($atts['insta_grid_columns_l'])) $insta_grid_columns_l = $atts['insta_grid_columns_l'];
    42     else $insta_grid_columns_l = "";
    43     if (isset($atts['insta_icon_image'])) $insta_icon_image = $atts['insta_icon_image'];
    44     else $insta_icon_image = "";
    45     if (isset($atts['insta_image_spacing'])) $insta_image_spacing = $atts['insta_image_spacing'];
    46     else $insta_image_spacing = "";
     78    $insta_layout = isset($atts['ifgp_insta_layout']) ? sanitize_text_field($atts['ifgp_insta_layout']) : (isset($atts['insta_layout']) ? sanitize_text_field($atts['insta_layout']) : "insta_layout_grid");
     79    $insta_grid_columns_l = isset($atts['ifgp_insta_grid_columns_l']) ? intval($atts['ifgp_insta_grid_columns_l']) : (isset($atts['insta_grid_columns_l']) ? intval($atts['insta_grid_columns_l']) : 3);
     80    $insta_icon_image = isset($atts['ifgp_insta_icon_image']) ? sanitize_text_field($atts['ifgp_insta_icon_image']) : (isset($atts['insta_icon_image']) ? sanitize_text_field($atts['insta_icon_image']) : "");
     81    $insta_image_spacing = isset($atts['ifgp_insta_image_spacing']) ? intval($atts['ifgp_insta_image_spacing']) : (isset($atts['insta_image_spacing']) ? intval($atts['insta_image_spacing']) : 3);
    4782    if ($insta_image_spacing > 20) $insta_image_spacing = 20;
    48     if (isset($atts['insta_caption_image'])) $insta_caption_image = $atts['insta_caption_image'];
    49     else $insta_caption_image = "";
    50     if (isset($atts['insta_link_redirection'])) $insta_link_redirection = $atts['insta_link_redirection'];
    51     else $insta_link_redirection = "";
    52     if (isset($atts['insta_lightbox'])) $insta_lightbox = $atts['insta_lightbox'];
    53     else $insta_lightbox = "";
    54     if (isset($atts['insta_lightbox_color'])) $insta_lightbox_color = $atts['insta_lightbox_color'];
    55     else $insta_lightbox_color = "";
     83    $insta_caption_image = isset($atts['ifgp_insta_caption_image']) ? sanitize_text_field($atts['ifgp_insta_caption_image']) : (isset($atts['insta_caption_image']) ? sanitize_text_field($atts['insta_caption_image']) : "");
     84    $insta_link_redirection = isset($atts['ifgp_insta_link_redirection']) ? sanitize_text_field($atts['ifgp_insta_link_redirection']) : (isset($atts['insta_link_redirection']) ? sanitize_text_field($atts['insta_link_redirection']) : "");
     85    $insta_lightbox = isset($atts['ifgp_insta_lightbox']) ? sanitize_text_field($atts['ifgp_insta_lightbox']) : (isset($atts['insta_lightbox']) ? sanitize_text_field($atts['insta_lightbox']) : "");
     86    $insta_lightbox_color = isset($atts['ifgp_insta_lightbox_color']) ? sanitize_hex_color($atts['ifgp_insta_lightbox_color']) : (isset($atts['insta_lightbox_color']) ? sanitize_hex_color($atts['insta_lightbox_color']) : "#ffffff");
    5687
    5788    if ($insta_layout == 'insta_layout_grid') {
    … …  
    6293    return ob_get_clean();
    6394}
     95
     96/**
     97 * Backward Compatibility Function wrapper
     98 */
     99if (!function_exists('wp_instagram_feed_shortcode')) {
     100    function wp_instagram_feed_shortcode($atts)
     101    {
     102        return ifgp_instagram_feed_shortcode($atts);
     103    }
     104}

  • wp-instagram-feed-awplife/trunk/wp-instagram-feed-awplife.php

    r3473624 r3483700  
    66 * Plugin URI:        https://awplife.com/wordpress-plugins/instagram-feed-gallery-premium/
    77 * Description:       Create a responsive social media feed gallery with Instagram access token. Grid layout, lightbox, shortcode support.
    8  * Version:           1.5.0
     8 * Version:           1.5.1
    99 * Requires at least: 5.0
    1010 * Requires PHP:      7.0
    … …  
    3535        {
    3636            //Plugin Version
    37             define('IFGP_PLUGIN_VER', '1.5.0');
     37            define('IFGP_PLUGIN_VER', '1.5.1');
    3838
    3939            //Plugin Text Domain
    … …  
    6464        protected function _hooks()
    6565        {
    66             //Load text domain
    67             add_action('init', array($this, '_load_textdomain'));
    6866
    6967            //add instagram type gallery menu item, change menu filter for multisite
    70             add_action('admin_menu', array($this, 'instagram_feed_menu'));
     68            add_action('admin_menu', array($this, 'ifgp_instagram_feed_menu'));
    7169
    7270            add_action('wp_enqueue_scripts', array(&$this, 'enqueue_scripts_in_header'));
    … …  
    7876        }
    7977
    80         /**
    81          * Loads the text domain.
    82          */
    83         public function _load_textdomain()
    84         {
    85             load_plugin_textdomain('wp-instagram-feed-awplife', false, dirname(plugin_basename(__FILE__)) . '/languages');
    86         }
    8778
    8879        /**
    8980         * Adds the Instagram Feed menu item
    9081         */
    91         public function instagram_feed_menu()
     82        public function ifgp_instagram_feed_menu()
    9283        {
    9384            $icon =  IFGP_PLUGIN_URL  . '/img/insta-icon.png';
    94             add_menu_page('Instagram Feed', 'Instagram Feed', 'administrator', 'wp-instagram-feed-awplife', array($this, 'wp_instagram_feed_settings_page'), $icon, 65);
     85            add_menu_page('Instagram Feed', 'Instagram Feed', 'manage_options', 'wp-instagram-feed-awplife', array($this, 'ifgp_instagram_feed_settings_page'), $icon, 65);
    9586        }
    9687
    97         public function wp_instagram_feed_settings_page()
     88        public function ifgp_instagram_feed_settings_page()
    9889        {
    9990            require_once('setting.php');
    … …  
    10697     * @global    object    $ifgp_gallery_object
    10798     */
    108     $igp_gallery_object = new Instagram_Feed_Awplife();
     99    $ifgp_social_media_feed_gallery = new Instagram_Feed_Awplife();
     100    $igp_gallery_object = $ifgp_social_media_feed_gallery; // Backward compatibility
    109101    require_once('shortcode.php');
    110102} // end of class exists
Note: See TracChangeset for help on using the changeset viewer.