Instant Images – One Click Unsplash Uploads - Version 4.5.0

Version Description

  • October 28, 2021 = NEW: Pixabay! We've added support for Pixabay images. This requires a valid API key. NEW: Added button to auto-generate Photo attribution in image caption. NEW: Added uninstaller script to remove plugin settings. UPDATE: Updated styling and functionality of photo detail editor. UPDATE: Various UI/UX updates.
Download this release

Release Info

Developer dcooney
Plugin Icon 128x128 Instant Images – One Click Unsplash Uploads
Version 4.5.0
Comparing to
See all releases

Code changes from version 4.4.0.3 to 4.5.0

Files changed (16) hide show
  1. README.txt +19 -8
  2. admin/admin.php +2 -2
  3. admin/assets/img/bolt.svg +1 -1
  4. admin/assets/js/admin.js +1 -2
  5. admin/includes/page-settings.php +72 -43
  6. admin/includes/settings.php +63 -5
  7. admin/views/{unsplash.php → app.php} +2 -2
  8. api/download.php +2 -2
  9. api/settings.php +76 -0
  10. api/test.php +1 -1
  11. dist/css/instant-images.css +838 -216
  12. dist/css/instant-images.min.css +1 -1
  13. dist/img/pixabay.png +0 -0
  14. dist/img/unsplash.png +0 -0
  15. dist/img/unsplash.svg +3 -0
  16. dist/js/instant-images-block.js +10295 -11647
README.txt CHANGED
@@ -1,20 +1,20 @@
1
- === Instant Images - One Click Unsplash Uploads ===
2
  Contributors: dcooney, connekthq
3
  Donate link: https://connekthq.com/donate/
4
- Tags: stock photo, unsplash, prototyping, photos, upload, media library, image upload, free photos
5
  Requires at least: 4.0
6
  Tested up to: 5.8
7
  Stable tag: trunk
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
- One click uploads of Unsplash photos directly to your WordPress media library.
12
 
13
  == Description ==
14
 
15
- Instantly upload photos from Unsplash to your website without leaving WordPress!
16
 
