WD Instagram Feed – Instagram Gallery - Version 1.1.30

Version Description

Changed: Frontend styles optimized, loads faster now

Download this release

Release Info

Developer webdorado
Plugin Icon 128x128 WD Instagram Feed – Instagram Gallery
Version 1.1.30
Comparing to
See all releases

Code changes from version 1.1.29 to 1.1.30

Files changed (5) hide show
  1. css/wdi_frontend.css +575 -72
  2. frontend/views/WDIViewImageBrowser_view.php +10 -139
  3. frontend/views/WDIViewThumbnails_view.php +414 -536
  4. readme.txt +5 -2
  5. wd-instagram-feed.php +2 -2
css/wdi_frontend.css CHANGED
@@ -1,17 +1,21 @@
1
- .wdi_clear{
2
- clear: both;
3
  }
4
- .table{
5
- display: table;
 
6
  }
7
- .table-cell{
8
- display: table-cell;
 
9
  }
10
- .table-row{
11
- display: table-row;
 
12
  }
13
- .wdi_feed_main_container{
14
- -webkit-user-select: none; /* Chrome/Safari */
 
15
  -moz-user-select: none; /* Firefox */
16
  -ms-user-select: none; /* IE10+ */
17
 
@@ -19,106 +23,145 @@
19
  -o-user-select: none;
20
  user-select: none;
21
  }
22
- .wdi_follow_button:hover{
 
23
  cursor: pointer;
24
  }
25
- .wdi_hidden{
 
26
  display: none !important;
27
  }
28
- .wdi_hover_off:hover{
 
29
  background-color: transparent !important;
30
  }
31
- .wdi_cursor_off:hover{
 
32
  cursor: auto !important;
33
  }
34
 
35
- .wdi_filter_active span{
36
- color: white;
37
  }
38
 
39
- .wdi_disabled{
40
  visibility: hidden;
41
  }
42
 
43
-
44
-
45
  /*=========================================================*/
46
 
47
- .wdi_ajax_loading{
48
- position: absolute;
49
- width: 50px;
50
  height: 50px;
51
  left: 0;
52
  right: 0;
53
- bottom: -50px;
54
  margin: auto;
55
- z-index: 100;
56
-
57
- }
58
- .wdi_feed_main_container{
59
- width: 100%;
60
- position: relative;
61
- }
62
-
63
 
64
- .wdi_photo_img{
65
- position: relative;
66
- overflow: hidden;
67
-
68
- }
69
- .wdi_photo_overlay{
70
- width: 100%;
71
- height: 100%;
72
- position: absolute;
73
- top: 0;
74
- left: 0;
75
- background-color: transparent;
76
- transition: all 0.1s ease;
77
  }
78
 
79
- .wdi_thumb_icon i{
80
- display: none;
81
- transition: all 0.1s ease;
82
- }
83
- .wdi_photo_overlay:hover .wdi_thumb_icon i{
84
- display: block;
85
  }
86
 
 
 
 
87
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
 
 
 
 
89
 
 
 
 
 
90
 
 
 
 
 
91
 
 
 
 
92
 
 
 
 
93
 
 
 
 
 
 
94
 
 
 
 
 
 
 
 
 
 
 
 
95
 
 
 
 
96
 
 
97
 
 
 
 
 
 
 
 
 
 
98
 
 
 
 
 
99
 
 
 
 
100
 
101
-
102
-
103
-
104
- .wdi_feed_main_container .fa{
105
  font-family: FontAwesome !important;
106
  font-style: normal;
107
  }
108
 
109
-
110
-
111
  /**************************************************************/
112
 
113
-
114
-
115
  /**
116
  * lightbox styles
117
  */
118
 
119
-
120
- .wdi_spider_popup_loading
121
- {
122
  /*background: url("../images/ajax_loader.gif") no-repeat scroll 0 0 / 50px 50px rgba(0, 0, 0, 0);*/
123
  background-image: url("../images/ajax_loader.png");
124
  background-color: rgba(0, 0, 0, 0);
@@ -142,7 +185,7 @@
142
  animation: spin 2.5s infinite linear;
143
  }
144
 
145
- .wdi_spider_popup_overlay{
146
  cursor: pointer;
147
  background-color: rgba(0, 0, 0, 0.5);
148
  display: none;
@@ -154,8 +197,6 @@
154
  z-index: 10100;
155
  }
156
 