17
- **Instant Images** is the fastest and easiest way to upload high quality FREE photos from [unsplash.com](http://unsplash.com) directly to your media library.
18
 
19
  [youtube https://www.youtube.com/watch?v=s6Q7Kfi2f1c]
20
 
@@ -34,7 +34,7 @@ The perfect tool for users who want to save time and frustration by uploading im
34
  - **Edit Image Metadata** - Easily edit image filename, alt text and caption prior to uploading to your media library.
35
  - **Accessibility** - Automatically include a relevant alt description for screen readers, visually reduced users, and SEO.
36
  - **Easy to Use** - It couldn't get much more simple, just click an image and it's automatically uploaded to your media library for use on your site.
37
- - **No Account Needed** - An Unsplash account is not required for use of this plugin. Just activate and you're ready to go.
38
 
39
  ---
40
 
@@ -60,7 +60,7 @@ Pull requests can be submitted via [GitHub](https://github.com/dcooney/instant-i
60
  == Frequently Asked Questions ==
61
 
62
  = Can I legally use these photos on my website? =
63
- All photos published on Unsplash are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or Unsplash.
64
  [Learn More](http://creativecommons.org/publicdomain/zero/1.0/)
65
 
66
  = Can I search for individual photos by ID? =
@@ -84,9 +84,12 @@ Yes, this plugin is required to write temporary images into an `/instant-images`
84
 
85
  Some hosts lock down their servers and you may be required to update your php.ini or .htaccess in order to use this plugin.
86
 
87
- = Do I need an Unsplash account? =
88
  No, there is no need to sign up from an Unsplash account to access the photos server via Instant Images.
89
 
 
 
 
90
 
91
  == Installation ==
92
 
@@ -125,6 +128,14 @@ How to install Instant Images.
125
 
126
  == Changelog ==
127
 
 
 
 
 
 
 
 
 
128
  = 4.4.0.3 - July 30, 2021 =
129
  * Fix: WP 5.8 issue resolved - added fix for Instant Images causing the Widget Block Editor to fail due to JS error.
130
  * Update: Code clean up.
1
+ === Instant Images - One Click Unsplash and Pixabay Uploads ===
2
  Contributors: dcooney, connekthq
3
  Donate link: https://connekthq.com/donate/
4
+ Tags: unsplash, pixabay, stock photo, prototyping, photos, media library, image upload, upload, free photos
5
  Requires at least: 4.0
6
  Tested up to: 5.8
7
  Stable tag: trunk
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
11
+ One click uploads of Unsplash and Pixabay photos directly to your WordPress media library.
12
 
13
  == Description ==
14
 
15
+ Instantly upload photos from Unsplash or Pixabay to your website without leaving WordPress!
16
 
17
+ **Instant Images** is the fastest and easiest way to upload high quality FREE photos from [unsplash.com](http://unsplash.com) and [Pixabay](http://pixabay.com) directly to your media library.
18
 
19
  [youtube https://www.youtube.com/watch?v=s6Q7Kfi2f1c]
20
 
34
  - **Edit Image Metadata** - Easily edit image filename, alt text and caption prior to uploading to your media library.
35
  - **Accessibility** - Automatically include a relevant alt description for screen readers, visually reduced users, and SEO.
36
  - **Easy to Use** - It couldn't get much more simple, just click an image and it's automatically uploaded to your media library for use on your site.
37
+ - **No Unsplash Account Needed** - An Unsplash account is not required for use of this plugin. Just activate and you're ready to go.
38
 
39
  ---
40
 
60
  == Frequently Asked Questions ==
61
 
62
  = Can I legally use these photos on my website? =
63
+ All photos published on Unsplash are licensed under Creative Commons Zero which means you can copy, modify, distribute and use the photos for free, including commercial purposes, without asking permission from or providing attribution to the photographer or Unsplash/Pixabay.
64
  [Learn More](http://creativecommons.org/publicdomain/zero/1.0/)
65
 
66
  = Can I search for individual photos by ID? =
84
 
85
  Some hosts lock down their servers and you may be required to update your php.ini or .htaccess in order to use this plugin.
86
 
87
+ = Do I need an account at Unsplash? =
88
  No, there is no need to sign up from an Unsplash account to access the photos server via Instant Images.
89
 
90
+ = Do I need an account at Pixabay? =
91
+ Yes, Pixabay access requires an API key. You can get this by signing up for a free account at [Pixabay](https://pixabay.com/).
92
+
93
 
94
  == Installation ==
95
 
128
 
129
  == Changelog ==
130
 
131
+ = 4.5.0 - October 28, 2021 =
132
+ NEW: 🎉 Pixabay! We've added support for [Pixabay](https://pixabay.com) images. This requires a valid API key.
133
+ NEW: Added button to auto-generate Photo attribution in image caption.
134
+ NEW: Added uninstaller script to remove plugin settings.
135
+ UPDATE: Updated styling and functionality of photo detail editor.
136
+ UPDATE: Various UI/UX updates.
137
+
138
+
139
  = 4.4.0.3 - July 30, 2021 =
140
  * Fix: WP 5.8 issue resolved - added fix for Instant Images causing the Widget Block Editor to fail due to JS error.
141
  * Update: Code clean up.
admin/admin.php CHANGED
@@ -37,7 +37,7 @@ add_action( 'admin_menu', 'instant_images_create_page' );
37
  function instant_images_settings_page() {
38
  $show_settings = true;
39
  echo '<div class="instant-img-container" data-media-popup="false">';
40
- include INSTANT_IMAGES_PATH . 'admin/views/unsplash.php';
41
  echo '</div>';
42
  }
43
 
@@ -139,7 +139,7 @@ function instant_images_media_tab() {
139
  $show_settings = false;
140
  ?>
141
  <div class="instant-img-container editor" data-media-popup="true">
142
- <?php include INSTANT_IMAGES_PATH . 'admin/views/unsplash.php'; ?>
143
  </div>
144
  <?php
145
  }
37
  function instant_images_settings_page() {
38
  $show_settings = true;
39
  echo '<div class="instant-img-container" data-media-popup="false">';
40
+ include INSTANT_IMAGES_PATH . 'admin/views/app.php';
41
  echo '</div>';
42
  }
43
 
139
  $show_settings = false;
140
  ?>
141
  <div class="instant-img-container editor" data-media-popup="true">
142
+ <?php include INSTANT_IMAGES_PATH . 'admin/views/app.php'; ?>
143
  </div>
144
  <?php
145
  }
admin/assets/img/bolt.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 58"><title>Asset 1</title><polygon points="20 0 20 23 31 23 11 58 11 34 0 34 20 0" fill="#4a7bc5"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 58"><title>Lightning Bolt</title><polygon points="20 0 20 23 31 23 11 58 11 34 0 34 20 0" fill="#4a7bc5"/></svg>
admin/assets/js/admin.js CHANGED
@@ -3,7 +3,6 @@ var instant_images = instant_images || {};
3
  jQuery(document).ready(function ($) {
4
  "use strict";
5
 
6
- var init = true;
7
  var speed = 350;
8
 
9
  // Media Uploader
@@ -89,7 +88,7 @@ jQuery(document).ready(function ($) {
89
  $(this).ajaxSubmit({
90
  success: function () {
91
  $(".save-settings .loading").fadeOut(speed, function () {
92
- //window.location.reload();
93
  });
94
  },
95
  error: function () {
3
  jQuery(document).ready(function ($) {
4
  "use strict";
5
 
 
6
  var speed = 350;
7
 
8
  // Media Uploader
88
  $(this).ajaxSubmit({
89
  success: function () {
90
  $(".save-settings .loading").fadeOut(speed, function () {
91
+ window.location.reload();
92
  });
93
  },
94
  error: function () {
admin/includes/page-settings.php CHANGED
@@ -8,49 +8,81 @@
8
  ?>
9
  <section class="instant-images-settings">
10
  <div class="cnkt-sidebar">
11
- <section class="cta ii-settings">
12
- <h2><?php esc_attr_e( 'Global Settings', 'instant-images' ); ?></h2>
13
- <p><?php esc_attr_e( 'Manage your media upload settings', 'instant-images' ); ?>.</p>
14
- <div class="cta-wrap">
15
- <form action="options.php" method="post" id="unsplash-form-options">
16
- <?php
17
- settings_fields( 'instant-img-setting-group' );
18
- do_settings_sections( 'instant-images' );
19
- // @codingStandardsIgnoreStart
20
- $options = get_option( 'instant_img_settings' ); // Get the older values, wont work the first time.
21
- // @codingStandardsIgnoreEnd
22
- ?>
23
- <div class="save-settings">
24
- <?php submit_button( __( 'Save Settings', 'instant-images' ) ); ?>
25
- <div class="loading"></div>
26
- <div class="clear"></div>
27
- </div>
28
- </form>
29
- </div>
30
- <div class="spacer sm"></div>
31
- <h2 class="w-border"><?php esc_attr_e( 'What\'s New', 'instant-images' ); ?></h2>
32
- <p><?php esc_attr_e( 'The latest Instant Images updates', 'instant-images' ); ?>.</p>
33
- <div class="cta-wrap">
34
- <ul class="whats-new">
35
- <li><strong>Improved Download Speeds</strong>: Instant Images <em>v+</em> is now up to 4x faster than previous versions after a critical update in the initial image fetching process.</li>
36
- <li><strong>Media Modals</strong>: Instant Images tab added to all WordPress Media Modal windows.</li>
37
- <li><strong>Gutenberg Support</strong>: Instant Images directly integrates with Gutenberg as a plugin sidebar.</li>
38
- <li><strong>User Roles</strong>: Added <em>instant_images_user_role</em> filter to allow for control over user capability.</li>
39
- <li><strong>Image Search</strong>: Added support for searching individual photos by Unsplash ID - searching <pre>id:{photo_id}</pre> will return a single result.<br/>e.g. <pre>id:YiUi00uqKk8</pre></li>
 
 
 
 
 
 
 
 
 
 
 
40
  </ul>
41
- </div>
42
- </section>
43
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44
  <?php
45
  $instant_images_plugin_array = array(
46
  array(
47
  'slug' => 'ajax-load-more',
48
  ),
49
  array(
50
- 'slug' => 'easy-query',
51
  ),
52
  array(
53
- 'slug' => 'block-manager',
54
  ),
55
  array(
56
  'slug' => 'velocity',
@@ -59,16 +91,13 @@
59
  ?>
60
  <section class="cta ii-plugins">
61
  <h2><?php esc_attr_e( 'Our Plugins', 'instant-images' ); ?></h2>
62
- <p><strong>Instant Images</strong> is made with <span style="color: #e25555;">♥</span> by <a target="blank" href="https://connekthq.com/?utm_source=WPAdmin&utm_medium=InstantImages&utm_campaign=OurPlugins">Connekt</a></p>
63
- <div class="cta-wrap">
64
- <?php
65
- if ( class_exists( 'Connekt_Plugin_Installer' ) ) {
66
- Connekt_Plugin_Installer::init( $instant_images_plugin_array );
67
- }
68
- ?>
69
- </div>
70
  </section>
71
 
72
  </div>
73
-
74
  </section>
8
  ?>
9
  <section class="instant-images-settings">
10
  <div class="cnkt-sidebar">
11
+ <section class="cta ii-whats-new">
12
+ <h2><?php esc_attr_e( 'What\'s New', 'instant-images' ); ?></h2>
13
+ <p><?php esc_attr_e( 'The latest Instant Images updates.', 'instant-images' ); ?></p>
14
+ <ul>
15
+ <li>
16
+ <p>
17
+ <strong>Pixabay</strong>
18
+ We've added support for the <a href="https://pixabay.com/" target="_blank">Pixabay</a> API. This requires your own API key.
19
+ </p>
20
+ </li>
21
+ <li>
22
+ <p>
23
+ <strong>Improved Download Speeds</strong>
24
+ Instant Images is now up to 4x faster than previous versions after a critical update in the initial image fetching process.
25
+ </p>
26
+ </li>
27
+ <li>
28
+ <p>
29
+ <strong>Media Modals</strong>
30
+ Instant Images tab added to all WordPress Media Modals allowing access to Instant Images for anywhere media can be insterted.
31
+ </p>
32
+ </li>
33
+ <li>
34
+ <p>
35
+ <strong>Gutenberg Support</strong>
36
+ Instant Images now integrates directly into Gutenberg as a plugin sidebar.
37
+ </p>
38
+ </li>
39
+ <li>
40
+ <p>
41
+ <strong>User Roles</strong>
42
+ Added the <code>instant_images_user_role</code> filter hook to allow for complete control over user capabilities.
43
+ </p>
44
+ </li>
45
+ <li>
46
+ <p>
47
+ <strong>Image ID Search</strong>
48
+ Added support for searching individual photos by image ID - searching <code>id:{photo_id}</code> will return a single result.<br/><br/>e.g. <code>id:YiUi00uqKk8</code>
49
+ </p>
50
+ </li>
51
  </ul>
52
+ <section class="with-love">
53
+ <p><strong>Instant Images</strong> is made with <span style="color: #e25555;">♥</span> by <a target="blank" href="https://connekthq.com/?utm_source=WPAdmin&utm_medium=InstantImages&utm_campaign=OurPlugins">Connekt</a></p>
54
+ </section>
55
+ </section>
56
+ <section class="cta ii-settings">
57
+ <h2><?php esc_attr_e( 'Global Settings', 'instant-images' ); ?></h2>
58
+ <p><?php esc_attr_e( 'Manage your media upload settings.', 'instant-images' ); ?></p>
59
+ <div class="cta-wrap">
60
+ <form action="options.php" method="post" id="unsplash-form-options">
61
+ <?php
62
+ settings_fields( 'instant-img-setting-group' );
63
+ do_settings_sections( 'instant-images' );
64
+ // @codingStandardsIgnoreStart
65
+ $options = get_option( 'instant_img_settings' ); // Get the older values, wont work the first time.
66
+ // @codingStandardsIgnoreEnd
67
+ ?>
68
+ <div class="save-settings">
69
+ <?php submit_button( __( 'Save Settings', 'instant-images' ) ); ?>
70
+ <div class="loading"></div>
71
+ <div class="clear"></div>
72
+ </div>
73
+ </form>
74
+ </div>
75
+ </section>
76
  <?php
77
  $instant_images_plugin_array = array(
78
  array(
79
  'slug' => 'ajax-load-more',
80
  ),
81
  array(
82
+ 'slug' => 'block-manager',
83
  ),
84
  array(
85
+ 'slug' => 'easy-query',
86
  ),
87
  array(
88
  'slug' => 'velocity',
91
  ?>
92
  <section class="cta ii-plugins">
93
  <h2><?php esc_attr_e( 'Our Plugins', 'instant-images' ); ?></h2>
94
+ <p><?php esc_attr_e( 'Check out some of our other WordPress plugins.', 'instant-images' ); ?></p>
95
+ <?php
96
+ if ( class_exists( 'Connekt_Plugin_Installer' ) ) {
97
+ Connekt_Plugin_Installer::init( $instant_images_plugin_array );
98
+ }
99
+ ?>
 
 
100
  </section>
101
 
102
  </div>
 
103
  </section>
admin/includes/settings.php CHANGED
@@ -47,6 +47,24 @@ function instant_images_admin_init() {
47
  'unsplash_general_settings'
48
  );
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  // Button Display.
51
  add_settings_field(
52
  'media_modal_display',
@@ -140,16 +158,56 @@ function instant_images_tab_display_callback() {
140
  $options['media_modal_display'] = '0';
141
  }
142
 
143
- $style = 'style="position: absolute; left: 0; top: 9px;"';
144
-
145
  $html = '<label style="cursor: default;"><strong>' . esc_attr__( 'Media Modal:', 'instant-images' ) . '</strong></label>';
146
- $html .= '<label for="media_modal_display" style="padding-left: 24px; position: relative;">';
147
  $html .= '<input type="hidden" name="instant_img_settings[media_modal_display]" value="0" />';
148
- $html .= '<input ' . $style . ' type="checkbox" name="instant_img_settings[media_modal_display]" id="media_modal_display" value="1"' . ( $options['media_modal_display'] ? ' checked="checked"' : '' ) . ' />';
149
- $html .= __( 'Hide the <b>Instant Images</b> tab in admin Media Modal windows.', 'instant-images' );
150
  $html .= '</label>';
151
 
152
  // @codingStandardsIgnoreStart
153
  echo $html;
154
  // @codingStandardsIgnoreEnd
155
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  'unsplash_general_settings'
48
  );
49
 
50
+ // Default Provider.
51
+ add_settings_field(
52
+ 'default_provider',
53
+ __( 'Default Image Provider', 'instant-images' ),
54
+ 'instant_images_default_provider',
55
+ 'instant-images',
56
+ 'unsplash_general_settings'
57
+ );
58
+
59
+ // Pixabay API Key.
60
+ add_settings_field(
61
+ 'pixabay_api',
62
+ __( 'Pixabay API Key', 'instant-images' ),
63
+ 'instant_images_pixabay_api_callback',
64
+ 'instant-images',
65
+ 'unsplash_general_settings'
66
+ );
67
+
68
  // Button Display.
69
  add_settings_field(
70
  'media_modal_display',
158
  $options['media_modal_display'] = '0';
159
  }
160
 
 
 
161
  $html = '<label style="cursor: default;"><strong>' . esc_attr__( 'Media Modal:', 'instant-images' ) . '</strong></label>';
162
+ $html .= '<label for="media_modal_display">';
163
  $html .= '<input type="hidden" name="instant_img_settings[media_modal_display]" value="0" />';
164
+ $html .= '<input type="checkbox" name="instant_img_settings[media_modal_display]" id="media_modal_display" value="1"' . ( $options['media_modal_display'] ? ' checked="checked"' : '' ) . ' />';
165
+ $html .= __( 'Hide Instant Images tab in Media Modal windows.', 'instant-images' );
166
  $html .= '</label>';
167
 
168
  // @codingStandardsIgnoreStart
169
  echo $html;
170
  // @codingStandardsIgnoreEnd
171
  }
172
+
173
+ /**
174
+ * Set the default image provider.
175
+ *
176
+ * @author ConnektMedia <support@connekthq.com>
177
+ * @since 4.5
178
+ */
179
+ function instant_images_default_provider() {
180
+ $options = get_option( 'instant_img_settings' );
181
+ if ( ! isset( $options['default_provider'] ) ) {
182
+ $options['default_provider'] = 'unsplash';
183
+ }
184
+ ?>
185
+ <label for="default_provider" style="cursor: default; margin-bottom: 3px;">
186
+ <strong><?php esc_attr_e( 'Default Provider:', 'instant-images' ); ?></strong>
187
+ </label>
188
+ <select id="default_provider" name="instant_img_settings[default_provider]">
189
+ <option value="unsplash" <?php selected( 'unsplash', $options['default_provider'] ); ?>><?php esc_attr_e( 'Unsplash', 'instant-images' ); ?></option>
190
+ <option value="pixabay" <?php selected( 'pixabay', $options['default_provider'] ); ?>><?php esc_attr_e( 'Pixabay', 'instant-images' ); ?> (<?php esc_attr_e( 'Requires API Key', 'instant-images' ); ?>)</option>
191
+ </select>
192
+ <?php
193
+ }
194
+
195
+ /**
196
+ * Set the Pizabay API key.
197
+ *
198
+ * @author ConnektMedia <support@connekthq.com>
199
+ * @since 4.5
200
+ */
201
+ function instant_images_pixabay_api_callback() {
202
+ $options = get_option( 'instant_img_settings' );
203
+ if ( ! isset( $options['pixabay_api'] ) ) {
204
+ $options['pixabay_api'] = '';
205
+ }
206
+ ?>
207
+ <label for="pixabay_api" style="cursor: default; margin-bottom: 3px;">
208
+ <strong><?php esc_attr_e( 'Pixabay API Key:', 'instant-images' ); ?></strong>
209
+ </label>
210
+ <input type="text" id="pixabay_api" name="instant_img_settings[pixabay_api]" value="<?php echo wp_kses_post( $options['pixabay_api'] ); ?>" >
211
+ <span class="desc">&rarr; <a href="https://pixabay.com/" target="_blank"><?php esc_attr_e( 'Get API Key', 'instant-images' ); ?></a></span>
212
+ <?php
213
+ }
admin/views/{unsplash.php → app.php} RENAMED
@@ -17,9 +17,9 @@ if ( ! defined( 'ABSPATH' ) ) {
17
  <span>
18
  <?php
19
  // translators: Instant Images tagline.
20
- $instant_images_tagline = __( 'One click photo uploads from %s', 'instant-images' );
21
  // @codingStandardsIgnoreStart
22
- echo sprintf( $instant_images_tagline, '<a href="https://unsplash.com/" target="_blank">unsplash.com</a>' );
23
  // @codingStandardsIgnoreEnd
24
  ?>
25
  </h1>
17
  <span>
18
  <?php
19
  // translators: Instant Images tagline.
20
+ $instant_images_tagline = __( 'One click photo uploads from %1$s and %2$s.', 'instant-images' );
21
  // @codingStandardsIgnoreStart
22
+ echo sprintf( $instant_images_tagline, '<a href="https://unsplash.com/" target="_blank">Unsplash</a>', '<a href="https://pixabay.com/" target="_blank">Pixabay</a>' );
23
  // @codingStandardsIgnoreEnd
24
  ?>
25
  </h1>
api/download.php CHANGED
@@ -1,6 +1,6 @@
1
  <?php
2
  /**
3
- * Custom download API route
4
  *
5
  * @since 3.0
6
  * @author dcooney
@@ -69,7 +69,7 @@ function instant_images_download( WP_REST_Request $request ) {
69
  $filename = sanitize_text_field( $data['filename'] ); // The filename.
70
  $title = sanitize_text_field( $data['title'] ); // Title.
71
  $alt = sanitize_text_field( $data['alt'] ); // Alt text.
72
- $caption = sanitize_text_field( $data['caption'] ); // Caption text.
73
  $cfilename = sanitize_title( $data['custom_filename'] ); // Custom filename.
74
  $parent_id = ( $data['parent_id'] ) ? sanitize_title( $data['parent_id'] ) : 0; // Parent post ID.
75
  $name = ( ! empty( $cfilename ) ) ? $cfilename . '.jpg' : $filename; // Actual filename.
1
  <?php
2
  /**
3
+ * Custom /ownload API route for download and adding images to media library.
4
  *
5
  * @since 3.0
6
  * @author dcooney
69
  $filename = sanitize_text_field( $data['filename'] ); // The filename.
70
  $title = sanitize_text_field( $data['title'] ); // Title.
71
  $alt = sanitize_text_field( $data['alt'] ); // Alt text.
72
+ $caption = wp_kses_post( $data['caption'] ); // Caption text.
73
  $cfilename = sanitize_title( $data['custom_filename'] ); // Custom filename.
74
  $parent_id = ( $data['parent_id'] ) ? sanitize_title( $data['parent_id'] ) : 0; // Parent post ID.
75
  $name = ( ! empty( $cfilename ) ) ? $cfilename . '.jpg' : $filename; // Actual filename.
api/settings.php ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Custom /settings route to update plugin settings.
4
+ *
5
+ * @since 4.5
6
+ * @author dcooney
7
+ * @package InstantImages
8
+ */
9
+
10
+ add_action(
11
+ 'rest_api_init',
12
+ function () {
13
+ $my_namespace = 'instant-images';
14
+ $my_endpoint = '/settings';
15
+ register_rest_route(
16
+ $my_namespace,
17
+ $my_endpoint,
18
+ array(
19
+ 'methods' => 'POST',
20
+ 'callback' => 'instant_images_settings',
21
+ 'permission_callback' => function () {
22
+ return InstantImages::instant_img_has_access();
23
+ },
24
+ )
25
+ );
26
+ }
27
+ );
28
+
29
+ /**
30
+ * Save plugin settings.
31
+ *
32
+ * @param WP_REST_Request $request API request.
33
+ * @since 4.5
34
+ * @author dcooney
35
+ * @package InstantImages
36
+ */
37
+ function instant_images_settings( WP_REST_Request $request ) {
38
+
39
+ if ( InstantImages::instant_img_has_access() ) {
40
+
41
+ // Get JSON Data.
42
+ $data = json_decode( $request->get_body(), true ); // Get contents of request body.
43
+
44
+ if ( $data ) {
45
+
46
+ $option = 'instant_img_settings';
47
+
48
+ // Global settings.
49
+ $options = get_option( $option );
50
+ $setting = sanitize_text_field( $data['setting'] ); // The setting to update.
51
+ $value = sanitize_text_field( $data['value'] ); // The value to update.
52
+
53
+ if ( $setting ) {
54
+ $options[ $setting ] = $value;
55
+ update_option( $option, $options );
56
+
57
+ // Success.
58
+ $response = array(
59
+ 'success' => true,
60
+ 'msg' => 'Settings saved.',
61
+ );
62
+ } else {
63
+ // Error.
64
+ $response = array(
65
+ 'success' => false,
66
+ 'msg' => 'Unable to save settings.',
67
+ );
68
+ }
69
+
70
+ // Send response as JSON.
71
+ wp_send_json( $response );
72
+
73
+ }
74
+ }
75
+
76
+ }
api/test.php CHANGED
@@ -1,6 +1,6 @@
1
  <?php
2
  /**
3
- * Custom /resize route
4
  *
5
  * @since 3.0
6
  * @author dcooney
1
  <?php
2
  /**
3
+ * Custom /test route to text REST API access.
4
  *
5
  * @since 3.0
6
  * @author dcooney
dist/css/instant-images.css CHANGED
@@ -38,6 +38,10 @@ body.media_page_instant-images #wpfooter p {
38
  }
39
  }
40
 
 
 
 
 
41
  .instant-img-container {
42
  font-size: 14px;
43
  color: #666;
@@ -65,7 +69,7 @@ body.media_page_instant-images #wpfooter p {
65
  }
66
 
67
  .instant-img-container a {
68
- color: #5d72c3;
69
  -webkit-transition: all 0.25s ease;
70
  -o-transition: all 0.25s ease;
71
  transition: all 0.25s ease;
@@ -97,22 +101,19 @@ body.media_page_instant-images #wpfooter p {
97
  }
98
 
99
  .instant-img-container .error-messaging {
100
- display: none;
101
- }
102
-
103
- .instant-img-container .error-messaging.active {
104
- padding: 17px 17px 17px 57px;
105
  -webkit-border-radius: 3px;
106
  border-radius: 3px;
107
- background: #df3333;
108
  color: #fff;
109
  font-size: 13px;
 
110
  margin-bottom: 25px;
111
  display: block;
112
  position: relative;
113
  }
114
 
115
- .instant-img-container .error-messaging.active:before {
116
  font-family: "FontAwesome";
117
  content: "\F06A";
118
  display: block;
@@ -122,7 +123,7 @@ body.media_page_instant-images #wpfooter p {
122
  -ms-transform: translateY(-50%);
123
  transform: translateY(-50%);
124
  position: absolute;
125
- font-size: 30px;
126
  opacity: 0.75;
127
  }
128
 
@@ -179,7 +180,7 @@ body.media_page_instant-images #wpfooter p {
179
  .instant-img-container .header-wrap h1 span {
180
  display: block;
181
  padding: 3px 0 0;
182
- color: #888;
183
  font-size: 15px;
184
  font-weight: 400;
185
  }
@@ -278,9 +279,6 @@ body.media_page_instant-images #wpfooter p {
278
  cursor: default;
279
  }
280
 
281
- /*
282
- Columns
283
- */
284
  .instant-img-container .cnkt-main {
285
  width: 100%;
286
  float: none;
@@ -294,9 +292,6 @@ body.media_page_instant-images #wpfooter p {
294
  margin-top: 0;
295
  }
296
 
297
- /*
298
- * Settings
299
- */
300
  .instant-img-container .save-settings p.submit {
301
  float: left;
302
  margin: 0 2px 0 0;
@@ -311,9 +306,6 @@ body.media_page_instant-images #wpfooter p {
311
  background: #fff url(../img/ajax-loader.gif) no-repeat center center;
312
  }
313
 
314
- /*
315
- * Thickbox styles
316
- */
317
  #TB_ajaxContent {
318
  clear: both;
319
  line-height: 1.4em;
@@ -325,10 +317,11 @@ body.media_page_instant-images #wpfooter p {
325
  padding: 15px !important;
326
  }
327
 
328
- /* Table */
329
  .cnkt-sidebar .form-table {
330
  margin: 0;
331
  border: none;
 
 
332
  }
333
 
334
  .cnkt-sidebar .form-table td,
@@ -338,6 +331,7 @@ body.media_page_instant-images #wpfooter p {
338
  }
339
 
340
  .cnkt-sidebar .form-table label {
 
341
  display: block;
342
  clear: both;
343
  float: none;
@@ -355,16 +349,12 @@ body.media_page_instant-images #wpfooter p {
355
 
356
  .instant-img-container .form-table td {
357
  border-top: 0;
358
- padding: 0 0 15px;
359
  float: left;
360
  width: 100%;
361
  margin: 0;
362
  }
363
 
364
- .instant-img-container .form-table tr:first-of-type td {
365
- padding: 10px 0;
366
- }
367
-
368
  .cnkt-sidebar .form-table .form-msg,
369
  .cnkt-main .form-msg {
370
  display: block;
@@ -415,8 +405,12 @@ body.media_page_instant-images #wpfooter p {
415
  box-shadow: none;
416
  }
417
 
 
 
 
 
418
  .instant-img-container label {
419
- padding: 5px 0;
420
  }
421
 
422
  #unsplash-form-options h2,
@@ -429,7 +423,6 @@ body.media_page_instant-images #wpfooter p {
429
  .instant-img-container textarea {
430
  padding: 10px;
431
  line-height: 1;
432
- border: 1px solid #ccc;
433
  background: #f7f7f7;
434
  width: 100%;
435
  -webkit-border-radius: 2px;
@@ -445,7 +438,6 @@ body.media_page_instant-images #wpfooter p {
445
  background: #efefef;
446
  }
447
 
448
- /* Helpers */
449
  .instant-img-container .spacer {
450
  display: block;
451
  height: 40px;
@@ -464,12 +456,28 @@ body.media_page_instant-images #wpfooter p {
464
  }
465
 
466
  .instant-img-container .control-nav {
467
- display: block;
 
 
 
 
 
 
 
 
468
  margin: 0;
469
  padding: 25px 0;
470
  list-style: none;
471
  }
472
 
 
 
 
 
 
 
 
 
473
  .instant-img-container .control-nav:after {
474
  content: "";
475
  display: table;
@@ -487,8 +495,8 @@ body.media_page_instant-images #wpfooter p {
487
 
488
  .instant-img-container .control-nav li button {
489
  padding: 0 24px 0 2px;
490
- height: 48px;
491
- line-height: 48px;
492
  display: block;
493
  color: #999;
494
  text-decoration: none;
@@ -534,7 +542,6 @@ body.media_page_instant-images #wpfooter p {
534
 
535
  @media screen and (max-width: 600px) {
536
  .instant-img-container .control-nav li {
537
- width: 33.333%;
538
  text-align: center;
539
  margin: 0;
540
  padding-bottom: 15px;
@@ -542,9 +549,9 @@ body.media_page_instant-images #wpfooter p {
542
  }
543
 
544
  .instant-img-container .control-nav li.search-field {
545
- float: right;
546
- width: 49%;
547
  margin: 0;
 
548
  max-width: 500px;
549
  }
550
 
@@ -553,7 +560,7 @@ body.media_page_instant-images #wpfooter p {
553
  width: 100%;
554
  display: block;
555
  position: static;
556
- padding-bottom: 15px;
557
  text-align: left;
558
  max-width: 100%;
559
  }
@@ -562,45 +569,60 @@ body.media_page_instant-images #wpfooter p {
562
  .instant-img-container .control-nav li.search-field .searchResults {
563
  position: absolute;
564
  right: 100.5%;
565
- top: 7px;
566
  width: auto;
567
  height: 34px;
568
  line-height: 34px;
569
- padding: 0 30px 0 10px;
570
- background: #ffffbf;
571
- border: 1px solid #ebebae;
572
  -webkit-border-radius: 3px;
573
  border-radius: 3px;
574
  z-index: 99;
575
  font-size: 13px;
576
- font-weight: 600;
577
  -webkit-transition: all 0.25s ease;
578
  -o-transition: all 0.25s ease;
579
  transition: all 0.25s ease;
580
- color: #444;
581
- text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
582
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
583
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
 
 
 
 
 
 
584
  }
585
 
586
  .instant-img-container .control-nav li.search-field .searchResults span {
587
  cursor: help;
588
- }
589
-
590
- .instant-img-container .control-nav li.search-field .searchResults span,
591
- .instant-img-container .control-nav li.search-field .searchResults a {
592
- line-height: 34px;
593
  }
594
 
595
  .instant-img-container .control-nav li.search-field .searchResults button {
596
- padding: 0 10px;
597
- height: 32px;
598
- line-height: 32px;
 
599
  width: 30px;
600
- position: absolute;
601
- left: auto;
602
- right: 0;
603
- top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
604
  }
605
 
606
  .instant-img-container .control-nav li.search-field .searchResults:after, .instant-img-container .control-nav li.search-field .searchResults:before {
@@ -617,14 +639,14 @@ body.media_page_instant-images #wpfooter p {
617
 
618
  .instant-img-container .control-nav li.search-field .searchResults:after {
619
  border-color: rgba(223, 225, 173, 0);
620
- border-left-color: #ffffbf;
621
  border-width: 6px;
622
  margin-top: -6px;
623
  }
624
 
625
  .instant-img-container .control-nav li.search-field .searchResults:before {
626
  border-color: rgba(0, 0, 0, 0);
627
- border-left-color: #ebebae;
628
  border-width: 7px;
629
  margin-top: -7px;
630
  }
@@ -638,11 +660,11 @@ body.media_page_instant-images #wpfooter p {
638
  padding: 0 1px 0 0;
639
  margin: 0;
640
  position: relative;
641
- height: 48px;
642
  display: block;
643
  }
644
 
645
- .instant-img-container .control-nav li.search-field form:hover button {
646
  opacity: 1;
647
  }
648
 
@@ -651,20 +673,20 @@ body.media_page_instant-images #wpfooter p {
651
  padding: 0 10px 0 42px;
652
  border: 1px solid #e1e1e1;
653
  background-color: #f7f7f7 !important;
654
- height: 46px;
655
- line-height: 46px;
656
- -webkit-border-radius: 3px;
657
- border-radius: 3px;
658
  font-size: 16px;
659
- -webkit-transition: padding 0.15s ease;
660
- -o-transition: padding 0.15s ease;
661
- transition: padding 0.15s ease;
662
  }
663
 
664
  .instant-img-container .control-nav li.search-field input:focus {
665
  border-color: #999;
666
- -webkit-box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.075);
667
- box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.075);
668
  }
669
 
670
  .instant-img-container .control-nav li.search-field input.searching {
@@ -674,12 +696,20 @@ body.media_page_instant-images #wpfooter p {
674
  background-repeat: no-repeat;
675
  }
676
 
677
- .instant-img-container .control-nav li.search-field button {
 
 
 
 
 
 
 
678
  position: absolute;
679
- left: -2px;
680
- top: -1px;
681
- width: 48px;
682
- height: 48px;
 
683
  z-index: 1;
684
  border: none !important;
685
  background: transparent !important;
@@ -695,42 +725,38 @@ body.media_page_instant-images #wpfooter p {
695
  padding: 0;
696
  }
697
 
698
- .instant-img-container .control-nav li.search-field button:hover {
699
  outline: none;
700
- color: #5d72c3;
701
  }
702
 
703
- .instant-img-container .control-nav li.search-field button:focus {
704
  outline: none;
705
- color: #5d72c3;
706
  }
707
 
708
  .instant-img-container .control-nav li.search-field input[type="search"]::-webkit-input-placeholder {
709
  color: #ccc;
710
- font-weight: 300;
711
  font-style: normal;
712
- font-size: 14px;
713
  }
714
 
715
  .instant-img-container .control-nav li.search-field input[type="search"]:-moz-placeholder {
716
  color: #ccc;
717
- font-weight: 300;
718
  font-style: normal;
719
- font-size: 14px;
720
  }
721
 
722
  .instant-img-container .control-nav li.search-field input[type="search"]::-moz-placeholder {
723
  color: #ccc;
724
- font-weight: 300;
725
  font-style: normal;
726
- font-size: 14px;
727
  }
728
 
729
  .instant-img-container .control-nav li.search-field input[type="search"]:-ms-input-placeholder {
730
  color: #ccc;
731
- font-weight: 300;
732
  font-style: normal;
733
- font-size: 14px;
734
  }
735
 
736
  #photos {
@@ -917,7 +943,7 @@ body.media_page_instant-images #wpfooter p {
917
  #photos .photo a.upload.success .status {
918
  visibility: visible;
919
  opacity: 1;
920
- background-color: #63d875;
921
  }
922
 
923
  #photos .photo a.upload.success .status:before {
@@ -1166,7 +1192,17 @@ body.media_page_instant-images #wpfooter p {
1166
  white-space: nowrap;
1167
  }
1168
 
1169
- #photos .photo .fade.user img {
 
 
 
 
 
 
 
 
 
 
1170
  width: 20px;
1171
  max-width: 20px;
1172
  -webkit-border-radius: 100%;
@@ -1176,6 +1212,10 @@ body.media_page_instant-images #wpfooter p {
1176
  top: 8px;
1177
  }
1178
 
 
 
 
 
1179
  #photos .photo .notice-msg {
1180
  position: absolute;
1181
  z-index: 999;
@@ -1215,7 +1255,7 @@ body.media_page_instant-images #wpfooter p {
1215
  -webkit-transition: all 0.25s ease;
1216
  -o-transition: all 0.25s ease;
1217
  transition: all 0.25s ease;
1218
- padding: 8px;
1219
  overflow-y: auto;
1220
  -webkit-overflow-scrolling: touch;
1221
  border: 1px solid #e1e1e1;
@@ -1236,7 +1276,7 @@ body.media_page_instant-images #wpfooter p {
1236
  display: block;
1237
  background: #f7f7f7;
1238
  border: 1px solid #e1e1e1;
1239
- padding: 15px;
1240
  -webkit-border-radius: 2px 2px 0 0;
1241
  border-radius: 2px 2px 0 0;
1242
  }
@@ -1246,40 +1286,89 @@ body.media_page_instant-images #wpfooter p {
1246
  }
1247
 
1248
  #photos .edit-screen--controls {
1249
- -webkit-border-radius: 0 0 2px 2px;
1250
- border-radius: 0 0 2px 2px;
1251
  }
1252
 
1253
  #photos .edit-screen--title {
1254
  border-bottom: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1255
  }
1256
 
1257
  #photos .edit-screen--title p {
1258
  font-size: 12px;
1259
- line-height: 1.25;
1260
  margin: 0;
1261
  color: #999;
1262
  }
1263
 
1264
  #photos .edit-screen--title p.heading {
1265
  color: #222;
1266
- margin: 0 0 5px;
1267
  font-weight: 600;
1268
  text-transform: uppercase;
1269
  }
1270
 
1271
- #photos .edit-screen label {
 
1272
  margin: 0;
1273
  padding: 15px;
1274
  display: block;
1275
  background: #fff;
1276
  border: 1px solid #e1e1e1;
1277
  border-bottom: none;
1278
- -webkit-border-radius: 2px;
1279
- border-radius: 2px;
1280
  position: relative;
1281
  }
1282
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1283
  #photos .edit-screen span {
1284
  display: block;
1285
  font-size: 11px;
@@ -1292,23 +1381,25 @@ body.media_page_instant-images #wpfooter p {
1292
 
1293
  #photos .edit-screen textarea {
1294
  resize: none;
 
 
1295
  }
1296
 
1297
  #photos .edit-screen input {
1298
  font-size: 12px;
1299
- padding: 0 5px;
1300
  margin: 0;
1301
- height: 30px;
1302
- line-height: 30px;
1303
  }
1304
 
1305
  #photos .edit-screen em {
1306
  position: absolute;
1307
  bottom: 15px;
1308
  right: 15px;
1309
- height: 30px;
1310
- line-height: 30px;
1311
- background: #777;
1312
  -webkit-border-radius: 0 2px 2px 0;
1313
  border-radius: 0 2px 2px 0;
1314
  color: #e1e1e1;
@@ -1320,70 +1411,116 @@ body.media_page_instant-images #wpfooter p {
1320
  .instant-images-settings {
1321
  display: none;
1322
  background-color: #efefef;
1323
- border-top: 1px solid #e7e7e7;
1324
- border-bottom: 1px solid #e7e7e7;
1325
  }
1326
 
1327
  .instant-images-settings .cnkt-sidebar {
1328
  padding: 20px 25px;
1329
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
1330
  }
1331
 
1332
  .instant-images-settings .cnkt-sidebar .cta {
1333
- float: left;
1334
- width: 50%;
 
 
 
 
 
 
 
1335
  }
1336
 
1337
- @media screen and (max-width: 800px) {
1338
  .instant-images-settings .cnkt-sidebar .cta {
1339
- float: none !important;
1340
- width: 100% !important;
1341
  }
1342
  }
1343
 
1344
- .instant-images-settings .cnkt-sidebar .cta.ii-settings {
1345
- width: 31.333%;
 
 
 
1346
  }
1347
 
1348
- .instant-images-settings .cnkt-sidebar .cta.ii-plugins {
1349
- width: 68.666%;
1350
- width: calc(68.666% - 25px);
1351
- float: right;
 
 
1352
  }
1353
 
1354
- .instant-images-settings .cnkt-sidebar .cta h2 {
1355
- border: none;
1356
- padding: 17px 20px 3px;
1357
- font-size: 16px;
 
 
 
 
 
1358
  }
1359
 
1360
- .instant-images-settings .cnkt-sidebar .cta h2.w-border {
1361
- border-top: 1px solid #e7e7e7;
 
 
 
 
 
 
 
 
1362
  }
1363
 
1364
- .instant-images-settings .cnkt-sidebar .cta h2 + p {
1365
- padding: 0 20px 15px;
1366
- margin: 0 !important;
1367
- border-bottom: 1px solid #e7e7e7;
1368
  }
1369
 
1370
- .instant-images-settings .cnkt-sidebar .cta h2,
1371
- .instant-images-settings .cnkt-sidebar .cta h2 + p {
1372
- background: #f7f7f7;
1373
- margin: 0;
1374
  }
1375
 
1376
- .instant-images-settings .cnkt-sidebar .cta ul.whats-new {
1377
- list-style: disc;
1378
- padding: 0 0 10px 20px;
 
 
 
 
1379
  }
1380
 
1381
- .instant-images-settings .cnkt-sidebar .cta ul.whats-new li {
1382
- margin: 10px 0 0;
 
 
 
 
 
1383
  }
1384
 
1385
- .instant-images-settings .cnkt-sidebar .cta ul.whats-new li pre {
1386
- display: inline-block;
1387
  margin: 0;
1388
  padding: 3px;
1389
  background: #f7f7f7;
@@ -1393,60 +1530,157 @@ body.media_page_instant-images #wpfooter p {
1393
  box-shadow: 0 0 0 1px #efefef;
1394
  }
1395
 
1396
- .instant-images-settings .cnkt-sidebar .cta {
1397
- background: #fff;
1398
- padding: 0 0 20px;
1399
- margin: 0 0 20px;
1400
- overflow: hidden;
1401
- position: relative;
1402
- border: 1px solid #e7e7e7;
 
 
 
 
 
1403
  }
1404
 
1405
- .instant-images-settings .cnkt-sidebar .cta.padding-bottom {
1406
- padding-bottom: 66px;
1407
  }
1408
 
1409
- .instant-images-settings .cnkt-sidebar .cnkt-sidebar h3,
1410
- .instant-images-settings .cnkt-sidebar .cnkt-sidebar h4 {
1411
- margin-top: 0;
 
1412
  }
1413
 
1414
- .instant-images-settings .cnkt-sidebar .cta-wrap {
1415
- display: block;
1416
- padding: 10px 20px;
 
 
 
 
1417
  }
1418
 
1419
- .instant-images-settings .cnkt-sidebar .cta-wrap h4 {
1420
- padding: 10px 0 7px;
1421
- margin: 0;
 
 
 
 
 
1422
  }
1423
 
1424
- .instant-images-settings .cnkt-sidebar .cta-wrap h4 span {
1425
- display: inline-block;
1426
- line-height: 1;
1427
- padding: 8px 10px;
1428
- -webkit-border-radius: 2px;
1429
- border-radius: 2px;
1430
- background: #ffffcc;
1431
- color: #666;
1432
  }
1433
 
1434
- .instant-images-settings .cnkt-sidebar .cnkt-plugin-installer .plugin {
1435
- width: 48%;
1436
- margin: 2% 1% 0;
 
1437
  }
1438
 
1439
- @media screen and (max-width: 1170px) {
1440
- .instant-images-settings .cnkt-sidebar .cnkt-plugin-installer .plugin {
1441
- width: 100%;
1442
- margin: 2% 0 0;
1443
- }
 
1444
  }
1445
 
1446
- .instant-images-settings .cnkt-sidebar .cnkt-plugin-installer .plugin h2 {
1447
- border: none;
1448
- padding: 0;
1449
- font-size: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1450
  }
1451
 
1452
  .instant-images-settings .cnkt-sidebar .cnkt-plugin-installer .plugin h2 + p {
@@ -1477,6 +1711,10 @@ body.media_page_instant-images #wpfooter p {
1477
  padding: 0 16px;
1478
  }
1479
 
 
 
 
 
1480
  .instant-images-sidebar-icon,
1481
  .instant-images-sidebar-icon svg {
1482
  display: -webkit-inline-box;
@@ -1494,8 +1732,8 @@ body.media_page_instant-images #wpfooter p {
1494
 
1495
  .instant-images-sidebar-icon svg,
1496
  .instant-images-sidebar-icon svg * {
1497
- stroke: #5d72c3 !important;
1498
- fill: #5d72c3 !important;
1499
  }
1500
 
1501
  .components-panel .instant-img-container .load-more-wrap {
@@ -1528,15 +1766,31 @@ body.media_page_instant-images #wpfooter p {
1528
  padding: 0;
1529
  }
1530
 
 
 
 
 
 
 
 
 
 
 
 
 
1531
  .components-panel .control-nav {
1532
- padding: 0 16px 8px;
1533
- border-bottom: 1px solid #e2e4e7;
1534
  }
1535
 
1536
  .components-panel .control-nav li {
1537
  font-size: 13px;
1538
  }
1539
 
 
 
 
 
1540
  .components-panel .control-nav li a {
1541
  padding: 16px 24px 16px 0;
1542
  height: auto;
@@ -1552,8 +1806,6 @@ body.media_page_instant-images #wpfooter p {
1552
 
1553
  .components-panel .control-nav li.search-field form {
1554
  height: auto;
1555
- width: calc(100% + 16px);
1556
- margin-left: -8px;
1557
  }
1558
 
1559
  .components-panel .control-nav li.search-field:before {
@@ -1562,13 +1814,15 @@ body.media_page_instant-images #wpfooter p {
1562
  clear: both;
1563
  }
1564
 
 
 
 
 
1565
  .components-panel .control-nav li.search-field input {
1566
- line-height: 36px;
1567
- height: 36px;
1568
- padding-right: 8px;
1569
- padding-left: 30px;
1570
- -webkit-border-radius: 0;
1571
- border-radius: 0;
1572
  border-color: #e2e4e7;
1573
  font-size: 13px;
1574
  -webkit-border-radius: 3px !important;
@@ -1577,30 +1831,47 @@ body.media_page_instant-images #wpfooter p {
1577
 
1578
  .components-panel .control-nav li.search-field input.searching {
1579
  padding-left: 30px;
1580
- background-position: 95% center;
1581
  }
1582
 
1583
- .components-panel .control-nav li.search-field button {
1584
- position: absolute;
1585
- right: auto;
1586
- top: 0;
1587
- width: 40px;
1588
- height: 36px;
1589
- line-height: 36px;
1590
- padding: 0;
1591
- margin: 0;
1592
  }
1593
 
1594
  .components-panel .control-nav li.search-field .searchResults {
1595
- right: 1px;
1596
  left: auto;
1597
- top: 1px;
 
 
 
 
 
1598
  }
1599
 
1600
  .components-panel .control-nav li.search-field .searchResults:before, .components-panel .control-nav li.search-field .searchResults:after {
1601
  display: none;
1602
  }
1603
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1604
  .media-frame-content .instant-img-container .load-more-wrap {
1605
  display: block;
1606
  }
@@ -1661,15 +1932,11 @@ body.media_page_instant-images #wpfooter p {
1661
  }
1662
 
1663
  .no-results {
1664
- display: none;
1665
  padding: 150px 100px;
1666
  text-align: center;
1667
  }
1668
 
1669
- .no-results.show {
1670
- display: block;
1671
- }
1672
-
1673
  .no-results h3 {
1674
  font-size: 24px;
1675
  line-height: 29px;
@@ -1709,6 +1976,10 @@ body.media_page_instant-images #wpfooter p {
1709
  font-size: 13px;
1710
  }
1711
 
 
 
 
 
1712
  .orientation-list ul {
1713
  -webkit-box-flex: 1;
1714
  -ms-flex: 1;
@@ -1737,41 +2008,392 @@ body.media_page_instant-images #wpfooter p {
1737
  }
1738
 
1739
  .orientation-list ul li:focus {
1740
- border-color: #5d72c3;
1741
  color: #111;
1742
  outline: none;
1743
  }
1744
 
1745
  .orientation-list ul li.active {
1746
- background-color: #5d72c3;
1747
- border-color: #5d72c3;
1748
  color: #fff;
1749
  outline: none;
1750
  }
1751
 
1752
- .components-panel .orientation-list {
1753
- position: static;
1754
- text-align: center;
1755
- -ms-flex-wrap: wrap;
1756
- flex-wrap: wrap;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1757
  -webkit-box-pack: center;
1758
  -ms-flex-pack: center;
1759
  justify-content: center;
1760
- border-top: none;
1761
- background: #f7f7f7;
1762
- margin-bottom: 10px;
 
 
 
 
 
 
 
1763
  }
1764
 
1765
- .components-panel .orientation-list span {
1766
- display: none;
 
 
 
1767
  }
1768
 
1769
- .components-panel .orientation-list ul {
 
 
1770
  padding: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1771
  width: 100%;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1772
  -webkit-box-pack: center;
1773
  -ms-flex-pack: center;
1774
  justify-content: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1775
  }
1776
 
1777
  /*# sourceMappingURL=instant-images.css.map*/
38
  }
39
  }
40
 
41
+ body.media_page_instant-images.overflow-hidden {
42
+ overflow: hidden;
43
+ }
44
+
45
  .instant-img-container {
46
  font-size: 14px;
47
  color: #666;
69
  }
70
 
71
  .instant-img-container a {
72
+ color: #586ec6;
73
  -webkit-transition: all 0.25s ease;
74
  -o-transition: all 0.25s ease;
75
  transition: all 0.25s ease;
101
  }
102
 
103
  .instant-img-container .error-messaging {
104
+ padding: 20px 20px 20px 60px;
 
 
 
 
105
  -webkit-border-radius: 3px;
106
  border-radius: 3px;
107
+ background: #da4444;
108
  color: #fff;
109
  font-size: 13px;
110
+ line-height: 1.5;
111
  margin-bottom: 25px;
112
  display: block;
113
  position: relative;
114
  }
115
 
116
+ .instant-img-container .error-messaging:before {
117
  font-family: "FontAwesome";
118
  content: "\F06A";
119
  display: block;
123
  -ms-transform: translateY(-50%);
124
  transform: translateY(-50%);
125
  position: absolute;
126
+ font-size: 32px;
127
  opacity: 0.75;
128
  }
129
 
180
  .instant-img-container .header-wrap h1 span {
181
  display: block;
182
  padding: 3px 0 0;
183
+ color: #999;
184
  font-size: 15px;
185
  font-weight: 400;
186
  }
279
  cursor: default;
280
  }
281
 
 
 
 
282
  .instant-img-container .cnkt-main {
283
  width: 100%;
284
  float: none;
292
  margin-top: 0;
293
  }
294
 
 
 
 
295
  .instant-img-container .save-settings p.submit {
296
  float: left;
297
  margin: 0 2px 0 0;
306
  background: #fff url(../img/ajax-loader.gif) no-repeat center center;
307
  }
308
 
 
 
 
309
  #TB_ajaxContent {
310
  clear: both;
311
  line-height: 1.4em;
317
  padding: 15px !important;
318
  }
319
 
 
320
  .cnkt-sidebar .form-table {
321
  margin: 0;
322
  border: none;
323
+ position: relative;
324
+ top: -5px;
325
  }
326
 
327
  .cnkt-sidebar .form-table td,
331
  }
332
 
333
  .cnkt-sidebar .form-table label {
334
+ color: #333;
335
  display: block;
336
  clear: both;
337
  float: none;
349
 
350
  .instant-img-container .form-table td {
351
  border-top: 0;
352
+ padding: 0 0 10px;
353
  float: left;
354
  width: 100%;
355
  margin: 0;
356
  }
357
 
 
 
 
 
358
  .cnkt-sidebar .form-table .form-msg,
359
  .cnkt-main .form-msg {
360
  display: block;
405
  box-shadow: none;
406
  }
407
 
408
+ .instant-img-container .save-settings {
409
+ padding-top: 5px;
410
+ }
411
+
412
  .instant-img-container label {
413
+ padding: 5px 0px;
414
  }
415
 
416
  #unsplash-form-options h2,
423
  .instant-img-container textarea {
424
  padding: 10px;
425
  line-height: 1;
 
426
  background: #f7f7f7;
427
  width: 100%;
428
  -webkit-border-radius: 2px;
438
  background: #efefef;
439
  }
440
 
 
441
  .instant-img-container .spacer {
442
  display: block;
443
  height: 40px;
456
  }
457
 
458
  .instant-img-container .control-nav {
459
+ display: -webkit-box;
460
+ display: -ms-flexbox;
461
+ display: flex;
462
+ -ms-flex-wrap: wrap;
463
+ flex-wrap: wrap;
464
+ -webkit-box-align: center;
465
+ -ms-flex-align: center;
466
+ align-items: center;
467
+ width: 100%;
468
  margin: 0;
469
  padding: 25px 0;
470
  list-style: none;
471
  }
472
 
473
+ @media screen and (max-width: 600px) {
474
+ .instant-img-container .control-nav {
475
+ -webkit-box-pack: center;
476
+ -ms-flex-pack: center;
477
+ justify-content: center;
478
+ }
479
+ }
480
+
481
  .instant-img-container .control-nav:after {
482
  content: "";
483
  display: table;
495
 
496
  .instant-img-container .control-nav li button {
497
  padding: 0 24px 0 2px;
498
+ height: 42px;
499
+ line-height: 42px;
500
  display: block;
501
  color: #999;
502
  text-decoration: none;
542
 
543
  @media screen and (max-width: 600px) {
544
  .instant-img-container .control-nav li {
 
545
  text-align: center;
546
  margin: 0;
547
  padding-bottom: 15px;
549
  }
550
 
551
  .instant-img-container .control-nav li.search-field {
552
+ width: 40%;
 
553
  margin: 0;
554
+ margin-left: auto;
555
  max-width: 500px;
556
  }
557
 
560
  width: 100%;
561
  display: block;
562
  position: static;
563
+ padding-bottom: 0;
564
  text-align: left;
565
  max-width: 100%;
566
  }
569
  .instant-img-container .control-nav li.search-field .searchResults {
570
  position: absolute;
571
  right: 100.5%;
572
+ top: 4px;
573
  width: auto;
574
  height: 34px;
575
  line-height: 34px;
576
+ padding: 0 0 0 10px;
577
+ background: #586ec6;
578
+ border: 1px solid #455cb6;
579
  -webkit-border-radius: 3px;
580
  border-radius: 3px;
581
  z-index: 99;
582
  font-size: 13px;
583
+ font-weight: 500;
584
  -webkit-transition: all 0.25s ease;
585
  -o-transition: all 0.25s ease;
586
  transition: all 0.25s ease;
587
+ color: #fff;
 
588
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
589
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
590
+ display: -webkit-box;
591
+ display: -ms-flexbox;
592
+ display: flex;
593
+ -webkit-box-align: center;
594
+ -ms-flex-align: center;
595
+ align-items: center;
596
  }
597
 
598
  .instant-img-container .control-nav li.search-field .searchResults span {
599
  cursor: help;
600
+ font-style: italic;
 
 
 
 
601
  }
602
 
603
  .instant-img-container .control-nav li.search-field .searchResults button {
604
+ color: #fff;
605
+ padding: 0;
606
+ height: auto;
607
+ line-height: 1;
608
  width: 30px;
609
+ font-weight: 700;
610
+ opacity: 0.65;
611
+ display: -webkit-box;
612
+ display: -ms-flexbox;
613
+ display: flex;
614
+ -webkit-box-align: center;
615
+ -ms-flex-align: center;
616
+ align-items: center;
617
+ -webkit-box-pack: center;
618
+ -ms-flex-pack: center;
619
+ justify-content: center;
620
+ font-size: 14px;
621
+ height: 100%;
622
+ }
623
+
624
+ .instant-img-container .control-nav li.search-field .searchResults button:hover, .instant-img-container .control-nav li.search-field .searchResults button:focus {
625
+ opacity: 1;
626
  }
627
 
628
  .instant-img-container .control-nav li.search-field .searchResults:after, .instant-img-container .control-nav li.search-field .searchResults:before {
639
 
640
  .instant-img-container .control-nav li.search-field .searchResults:after {
641
  border-color: rgba(223, 225, 173, 0);
642
+ border-left-color: #586ec6;
643
  border-width: 6px;
644
  margin-top: -6px;
645
  }
646
 
647
  .instant-img-container .control-nav li.search-field .searchResults:before {
648
  border-color: rgba(0, 0, 0, 0);
649
+ border-left-color: #455cb6;
650
  border-width: 7px;
651
  margin-top: -7px;
652
  }
660
  padding: 0 1px 0 0;
661
  margin: 0;
662
  position: relative;
663
+ height: 42px;
664
  display: block;
665
  }
666
 
667
+ .instant-img-container .control-nav li.search-field form:hover button[type="submit"] {
668
  opacity: 1;
669
  }
670
 
673
  padding: 0 10px 0 42px;
674
  border: 1px solid #e1e1e1;
675
  background-color: #f7f7f7 !important;
676
+ height: 42px;
677
+ line-height: 42px;
678
+ -webkit-border-radius: 5px;
679
+ border-radius: 5px;
680
  font-size: 16px;
681
+ -webkit-transition: all 0.2s ease;
682
+ -o-transition: all 0.2s ease;
683
+ transition: all 0.2s ease;
684
  }
685
 
686
  .instant-img-container .control-nav li.search-field input:focus {
687
  border-color: #999;
688
+ -webkit-box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.065);
689
+ box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.065);
690
  }
691
 
692
  .instant-img-container .control-nav li.search-field input.searching {
696
  background-repeat: no-repeat;
697
  }
698
 
699
+ .instant-img-container .control-nav li.search-field input[type="search"]::-webkit-search-decoration,
700
+ .instant-img-container .control-nav li.search-field input[type="search"]::-webkit-search-cancel-button,
701
+ .instant-img-container .control-nav li.search-field input[type="search"]::-webkit-search-results-button,
702
+ .instant-img-container .control-nav li.search-field input[type="search"]::-webkit-search-results-decoration {
703
+ -webkit-appearance: none;
704
+ }
705
+
706
+ .instant-img-container .control-nav li.search-field button[type=submit] {
707
  position: absolute;
708
+ left: 0;
709
+ top: 0;
710
+ width: 42px;
711
+ height: 42px;
712
+ line-height: 42px;
713
  z-index: 1;
714
  border: none !important;
715
  background: transparent !important;
725
  padding: 0;
726
  }
727
 
728
+ .instant-img-container .control-nav li.search-field button[type=submit]:hover {
729
  outline: none;
730
+ color: #586ec6;
731
  }
732
 
733
+ .instant-img-container .control-nav li.search-field button[type=submit]:focus {
734
  outline: none;
735
+ color: #586ec6;
736
  }
737
 
738
  .instant-img-container .control-nav li.search-field input[type="search"]::-webkit-input-placeholder {
739
  color: #ccc;
740
+ font-weight: 400;
741
  font-style: normal;
 
742
  }
743
 
744
  .instant-img-container .control-nav li.search-field input[type="search"]:-moz-placeholder {
745
  color: #ccc;
746
+ font-weight: 400;
747
  font-style: normal;
 
748
  }
749
 
750
  .instant-img-container .control-nav li.search-field input[type="search"]::-moz-placeholder {
751
  color: #ccc;
752
+ font-weight: 400;
753
  font-style: normal;
 
754
  }
755
 
756
  .instant-img-container .control-nav li.search-field input[type="search"]:-ms-input-placeholder {
757
  color: #ccc;
758
+ font-weight: 400;
759
  font-style: normal;
 
760
  }
761
 
762
  #photos {
943
  #photos .photo a.upload.success .status {
944
  visibility: visible;
945
  opacity: 1;
946
+ background-color: #65c774;
947
  }
948
 
949
  #photos .photo a.upload.success .status:before {
1192
  white-space: nowrap;
1193
  }
1194
 
1195
+ #photos .photo .fade.user .user-wrap:before {
1196
+ content: '';
1197
+ display: block;
1198
+ z-index: 0;
1199
+ background-color: #fff;
1200
+ height: 20px;
1201
+ opacity: 0.25;
1202
+ }
1203
+
1204
+ #photos .photo .fade.user img,
1205
+ #photos .photo .fade.user .user-wrap:before {
1206
  width: 20px;
1207
  max-width: 20px;
1208
  -webkit-border-radius: 100%;
1212
  top: 8px;
1213
  }
1214
 
1215
+ #photos .photo .fade.user img {
1216
+ z-index: 1;
1217
+ }
1218
+
1219
  #photos .photo .notice-msg {
1220
  position: absolute;
1221
  z-index: 999;
1255
  -webkit-transition: all 0.25s ease;
1256
  -o-transition: all 0.25s ease;
1257
  transition: all 0.25s ease;
1258
+ padding: 5px;
1259
  overflow-y: auto;
1260
  -webkit-overflow-scrolling: touch;
1261
  border: 1px solid #e1e1e1;
1276
  display: block;
1277
  background: #f7f7f7;
1278
  border: 1px solid #e1e1e1;
1279
+ padding: 15px 10px;
1280
  -webkit-border-radius: 2px 2px 0 0;
1281
  border-radius: 2px 2px 0 0;
1282
  }
1286
  }
1287
 
1288
  #photos .edit-screen--controls {
1289
+ -webkit-border-radius: 0 0 3px 3px;
1290
+ border-radius: 0 0 3px 3px;
1291
  }
1292
 
1293
  #photos .edit-screen--title {
1294
  border-bottom: none;
1295
+ display: -webkit-box;
1296
+ display: -ms-flexbox;
1297
+ display: flex;
1298
+ -ms-flex-wrap: nowrap;
1299
+ flex-wrap: nowrap;
1300
+ width: 100%;
1301
+ padding: 10px;
1302
+ -webkit-border-radius: 3px 3px 0 0;
1303
+ border-radius: 3px 3px 0 0;
1304
+ }
1305
+
1306
+ #photos .edit-screen--title > div {
1307
+ padding: 5px 15px 5px 5px;
1308
+ -webkit-box-flex: 1;
1309
+ -ms-flex: 1;
1310
+ flex: 1;
1311
+ }
1312
+
1313
+ #photos .edit-screen--title > div.preview {
1314
+ width: 30%;
1315
+ padding: 0;
1316
+ -webkit-background-size: cover;
1317
+ background-size: cover;
1318
+ background-position: center;
1319
+ background-repeat: no-repeat;
1320
+ -webkit-border-radius: 2px;
1321
+ border-radius: 2px;
1322
+ -webkit-box-flex: 0;
1323
+ -ms-flex: none;
1324
+ flex: none;
1325
  }