157
-
158
-
159
  div[id^="wdi_container"] p {
160
  padding: 0 !important;
161
  margin: 0 !important;
@@ -243,7 +284,6 @@ div[id^="wdi_container"] p {
243
  right: 20px;
244
  }
245
 
246
-
247
  #wdi_spider_popup_left,
248
  #wdi_spider_popup_right {
249
  background: transparent url("../images/blank.gif") repeat scroll 0 0;
@@ -271,14 +311,13 @@ div[id^="wdi_container"] p {
271
  z-index: 10135;
272
  }
273
 
274
- .wdi_image_info_container1{
275
  height: 100%;
276
  margin: 0 auto;
277
  position: absolute;
278
  width: 100%;
279
  }
280
 
281
-
282
  .wdi_image_info_container2 {
283
  display: table;
284
  height: 100%;
@@ -297,7 +336,7 @@ div[id^="wdi_container"] p {
297
  position: relative;
298
  }
299
 
300
- .wdi_image_info{
301
  display: inline-block;
302
  position: relative;
303
  text-decoration: none;
@@ -309,7 +348,7 @@ div[id^="wdi_container"] p {
309
  text-align: center;
310
  }
311
 
312
- .wdi_feed_item[wdi_type="slideshow"] .fa-clone{
313
 
314
  -webkit-transform: rotate(180deg);
315
  -moz-transform: rotate(180deg);
@@ -318,8 +357,7 @@ div[id^="wdi_container"] p {
318
  transform: rotate(180deg);
319
  }
320
 
321
-
322
- .wdi_js_error{
323
  text-align: center;
324
 
325
  -webkit-animation-name: wdi_js_error;
@@ -369,4 +407,469 @@ div[id^="wdi_container"] p {
369
  -o-transform: scale(1);
370
  transform: scale(1);
371
  }
372
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .wdi_clear {
2
+ clear: both;
3
  }
4
+
5
+ .table {
6
+ display: table;
7
  }
8
+
9
+ .table-cell {
10
+ display: table-cell;
11
  }
12
+
13
+ .table-row {
14
+ display: table-row;
15
  }
16
+
17
+ .wdi_feed_main_container {
18
+ -webkit-user-select: none; /* Chrome/Safari */
19
  -moz-user-select: none; /* Firefox */
20
  -ms-user-select: none; /* IE10+ */
21
 
23
  -o-user-select: none;
24
  user-select: none;
25
  }
26
+
27
+ .wdi_follow_button:hover {
28
  cursor: pointer;
29
  }
30
+
31
+ .wdi_hidden {
32
  display: none !important;
33
  }
34
+
35
+ .wdi_hover_off:hover {
36
  background-color: transparent !important;
37
  }
38
+
39
+ .wdi_cursor_off:hover {
40
  cursor: auto !important;
41
  }
42
 
43
+ .wdi_filter_active span {
44
+ color: white;
45
  }
46
 
47
+ .wdi_disabled {
48
  visibility: hidden;
49
  }
50
 
 
 
51
  /*=========================================================*/
52
 
53
+ .wdi_ajax_loading {
54
+ position: absolute;
55
+ width: 50px;
56
  height: 50px;
57
  left: 0;
58
  right: 0;
59
+ bottom: -50px;
60
  margin: auto;
61
+ z-index: 100;
 
 
 
 
 
 
 
62
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  }
64
 
65
+ .wdi_feed_main_container {
66
+ width: 100%;
67
+ position: relative;
 
 
 
68
  }
69
 
70
+ .wdi_feed_main_container .wdi_img {
71
+ margin: 0; /*reset style*/
72
+ }
73
 
74
+ .wdi_feed_main_container .wdi_follow_btn {
75
+ display: inline-block;
76
+ background: 0 0;
77
+ border-style: solid;
78
+ border-width: 1px;
79
+ font-weight: 500;
80
+ outline: none;
81
+ overflow: hidden;
82
+ text-overflow: ellipsis;
83
+ white-space: nowrap;
84
+ -webkit-appearance: none;
85
+ vertical-align: text-bottom;
86
+ }
87
 
88
+ .wdi_feed_main_container .wdi_follow_btn:hover {
89
+ cursor: pointer;
90
+ }
91
 
92
+ .wdi_feed_main_container .wdi_pagination {
93
+ -webkit-user-select: none; /* Chrome/Safari */
94
+ -moz-user-select: none; /* Firefox */
95
+ -ms-user-select: none; /* IE10+ */
96
 
97
+ /* Rules below not implemented in browsers yet */
98
+ -o-user-select: none;
99
+ user-select: none;
100
+ }
101
 
102
+ .wdi_feed_main_container .wdi_pagination_ctrl {
103
+ display: inline-block;
104
+ }
105
 
106
+ .wdi_feed_main_container .wdi_pagination_ctrl:hover {
107
+ cursor: pointer;
108
+ }
109
 
110
+ .wdi_feed_main_container .wdi_filter_icon span {
111
+ display: block;
112
+ font-size: 25px;
113
+ color: white;
114
+ }
115
 
116
+ .wdi_feed_main_container .wdi_filter_icon span::before {
117
+ width: 20px;
118
+ height: 20px;
119
+ position: absolute;
120
+ opacity: 1;
121
+ right: 0;
122
+ left: 0;
123
+ top: 0;
124
+ bottom: 0;
125
+ margin: auto;
126
+ }
127
 
128
+ .wdi_photo_img {
129
+ position: relative;
130
+ overflow: hidden;
131
 
132
+ }
133
 
134
+ .wdi_photo_overlay {
135
+ width: 100%;
136
+ height: 100%;
137
+ position: absolute;
138
+ top: 0;
139
+ left: 0;
140
+ background-color: transparent;
141
+ transition: all 0.1s ease;
142
+ }
143
 
144
+ .wdi_thumb_icon i {
145
+ display: none;
146
+ transition: all 0.1s ease;
147
+ }
148
 
149
+ .wdi_photo_overlay:hover .wdi_thumb_icon i {
150
+ display: block;
151
+ }
152
 
153
+ .wdi_feed_main_container .fa {
 
 
 
154
  font-family: FontAwesome !important;
155
  font-style: normal;
156
  }
157
 
 
 
158
  /**************************************************************/
159
 
 
 
160
  /**
161
  * lightbox styles
162
  */
163
 
164
+ .wdi_spider_popup_loading {
 
 
165
  /*background: url("../images/ajax_loader.gif") no-repeat scroll 0 0 / 50px 50px rgba(0, 0, 0, 0);*/
166
  background-image: url("../images/ajax_loader.png");
167
  background-color: rgba(0, 0, 0, 0);
185
  animation: spin 2.5s infinite linear;
186
  }
187
 
188
+ .wdi_spider_popup_overlay {
189
  cursor: pointer;
190
  background-color: rgba(0, 0, 0, 0.5);
191
  display: none;
197
  z-index: 10100;
198
  }
199
 
 
 
200
  div[id^="wdi_container"] p {
201
  padding: 0 !important;
202
  margin: 0 !important;
284
  right: 20px;
285
  }
286
 
 
287
  #wdi_spider_popup_left,
288
  #wdi_spider_popup_right {
289
  background: transparent url("../images/blank.gif") repeat scroll 0 0;
311
  z-index: 10135;
312
  }
313
 
314
+ .wdi_image_info_container1 {
315
  height: 100%;
316
  margin: 0 auto;
317
  position: absolute;
318
  width: 100%;
319
  }
320
 
 
321
  .wdi_image_info_container2 {
322
  display: table;
323
  height: 100%;
336
  position: relative;
337
  }
338
 
339
+ .wdi_image_info {
340
  display: inline-block;
341
  position: relative;
342
  text-decoration: none;
348
  text-align: center;
349
  }
350
 
351
+ .wdi_feed_item[wdi_type="slideshow"] .fa-clone {
352
 
353
  -webkit-transform: rotate(180deg);
354
  -moz-transform: rotate(180deg);
357
  transform: rotate(180deg);
358
  }
359
 
360
+ .wdi_js_error {
 
361
  text-align: center;
362
 
363
  -webkit-animation-name: wdi_js_error;
407
  -o-transform: scale(1);
408
  transform: scale(1);
409
  }
410
+ }
411
+
412
+ /* layout specific styles */
413
+
414
+ /* thumbnails */
415
+ /* .wdi_layout_th */
416
+
417
+ .wdi_layout_th .wdi_feed_container {
418
+ min-width: 160px;
419
+ margin: 0 auto;
420
+ }
421
+
422
+ .wdi_layout_th .wdi_feed_wrapper {
423
+ margin: 0 auto;
424
+ }
425
+
426
+ .wdi_layout_th .wdi_header_wrapper {
427
+ display: inline-table;
428
+ }
429
+
430
+ .wdi_layout_th .wdi_header_img_wrap, .wdi_users_img_wrap {
431
+ overflow: hidden;
432
+ }
433
+
434
+ .wdi_layout_th .wdi_header_text {
435
+ display: table-cell;
436
+ vertical-align: middle;
437
+ }
438
+
439
+ .wdi_layout_th .wdi_single_user {
440
+ display: inline-block;
441
+ float: left;
442
+ }
443
+
444
+ .wdi_layout_th .wdi_user_img_wrap {
445
+ display: inline-block;
446
+ float: left;
447
+ /*margin: 0 0 0 -100% !important;*/
448
+ position: relative;
449
+ }
450
+
451
+ .wdi_layout_th .wdi_header_user_text {
452
+ display: inline-block;
453
+ float: left;
454
+ width: 100%;
455
+
456
+ }
457
+
458
+ .wdi_layout_th .wdi_followers,
459
+ .wdi_layout_th .wdi_posts {
460
+ display: inline-block;
461
+ }
462
+
463
+ .wdi_layout_th .wdi_header_user_text h3 {
464
+ display: inline-block;
465
+ text-transform: none;
466
+ }
467
+
468
+ .wdi_layout_th .wdi_header_user_text h3:hover {
469
+ cursor: pointer;
470
+ }
471
+
472
+ .wdi_layout_th .wdi_user_img_wrap img {
473
+ overflow: hidden;
474
+ display: block;
475
+ }
476
+
477
+ .wdi_layout_th .wdi_header_user_text h3 {
478
+ margin-left: 10px;
479
+ margin-bottom: 0px;
480
+ }
481
+
482
+ .wdi_layout_th .wdi_media_info p {
483
+ margin-top: 0px;
484
+ margin-bottom: 0px;
485
+ }
486
+
487
+ .wdi_layout_th .wdi_user_controls {
488
+ margin-left: 0;
489
+ display: inline-block;
490
+ vertical-align: middle;
491
+ }
492
+
493
+ .wdi_layout_th .wdi_bio {
494
+ float: left;
495
+ }
496
+
497
+ .wdi_layout_th .wdi_followers {
498
+ margin-left: 5px;
499
+ }
500
+
501
+ .wdi_layout_th .wdi_filter_overlay {
502
+ position: absolute;
503
+ z-index: 2;
504
+ top: 0;
505
+ left: 0;
506
+ opacity: 0;
507
+ transition: opacity 0.1s ease;
508
+ }
509
+
510
+ .wdi_layout_th .wdi_filter_overlay:hover {
511
+ opacity: 0.9;
512
+ cursor: pointer;
513
+ }
514
+
515
+ .wdi_layout_th .wdi_photo_wrap {
516
+ position: relative;
517
+ display: inline-block;
518
+ overflow: hidden;
519
+ box-sizing: content-box;
520
+ }
521
+
522
+ .wdi_layout_th .wdi_photo_wrap:after {
523
+ padding-top: 100%;
524
+ display: block;
525
+ content: "";
526
+ }
527
+
528
+ .wdi_layout_th .wdi_photo_wrap_inner {
529
+ position: absolute;
530
+ top: 0;
531
+ bottom: 0;
532
+ left: 0;
533
+ right: 0;
534
+ }
535
+
536
+ .wdi_layout_th .wdi_photo_img {
537
+ width: 100%;
538
+ height: 100%;
539
+ }
540
+
541
+ .wdi_layout_th .wdi_img {
542
+ display: block;
543
+ position: absolute;
544
+ top: 50%;
545
+ left: 50%;
546
+ max-width: none;
547
+ -webkit-transform: translateX(-50%) translateY(-50%);
548
+ -moz-transform: translateX(-50%) translateY(-50%);
549
+ -ms-transform: translateX(-50%) translateY(-50%);
550
+ -o-transform: translateX(-50%) translateY(-50%);
551
+ transform: translateX(-50%) translateY(-50%);
552
+ }
553
+
554
+ .wdi_layout_th .wdi_shape_portrait .wdi_img,
555
+ .wdi_layout_th .wdi_shape_square .wdi_img {
556
+ width: 100%;
557
+ height: auto;
558
+ }
559
+
560
+ .wdi_layout_th .wdi_shape_landscape .wdi_img {
561
+ height: 100% !important; /*overwrite some themes styles*/
562
+ width: auto;
563
+ }
564
+
565
+ .wdi_layout_th .wdi_feed_item {
566
+ display: inline-block;
567
+ vertical-align: top;
568
+ overflow: hidden;
569
+ }
570
+
571
+ .wdi_layout_th .wdi_photo_meta {
572
+ text-align: center;
573
+ padding-bottom: 10px;
574
+ }
575
+
576
+ .wdi_layout_th .wdi_thumb_comments i,
577
+ .wdi_layout_th .wdi_thumb_likes i {
578
+ width: 100%;
579
+ }
580
+
581
+ .wdi_layout_th .wdi_photo_title {
582
+ text-overflow: ellipsis;
583
+ overflow: hidden;
584
+ white-space: nowrap;
585
+ width: 90%;
586
+ margin-left: 5%;
587
+ margin-right: 5%;
588
+ text-align: center;
589
+ }
590
+
591
+ .wdi_layout_th .wdi_photo_title:hover {
592
+ cursor: pointer;
593
+ }
594
+
595
+ @-moz-keyframes wdi_rotate {
596
+ from {
597
+ transform: rotate(0deg);
598
+ }
599
+ to {
600
+ transform: rotate(360deg);
601
+ }
602
+ }
603
+
604
+ @-o-keyframes wdi_rotate {
605
+ from {
606
+ transform: rotate(0deg);
607
+ }
608
+ to {
609
+ transform: rotate(360deg);
610
+ }
611
+ }
612
+
613
+ @-ms-keyframes wdi_rotate {
614
+ from {
615
+ transform: rotate(0deg);
616
+ }
617
+ to {
618
+ transform: rotate(360deg);
619
+ }
620
+ }
621
+
622
+ @-webkit-keyframes wdi_rotate {
623
+ from {
624
+ transform: rotate(0deg);
625
+ }
626
+ to {
627
+ transform: rotate(360deg);
628
+ }
629
+ }
630
+
631
+ @keyframes wdi_rotate {
632
+ from {
633
+ transform: rotate(0deg);
634
+ }
635
+ to {
636
+ transform: rotate(360deg);
637
+ }
638
+ }
639
+
640
+ .wdi_layout_th .wdi_load_more_spinner {
641
+ display: table-cell;
642
+ vertical-align: middle;
643
+
644
+ -webkit-animation: wdi_rotate 1.5s infinite;
645
+ -moz-animation: wdi_rotate 1.5s infinite;
646
+ -o-animation: wdi_rotate 1.5s infinite;
647
+ animation: wdi_rotate 1.5s infinite;
648
+ }
649
+
650
+ .wdi_layout_th .wdi_load_more,
651
+ .wdi_layout_th .wdi_spinner {
652
+ padding: 10px;
653
+ transition: all 0.2s ease;
654
+ }
655
+
656
+ .wdi_layout_th .wdi_load_more_wrap,
657
+ .wdi_layout_th .wdi_spinner_wrap {
658
+ display: inline-table;
659
+ box-sizing: border-box;
660
+ }
661
+
662
+ .wdi_layout_th .wdi_load_more_wrap_inner,
663
+ .wdi_layout_th .wdi_spinner_wrap_inner {
664
+ display: table-row;
665
+ text-align: center;
666
+ }
667
+
668
+ .wdi_layout_th .wdi_load_more_text {
669
+ display: table-cell;
670
+ vertical-align: middle;
671
+ }
672
+
673
+ .wdi_layout_th .wdi_load_more_text img {
674
+ float: left;
675
+ }
676
+
677
+ .wdi_layout_th .wdi_load_more_wrap:hover {
678
+ cursor: pointer;
679
+ }
680
+
681
+ .wdi_layout_th .wdi_photo_overlay:hover {
682
+ cursor: pointer;
683
+ }
684
+
685
+ .wdi_layout_th .wdi_photo_overlay i {
686
+ opacity: 1;
687
+ }
688
+
689
+ .wdi_layout_th .wdi_load_more_container {
690
+ display: inline-block;
691
+ }
692
+
693
+ /* masonry */
694
+ /* .wdi_layout_ms */
695
+
696
+ /* image browser */
697
+ /* .wdi_layout_ib */
698
+
699
+ .wdi_layout_ib .wdi_feed_container {
700
+ min-width: 160px;
701
+ margin: 0 auto;
702
+ }
703
+
704
+ .wdi_layout_ib .wdi_feed_wrapper {
705
+ margin: 0 auto;
706
+ }
707
+
708
+ .wdi_layout_ib .wdi_header_wrapper {
709
+ display: inline-table;
710
+ }
711
+
712
+ .wdi_layout_ib .wdi_header_img_wrap,
713
+ .wdi_layout_ib .wdi_users_img_wrap {
714
+ overflow: hidden;
715
+ }
716
+
717
+ .wdi_layout_ib .wdi_header_text {
718
+ display: table-cell;
719
+ vertical-align: middle;
720
+ }
721
+
722
+ .wdi_layout_ib .wdi_single_user {
723
+ display: inline-block;
724
+ float: left;
725
+ }
726
+
727
+ .wdi_layout_ib .wdi_user_img_wrap {
728
+ display: inline-block;
729
+ float: left;
730
+ /*margin: 0 0 0 -100% !important;*/
731
+ position: relative;
732
+ }
733
+
734
+ .wdi_layout_ib .wdi_header_user_text {
735
+ display: inline-block;
736
+ float: left;
737
+ width: 100%;
738
+
739
+ }
740
+
741
+ .wdi_layout_ib .wdi_followers,
742
+ .wdi_layout_ib .wdi_posts {
743
+ display: inline-block;
744
+ }
745
+
746
+ .wdi_layout_ib .wdi_header_user_text h3 {
747
+ display: inline-block;
748
+ text-transform: none;
749
+ }
750
+
751
+ .wdi_layout_ib .wdi_header_user_text h3:hover {
752
+ cursor: pointer;
753
+ }
754
+
755
+ .wdi_layout_ib .wdi_user_img_wrap img {
756
+ overflow: hidden;
757
+ display: block;
758
+ }
759
+
760
+ .wdi_layout_ib .wdi_header_user_text h3 {
761
+ margin-left: 10px;
762
+ margin-bottom: 0;
763
+ }
764
+
765
+ .wdi_layout_ib .wdi_media_info p {
766
+ margin-top: 0px;
767
+ margin-bottom: 0px;
768
+ }
769
+
770
+ .wdi_layout_ib .wdi_user_controls {
771
+ margin-left: 0;
772
+ display: inline-block;
773
+ vertical-align: middle;
774
+ }
775
+
776
+ .wdi_layout_ib .wdi_bio {
777
+ float: left;
778
+ }
779
+
780
+ .wdi_layout_ib .wdi_followers {
781
+ margin-left: 5px;
782
+ }
783
+
784
+ .wdi_layout_ib .wdi_filter_overlay {
785
+ position: absolute;
786
+ z-index: 2;
787
+ top: 0;
788
+ left: 0;
789
+ opacity: 0;
790
+ transition: opacity 0.1s ease;
791
+ }
792
+
793
+ .wdi_layout_ib .wdi_filter_overlay:hover {
794
+ opacity: 0.9;
795
+ cursor: pointer;
796
+ }
797
+
798
+ .wdi_layout_ib .wdi_photo_wrap {
799
+
800
+ overflow: hidden;
801
+ box-sizing: content-box;
802
+ }
803
+
804
+ .wdi_layout_ib .wdi_img {
805
+ width: 100%;
806
+ display: block;
807
+ }
808
+
809
+ .wdi_layout_ib .wdi_feed_item {
810
+ display: inline-block;
811
+ overflow: hidden;
812
+ }
813
+
814
+ .wdi_layout_ib .wdi_photo_meta {
815
+ text-align: center;
816
+ padding-bottom: 10px;
817
+ }
818
+
819
+ .wdi_layout_ib .wdi_thumb_comments i,
820
+ .wdi_layout_ib .wdi_thumb_likes i {
821
+ width: 100%;
822
+ }
823
+
824
+ .wdi_layout_ib .wdi_photo_title {
825
+ text-overflow: ellipsis;
826
+ overflow: hidden;
827
+ white-space: nowrap;
828
+ width: 90%;
829
+ margin-left: 5%;
830
+ margin-right: 5%;
831
+ text-align: center;
832
+ }
833
+
834
+ .wdi_layout_ib .wdi_photo_title:hover {
835
+ cursor: pointer;
836
+ }
837
+
838
+ .wdi_layout_ib .wdi_load_more {
839
+ padding: 10px;
840
+ transition: all 0.2s ease;
841
+ }
842
+
843
+ .wdi_layout_ib .wdi_load_more_wrap {
844
+ display: inline-table;
845
+ box-sizing: border-box;
846
+ }
847
+
848
+ .wdi_layout_ib .wdi_load_more_wrap_inner {
849
+ display: table-row;
850
+ text-align: center;
851
+ }
852
+
853
+ .wdi_layout_ib .wdi_load_more_text {
854
+ display: table-cell;
855
+ vertical-align: middle;
856
+ }
857
+
858
+ .wdi_layout_ib .wdi_load_more_text img {
859
+ float: left;
860
+ }
861
+
862
+ .wdi_layout_ib .wdi_load_more_wrap:hover {
863
+ cursor: pointer;
864
+ }
865
+
866
+ .wdi_layout_ib .wdi_photo_overlay:hover {
867
+ cursor: pointer;
868
+ }
869
+
870
+ .wdi_layout_ib .wdi_load_more_container {
871
+ display: inline-block;
872
+ }
873
+
874
+ /* blog style*/
875
+ /* .wdi_layout_bs */
frontend/views/WDIViewImageBrowser_view.php CHANGED
@@ -29,7 +29,7 @@ class WDIViewImageBrowser_view{
29
  $wdi_data_ajax = defined('DOING_AJAX') && DOING_AJAX ? 'data-wdi_ajax=1' : '';
30
 
31
  ?>
32
- <div id="wdi_feed_<?php echo $wdi_feed_counter?>" class="wdi_feed_main_container" <?php echo $wdi_data_ajax; ?> >
33
  <div id="wdi_spider_popup_loading_<?php echo $wdi_feed_counter?>" class="wdi_spider_popup_loading"></div>
34
  <div id="wdi_spider_popup_overlay_<?php echo $wdi_feed_counter?>" class="wdi_spider_popup_overlay" onclick="wdi_spider_destroypopup(1000)"></div>
35
  <div class="wdi_feed_container">
@@ -90,15 +90,12 @@ class WDIViewImageBrowser_view{
90
  ?>
91
  <style type="text/css">
92
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
93
- min-width: 160px;
94
  width: <?php echo $style['feed_container_width']?>;
95
- margin: 0 auto;
96
  background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
97
  border-bottom: 5px solid <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/;
98
  }
99
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_wrapper{
100
  width: <?php echo $style['feed_wrapper_width']?>; /*feed_wrapper_width,column number * image size*/
101
- margin: 0 auto;
102
  background-color: <?php echo $style['feed_wrapper_bg_color']?>;/*feed_wrapper_bg_color*/
103
  text-align: <?php echo $style['header_position']?>;/*header_position*/
104
  }
@@ -110,18 +107,13 @@ class WDIViewImageBrowser_view{
110
  text-align: <?php echo $style['header_position']?>;/*header_position*/
111
  display: <?php echo ($feed_row['display_header']=='1')? 'block' : 'none'?>; /*if display-header is true display:block*/
112
  }
113
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_wrapper {
114
- display: inline-table;
115
- }
116
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_img_wrap,#wdi_feed_<?php echo $wdi_feed_counter?> .wdi_users_img_wrap{
117
  height: <?php echo $style['header_img_width']?>px;/*header_img_width*/
118
  width: <?php echo $style['header_img_width']?>px;/*header_img_width*/
119
  border-radius: <?php echo $style['header_border_radius']?>px;/*header_img_width*/
120
- overflow: hidden;
121
  }
122
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_text{
123
- display: table-cell;
124
- vertical-align: middle;
125
  font-size: <?php echo $style['header_text_font_size']?>;
126
  font-style: <?php echo $style['header_text_font_style']?>;
127
  padding: <?php echo $style['header_text_padding']?>;/*header_text_padding*/
@@ -130,20 +122,12 @@ class WDIViewImageBrowser_view{
130
  line-height: <?php echo $style['header_img_width']?>px;/*header_img_width*/
131
  }
132
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_single_user{
133
- display: inline-block;
134
- float: left;
135
  padding-top: <?php echo $style['user_padding']?>;/*user_padding*/
136
  padding-bottom: <?php echo $style['user_padding']?>;/*user_padding*/
137
  padding-left: <?php echo $style['user_padding']?>;/*user_padding*/
138
  padding-right: <?php echo $style['user_padding']?>;/*user_padding*/
139
  }
140
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_img_wrap {
141
- display: inline-block;
142
- float: left;
143
- /*margin: 0 0 0 -100% !important;*/
144
- position: relative;
145
- }
146
- <?php
147
 
148
  if($feed_row['display_user_post_follow_number'] == '1'){
149
  $header_text_padding =(intval($style['user_img_width']) - intval($style['users_text_font_size']))/4;
@@ -152,9 +136,6 @@ class WDIViewImageBrowser_view{
152
  }
153
  ?>
154
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text {
155
- display: inline-block;
156
- float: left;
157
- width: 100%;
158
  padding-top: <?php echo $header_text_padding; ?>px;
159
 
160
  }
@@ -165,36 +146,22 @@ class WDIViewImageBrowser_view{
165
  margin-top: <?php echo (intval($style['user_img_width']) - intval($style['users_text_font_size']))/2?>px;
166
  }
167
 
168
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_followers,
169
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_posts {
170
- display: inline-block;
171
- }
172
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3{
173
- display: inline-block;
174
- text-transform: none;
175
  font-size: <?php echo $style['users_text_font_size']?>;
176
  font-style: <?php echo $style['users_text_font_style']?>;
177
  line-height: <?php echo $style['users_text_font_size']?>;
178
  color: <?php echo $style['users_text_color']?>;/*header_text_color*/;
179
  }
180
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3:hover
181
- {
182
- cursor: pointer;
183
- }
184
 
185
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_img_wrap img{
186
  height: <?php echo $style['user_img_width']?>px;
187
  width: <?php echo $style['user_img_width']?>px;
188
  border-radius: <?php echo $style['user_border_radius']?>px;
189
- overflow: hidden;
190
- display: block;
191
  }
192
 
193
 
194
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3{
195
- margin-left: 10px;
196
- margin-bottom: 0;
197
- }
198
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_media_info{
199
  /*display: inline-block;*/
200
  margin-left: <?php echo intval($style['user_img_width']) + 10;?>px;
@@ -202,95 +169,43 @@ class WDIViewImageBrowser_view{
202
  color: <?php echo $style['users_text_color']?>;/*header_text_color !mmm/ seperate*/
203
  display: <?php echo ($feed_row['display_user_post_follow_number'] == '1') ? 'block' : 'none'; ?>
204
  }
205
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_media_info p{
206
- margin-top: 0px;
207
- margin-bottom: 0px;
208
- }
209
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_controls{
210
- margin-left: 0;
211
- display: inline-block;
212
- vertical-align: middle;
213
- }
214
 
215
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_bio{
216
  color: <?php echo $style['users_text_color']?>;/*header_text_color*/
217
  font-size: <?php echo $style['user_description_font_size']?>;/*header_text_color*/
218
- float: left;
219
- }
220
-
221
-
222
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_followers{
223
- margin-left: 5px;
224
  }
225
 
226
 
227
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn{
228
- display: inline-block;
229
- background: 0 0;
230
  border-radius: <?php echo $style['follow_btn_border_radius']?>px;
231
- border-style: solid;
232
- border-width: 1px;
233
  font-size: <?php echo $style['follow_btn_font_size']?>px;
234
- font-weight: 500;
235
- outline: none;
236
- overflow: hidden;
237
  background-color: <?php echo $style['follow_btn_bg_color']?>;
238
- text-overflow: ellipsis;
239
- white-space: nowrap;
240
- -webkit-appearance: none;
241
  border-color: <?php echo $style['follow_btn_border_color']?>;
242
  color: <?php echo $style['follow_btn_text_color']?>;
243
  margin-left: <?php echo $style['follow_btn_margin']?>px;
244
- vertical-align: text-bottom;
245
  padding: 0 <?php echo $style['follow_btn_padding']?>px;
246
  }
247
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn:hover{
248
  border-color: <?php echo $style['follow_btn_border_hover_color']?>;
249
  color: <?php echo $style['follow_btn_text_hover_color']?>;
250
  background-color: <?php echo $style['follow_btn_background_hover_color']?>;
251
- cursor:pointer;
252
  }
253
 
254
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_overlay{
255
- position: absolute;
256
- z-index: 2;
257
- top: 0;
258
- left: 0;
259
  width: <?php echo $style['user_img_width'];?>px;/*user_img_width*/
260
  height: <?php echo $style['user_img_width'];?>px;/*user_img_width*/
261
- opacity: 0;
262
  border-radius: <?php echo $style['user_border_radius']?>px;/*user_img_width*/
263
  background-color: <?php echo $style['th_overlay_hover_color'];?>;
264
- transition: opacity 0.1s ease;
265
- }
266
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_overlay:hover{
267
- opacity: 0.9;
268
- cursor: pointer;
269
  }
 
270
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_icon span{
271
- display: block;
272
  width: <?php echo $style['user_img_width'];?>px;/*header_img_width*/
273
  height: <?php echo $style['user_img_width'];?>px;/*header_img_width*/
274
- font-size: 25px;
275
- color: white;
276
- }
277
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_icon span::before{
278
- width: 20px;
279
- height: 20px;
280
- position: absolute;
281
- opacity: 1;
282
- right:0;
283
- left: 0;
284
- top: 0;
285
- bottom: 0;
286
- margin: auto;
287
  }
288
 
289
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap {
290
  padding: <?php echo $style['image_browser_photo_wrap_padding']?>; /*photo_wrap_padding*/
291
 
292
- overflow: hidden;
293
- box-sizing:content-box;
294
  }
295
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap_inner{
296
  border: <?php echo $style['image_browser_photo_wrap_border_size']?> solid <?php echo $style['image_browser_photo_wrap_border_color']?>;/*photo_wrap_border_size,photo_wrap_border_color*/
@@ -299,23 +214,14 @@ class WDIViewImageBrowser_view{
299
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_img{
300
  border-radius: <?php echo $style['image_browser_photo_img_border_radius']?>;/*photo_img_border_radius*/
301
  }
302
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_img{
303
- width: 100%;
304
- display: block;
305
- }
306
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item{
307
  width: <?php echo $colNum.'%'?>;/*thumbnail_size*/
308
- display: inline-block;
309
- overflow: hidden;
310
  }
311
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_meta {
312
  background-color: <?php echo $style['image_browser_photo_meta_bg_color']?>;/*photo_meta_bg_color*/
313
- text-align: center;
314
- padding-bottom: 10px;
315
  }
316
 
317
-
318
-
319
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_likes{
320
  width: <?php echo ($style['image_browser_photo_meta_one_line']=='1')? '50%' : '100%' ?>;/*photo_meta_one_line==false else 100%*/
321
  float: <?php echo ($style['image_browser_photo_meta_one_line']=='1')? 'left' : 'none'?>;/*photo_meta_one_line==true else float none*/
@@ -330,86 +236,51 @@ class WDIViewImageBrowser_view{
330
  color: <?php echo $style['image_browser_comment_text_color']?>;/*comment_text_color*/
331
 
332
  }
333
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_comments i,#wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_likes i{
334
- width: 100%;
335
- }
336
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title {
337
- text-overflow: ellipsis;
338
- overflow: hidden;
339
- white-space: nowrap;
340
- width: 90%;
341
- margin-left: 5%;
342
- margin-right: 5%;
343
  font-size: <?php echo $style['image_browser_photo_caption_font_size']?>;/*photo_caption_font_size*/
344
  color: <?php echo $style['image_browser_photo_caption_color']?>;/*photo_caption_color*/
345
- text-align: center;
346
  }
347
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title:hover{
348
  color: <?php echo $style['image_browser_photo_caption_hover_color']?>;
349
- cursor: pointer;
350
  }
351
 
352
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more{
353
- padding: 10px;
354
  background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
355
  text-align: <?php echo $style['load_more_position']?>;/*load_more_position*/
356
- transition: all 0.2s ease;
357
  }
358
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap{
359
  padding: <?php echo $style['load_more_padding']?>;/*load_more_padding*/
360
  background-color: <?php echo $style['load_more_bg_color']?>;/*load_more_bg_color*/
361
- display: inline-table;
362
  border-radius: <?php echo $style['load_more_border_radius']?>;/*load_more_border_radius*/
363
  height: <?php echo $style['load_more_height']?>;/*load_more_height*/
364
  width: <?php echo $style['load_more_width']?>;/*load_more_width*/
365
  border: <?php echo $style['load_more_border_size']?> solid <?php echo $style['load_more_border_color']?>;/*load_more_border_size, load_more_border_color*/;
366
- box-sizing: border-box;
367
- }
368
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap_inner{
369
- display: table-row;
370
- text-align: center;
371
  }
 
372
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text{
373
- display: table-cell;
374
- vertical-align: middle;
375
  color: <?php echo $style['load_more_text_color']?>;/*load_more_text_color*/
376
  font-size: <?php echo $style['load_more_text_font_size']?>;/*load_more_text_font_size*/
377
  }
378
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text img{
379
  height: <?php echo $style['load_more_height']?>;/*load_more_height*/
380
  width: <?php echo $style['load_more_height']?>;/*load_more_height*/
381
- float: left;
382
  }
383
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap:hover{
384
- cursor: pointer;
385
  background-color: <?php echo $style['load_more_wrap_hover_color']?>;/*load_more_wrap_hover_color*/
386
  }
387
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination{
388
- -webkit-user-select: none; /* Chrome/Safari */
389
- -moz-user-select: none; /* Firefox */
390
- -ms-user-select: none; /* IE10+ */
391
-
392
- /* Rules below not implemented in browsers yet */
393
- -o-user-select: none;
394
- user-select: none;
395
  text-align: <?php echo $style['pagination_position']?>;/*load_more_position*/
396
  color: <?php echo $style['pagination_ctrl_color']?>;/*pagination_ctrl_color*/
397
  font-size: <?php echo $style['pagination_size']?>;/*pagination_size*/
398
  }
399
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl{
400
  margin: <?php echo $style['pagination_ctrl_margin']?>;
401
- display: inline-block;
402
  }
403
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl:hover{
404
- cursor: pointer;
405
  color: <?php echo $style['pagination_ctrl_hover_color']?>;
406
  }
407
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_overlay:hover{
408
- cursor: pointer;
409
- }
410
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_container{
411
- display: inline-block;
412
- }
413
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_active_bg{
414
  background-color: <?php echo $style['active_filter_bg_color'];?>;
415
  }
29
  $wdi_data_ajax = defined('DOING_AJAX') && DOING_AJAX ? 'data-wdi_ajax=1' : '';
30
 
31
  ?>
32
+ <div id="wdi_feed_<?php echo $wdi_feed_counter?>" class="wdi_feed_main_container wdi_layout_ib" <?php echo $wdi_data_ajax; ?> >
33
  <div id="wdi_spider_popup_loading_<?php echo $wdi_feed_counter?>" class="wdi_spider_popup_loading"></div>
34
  <div id="wdi_spider_popup_overlay_<?php echo $wdi_feed_counter?>" class="wdi_spider_popup_overlay" onclick="wdi_spider_destroypopup(1000)"></div>
35
  <div class="wdi_feed_container">
90
  ?>
91
  <style type="text/css">
92
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
 
93
  width: <?php echo $style['feed_container_width']?>;
 
94
  background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
95
  border-bottom: 5px solid <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/;
96
  }
97
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_wrapper{
98
  width: <?php echo $style['feed_wrapper_width']?>; /*feed_wrapper_width,column number * image size*/
 
99
  background-color: <?php echo $style['feed_wrapper_bg_color']?>;/*feed_wrapper_bg_color*/
100
  text-align: <?php echo $style['header_position']?>;/*header_position*/
101
  }
107
  text-align: <?php echo $style['header_position']?>;/*header_position*/
108
  display: <?php echo ($feed_row['display_header']=='1')? 'block' : 'none'?>; /*if display-header is true display:block*/
109
  }
110
+
 
 
111
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_img_wrap,#wdi_feed_<?php echo $wdi_feed_counter?> .wdi_users_img_wrap{
112
  height: <?php echo $style['header_img_width']?>px;/*header_img_width*/
113
  width: <?php echo $style['header_img_width']?>px;/*header_img_width*/
114
  border-radius: <?php echo $style['header_border_radius']?>px;/*header_img_width*/
 
115
  }
116
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_text{
 
 
117
  font-size: <?php echo $style['header_text_font_size']?>;
118
  font-style: <?php echo $style['header_text_font_style']?>;
119
  padding: <?php echo $style['header_text_padding']?>;/*header_text_padding*/
122
  line-height: <?php echo $style['header_img_width']?>px;/*header_img_width*/
123
  }
124
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_single_user{
 
 
125
  padding-top: <?php echo $style['user_padding']?>;/*user_padding*/
126
  padding-bottom: <?php echo $style['user_padding']?>;/*user_padding*/
127
  padding-left: <?php echo $style['user_padding']?>;/*user_padding*/
128
  padding-right: <?php echo $style['user_padding']?>;/*user_padding*/
129
  }
130
+ <?php
 
 
 
 
 
 
131
 
132
  if($feed_row['display_user_post_follow_number'] == '1'){
133
  $header_text_padding =(intval($style['user_img_width']) - intval($style['users_text_font_size']))/4;
136
  }
137
  ?>
138
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text {
 
 
 
139
  padding-top: <?php echo $header_text_padding; ?>px;
140
 
141
  }
146
  margin-top: <?php echo (intval($style['user_img_width']) - intval($style['users_text_font_size']))/2?>px;
147
  }
148
 
149
+
 
 
 
150
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3{
 
 
151
  font-size: <?php echo $style['users_text_font_size']?>;
152
  font-style: <?php echo $style['users_text_font_style']?>;
153
  line-height: <?php echo $style['users_text_font_size']?>;
154
  color: <?php echo $style['users_text_color']?>;/*header_text_color*/;
155
  }
 
 
 
 
156
 
157
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_img_wrap img{
158
  height: <?php echo $style['user_img_width']?>px;
159
  width: <?php echo $style['user_img_width']?>px;
160
  border-radius: <?php echo $style['user_border_radius']?>px;
 
 
161
  }
162
 
163
 
164
+
 
 
 
165
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_media_info{
166
  /*display: inline-block;*/
167
  margin-left: <?php echo intval($style['user_img_width']) + 10;?>px;
169
  color: <?php echo $style['users_text_color']?>;/*header_text_color !mmm/ seperate*/
170
  display: <?php echo ($feed_row['display_user_post_follow_number'] == '1') ? 'block' : 'none'; ?>
171
  }
 
 
 
 
 
 
 
 
 
172
 
173
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_bio{
174
  color: <?php echo $style['users_text_color']?>;/*header_text_color*/
175
  font-size: <?php echo $style['user_description_font_size']?>;/*header_text_color*/
 
 
 
 
 
 
176
  }
177
 
178
 
179
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn{
 
 
180
  border-radius: <?php echo $style['follow_btn_border_radius']?>px;
 
 
181
  font-size: <?php echo $style['follow_btn_font_size']?>px;
 
 
 
182
  background-color: <?php echo $style['follow_btn_bg_color']?>;
 
 
 
183
  border-color: <?php echo $style['follow_btn_border_color']?>;
184
  color: <?php echo $style['follow_btn_text_color']?>;
185
  margin-left: <?php echo $style['follow_btn_margin']?>px;
 
186
  padding: 0 <?php echo $style['follow_btn_padding']?>px;
187
  }
188
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn:hover{
189
  border-color: <?php echo $style['follow_btn_border_hover_color']?>;
190
  color: <?php echo $style['follow_btn_text_hover_color']?>;
191
  background-color: <?php echo $style['follow_btn_background_hover_color']?>;
 
192
  }
193
 
194
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_overlay{
 
 
 
 
195
  width: <?php echo $style['user_img_width'];?>px;/*user_img_width*/
196
  height: <?php echo $style['user_img_width'];?>px;/*user_img_width*/
 
197
  border-radius: <?php echo $style['user_border_radius']?>px;/*user_img_width*/
198
  background-color: <?php echo $style['th_overlay_hover_color'];?>;
 
 
 
 
 
199
  }
200
+
201
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_icon span{
 
202
  width: <?php echo $style['user_img_width'];?>px;/*header_img_width*/
203
  height: <?php echo $style['user_img_width'];?>px;/*header_img_width*/
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  }
205
 
206
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap {
207
  padding: <?php echo $style['image_browser_photo_wrap_padding']?>; /*photo_wrap_padding*/
208
 
 
 
209
  }
210
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap_inner{
211
  border: <?php echo $style['image_browser_photo_wrap_border_size']?> solid <?php echo $style['image_browser_photo_wrap_border_color']?>;/*photo_wrap_border_size,photo_wrap_border_color*/
214
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_img{
215
  border-radius: <?php echo $style['image_browser_photo_img_border_radius']?>;/*photo_img_border_radius*/
216
  }
217
+
 
 
 
218
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item{
219
  width: <?php echo $colNum.'%'?>;/*thumbnail_size*/
 
 
220
  }
221
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_meta {
222
  background-color: <?php echo $style['image_browser_photo_meta_bg_color']?>;/*photo_meta_bg_color*/
 
 
223
  }
224
 
 
 
225
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_likes{
226
  width: <?php echo ($style['image_browser_photo_meta_one_line']=='1')? '50%' : '100%' ?>;/*photo_meta_one_line==false else 100%*/
227
  float: <?php echo ($style['image_browser_photo_meta_one_line']=='1')? 'left' : 'none'?>;/*photo_meta_one_line==true else float none*/
236
  color: <?php echo $style['image_browser_comment_text_color']?>;/*comment_text_color*/
237
 
238
  }
239
+
 
 
240
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title {
 
 
 
 
 
 
241
  font-size: <?php echo $style['image_browser_photo_caption_font_size']?>;/*photo_caption_font_size*/
242
  color: <?php echo $style['image_browser_photo_caption_color']?>;/*photo_caption_color*/
 
243
  }
244
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title:hover{
245
  color: <?php echo $style['image_browser_photo_caption_hover_color']?>;
 
246
  }
247
 
248
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more{
 
249
  background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
250
  text-align: <?php echo $style['load_more_position']?>;/*load_more_position*/
 
251
  }
252
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap{
253
  padding: <?php echo $style['load_more_padding']?>;/*load_more_padding*/
254
  background-color: <?php echo $style['load_more_bg_color']?>;/*load_more_bg_color*/
 
255
  border-radius: <?php echo $style['load_more_border_radius']?>;/*load_more_border_radius*/
256
  height: <?php echo $style['load_more_height']?>;/*load_more_height*/
257
  width: <?php echo $style['load_more_width']?>;/*load_more_width*/
258
  border: <?php echo $style['load_more_border_size']?> solid <?php echo $style['load_more_border_color']?>;/*load_more_border_size, load_more_border_color*/;
 
 
 
 
 
259
  }
260
+
261
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text{
 
 
262
  color: <?php echo $style['load_more_text_color']?>;/*load_more_text_color*/
263
  font-size: <?php echo $style['load_more_text_font_size']?>;/*load_more_text_font_size*/
264
  }
265
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text img{
266
  height: <?php echo $style['load_more_height']?>;/*load_more_height*/
267
  width: <?php echo $style['load_more_height']?>;/*load_more_height*/
 
268
  }
269
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap:hover{
 
270
  background-color: <?php echo $style['load_more_wrap_hover_color']?>;/*load_more_wrap_hover_color*/
271
  }
272
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination{
 
 
 
 
 
 
 
273
  text-align: <?php echo $style['pagination_position']?>;/*load_more_position*/
274
  color: <?php echo $style['pagination_ctrl_color']?>;/*pagination_ctrl_color*/
275
  font-size: <?php echo $style['pagination_size']?>;/*pagination_size*/
276
  }
277
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl{
278
  margin: <?php echo $style['pagination_ctrl_margin']?>;
 
279
  }
280
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl:hover{
 
281
  color: <?php echo $style['pagination_ctrl_hover_color']?>;
282
  }
283
+
 
 
 
 
 
284
  #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_active_bg{
285
  background-color: <?php echo $style['active_filter_bg_color'];?>;
286
  }
frontend/views/WDIViewThumbnails_view.php CHANGED
@@ -1,5 +1,7 @@
1
  <?php
2
- class WDIViewThumbnails_view{
 
 
3
  ////////////////////////////////////////////////////////////////////////////////////////
4
  // Events //
5
  ////////////////////////////////////////////////////////////////////////////////////////
@@ -9,555 +11,431 @@ class WDIViewThumbnails_view{
9
  ////////////////////////////////////////////////////////////////////////////////////////
10
  // Variables //
11
  ////////////////////////////////////////////////////////////////////////////////////////
12
- private $model;
13
  ////////////////////////////////////////////////////////////////////////////////////////
14
  // Constructor & Destructor //
15
  ////////////////////////////////////////////////////////////////////////////////////////
16
- public function __construct($model) {
17
- $this->model = $model;
18
- }
 
19
  ////////////////////////////////////////////////////////////////////////////////////////
20
  // Public Methods //
21
  ////////////////////////////////////////////////////////////////////////////////////////
22
- public function display(){
23
-
24
- $this->pass_feed_data_to_js();
25
- $feed_row = $this->model->get_feed_row();
26
- $wdi_feed_counter = $this->model->wdi_feed_counter;
27
- $this->generate_feed_styles($feed_row);
28
- $style = $this->model->theme_row;
29
-
30
- $wdi_data_ajax = defined('DOING_AJAX') && DOING_AJAX ? 'data-wdi_ajax=1' : '';
31
-
32
- ?>
33
-
34
- <div id="wdi_feed_<?php echo $wdi_feed_counter?>" class="wdi_feed_main_container" <?php echo $wdi_data_ajax; ?> >
35
- <div id="wdi_spider_popup_loading_<?php echo $wdi_feed_counter?>" class="wdi_spider_popup_loading"></div>
36
- <div id="wdi_spider_popup_overlay_<?php echo $wdi_feed_counter?>" class="wdi_spider_popup_overlay" onclick="wdi_spider_destroypopup(1000)"></div>
37
- <div class="wdi_feed_container">
38
- <div class="wdi_feed_info">
39
- <div id="wdi_feed_<?php echo $wdi_feed_counter?>_header" class='wdi_feed_header'></div>
40
- <div id="wdi_feed_<?php echo $wdi_feed_counter?>_users" class='wdi_feed_users'></div>
41
- </div>
42
- <?php
43
- if($feed_row['feed_display_view']==='pagination' && $style['pagination_position_vert']==='top'){
44
- ?><div id="wdi_pagination" class="wdi_pagination"><div class="wdi_pagination_container"><i id="wdi_first_page" title="<?php echo __('First Page',"wd-instagram-feed")?>" class="fa fa-step-backward wdi_pagination_ctrl wdi_disabled"></i><i id="wdi_prev" title="<?php echo __('Previous Page',"wd-instagram-feed")?>" class="fa fa-arrow-left wdi_pagination_ctrl"></i><i id="wdi_current_page" class="wdi_pagination_ctrl" style="font-style:normal">1</i><i id="wdi_next" title="<?php echo __('Next Page',"wd-instagram-feed")?>" class="fa fa-arrow-right wdi_pagination_ctrl"></i> <i id="wdi_last_page" title="<?php echo __('Last Page',"wd-instagram-feed")?>" class="fa fa-step-forward wdi_pagination_ctrl wdi_disabled"></i></div></div> <?php
45
- }
46
- ?>
47
- <div class="wdi_feed_wrapper <?php echo 'wdi_col_'.$feed_row['number_of_columns']?>" wdi-res='<?php echo 'wdi_col_'.$feed_row['number_of_columns']?>'></div>
48
- <div class="wdi_clear"></div>
49
-
50
- <?php switch($feed_row['feed_display_view']){
51
- case 'load_more_btn':{
52
- ?>
53
- <div class="wdi_load_more wdi_hidden"><div class="wdi_load_more_container"><div class="wdi_load_more_wrap"><div class="wdi_load_more_wrap_inner"><div class="wdi_load_more_text"><?php echo __('Load More',"wd-instagram-feed");?></div></div></div></div></div>
54
- <div class="wdi_spinner "><div class="wdi_spinner_container"><div class="wdi_spinner_wrap"><div class="wdi_spinner_wrap_inner"><i class="wdi_load_more_spinner fa fa-spinner"></i></div></div></div></div>
55
- <?php
56
- break;
57
- }
58
- case 'pagination':{
59
- if($style['pagination_position_vert']==='bottom'){
60
- ?><div id="wdi_pagination" class="wdi_pagination"><div class="wdi_pagination_container"><i id="wdi_first_page" title="<?php echo __('First Page',"wd-instagram-feed")?>" class="fa fa-step-backward wdi_disabled wdi_pagination_ctrl"></i><i id="wdi_prev" title="<?php echo __('Previous Page',"wd-instagram-feed")?>" class="fa fa-arrow-left wdi_pagination_ctrl"></i><i id="wdi_current_page" class="wdi_pagination_ctrl" style="font-style:normal">1</i><i id="wdi_next" title="<?php echo __('Next Page',"wd-instagram-feed")?>" class="fa fa-arrow-right wdi_pagination_ctrl"></i> <i id="wdi_last_page" title="<?php echo __('Last Page',"wd-instagram-feed")?>" class="fa fa-step-forward wdi_pagination_ctrl wdi_disabled"></i></div></div> <?php
61
- }
62
-
63
- break;
64
- }
65
- case 'infinite_scroll':{
66
- ?><div id="wdi_infinite_scroll" class="wdi_infinite_scroll"></div> <?php
67
- }
68
- }
69
- wdi_feed_frontend_messages();
70
- ?>
71
- </div>
72
- </div>
73
- <?php
74
 
75
- }
76
- public function pass_feed_data_to_js(){
77
- global $wdi_options;
78
- $feed_row = $this->model->get_feed_row();
79
- $wdi_feed_counter = $this->model->wdi_feed_counter;
80
- $feed_row['access_token'] = $wdi_options['wdi_access_token'];
81
- $feed_row['wdi_feed_counter'] = $wdi_feed_counter;
82
 
 
83
 
84
- wp_localize_script("wdi_frontend", 'wdi_feed_'.$wdi_feed_counter,array('feed_row'=>$feed_row,'data'=>array(),'usersData'=>array(),'dataCount'=>0));
85
- wp_localize_script("wdi_frontend", 'wdi_front',array('feed_counter'=>$wdi_feed_counter));
86
- }
87
- public function generate_feed_styles($feed_row){
88
- $style = $this->model->theme_row;
89
- $wdi_feed_counter = $this->model->wdi_feed_counter;
90
- $colNum = (100/$feed_row['number_of_columns']);
91
- if($style['header_position'] == 'center'){
92
- $headerfloatPos = 'left';
93
- }else{
94
- $headerfloatPos = $style['header_position'];
95
- }
96
- ?>
97
- <style type="text/css">
98
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
99
- min-width: 160px;
100
- width: <?php echo $style['feed_container_width']?>;
101
- margin: 0 auto;
102
- background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
103
- border-bottom: 5px solid <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/;
104
- }
105
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_wrapper{
106
- width: <?php echo $style['feed_wrapper_width']?>; /*feed_wrapper_width,column number * image size*/
107
- margin: 0 auto;
108
- background-color: <?php echo $style['feed_wrapper_bg_color']?>;/*feed_wrapper_bg_color*/
109
- text-align: <?php echo $style['header_position']?>;/*header_position*/
110
- }
111
-
112
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_header{
113
- margin: <?php echo $style['header_margin']?>;/*header_margin*/
114
- padding: <?php echo $style['header_padding']?>;/*header_padding*/
115
- border: <?php echo $style['header_border_size']?> solid <?php echo $style['header_border_color']?>;/*header_border_size, header_border_color*/
116
- text-align: <?php echo $style['header_position']?>;/*header_position*/
117
- display: <?php echo ($feed_row['display_header']=='1')? 'block' : 'none'?>; /*if display-header is true display:block*/
118
- }
119
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_wrapper {
120
- display: inline-table;
121
- }
122
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_img_wrap,.wdi_users_img_wrap{
123
- height: <?php echo $style['header_img_width']?>px;/*header_img_width*/
124
- width: <?php echo $style['header_img_width']?>px;/*header_img_width*/
125
- border-radius: <?php echo $style['header_border_radius']?>px;/*header_img_width*/
126
- overflow: hidden;
127
- }
128
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_text{
129
- display: table-cell;
130
- vertical-align: middle;
131
- font-size: <?php echo $style['header_text_font_size']?>;
132
- font-style: <?php echo $style['header_text_font_style']?>;
133
- padding: <?php echo $style['header_text_padding']?>;/*header_text_padding*/
134
- color: <?php echo $style['header_text_color']?>;/*header_text_color*/
135
- font-weight: <?php echo $style['header_font_weight']?>;/*header_font_weight*/
136
- line-height: <?php echo $style['header_img_width']?>px;/*header_img_width*/
137
- }
138
-
139
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_single_user{
140
- display: inline-block;
141
- float: left;
142
- padding-top: <?php echo $style['user_padding']?>;/*user_padding*/
143
- padding-bottom: <?php echo $style['user_padding']?>;/*user_padding*/
144
- padding-left: <?php echo $style['user_padding']?>;/*user_padding*/
145
- padding-right: <?php echo $style['user_padding']?>;/*user_padding*/
146
- }
147
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_img_wrap {
148
- display: inline-block;
149
- float: left;
150
- /*margin: 0 0 0 -100% !important;*/
151
- position: relative;
152
- }
153
- <?php
154
-
155
- if($feed_row['display_user_post_follow_number'] == '1'){
156
- $header_text_padding =(intval($style['user_img_width']) - intval($style['users_text_font_size']))/4;
157
- }else{
158
- $header_text_padding =(intval($style['user_img_width']) - intval($style['users_text_font_size']))/2;
159
- }
160
- ?>
161
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text {
162
- display: inline-block;
163
- float: left;
164
- width: 100%;
165
- padding-top: <?php echo $header_text_padding; ?>px;
166
-
167
- }
168
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3 {
169
- margin-top: <?php echo $header_text_padding ?>px;
170
- }
171
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_hashtag h3{
172
- margin-top: <?php echo (intval($style['user_img_width']) - intval($style['users_text_font_size']))/2?>px;
173
- }
174
-
175
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_followers,
176
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_posts {
177
- display: inline-block;
178
- }
179
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3{
180
- display: inline-block;
181
- text-transform: none;
182
- font-size: <?php echo $style['users_text_font_size']?>;
183
- font-style: <?php echo $style['users_text_font_style']?>;
184
- line-height: <?php echo $style['users_text_font_size']?>;
185
- color: <?php echo $style['users_text_color']?>;/*header_text_color*/;
186
- }
187
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3:hover
188
- {
189
- cursor: pointer;
190
- }
191
-
192
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_img_wrap img{
193
- height: <?php echo $style['user_img_width']?>px;
194
- width: <?php echo $style['user_img_width']?>px;
195
- border-radius: <?php echo $style['user_border_radius']?>px;
196
- overflow: hidden;
197
- display: block;
198
- }
199
-
200
-
201
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3{
202
- margin-left: 10px;
203
- margin-bottom: 0px;
204
- }
205
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_media_info{
206
- /*display: inline-block;*/
207
- margin-left: <?php echo intval($style['user_img_width']) + 10;?>px;
208
- line-height: <?php echo $style['users_text_font_size']?>;
209
- color: <?php echo $style['users_text_color']?>;/*header_text_color !mmm/ seperate*/
210
- display: <?php echo ($feed_row['display_user_post_follow_number'] == '1') ? 'block' : 'none'; ?>
211
- }
212
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_media_info p{
213
- margin-top: 0px;
214
- margin-bottom: 0px;
215
- }
216
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_controls{
217
- margin-left: 0;
218
- display: inline-block;
219
- vertical-align: middle;
220
- }
221
-
222
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_bio{
223
- color: <?php echo $style['users_text_color']?>;/*header_text_color*/
224
- font-size: <?php echo $style['user_description_font_size']?>;/*header_text_color*/
225
- float: left;
226
- }
227
-
228
-
229
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_followers{
230
- margin-left: 5px;
231
- }
232
-
233
-
234
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn{
235
- display: inline-block;
236
- background: 0 0;
237
- border-radius: <?php echo $style['follow_btn_border_radius']?>px;
238
- border-style: solid;
239
- border-width: 1px;
240
- font-size: <?php echo $style['follow_btn_font_size']?>px;
241
- font-weight: 500;
242
- outline: none;
243
- overflow: hidden;
244
- background-color: <?php echo $style['follow_btn_bg_color']?>;
245
- text-overflow: ellipsis;
246
- white-space: nowrap;
247
- -webkit-appearance: none;
248
- border-color: <?php echo $style['follow_btn_border_color']?>;
249
- color: <?php echo $style['follow_btn_text_color']?>;
250
- margin-left: <?php echo $style['follow_btn_margin']?>px;
251
- vertical-align: text-bottom;
252
- padding: 0 <?php echo $style['follow_btn_padding']?>px;
253
- }
254
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn:hover{
255
- border-color: <?php echo $style['follow_btn_border_hover_color']?>;
256
- color: <?php echo $style['follow_btn_text_hover_color']?>;
257
- background-color: <?php echo $style['follow_btn_background_hover_color']?>;
258
- cursor:pointer;
259
- }
260
-
261
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_overlay{
262
- position: absolute;
263
- z-index: 2;
264
- top: 0;
265
- left: 0;
266
- width: <?php echo $style['user_img_width'];?>px;/*user_img_width*/
267
- height: <?php echo $style['user_img_width'];?>px;/*user_img_width*/
268
- opacity: 0;
269
- border-radius: <?php echo $style['user_border_radius']?>px;/*user_img_width*/
270
- background-color: <?php echo $style['th_overlay_hover_color'];?>;
271
- transition: opacity 0.1s ease;
272
- }
273
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_overlay:hover{
274
- opacity: 0.9;
275
- cursor: pointer;
276
- }
277
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_icon span{
278
- display: block;
279
- width: <?php echo $style['user_img_width'];?>px;/*header_img_width*/
280
- height: <?php echo $style['user_img_width'];?>px;/*header_img_width*/
281
- font-size: 25px;
282
- color: white;
283
- }
284
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_icon span::before{
285
- width: 20px;
286
- height: 20px;
287
- position: absolute;
288
- opacity: 1;
289
- right:0;
290
- left: 0;
291
- top: 0;
292
- bottom: 0;
293
- margin: auto;
294
- }
295
-
296
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap {
297
- padding: <?php echo $style['th_photo_wrap_padding']?>; /*photo_wrap_padding*/
298
- position: relative;
299
- width: calc(100% - 2*<?php echo $style['th_photo_wrap_padding']?>);
300
- display: inline-block;
301
- box-sizing:content-box;
302
- overflow: hidden;
303
- }
304
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap:after{
305
- padding-top: 100%;
306
- display: block;
307
- content: "";
308
- }
309
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap_inner{
310
- position: absolute;
311
- top: 0;
312
- bottom: 0;
313
- left: 0;
314
- right: 0;
315
- border: <?php echo $style['th_photo_wrap_border_size']?> solid <?php echo $style['th_photo_wrap_border_color']?>;/*photo_wrap_border_size,photo_wrap_border_color*/
316
- background-color: <?php echo $style['th_photo_wrap_bg_color']?>;/*photo_wrap_bg_color*/
317
- }
318
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_img{
319
- border-radius: <?php echo $style['th_photo_img_border_radius']?>;/*photo_img_border_radius*/
320
- width: 100%;
321
- height: 100%;
322
- }
323
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_img{
324
- display: block;
325
- position: absolute;
326
- top: 50%;
327
- left: 50%;
328
- max-width:none;
329
- -webkit-transform: translateX(-50%) translateY(-50%);
330
- -moz-transform: translateX(-50%) translateY(-50%);
331
- -ms-transform: translateX(-50%) translateY(-50%);
332
- -o-transform: translateX(-50%) translateY(-50%);
333
- transform: translateX(-50%) translateY(-50%);
334
- }
335
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_shape_portrait .wdi_img,
336
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_shape_square .wdi_img{
337
- width: 100%;
338
- height:auto;
339
- }
340
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_shape_landscape .wdi_img{
341
- height: 100% !important; /*overwrite some themes styles*/
342
- width:auto;
343
- }
344
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item{
345
- width: <?php echo $colNum.'%'?>;/*thumbnail_size*/
346
- display: inline-block;
347
- vertical-align: top;
348
- overflow: hidden;
349
- }
350
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_meta {
351
- background-color: <?php echo $style['th_photo_meta_bg_color']?>;/*photo_meta_bg_color*/
352
- text-align: center;
353
- padding-bottom: 10px;
354
- }
355
-
356
-
357
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_likes{
358
- width: <?php echo ($style['th_photo_meta_one_line']=='1')? '50%' : '100%' ?>;/*photo_meta_one_line==false else 100%*/
359
- float: <?php echo ($style['th_photo_meta_one_line']=='1')? 'left' : 'none'?>;/*photo_meta_one_line==true else float none*/
360
- font-size: <?php echo $style['th_like_comm_font_size']?>;/*photo_caption_font_size*/;
361
- color: <?php echo $style['th_like_text_color']?>;/*like_text_color*/
362
-
363
- }
364
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_comments{
365
- width: <?php echo ($style['th_photo_meta_one_line']=='1')? '50%' : '100%' ?>;/*photo_meta_one_line==false else 100%*/
366
- float: <?php echo ($style['th_photo_meta_one_line']=='1')? 'left' : 'none'?>;/*photo_meta_one_line==true else float none*/
367
- font-size: <?php echo $style['th_like_comm_font_size']?>;/*photo_caption_font_size*/;
368
- color: <?php echo $style['th_comment_text_color']?>;/*comment_text_color*/
369
-
370
- }
371
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_comments i,#wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_likes i{
372
- width: 100%;
373
- }
374
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title {
375
- text-overflow: ellipsis;
376
- overflow: hidden;
377
- white-space: nowrap;
378
- width: 90%;
379
- margin-left: 5%;
380
- margin-right: 5%;
381
- font-size: <?php echo $style['th_photo_caption_font_size']?>;/*photo_caption_font_size*/
382
- color: <?php echo $style['th_photo_caption_color']?>;/*photo_caption_color*/
383
- text-align: center;
384
- }
385
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title:hover{
386
- cursor: pointer;
387
- color: <?php echo $style['th_photo_caption_hover_color']?>;
388
- }
389
-
390
-
391
- @-moz-keyframes wdi_rotate{
392
- from {transform: rotate(0deg);}
393
- to {transform: rotate(360deg);}
394
- }
395
- @-o-keyframes wdi_rotate{
396
- from {transform: rotate(0deg);}
397
- to {transform: rotate(360deg);}
398
- }
399
- @-ms-keyframes wdi_rotate{
400
- from {transform: rotate(0deg);}
401
- to {transform: rotate(360deg);}
402
- }
403
- @-webkit-keyframes wdi_rotate{
404
- from {transform: rotate(0deg);}
405
- to {transform: rotate(360deg);}
406
- }
407
- @keyframes wdi_rotate {
408
- from {transform: rotate(0deg);}
409
- to {transform: rotate(360deg);}
410
- }
411
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_spinner{
412
- display: table-cell;
413
- vertical-align: middle;
414
- color: <?php echo $style['load_more_text_color']?>;/*load_more_text_color*/
415
- font-size: <?php echo intval($style['load_more_text_font_size'])*1.3?>px;/*load_more_text_font_size*/
416
-
417
- -webkit-animation: wdi_rotate 1.5s infinite;
418
- -moz-animation:wdi_rotate 1.5s infinite;
419
- -o-animation:wdi_rotate 1.5s infinite;
420
- animation:wdi_rotate 1.5s infinite;
421
- }
422
-
423
-
424
-
425
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more,
426
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_spinner
427
- {
428
- padding: 10px;
429
- background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
430
- text-align: <?php echo $style['load_more_position']?>;/*load_more_position*/
431
- transition: all 0.2s ease;
432
- }
433
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap,
434
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_spinner_wrap{
435
- padding: <?php echo $style['load_more_padding']?>;/*load_more_padding*/
436
- background-color: <?php echo $style['load_more_bg_color']?>;/*load_more_bg_color*/
437
- display: inline-table;
438
- border-radius: <?php echo $style['load_more_border_radius']?>;/*load_more_border_radius*/
439
- height: <?php echo $style['load_more_height']?>;/*load_more_height*/
440
- width: <?php echo $style['load_more_width']?>;/*load_more_width*/
441
- border: <?php echo $style['load_more_border_size']?> solid <?php echo $style['load_more_border_color']?>;/*load_more_border_size, load_more_border_color*/;
442
- box-sizing: border-box;
443
- }
444
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap_inner,
445
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_spinner_wrap_inner{
446
- display: table-row;
447
- text-align: center;
448
- }
449
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text{
450
- display: table-cell;
451
- vertical-align: middle;
452
- color: <?php echo $style['load_more_text_color']?>;/*load_more_text_color*/
453
- font-size: <?php echo $style['load_more_text_font_size']?>;/*load_more_text_font_size*/
454
- }
455
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text img{
456
- height: <?php echo $style['load_more_height']?>;/*load_more_height*/
457
- width: <?php echo $style['load_more_height']?>;/*load_more_height*/
458
- float: left;
459
- }
460
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap:hover{
461
- cursor: pointer;
462
- background-color: <?php echo $style['load_more_wrap_hover_color']?>;/*load_more_wrap_hover_color*/
463
- }
464
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination{
465
- -webkit-user-select: none; /* Chrome/Safari */
466
- -moz-user-select: none; /* Firefox */
467
- -ms-user-select: none; /* IE10+ */
468
-
469
- /* Rules below not implemented in browsers yet */
470
- -o-user-select: none;
471
- user-select: none;
472
- text-align: <?php echo $style['pagination_position']?>;/*load_more_position*/
473
- color: <?php echo $style['pagination_ctrl_color']?>;/*pagination_ctrl_color*/
474
- font-size: <?php echo $style['pagination_size']?>;/*pagination_size*/
475
- }
476
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl{
477
- margin: <?php echo $style['pagination_ctrl_margin']?>;
478
- display: inline-block;
479
- }
480
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl:hover{
481
- cursor: pointer;
482
- color: <?php echo $style['pagination_ctrl_hover_color']?>;
483
- }
484
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_overlay:hover{
485
- cursor: pointer;
486
- background-color: <?php echo $style['th_overlay_hover_color'];?>;
487
- opacity: <?php echo (100 - intval($style['th_overlay_hover_transparent']))/100; ?>;
488
- }
489
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_overlay i{
490
- font-size:<?php echo $style['th_overlay_hover_icon_font_size'];?>;
491
- color:<?php echo $style['th_overlay_hover_icon_color'];?>;
492
- opacity: 1;
493
- }
494
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_container{
495
- display: inline-block;
496
- }
497
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_active_bg{
498
- background-color: <?php echo $style['active_filter_bg_color'];?>;
499
- }
500
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_active_col{
501
- color: <?php echo $style['active_filter_bg_color'];?>;
502
- border-color: <?php echo $style['active_filter_bg_color'];?>;
503
- }
504
-
505
-
506
-
507
- <?php if($feed_row['disable_mobile_layout']=="0"){
508
- ?>
509
- @media screen and (min-width: 800px) and (max-width:1024px){
510
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item{
511
- width: <?php echo ($colNum<33.33) ? '33.333333333333%' : $colNum.'%'?>;/*thumbnail_size*/
512
- margin: 0;
513
- display: inline-block;
514
- vertical-align: top;
515
- overflow: hidden;
516
- }
517
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
518
- width: 100%;
519
- margin: 0 auto;
520
- background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
521
- }
522
-
523
- }
524
- @media screen and (min-width: 480px) and (max-width:800px){
525
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item{
526
- width: <?php echo ($colNum<50) ? '50%' : $colNum.'%'?>;/*thumbnail_size*/
527
- margin: 0;
528
- display: inline-block;
529
- vertical-align: top;
530
- overflow: hidden;
531
- }
532
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
533
- width: 100%;
534
- margin: 0 auto;
535
- background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
536
- }
537
- }
538
- @media screen and (max-width: 480px){
539
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item{
540
- width: <?php echo ($colNum<100) ? '100%' : $colNum.'%'?>;/*thumbnail_size*/
541
- margin: 0;
542
- display: inline-block;
543
- vertical-align: top;
544
- overflow: hidden;
545
- }
546
- #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
547
- width: 100%;
548
- margin: 0 auto;
549
- background-color: <?php echo $style['feed_container_bg_color']?>;/*feed_container_bg_color*/
550
- }
551
- }
552
- <?php } ?>
553
- </style>
554
- <?php
555
- }
556
 
 
 
 
 
557
 
 
 
 
 
558
 
 
 
 
 
559
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
560
 
561
 
562
  }
 