1326
 
1327
  #photos .edit-screen--title p {
1328
  font-size: 12px;
1329
+ line-height: 1.45;
1330
  margin: 0;
1331
  color: #999;
1332
  }
1333
 
1334
  #photos .edit-screen--title p.heading {
1335
  color: #222;
1336
+ margin: 0 0 3px;
1337
  font-weight: 600;
1338
  text-transform: uppercase;
1339
  }
1340
 
1341
+ #photos .edit-screen label,
1342
+ #photos .edit-screen .add-attribution-row {
1343
  margin: 0;
1344
  padding: 15px;
1345
  display: block;
1346
  background: #fff;
1347
  border: 1px solid #e1e1e1;
1348
  border-bottom: none;
 
 
1349
  position: relative;
1350
  }
1351
 
1352
+ #photos .edit-screen .add-attribution-row {
1353
+ padding-top: 0;
1354
+ margin-top: -15px;
1355
+ border-top: none;
1356
+ }
1357
+
1358
+ #photos .edit-screen .add-attribution-row button {
1359
+ cursor: pointer;
1360
+ font-size: 11px;
1361
+ outline: none;
1362
+ padding: 5px 0;
1363
+ border: none;
1364
+ background: none;
1365
+ text-decoration: underline;
1366
+ }
1367
+
1368
+ #photos .edit-screen .add-attribution-row button:hover, #photos .edit-screen .add-attribution-row button:focus {
1369
+ text-decoration: none;
1370
+ }
1371
+
1372
  #photos .edit-screen span {
1373
  display: block;
1374
  font-size: 11px;
1381
 
1382
  #photos .edit-screen textarea {
1383
  resize: none;
1384
+ font-size: 12px;
1385
+ line-height: 1.35;
1386
  }
1387
 
1388
  #photos .edit-screen input {
1389
  font-size: 12px;
1390
+ padding: 0 10px;
1391
  margin: 0;
1392
+ height: 35px;
1393
+ line-height: 35px;
1394
  }
1395
 
1396
  #photos .edit-screen em {
1397
  position: absolute;
1398
  bottom: 15px;
1399
  right: 15px;
1400
+ height: 35px;
1401
+ line-height: 35px;
1402
+ background: #858585;
1403
  -webkit-border-radius: 0 2px 2px 0;
1404
  border-radius: 0 2px 2px 0;
1405
  color: #e1e1e1;
1411
  .instant-images-settings {
1412
  display: none;
1413
  background-color: #efefef;
1414
+ border-top: 1px solid #e1e1e1;
1415
+ border-bottom: 1px solid #e1e1e1;
1416
  }
1417
 
1418
  .instant-images-settings .cnkt-sidebar {
1419
  padding: 20px 25px;
1420
  overflow: hidden;
1421
+ display: -webkit-box;
1422
+ display: -ms-flexbox;
1423
+ display: flex;
1424
+ -ms-flex-wrap: wrap;
1425
+ flex-wrap: wrap;
1426
+ -webkit-box-pack: justify;
1427
+ -ms-flex-pack: justify;
1428
+ justify-content: space-between;
1429
+ line-height: 1.45;
1430
+ }
1431
+
1432
+ .instant-images-settings .cnkt-sidebar p {
1433
+ font-size: 13px;
1434
  }