563
  ?>
1
  <?php
2
+
3
+ class WDIViewThumbnails_view
4
+ {
5
  ////////////////////////////////////////////////////////////////////////////////////////
6
  // Events //
7
  ////////////////////////////////////////////////////////////////////////////////////////
11
  ////////////////////////////////////////////////////////////////////////////////////////
12
  // Variables //
13
  ////////////////////////////////////////////////////////////////////////////////////////
14
+ private $model;
15
  ////////////////////////////////////////////////////////////////////////////////////////
16
  // Constructor & Destructor //
17
  ////////////////////////////////////////////////////////////////////////////////////////
18
+ public function __construct($model)
19
+ {
20
+ $this->model = $model;
21
+ }
22
  ////////////////////////////////////////////////////////////////////////////////////////
23
  // Public Methods //
24
  ////////////////////////////////////////////////////////////////////////////////////////
25
+ public function display()
26
+ {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
 
28
+ $this->pass_feed_data_to_js();
29
+ $feed_row = $this->model->get_feed_row();
30
+ $wdi_feed_counter = $this->model->wdi_feed_counter;
31
+ $this->generate_feed_styles($feed_row);
32
+ $style = $this->model->theme_row;
 
 
33
 
34
+ $wdi_data_ajax = defined('DOING_AJAX') && DOING_AJAX ? 'data-wdi_ajax=1' : '';
35
 
36
+ ?>
37
+
38
+ <div id="wdi_feed_<?php echo $wdi_feed_counter ?>" class="wdi_feed_main_container wdi_layout_th" <?php echo $wdi_data_ajax; ?> >
39
+ <div id="wdi_spider_popup_loading_<?php echo $wdi_feed_counter ?>" class="wdi_spider_popup_loading"></div>
40
+ <div id="wdi_spider_popup_overlay_<?php echo $wdi_feed_counter ?>" class="wdi_spider_popup_overlay"
41
+ onclick="wdi_spider_destroypopup(1000)"></div>
42
+ <div class="wdi_feed_container">
43
+ <div class="wdi_feed_info">
44
+ <div id="wdi_feed_<?php echo $wdi_feed_counter ?>_header" class='wdi_feed_header'></div>
45
+ <div id="wdi_feed_<?php echo $wdi_feed_counter ?>_users" class='wdi_feed_users'></div>
46
+ </div>
47
+ <?php
48
+ if ($feed_row['feed_display_view'] === 'pagination' && $style['pagination_position_vert'] === 'top') {
49
+ ?>
50
+ <div id="wdi_pagination" class="wdi_pagination">
51
+ <div class="wdi_pagination_container"><i id="wdi_first_page"
52
+ title="<?php echo __('First Page', "wd-instagram-feed") ?>"
53
+ class="fa fa-step-backward wdi_pagination_ctrl wdi_disabled"></i><i
54
+ id="wdi_prev" title="<?php echo __('Previous Page', "wd-instagram-feed") ?>"
55
+ class="fa fa-arrow-left wdi_pagination_ctrl"></i><i id="wdi_current_page" class="wdi_pagination_ctrl"
56
+ style="font-style:normal">1</i><i id="wdi_next"
57
+ title="<?php echo __('Next Page', "wd-instagram-feed") ?>"
58
+ class="fa fa-arrow-right wdi_pagination_ctrl"></i>
59
+ <i id="wdi_last_page" title="<?php echo __('Last Page', "wd-instagram-feed") ?>"
60
+ class="fa fa-step-forward wdi_pagination_ctrl wdi_disabled"></i></div></div> <?php
61
+ }
62
+ ?>
63
+ <div class="wdi_feed_wrapper <?php echo 'wdi_col_' . $feed_row['number_of_columns'] ?>"
64
+ wdi-res='<?php echo 'wdi_col_' . $feed_row['number_of_columns'] ?>'></div>
65
+ <div class="wdi_clear"></div>
66
+
67
+ <?php switch ($feed_row['feed_display_view']) {
68
+ case 'load_more_btn': {
69
+ ?>
70
+ <div class="wdi_load_more wdi_hidden">
71
+ <div class="wdi_load_more_container">
72
+ <div class="wdi_load_more_wrap">
73
+ <div class="wdi_load_more_wrap_inner">
74
+ <div class="wdi_load_more_text"><?php echo __('Load More', "wd-instagram-feed"); ?></div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <div class="wdi_spinner ">
80
+ <div class="wdi_spinner_container">
81
+ <div class="wdi_spinner_wrap">
82
+ <div class="wdi_spinner_wrap_inner"><i class="wdi_load_more_spinner fa fa-spinner"></i></div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <?php
87
+ break;
88
+ }
89
+ case 'pagination': {
90
+ if ($style['pagination_position_vert'] === 'bottom') {
91
+ ?>
92
+ <div id="wdi_pagination" class="wdi_pagination">
93
+ <div class="wdi_pagination_container"><i id="wdi_first_page"
94
+ title="<?php echo __('First Page', "wd-instagram-feed") ?>"
95
+ class="fa fa-step-backward wdi_disabled wdi_pagination_ctrl"></i><i
96
+ id="wdi_prev" title="<?php echo __('Previous Page', "wd-instagram-feed") ?>"
97
+ class="fa fa-arrow-left wdi_pagination_ctrl"></i><i id="wdi_current_page" class="wdi_pagination_ctrl"
98
+ style="font-style:normal">1</i><i id="wdi_next"
99
+ title="<?php echo __('Next Page', "wd-instagram-feed") ?>"
100
+ class="fa fa-arrow-right wdi_pagination_ctrl"></i>
101
+ <i id="wdi_last_page" title="<?php echo __('Last Page', "wd-instagram-feed") ?>"
102
+ class="fa fa-step-forward wdi_pagination_ctrl wdi_disabled"></i></div></div> <?php
103
+ }
104
+
105
+ break;
106
+ }
107
+ case 'infinite_scroll': {
108
+ ?>
109
+ <div id="wdi_infinite_scroll" class="wdi_infinite_scroll"></div> <?php
110
+ }
111
+ }
112
+ wdi_feed_frontend_messages();
113
+ ?>
114
+ </div>
115
+ </div>
116
+ <?php
117
+
118
+ }
119
+
120
+ public function pass_feed_data_to_js()
121
+ {
122
+ global $wdi_options;
123
+ $feed_row = $this->model->get_feed_row();
124
+ $wdi_feed_counter = $this->model->wdi_feed_counter;
125
+ $feed_row['access_token'] = $wdi_options['wdi_access_token'];
126
+ $feed_row['wdi_feed_counter'] = $wdi_feed_counter;
127
+
128
+
129
+ wp_localize_script("wdi_frontend", 'wdi_feed_' . $wdi_feed_counter, array('feed_row' => $feed_row, 'data' => array(), 'usersData' => array(), 'dataCount' => 0));
130
+ wp_localize_script("wdi_frontend", 'wdi_front', array('feed_counter' => $wdi_feed_counter));
131
+ }
132
+
133
+ public function generate_feed_styles($feed_row)
134
+ {
135
+ $style = $this->model->theme_row;
136
+ $wdi_feed_counter = $this->model->wdi_feed_counter;
137
+ $colNum = (100 / $feed_row['number_of_columns']);
138
+ if ($style['header_position'] == 'center') {
139
+ $headerfloatPos = 'left';
140
+ }
141
+ else {
142
+ $headerfloatPos = $style['header_position'];
143
+ }
144
+ ?>
145
+ <style type="text/css">
146
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
147
+ width: <?php echo $style['feed_container_width']?>;
148
+ background-color: <?php echo $style['feed_container_bg_color']?>; /*feed_container_bg_color*/
149
+ border-bottom: 5px solid <?php echo $style['feed_container_bg_color']?>; /*feed_container_bg_color*/;
150
+ }
151
+
152
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_wrapper {
153
+ width: <?php echo $style['feed_wrapper_width']?>; /*feed_wrapper_width,column number * image size*/
154
+ background-color: <?php echo $style['feed_wrapper_bg_color']?>; /*feed_wrapper_bg_color*/
155
+ text-align: <?php echo $style['header_position']?>; /*header_position*/
156
+ }
157
+
158
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_header {
159
+ margin: <?php echo $style['header_margin']?>; /*header_margin*/
160
+ padding: <?php echo $style['header_padding']?>; /*header_padding*/
161
+ border: <?php echo $style['header_border_size']?> solid <?php echo $style['header_border_color']?>; /*header_border_size, header_border_color*/
162
+ text-align: <?php echo $style['header_position']?>; /*header_position*/
163
+ display: <?php echo ($feed_row['display_header']=='1')? 'block' : 'none'?>; /*if display-header is true display:block*/
164
+ }
165
+
166
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_img_wrap, .wdi_users_img_wrap {
167
+ height: <?php echo $style['header_img_width']?>px; /*header_img_width*/
168
+ width: <?php echo $style['header_img_width']?>px; /*header_img_width*/
169
+ border-radius: <?php echo $style['header_border_radius']?>px; /*header_img_width*/
170
+ }
171
+
172
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_text {
173
+ font-size: <?php echo $style['header_text_font_size']?>;
174
+ font-style: <?php echo $style['header_text_font_style']?>;
175
+ padding: <?php echo $style['header_text_padding']?>; /*header_text_padding*/
176
+ color: <?php echo $style['header_text_color']?>; /*header_text_color*/
177
+ font-weight: <?php echo $style['header_font_weight']?>; /*header_font_weight*/
178
+ line-height: <?php echo $style['header_img_width']?>px; /*header_img_width*/
179
+ }
180
+
181
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_single_user {
182
+ padding-top: <?php echo $style['user_padding']?>; /*user_padding*/
183
+ padding-bottom: <?php echo $style['user_padding']?>; /*user_padding*/
184
+ padding-left: <?php echo $style['user_padding']?>; /*user_padding*/
185
+ padding-right: <?php echo $style['user_padding']?>; /*user_padding*/
186
+ }
187
+
188
+ <?php
189
+
190
+ if($feed_row['display_user_post_follow_number'] == '1'){
191
+ $header_text_padding =(intval($style['user_img_width']) - intval($style['users_text_font_size']))/4;
192
+ }else{
193
+ $header_text_padding =(intval($style['user_img_width']) - intval($style['users_text_font_size']))/2;
194
+ }
195
+ ?>
196
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text {
197
+ padding-top: <?php echo $header_text_padding; ?>px;
198
+
199
+ }
200
+
201
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3 {
202
+ margin-top: <?php echo $header_text_padding ?>px;
203
+ }
204
+
205
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_hashtag h3 {
206
+ margin-top: <?php echo (intval($style['user_img_width']) - intval($style['users_text_font_size']))/2?>px;
207
+ }
208
+
209
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_header_user_text h3 {
210
+ font-size: <?php echo $style['users_text_font_size']?>;
211
+ font-style: <?php echo $style['users_text_font_style']?>;
212
+ line-height: <?php echo $style['users_text_font_size']?>;
213
+ color: <?php echo $style['users_text_color']?>; /*header_text_color*/;
214
+ }
215
+
216
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_user_img_wrap img {
217
+ height: <?php echo $style['user_img_width']?>px;
218
+ width: <?php echo $style['user_img_width']?>px;
219
+ border-radius: <?php echo $style['user_border_radius']?>px;
220
+ }
221
+
222
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_media_info {
223
+ /*display: inline-block;*/
224
+ margin-left: <?php echo intval($style['user_img_width']) + 10;?>px;
225
+ line-height: <?php echo $style['users_text_font_size']?>;
226
+ color: <?php echo $style['users_text_color']?>; /*header_text_color !mmm/ seperate*/
227
+ display: <?php echo ($feed_row['display_user_post_follow_number'] == '1') ? 'block' : 'none'; ?>
228
+ }
229
+
230
+
231
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_bio {
232
+ color: <?php echo $style['users_text_color']?>; /*header_text_color*/
233
+ font-size: <?php echo $style['user_description_font_size']?>; /*header_text_color*/
234
+ }
235
+
236
+
237
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn {
238
+ border-radius: <?php echo $style['follow_btn_border_radius']?>px;
239
+ font-size: <?php echo $style['follow_btn_font_size']?>px;
240
+ background-color: <?php echo $style['follow_btn_bg_color']?>;
241
+ border-color: <?php echo $style['follow_btn_border_color']?>;
242
+ color: <?php echo $style['follow_btn_text_color']?>;
243
+ margin-left: <?php echo $style['follow_btn_margin']?>px;
244
+ padding: 0 <?php echo $style['follow_btn_padding']?>px;
245
+ }
246
+
247
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_follow_btn:hover {
248
+ border-color: <?php echo $style['follow_btn_border_hover_color']?>;
249
+ color: <?php echo $style['follow_btn_text_hover_color']?>;
250
+ background-color: <?php echo $style['follow_btn_background_hover_color']?>;
251
+ }
252
+
253
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_overlay {
254
+ width: <?php echo $style['user_img_width'];?>px; /*user_img_width*/
255
+ height: <?php echo $style['user_img_width'];?>px; /*user_img_width*/
256
+ border-radius: <?php echo $style['user_border_radius']?>px; /*user_img_width*/
257
+ background-color: <?php echo $style['th_overlay_hover_color'];?>;
258
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
259
 
260
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_icon span {
261
+ width: <?php echo $style['user_img_width'];?>px; /*header_img_width*/
262
+ height: <?php echo $style['user_img_width'];?>px; /*header_img_width*/
263
+ }
264
 
265
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap {
266
+ padding: <?php echo $style['th_photo_wrap_padding']?>; /*photo_wrap_padding*/
267
+ width: calc(100% - 2 *<?php echo $style['th_photo_wrap_padding']?>);
268
+ }
269
 
270
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_wrap_inner {
271
+ border: <?php echo $style['th_photo_wrap_border_size']?> solid <?php echo $style['th_photo_wrap_border_color']?>; /*photo_wrap_border_size,photo_wrap_border_color*/
272
+ background-color: <?php echo $style['th_photo_wrap_bg_color']?>; /*photo_wrap_bg_color*/
273
+ }
274
 
275
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_img {
276
+ border-radius: <?php echo $style['th_photo_img_border_radius']?>; /*photo_img_border_radius*/
277
+ }
278
+
279
+
280
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item {
281
+ width: <?php echo $colNum.'%'?>; /*thumbnail_size*/
282
+ }
283
+
284
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_meta {
285
+ background-color: <?php echo $style['th_photo_meta_bg_color']?>; /*photo_meta_bg_color*/
286
+ }
287
+
288
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_likes {
289
+ width: <?php echo ($style['th_photo_meta_one_line']=='1')? '50%' : '100%' ?>; /*photo_meta_one_line==false else 100%*/
290
+ float: <?php echo ($style['th_photo_meta_one_line']=='1')? 'left' : 'none'?>; /*photo_meta_one_line==true else float none*/
291
+ font-size: <?php echo $style['th_like_comm_font_size']?>; /*photo_caption_font_size*/;
292
+ color: <?php echo $style['th_like_text_color']?>; /*like_text_color*/
293
+
294
+ }
295
+
296
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_thumb_comments {
297
+ width: <?php echo ($style['th_photo_meta_one_line']=='1')? '50%' : '100%' ?>; /*photo_meta_one_line==false else 100%*/
298
+ float: <?php echo ($style['th_photo_meta_one_line']=='1')? 'left' : 'none'?>; /*photo_meta_one_line==true else float none*/
299
+ font-size: <?php echo $style['th_like_comm_font_size']?>; /*photo_caption_font_size*/;
300
+ color: <?php echo $style['th_comment_text_color']?>; /*comment_text_color*/
301
+
302
+ }
303
+
304
+
305
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title {
306
+ font-size: <?php echo $style['th_photo_caption_font_size']?>; /*photo_caption_font_size*/
307
+ color: <?php echo $style['th_photo_caption_color']?>; /*photo_caption_color*/
308
+ }
309
+
310
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_title:hover {
311
+ color: <?php echo $style['th_photo_caption_hover_color']?>;
312
+ }
313
+
314
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_spinner {
315
+ color: <?php echo $style['load_more_text_color']?>; /*load_more_text_color*/
316
+ font-size: <?php echo intval($style['load_more_text_font_size'])*1.3?>px; /*load_more_text_font_size*/
317
+ }
318
+
319
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more,
320
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_spinner {
321
+ background-color: <?php echo $style['feed_container_bg_color']?>; /*feed_container_bg_color*/
322
+ text-align: <?php echo $style['load_more_position']?>; /*load_more_position*/
323
+ }
324
+
325
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap,
326
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_spinner_wrap {
327
+ padding: <?php echo $style['load_more_padding']?>; /*load_more_padding*/
328
+ background-color: <?php echo $style['load_more_bg_color']?>; /*load_more_bg_color*/
329
+ border-radius: <?php echo $style['load_more_border_radius']?>; /*load_more_border_radius*/
330
+ height: <?php echo $style['load_more_height']?>; /*load_more_height*/
331
+ width: <?php echo $style['load_more_width']?>; /*load_more_width*/
332
+ border: <?php echo $style['load_more_border_size']?> solid <?php echo $style['load_more_border_color']?>; /*load_more_border_size, load_more_border_color*/;
333
+ }
334
+
335
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text {
336
+ color: <?php echo $style['load_more_text_color']?>; /*load_more_text_color*/
337
+ font-size: <?php echo $style['load_more_text_font_size']?>; /*load_more_text_font_size*/
338
+ }
339
+
340
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_text img {
341
+ height: <?php echo $style['load_more_height']?>; /*load_more_height*/
342
+ width: <?php echo $style['load_more_height']?>; /*load_more_height*/
343
+ }
344
+
345
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_load_more_wrap:hover {
346
+ background-color: <?php echo $style['load_more_wrap_hover_color']?>; /*load_more_wrap_hover_color*/
347
+ }
348
+
349
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination {
350
+ text-align: <?php echo $style['pagination_position']?>; /*load_more_position*/
351
+ color: <?php echo $style['pagination_ctrl_color']?>; /*pagination_ctrl_color*/
352
+ font-size: <?php echo $style['pagination_size']?>; /*pagination_size*/
353
+ }
354
+
355
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl {
356
+ margin: <?php echo $style['pagination_ctrl_margin']?>;
357
+ }
358
+
359
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_pagination_ctrl:hover {
360
+ color: <?php echo $style['pagination_ctrl_hover_color']?>;
361
+ }
362
+
363
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_overlay:hover {
364
+ background-color: <?php echo $style['th_overlay_hover_color'];?>;
365
+ opacity: <?php echo (100 - intval($style['th_overlay_hover_transparent']))/100; ?>;
366
+ }
367
+
368
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_photo_overlay i {
369
+ font-size: <?php echo $style['th_overlay_hover_icon_font_size'];?>;
370
+ color: <?php echo $style['th_overlay_hover_icon_color'];?>;
371
+ }
372
+
373
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_active_bg {
374
+ background-color: <?php echo $style['active_filter_bg_color'];?>;
375
+ }
376
+
377
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_filter_active_col {
378
+ color: <?php echo $style['active_filter_bg_color'];?>;
379
+ border-color: <?php echo $style['active_filter_bg_color'];?>;
380
+ }
381
+
382
+ <?php if($feed_row['disable_mobile_layout']=="0"){
383
+ ?>
384
+ @media screen and (min-width: 800px) and (max-width: 1024px) {
385
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item {
386
+ width: <?php echo ($colNum<33.33) ? '33.333333333333%' : $colNum.'%'?>; /*thumbnail_size*/
387
+ margin: 0;
388
+ display: inline-block;
389
+ vertical-align: top;
390
+ overflow: hidden;
391
+ }
392
+
393
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
394
+ width: 100%;
395
+ margin: 0 auto;
396
+ background-color: <?php echo $style['feed_container_bg_color']?>; /*feed_container_bg_color*/
397
+ }
398
+
399
+ }
400
+
401
+ @media screen and (min-width: 480px) and (max-width: 800px) {
402
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item {
403
+ width: <?php echo ($colNum<50) ? '50%' : $colNum.'%'?>; /*thumbnail_size*/
404
+ margin: 0;
405
+ display: inline-block;
406
+ vertical-align: top;
407
+ overflow: hidden;
408
+ }
409
+
410
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
411
+ width: 100%;
412
+ margin: 0 auto;
413
+ background-color: <?php echo $style['feed_container_bg_color']?>; /*feed_container_bg_color*/
414
+ }
415
+ }
416
+
417
+ @media screen and (max-width: 480px) {
418
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_item {
419
+ width: <?php echo ($colNum<100) ? '100%' : $colNum.'%'?>; /*thumbnail_size*/
420
+ margin: 0;
421
+ display: inline-block;
422
+ vertical-align: top;
423
+ overflow: hidden;
424
+ }
425
+
426
+ #wdi_feed_<?php echo $wdi_feed_counter?> .wdi_feed_container {
427
+ width: 100%;
428
+ margin: 0 auto;
429
+ background-color: <?php echo $style['feed_container_bg_color']?>; /*feed_container_bg_color*/
430
+ }
431
+ }
432
+
433
+ <?php } ?>
434
+ </style>
435
+ <?php
436
+ }
437
 
438
 
439
  }
440
+
441
  ?>
readme.txt CHANGED
@@ -3,8 +3,8 @@ Contributors: webdorado, progmastery
3
  Donate link: https://web-dorado.com/products/wordpress-instagram-feed-wd.html
4
  Tags: custom instagram feed, feed, instagram, hashtag, Instagram feed, instagram gallery, instagram posts, Instagram images, Instagram photos, lightbox, photos,instagram account
5
  Requires at least: 3.9
6
- Tested up to: 4.7
7
- Stable tag: 1.1.29
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -110,6 +110,9 @@ After downloading the ZIP file of the Instagram Feed WD plugin,
110
 
111
  == Changelog ==
112
 
 
 
 
113
  = 1.1.29 =
114
  Fixed: Display only published feeds in feeds selector popup for shortcode
115
  Changed: UX improvement - no error message when user first inserts a widget then creates feeds
3
  Donate link: https://web-dorado.com/products/wordpress-instagram-feed-wd.html
4
  Tags: custom instagram feed, feed, instagram, hashtag, Instagram feed, instagram gallery, instagram posts, Instagram images, Instagram photos, lightbox, photos,instagram account
5
  Requires at least: 3.9
6
+ Tested up to: 4.8
7
+ Stable tag: 1.1.30
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
110
 