1435
 
1436
  .instant-images-settings .cnkt-sidebar .cta {
1437
+ width: 100%;
1438
+ background: #fff;
1439
+ padding: 0;
1440
+ overflow: hidden;
1441
+ position: relative;
1442
+ border: 1px solid #e1e1e1;
1443
+ -webkit-border-radius: 3px;
1444
+ border-radius: 3px;
1445
+ overflow: hidden;
1446
  }
1447
 
1448
+ @media screen and (min-width: 800px) {
1449
  .instant-images-settings .cnkt-sidebar .cta {
1450
+ width: calc(65% - 10px);
 
1451
  }
1452
  }
1453
 
1454
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new {
1455
+ -webkit-box-ordinal-group: 3;
1456
+ -ms-flex-order: 2;
1457
+ order: 2;
1458
+ padding-bottom: 52px;
1459
  }
1460
 
1461
+ @media screen and (min-width: 800px) {
1462
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new {
1463
+ -webkit-box-ordinal-group: 2;
1464
+ -ms-flex-order: 1;
1465
+ order: 1;
1466
+ }
1467
  }
1468
 
1469
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul {
1470
+ display: -webkit-box;
1471
+ display: -ms-flexbox;
1472
+ display: flex;
1473
+ -ms-flex-wrap: wrap;
1474
+ flex-wrap: wrap;
1475
+ list-style: none;
1476
+ margin: 0;
1477
+ padding: 15px;
1478
  }