111
  == Changelog ==
112
 
113
+ = 1.1.30 =
114
+ Changed: Frontend styles optimized, loads faster now
115
+
116
  = 1.1.29 =
117
  Fixed: Display only published feeds in feeds selector popup for shortcode
118
  Changed: UX improvement - no error message when user first inserts a widget then creates feeds
wd-instagram-feed.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: Instagram Feed WD
4
  Plugin URI: https://web-dorado.com/products/wordpress-instagram-feed-wd.html
5
  Description: WD Instagram Feed is a user-friendly tool for displaying user or hashtag-based feeds on your website. You can create feeds with one of the available layouts. It allows displaying image metadata, open up images in lightbox, download them and even share in social networking websites.
6
- Version: 1.1.29
7
  Author: WebDorado
8
  Author URI: https://web-dorado.com
9
  License: GPLv2 or later
@@ -21,7 +21,7 @@ define("WDI_META", "_".WDI_VAR."_meta");
21
  //define("wdi",'wdi');
22
  define('WDI_FEED_TABLE','wdi_feeds');
23
  define('WDI_THEME_TABLE','wdi_themes');
24
- define('WDI_VERSION','1.1.29');
25
  define('WDI_IS_PRO','false');
26
 
27
 
3
  Plugin Name: Instagram Feed WD
4
  Plugin URI: https://web-dorado.com/products/wordpress-instagram-feed-wd.html
5
  Description: WD Instagram Feed is a user-friendly tool for displaying user or hashtag-based feeds on your website. You can create feeds with one of the available layouts. It allows displaying image metadata, open up images in lightbox, download them and even share in social networking websites.
6
+ Version: 1.1.30
7
  Author: WebDorado
8
  Author URI: https://web-dorado.com
9
  License: GPLv2 or later
21
  //define("wdi",'wdi');
22
  define('WDI_FEED_TABLE','wdi_feeds');
23
  define('WDI_THEME_TABLE','wdi_themes');
24
+ define('WDI_VERSION','1.1.30');
25
  define('WDI_IS_PRO','false');
26
 
27