1479
 
1480
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul li {
1481
+ line-height: 1.45;
1482
+ width: 100%;
1483
+ background-color: transparent;
1484
+ padding: 5px;
1485
+ margin: 0;
1486
+ position: relative;
1487
+ display: -webkit-box;
1488
+ display: -ms-flexbox;
1489
+ display: flex;
1490
  }
1491
 
1492
+ @media screen and (min-width: 1024px) {
1493
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul li {
1494
+ width: 50%;
1495
+ }
1496
  }
1497
 
1498
+ @media screen and (min-width: 1270px) {
1499
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul li {
1500
+ width: 33.333%;
1501
+ }
1502
  }
1503
 
1504
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul li p {
1505
+ font-size: 13px;
1506
+ position: relative;
1507
+ z-index: 1;
1508
+ margin: 0;
1509
+ padding: 15px;
1510
+ border: 1px solid #e1e1e1;
1511
  }
1512
 
1513
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul li p strong {
1514
+ font-size: 14px;
1515
+ color: #333;
1516
+ display: block;
1517
+ font-weight: 700;
1518
+ margin: 0 0 5px;
1519
+ color: #333;
1520
  }
1521
 
1522
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new ul li code {
1523
+ font-size: 12px;
1524
  margin: 0;
1525
  padding: 3px;
1526
  background: #f7f7f7;
1530
  box-shadow: 0 0 0 1px #efefef;
1531
  }
1532
 
1533
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new .with-love {
1534
+ position: absolute;
1535
+ left: 0;
1536
+ bottom: 0;
1537
+ width: 100%;
1538
+ -webkit-border-radius: 0 0 2px 2px;
1539
+ border-radius: 0 0 2px 2px;
1540
+ background-color: #f7f7f7;
1541
+ border-top: 1px solid #e1e1e1;
1542
+ text-align: center;
1543
+ margin: 0;
1544
+ padding: 15px;
1545
  }
1546
 
1547
+ .instant-images-settings .cnkt-sidebar .cta.ii-whats-new .with-love p {
1548
+ margin: