Instant Images – One Click Unsplash Uploads - Version 3.0

Version Description

  • September 21, 2017 = ** NEW - Instant Images has been completely re-built using React and the WordPress REST API.
Download this release

Release Info

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

Code changes from version 2.1.1 to 3.0

Files changed (68) hide show
  1. .babelrc +3 -0
  2. .editorconfig +1 -1
  3. .jshintrc +3 -0
  4. README.txt +19 -13
  5. admin/admin.php +75 -246
  6. admin/assets/css/admin.css +0 -1215
  7. admin/assets/css/font-awesome.min.css +0 -4
  8. admin/assets/fonts/FontAwesome.otf +0 -0
  9. admin/assets/fonts/fontawesome-webfont.eot +0 -0
  10. admin/assets/fonts/fontawesome-webfont.svg +0 -685
  11. admin/assets/fonts/fontawesome-webfont.ttf +0 -0
  12. admin/assets/fonts/fontawesome-webfont.woff +0 -0
  13. admin/assets/fonts/fontawesome-webfont.woff2 +0 -0
  14. admin/assets/img/ajax-loader.gif +0 -0
  15. admin/assets/img/alm-logo-48x48.png +0 -0
  16. admin/assets/img/arrow-up.png +0 -0
  17. admin/assets/img/bkg-select.png +0 -0
  18. admin/assets/img/eq-logo-48x48.png +0 -0
  19. admin/assets/img/img-click-upload.png +0 -0
  20. admin/assets/img/post-explorer-logo-48x48.png +0 -0
  21. admin/assets/img/search-arrow.png +0 -0
  22. admin/assets/img/velocity-logo-48x48.png +0 -0
  23. admin/assets/js/admin.js +96 -68
  24. admin/assets/js/libs/imagesloaded.pkgd.min.js +0 -7
  25. admin/assets/js/libs/jquery.drops.js +0 -48
  26. admin/assets/js/unsplash.js +0 -527
  27. admin/functions.php +0 -13
  28. admin/includes/cta/about.php +0 -26
  29. admin/includes/cta/permissions.php +7 -6
  30. admin/includes/unsplash-settings.php +59 -0
  31. admin/views/unsplash-app.php +0 -54
  32. admin/views/unsplash.php +20 -65
  33. api/resize.php +93 -0
  34. api/upload.php +122 -0
  35. dist/css/instant-images.css +1 -0
  36. dist/img/ajax-loader-lg.gif +0 -0
  37. admin/assets/img/loader.gif → dist/img/ajax-loader.gif +0 -0
  38. {admin/assets → dist}/img/logo-48x48.png +0 -0
  39. dist/js/instant-images.js +32 -0
  40. instant-images.php +12 -13
  41. lang/instant-images.pot +110 -84
  42. package.json +40 -0
  43. postcss.config.js +6 -0
  44. src/img/ajax-loader-lg.gif +0 -0
  45. src/img/ajax-loader.gif +0 -0
  46. {admin/assets → src}/img/icon-256x256.png +0 -0
  47. src/img/logo-48x48.png +0 -0
  48. src/js/components/API.js +6 -0
  49. src/js/components/Helpers.js +80 -0
  50. src/js/components/Photo.js +278 -0
  51. src/js/components/PhotoList.js +344 -0
  52. src/js/components/ResultsToolTip.js +15 -0
  53. src/js/index.js +51 -0
  54. src/scss/partials/_admin.scss +364 -0
  55. src/scss/partials/_nav.scss +199 -0
  56. src/scss/partials/_no-results.scss +20 -0
  57. src/scss/partials/_onboarding.scss +98 -0
  58. src/scss/partials/_photos.scss +296 -0
  59. src/scss/partials/_popup.scss +33 -0
  60. src/scss/partials/_settings.scss +88 -0
  61. src/scss/style.scss +8 -0
  62. vendor/connekt-plugin-installer/.editorconfig +16 -0
  63. vendor/connekt-plugin-installer/LICENSE +339 -0
  64. vendor/connekt-plugin-installer/README.md +62 -0
  65. vendor/connekt-plugin-installer/assets/installer.css +129 -0
  66. vendor/connekt-plugin-installer/assets/installer.js +134 -0
  67. vendor/connekt-plugin-installer/class-connekt-plugin-installer.php +379 -0
  68. webpack.config.js +52 -0
.babelrc ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ {
2
+ "presets": ["es2015"]
3
+ }
.editorconfig CHANGED
@@ -9,7 +9,7 @@ root = true
9
 
10
  [*]
11
  charset = utf-8
12
- end_of_line = lf
13
  insert_final_newline = true
14
  trim_trailing_whitespace = true
15
  indent_style = tab
9
 
10
  [*]
11
  charset = utf-8
12
+ end_of_line = lf
13
  insert_final_newline = true
14
  trim_trailing_whitespace = true
15
  indent_style = tab
.jshintrc ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ {
2
+ "esversion": 6
3
+ }
README.txt CHANGED
@@ -1,10 +1,10 @@
1
  === Instant Images - One Click Unsplash Uploads ===
2
  Contributors: dcooney, connekthq
3
  Donate link: https://connekthq.com/donate/
4
- Tags: stock photo, stock, unsplash, prototyping, photos, upload, media, media library, ajax, image upload, direct upload, free stock photos
5
  Requires at least: 3.6
6
- Tested up to: 4.7.5
7
- Stable tag: 2.1.1
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -12,7 +12,9 @@ One click uploads of Unsplash photos directly to your WordPress media library.
12
 
13
  == Description ==
14
 
15
- **Instant Images** is the fastest and easiest way to upload high quality stock photos from [unsplash.com](http://unsplash.com) directly to your media library — **all without ever leaving WordPress**!
 
 
16
 
17
  [youtube https://www.youtube.com/watch?v=s6Q7Kfi2f1c]
18
 
@@ -33,10 +35,10 @@ The perfect tool for users who want to save time and frustration by uploading im
33
 
34
  = Tested Browsers =
35
 
36
- * Firefox (mac + pc)
37
- * Chrome (mac + pc)
38
- * Safari (mac)
39
- * IE Edge, 11 & 10
40
 
41
  ***
42
 
@@ -53,12 +55,13 @@ All photos published on Unsplash are licensed under Creative Commons Zero which
53
  [Learn More](http://creativecommons.org/publicdomain/zero/1.0/)
54
 
55
 
56
- = Can I legally use these photos on my website? =
57
- 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.
58
- [Learn More](http://creativecommons.org/publicdomain/zero/1.0/)
59
-
60
  = Are the images upload to the Media Library? =
61
- Yes, once clicked, the images are processed on the server then uploaded to the Media Library into the various sizes set in your functions.php file.
 
 
 
 
 
62
 
63
  = Are there server requirements? =
64
  Yes, this plugin is required to write temporary images into an `/instant-images` directory within your WordPress `uploads` directory for image processing prior to being uploaded to the media library.
@@ -102,6 +105,9 @@ How to install Instant Images.
102
 
103
  == Changelog ==
104
 
 
 
 
105
 
106
  = 2.1.1 - June 6, 2017 =
107
  ** NEW - Added infinite scroll while viewing Instant Images on large screens.
1
  === Instant Images - One Click Unsplash Uploads ===
2
  Contributors: dcooney, connekthq
3
  Donate link: https://connekthq.com/donate/
4
+ Tags: stock photo, stock, unsplash, prototyping, photos, upload, media, media library, image upload, free stock photos
5
  Requires at least: 3.6
6
+ Tested up to: 4.8.2
7
+ Stable tag: 3.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
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
 
35
 
36
  = Tested Browsers =
37
 
38
+ * Firefox (Mac + PC)
39
+ * Chrome (Mac + PC)
40
+ * Safari (Mac)
41
+ * IE 11 >
42
 
43
  ***
44
 
55
  [Learn More](http://creativecommons.org/publicdomain/zero/1.0/)
56
 
57
 
 
 
 
 
58
  = Are the images upload to the Media Library? =
59
+ Yes, once clicked, the images are processed on the server then uploaded to the Media Library into the various sizes set in your theme.
60
+
61
+
62
+ = Are raw uploads stored on the server? =
63
+ No, once an image has be uploaded and resized the raw download will be removed from your server.
64
+
65
 
66
  = Are there server requirements? =
67
  Yes, this plugin is required to write temporary images into an `/instant-images` directory within your WordPress `uploads` directory for image processing prior to being uploaded to the media library.
105
 
106
  == Changelog ==
107
 
108
+ = 3.0 - September 21, 2017 =
109
+ ** NEW - Instant Images has been completely re-built using React and the WordPress REST API.
110
+
111
 
112
  = 2.1.1 - June 6, 2017 =
113
  ** NEW - Added infinite scroll while viewing Instant Images on large screens.
admin/admin.php CHANGED
@@ -2,49 +2,6 @@
2
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
 
4
 
5
- /*
6
- * instant_img_admin_vars
7
- * Create admin variables and ajax nonce
8
- *
9
- * @since 2.0
10
- */
11
-
12
- function instant_img_admin_vars() {
13
- $options = get_option( 'instant_img_settings' );
14
- $download_w = isset($options['unsplash_download_w']) ? $options['unsplash_download_w'] : 1600; // width of download file
15
- $download_h = isset($options['unsplash_download_h']) ? $options['unsplash_download_h'] : 1200; // height of downloads
16
- $app_id = instant_img_get_app_id(); // APPLICATION ID
17
- ?>
18
- <script type='text/javascript'>
19
- /* <![CDATA[ */
20
- var instant_img_localize = <?php echo json_encode( array(
21
- 'ajax_url' => admin_url('admin-ajax.php'),
22
- 'admin_nonce' => wp_create_nonce('instant_img_nonce'),
23
- 'download_width' => $download_w,
24
- 'download_height' => $download_h,
25
- 'unsplash_default_app_id' => INSTANT_IMG_DEFAULT_APP_ID,
26
- 'unsplash_app_id' => INSTANT_IMG_DEFAULT_APP_ID,
27
- 'error_msg_title' => __('Error accessing Unsplash API', 'instant-images'),
28
- 'error_msg_desc' => __('Please check your Application ID.', 'instant-images'),
29
- 'error_upload' => __('Unable to save image, please check your server permissions.', 'instant-images'),
30
- 'photo_by' => __('Photo by', 'instant-images'),
31
- 'view_all' => __('View all photos by', 'instant-images'),
32
- 'upload' => __('click to upload', 'instant-images'),
33
- 'full_size' => __('View Full Size', 'instant-images'),
34
- 'likes' => __('Like(s)', 'instant-images'),
35
- 'saving' => __('Downloading photo', 'instant-images'),
36
- 'resizing' => __('Resizing photo', 'instant-images'),
37
- 'no_results' => __('Sorry, nothing matched your query', 'instant-images'),
38
- 'no_results_desc' => __('Please try adjusting your search criteria', 'instant-images')
39
- )); ?>
40
- /* ]]> */
41
- </script>
42
- <?php }
43
- add_action( 'admin_head', 'instant_img_admin_vars' );
44
-
45
-
46
-
47
-
48
  /**
49
  * instant_img_admin_menu
50
  * Create Admin Menu
@@ -83,18 +40,65 @@ function instant_img_load_scripts(){
83
  */
84
 
85
  function instant_img_enqueue_scripts(){
86
- wp_enqueue_style('admin-instant-image', INSTANT_IMG_ADMIN_URL. 'assets/css/admin.css');
87
- wp_enqueue_style('font-awesome-instant-image', INSTANT_IMG_ADMIN_URL. 'assets/css/font-awesome.min.css');
88
- wp_enqueue_script('jquery');
89
- wp_enqueue_script('jquery-form');
90
- wp_enqueue_script('masonry');
91
- wp_enqueue_script('unsplash', INSTANT_IMG_ADMIN_URL. 'assets/js/unsplash.js');
92
- wp_enqueue_script('instant-images', INSTANT_IMG_ADMIN_URL. 'assets/js/admin.js', 'jquery');
93
  }
94
 
95
 
96
 
97
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  /**
99
  * instant_img_media_popup
100
  * Add pop up button to post/page editor
@@ -102,15 +106,11 @@ function instant_img_enqueue_scripts(){
102
  * @since 2.0
103
  */
104
 
105
- function instant_img_media_popup() {
106
-
107
- // popup title
108
- $title_txt = INSTANT_IMG_TITLE .' - '. __('Direct image uploads to your media library', 'instant-images');
109
- $context = "<a href='#TB_inline?width=600&height=600&inlineId=instant_images_modal'
110
- class='button thickbox instant-images' title='$title_txt'>
111
- <span class='dashicons dashicons-format-gallery' style='font-size: 16px; top: 6px;'></span> ".INSTANT_IMG_TITLE."</a>";
112
-
113
- echo $context;
114
 
115
  }
116
  add_action( 'media_buttons', 'instant_img_media_popup', 15 );
@@ -126,17 +126,19 @@ add_action( 'media_buttons', 'instant_img_media_popup', 15 );
126
  */
127
 
128
  function instant_img_media_popup_content() {
129
- wp_enqueue_style( 'admin-css', INSTANT_IMG_ADMIN_URL. 'assets/css/admin.css');
130
- wp_enqueue_style( 'font-awesome', INSTANT_IMG_ADMIN_URL. 'assets/css/font-awesome.min.css');
131
- wp_enqueue_script('jquery');
132
- wp_enqueue_script('jquery-form');
133
- wp_enqueue_script('masonry');
134
- wp_enqueue_script('unsplash', INSTANT_IMG_ADMIN_URL. 'assets/js/unsplash.js');
135
- wp_enqueue_script('instant-images', INSTANT_IMG_ADMIN_URL. 'assets/js/admin.js', 'jquery');
136
  ?>
137
- <div id="instant_images_modal" style="display:none;">
138
- <div class="instant-img-container relax">
139
- <?php include( INSTANT_IMG_PATH . 'admin/views/unsplash-app.php'); ?>
 
 
 
 
 
 
 
 
140
  </div>
141
  </div>
142
  <?php
@@ -156,183 +158,10 @@ add_action( 'admin_head-edit.php', 'instant_img_media_popup_content' );
156
  */
157
 
158
  function instant_img_settings_page(){
159
- include( INSTANT_IMG_PATH . 'admin/views/unsplash.php');
160
- }
161
-
162
-
163
-
164
-
165
- /*
166
- * instant_img_unsplash_upload_image
167
- * Upload Image Ajax Function
168
- *
169
- * @since 2.0
170
- */
171
-
172
- function instant_img_upload_image(){
173
-
174
- if (current_user_can( 'edit_theme_options' )){
175
-
176
- error_reporting(E_ALL|E_STRICT);
177
-
178
- $options = get_option( 'instant_img_settings' );
179
- $download_w = isset($options['unsplash_download_w']) ? $options['unsplash_download_w'] : 1600; // width
180
- $download_h = isset($options['unsplash_download_h']) ? $options['unsplash_download_h'] : 1200; // height
181
-
182
- $nonce = sanitize_key($_POST["nonce"]);
183
- if (! wp_verify_nonce( $nonce, 'instant_img_nonce' ))
184
- die('Unable to verify WP nonce');
185
-
186
- // Create /instant-images directory inside /uploads to temporarily store images
187
- $dir = INSTANT_IMG_UPLOAD_PATH;
188
- if(!is_dir($dir)){
189
- mkdir($dir);
190
- }
191
-
192
- // Is directory writeable, if not exit with an error
193
- if (!is_writable(INSTANT_IMG_UPLOAD_PATH.'/')) {
194
- $json = json_encode(
195
- array(
196
- 'error' => true,
197
- 'msg' => __('Unable to save image, check your server permissions', 'instant-images')
198
- )
199
- );
200
- echo $json;
201
- die();
202
- }
203
-
204
- // Get image variables
205
- $id = sanitize_key($_POST["id"]); // Image ID
206
- $img = sanitize_text_field($_POST["image"]); // Image URL
207
- $desc = sanitize_text_field($_POST["description"]); // Image Description
208
- $path = INSTANT_IMG_UPLOAD_PATH.'/'; // Temp Image Path
209
- $url = INSTANT_IMG_UPLOAD_URL; // Full url path for image upload
210
-
211
- // Create temp. image variable
212
- $filename = $id.'.jpg';
213
- $tmp_img = $path .''.$filename;
214
-
215
- // Generate temp image from URL and store it on server for upload
216
- $ch = curl_init(); // Lets use cURL
217
- curl_setopt($ch, CURLOPT_URL, $img);
218
- curl_setopt($ch, CURLOPT_HEADER, 0);
219
- curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
220
- curl_setopt($ch, CURLOPT_BINARYTRANSFER,1);
221
- $picture = curl_exec($ch);
222
- curl_close($ch);
223
-
224
- // Save file to server
225
- $saved_file = file_put_contents($tmp_img, $picture);
226
-
227
- // Was the temporary image saved?
228
-
229
- if ($saved_file) {
230
-
231
- if(file_exists($path.''.$filename)){
232
- // Successfully saved
233
- $json = json_encode(
234
- array(
235
- 'error' => false,
236
- 'msg' => __('Image successfully saved to server.', 'instant-images'),
237
- 'path' => $path,
238
- 'filename' => $filename,
239
- 'desc' => $desc,
240
- 'url' => $url,
241
- )
242
- );
243
- }else{
244
- // File does NOT exist
245
- $json = json_encode(
246
- array(
247
- 'error' => true,
248
- 'msg' => __('Saved file not found, ensure you have proper permissions set on the uploads directory.', 'instant-images')
249
- )
250
- );
251
- }
252
-
253
- } else {
254
-
255
- // Error on save
256
- $json = json_encode(
257
- array(
258
- 'error' => true,
259
- 'msg' => __('Unable to save image to uploads directory, check your server permissions.', 'instant-images')
260
- )
261
- );
262
-
263
- }
264
-
265
- echo $json;
266
- die();
267
- }
268
- }
269
- add_action( 'wp_ajax_instant_img_upload_image', 'instant_img_upload_image' ); // Ajax Upload Image
270
-
271
-
272
-
273
-
274
-
275
- /*
276
- * instant_img_resize_image
277
- * Resize and Upload Image to Media Library
278
- *
279
- * @since 2.0
280
- */
281
-
282
- function instant_img_resize_image(){
283
-
284
- if (current_user_can( 'edit_theme_options' )){
285
-
286
- $nonce = sanitize_key($_POST["nonce"]);
287
- if (! wp_verify_nonce( $nonce, 'instant_img_nonce' ))
288
- die('Unable to verify WP nonce');
289
-
290
- $path = sanitize_text_field($_POST["path"]);
291
- $filename = sanitize_text_field($_POST["filename"]);
292
- $desc = sanitize_text_field($_POST["desc"]);
293
- $url = sanitize_text_field($_POST["url"]);
294
-
295
- // Get size options
296
- $options = get_option( 'instant_img_settings' );
297
- $download_w = isset($options['unsplash_download_w']) ? $options['unsplash_download_w'] : 1600; // width
298
- $download_h = isset($options['unsplash_download_h']) ? $options['unsplash_download_h'] : 1200; // height
299
-
300
- // Resize image
301
- $image = wp_get_image_editor( $path.''.$filename );
302
- if ( ! is_wp_error( $image ) ) {
303
- $image->resize( $download_w, $download_h, false );
304
- $image->save($path.''.$filename);
305
- }
306
-
307
- // Send to media library
308
- $file = media_sideload_image($url.''.$filename, 0, $desc);
309
-
310
- // Delete tmp image
311
- if(file_exists($path.''.$filename)){
312
- unlink($path.''.$filename);
313
- // Send response
314
- $json = json_encode(
315
- array(
316
- 'error' => false,
317
- 'msg' => __('Image successfully uploaded to media library!', 'instant-images')
318
- )
319
- );
320
- }else{
321
- $json = json_encode(
322
- array(
323
- 'error' => true,
324
- 'msg' => __('There was an error sending to image to the Media Library, check your server permissions.', 'instant-images')
325
- )
326
- );
327
- }
328
-
329
- echo $json;
330
- die();
331
- }
332
-
333
  }
334
- add_action( 'wp_ajax_instant_img_resize_image', 'instant_img_resize_image' ); // Ajax Resize + Add to Media library
335
-
336
 
337
 
338
 
@@ -347,7 +176,7 @@ function instant_img_filter_admin_footer_text( $text ) {
347
  $screen = get_current_screen();
348
  $base = 'media_page_'.INSTANT_IMG_NAME;
349
  if($screen->base === $base){
350
- echo INSTANT_IMG_TITLE .' '.'is made with <span style="color: #e25555;">♥</span> by <a href="https://connekthq.com" target="_blank" style="font-weight: 500;">Connekt</a> - <a href="https://connekthq.com/plugins/instant-images/" target="_blank">Get Support</a>';
351
  }
352
  }
353
  add_filter( 'admin_footer_text', 'instant_img_filter_admin_footer_text'); // Admin menu text
2
  if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
3
 
4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  /**
6
  * instant_img_admin_menu
7
  * Create Admin Menu
40
  */
41
 
42
  function instant_img_enqueue_scripts(){
43
+ instant_img_scripts();
 
 
 
 
 
 
44
  }
45
 
46
 
47
 
48
 
49
+ /**
50
+ * instant_img_scripts
51
+ * Localize vars and scripts
52
+ *
53
+ * @since 3.0
54
+ */
55
+ function instant_img_scripts(){
56
+ wp_enqueue_style('admin-instant-images', INSTANT_IMG_URL. 'dist/css/instant-images.css', '', INSTANT_IMG_VERSION);
57
+ wp_enqueue_script('jquery');
58
+ wp_enqueue_script('jquery-form', true);
59
+ wp_enqueue_script('masonry', true);
60
+ wp_enqueue_script('instant-images-react', INSTANT_IMG_URL. 'dist/js/instant-images.js', '', INSTANT_IMG_VERSION, true);
61
+ wp_enqueue_script('instant-images', INSTANT_IMG_ADMIN_URL. 'assets/js/admin.js', 'jquery', INSTANT_IMG_VERSION, true);
62
+
63
+ $options = get_option( 'instant_img_settings' );
64
+ $download_w = isset($options['unsplash_download_w']) ? $options['unsplash_download_w'] : 1600; // width of download file
65
+ $download_h = isset($options['unsplash_download_h']) ? $options['unsplash_download_h'] : 1200; // height of downloads
66
+
67
+ wp_localize_script(
68
+ 'instant-images', 'instant_img_localize', array(
69
+ 'root' => esc_url_raw( rest_url() ),
70
+ 'nonce' => wp_create_nonce( 'wp_rest' ),
71
+ 'ajax_url' => admin_url('admin-ajax.php'),
72
+ 'admin_nonce' => wp_create_nonce('instant_img_nonce'),
73
+ 'download_width' => $download_w,
74
+ 'download_height' => $download_h,
75
+ 'unsplash_default_app_id' => INSTANT_IMG_DEFAULT_APP_ID,
76
+ 'unsplash_app_id' => INSTANT_IMG_DEFAULT_APP_ID,
77
+ 'error_msg_title' => __('Error accessing Unsplash API', 'instant-images'),
78
+ 'error_msg_desc' => __('Please check your Application ID.', 'instant-images'),
79
+ 'error_upload' => __('Unable to download image to server, please check your server permissions.', 'instant-images'),
80
+ 'error_resize' => __('There was an error sending the image to your media library. Please check your server permissions and confirm the upload_max_filesize setting (php.ini) is large enough for the downloaded image.', 'instant-images'),
81
+ 'photo_by' => __('Photo by', 'instant-images'),
82
+ 'view_all' => __('View all photos by', 'instant-images'),
83
+ 'upload' => __('Click Image to Upload', 'instant-images'),
84
+ 'full_size' => __('View Full Size', 'instant-images'),
85
+ 'likes' => __('Like(s)', 'instant-images'),
86
+ 'saving' => __('Downloading Image...', 'instant-images'),
87
+ 'resizing' => __('Resizing Image...', 'instant-images'),
88
+ 'no_results' => __('Sorry, nothing matched your query', 'instant-images'),
89
+ 'no_results_desc' => __('Please try adjusting your search criteria', 'instant-images'),
90
+ 'latest' => __('New', 'instant-images'),
91
+ 'oldest' => __('Oldest', 'instant-images'),
92
+ 'popular' => __('Popular', 'instant-images'),
93
+ 'load_more' => __('Load More Images', 'instant-images'),
94
+ 'search' => __('Search for Toronto, Coffee + Breakfast etc...', 'instant-images'),
95
+ 'search_results' => __('images found for', 'instant-images')
96
+ )
97
+ );
98
+ }
99
+
100
+
101
+
102
  /**
103
  * instant_img_media_popup
104
  * Add pop up button to post/page editor
106
  * @since 2.0
107
  */
108
 
109
+ function instant_img_media_popup() {
110
+
111
+ $title_txt = INSTANT_IMG_TITLE; // popup title
112
+ $context = "<a href='#TB_inline?width=1000&height=600&inlineId=instant_images_modal' class='button thickbox instant-images' title='$title_txt'>&nbsp;".$title_txt."&nbsp;</a>";
113
+ echo $context;
 
 
 
 
114
 
115
  }
116
  add_action( 'media_buttons', 'instant_img_media_popup', 15 );
126
  */
127
 
128
  function instant_img_media_popup_content() {
129
+ instant_img_scripts();
 
 
 
 
 
 
130
  ?>
131
+ <div id="instant_images_modal" style="display:none;">
132
+ <style>
133
+ .instant-img-container li:before{
134
+ display: none !important;
135
+ }
136
+ </style>
137
+ <div class="instant-img-container popup">
138
+ <?php include( INSTANT_IMG_PATH . 'admin/views/unsplash.php'); ?>
139
+ <div class="initialize-wrap">
140
+ <button type="button" class="button init-btn button-large"><i class="fa fa-bolt" aria-hidden="true"></i> <?php _e('Initialize Instant Images', 'instant-images'); ?></button>
141
+ </div>
142
  </div>
143
  </div>
144
  <?php
158
  */
159
 
160
  function instant_img_settings_page(){
161
+ echo '<div class="instant-img-container">';
162
+ include( INSTANT_IMG_PATH . 'admin/views/unsplash.php');
163
+ echo '</div>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  }
 
 
165
 
166
 
167
 
176
  $screen = get_current_screen();
177
  $base = 'media_page_'.INSTANT_IMG_NAME;
178
  if($screen->base === $base){
179
+ echo INSTANT_IMG_TITLE .' '.'is made with <span style="color: #e25555;">♥</span> by <a href="https://connekthq.com/?utm_source=WPAdmin&utm_medium=InstantImages&utm_campaign=Footer" target="_blank" style="font-weight: 500;">Connekt</a> - <a href="https://connekthq.com/plugins/instant-images/" target="_blank">Get Support</a>';
180
  }
181
  }
182
  add_filter( 'admin_footer_text', 'instant_img_filter_admin_footer_text'); // Admin menu text
admin/assets/css/admin.css DELETED
@@ -1,1215 +0,0 @@
1
- /*
2
- Plugin Name: Instant Images
3
- Plugin URI: https://connekthq.com/plugins/instant-images/
4
- Description: One click uploads of unsplash.com photos directly to your media library (formally UnsplashWP)
5
- Author: Darren Cooney
6
- Twitter: @KaptonKaos
7
- Author URI: https://connekthq.com
8
- Version: 2.0
9
- License: GPL
10
- Copyright: Darren Cooney & Connekt Media
11
-
12
- */
13
-
14
-
15
- /*
16
- Container
17
-
18
- Purple: #5d72c3;
19
- */
20
-
21
- .instant-img-container{
22
- font-size: 14px;
23
- color:#666;
24
- position: relative;
25
- overflow-x: hidden;
26
- font-family: 'Open Sans', sans-serif;
27
- }
28
- .instant-img-container *{
29
- -webkit-box-sizing: border-box;
30
- -moz-box-sizing: border-box;
31
- box-sizing: border-box;
32
- }
33
- .instant-img-container a{
34
- color: #5d72c3;
35
- }
36
- .instant-img-container a:hover{
37
- color: #5568ae;
38
- text-decoration: none;
39
- }
40
- .instant-img-container img{
41
- max-width: 100%;
42
- }
43
- .instant-img-container p{
44
- display: block;
45
- color:#666;
46
- width: 100%;
47
- display: block;
48
- clear: both;
49
- text-transform: none;
50
- padding: 0;
51
- margin:0 0 15px;
52
- }
53
-
54
-
55
- .instant-img-container.relax{}
56
-
57
- .instant-img-container.relax .start-app{
58
- padding: 100px;
59
- display: block;
60
- text-align: center;
61
- background: #f7f7f7;
62
- border: 1px solid #efefef;
63
- width: 90%;
64
- margin: 5%;
65
- font-weight: bold;
66
- text-decoration: none;
67
- font-size: 20px;
68
- }
69
- .instant-img-container.relax .start-app:hover{
70
- border-color: #ccc;
71
- background-color: #efefef;
72
- }
73
- .instant-img-container.relax .start-app em{
74
- display: block;
75
- color: #888;
76
- font-size: 14px;
77
- font-weight: normal;
78
- font-style: normal;
79
- padding: 3px 0;
80
- }
81
-
82
-
83
- /* Initialize Screen */
84
- .instant-img-container #initialize{
85
- display: block;
86
- text-align: center;
87
- background: #fff;
88
- background: #f7f7f7;
89
- border: 1px solid #efefef;
90
- box-shadow: inset 0 0 1px #fff;
91
- text-decoration: none;
92
- font-size: 20px;
93
- padding: 0 40px;
94
- margin-top: -16px;
95
- position: relative;
96
- }
97
- .instant-img-container #initialize .search-arrow {
98
- height: auto;
99
- left: 50%;
100
- margin-left: -12px;
101
- opacity: 1;
102
- position: absolute;
103
- top: -21px;
104
- width: 22px;
105
- z-index: 1;
106
- transform: rotate(5deg);
107
- opacity: 0.9;
108
- }
109
- .instant-img-container #initialize .search-arrow.hide {
110
- display: none;
111
- }
112
- .instant-img-container #initialize h2{
113
- font-size: 29px;
114
- font-weight: 700;
115
- color: #333;
116
- margin: 15px 0;
117
- word-spacing: -0.1em;
118
- }
119
- .instant-img-container #initialize p{
120
- display: block;
121
- padding: 10px 15% 10px;
122
- font-size: 16px;
123
- line-height: 28px;
124
- }
125
- .instant-img-container #initialize p.sm{
126
- font-size: 14px;
127
- padding-top: 20px;
128
- }
129
- .instant-img-container #initialize p span{
130
- color: #999;
131
- display: block;
132
- font-size: 14px;
133
- padding: 20px 0 0;
134
- }
135
- .instant-img-container #initialize p i{
136
- color: #999;
137
- }
138
-
139
- .instant-img-container .init-content-wrap{
140
- display: block;
141
- padding: 50px 0 40px;
142
- }
143
- .instant-img-container .init-options{
144
- display: block;
145
- padding: 30px 30px 36px;
146
- background: #fff;
147
- border: 1px solid #e7e7e7;
148
- border-radius: 2px;
149
- }
150
- .instant-img-container .init-options h3{
151
- font-size: 14px;
152
- margin: 0;
153
- padding: 0;
154
- line-height: 1.55;
155
- font-weight: 400;
156
- color: #999;
157
- }
158
- .instant-img-container .init-options h3 strong{
159
- display: block;
160
- padding-bottom: 3px;
161
- color: #111;
162
- }
163
- .instant-img-container #initialize button{
164
- margin: 20px 3px 0;
165
- }
166
-
167
-
168
- /*
169
- Admin Screens - Setting pages
170
- */
171
-
172
- .instant-img-container .header-wrap{
173
- background: url('../img/logo-48x48.png') no-repeat left 12px;
174
- padding-left: 58px;
175
- min-height: 48px;
176
- overflow: hidden;
177
- padding-top: 10px;
178
- }
179
- .instant-img-container .header-wrap h1{
180
- padding: 0;
181
- margin: 1px 0 0;
182
- font-weight: 600;
183
- font-size: 26px;
184
- }
185
- .instant-img-container .header-wrap h1 span{
186
- display: inline-block;
187
- background-color: rgba(255, 255, 255, 0.7);
188
- padding: 1px 6px;
189
- font-weight: 300;
190
- color: #999;
191
- border-radius: 2px;
192
- margin-left: 1px;
193
- font-size: 20px;
194
- position: relative;
195
- top: -1px;
196
- }
197
- .instant-img-container .header-wrap h1 + p{
198
- margin-top: -1px;
199
- margin-left: 1px;
200
- color: #999;
201
- font-size: 14px;
202
- }
203
-
204
-
205
-
206
- /*
207
- Columns
208
- */
209
-
210
- .instant-img-container .cnkt-main{
211
- width: 70%;
212
- float: left;
213
- margin-top: 10px;
214
- background: none !important;
215
- position: relative;
216
- }
217
- .instant-img-container .cnkt-main .expand{
218
- visibility: hidden;
219
- opacity: 0;
220
- transition: all 0.2s ease;
221
- display: block;
222
- position: absolute;
223
- right: -32px;
224
- top: 42px;
225
- z-index: 11;
226
- width: 34px;
227
- height: 44px;
228
- line-height: 44px;
229
- text-align: center;
230
- background: #fff;
231
- border: 1px solid #e7e7e7;
232
- border-left: none;
233
- border-radius: 0 3px 3px 0;
234
- text-decoration: none;
235
- }
236
- .instant-img-container .cnkt-main .expand.show{
237
- visibility: visible;
238
- opacity: 1;
239
- }
240
- .instant-img-container .cnkt-main.full .expand i{
241
- line-height: 40px;
242
- }
243
- .instant-img-container .cnkt-main .expand i.close,
244
- .instant-img-container .cnkt-main.full .expand i.open,
245
- .instant-img-container .cnkt-main .expand span{
246
- display: none;
247
- }
248
- .instant-img-container .cnkt-main.full .expand i.close{
249
- display: block;
250
- }
251
- .instant-img-container .cnkt-main .group{
252
- background: #fff;
253
- padding: 20px;
254
- margin: 0 0 20px;
255
- position: relative;
256
- display: block;
257
- clear: both;
258
- }
259
- .instant-img-container .cnkt-main .group,
260
- .instant-img-container .cnkt-sidebar .cta{
261
- border: 1px solid #e7e7e7;
262
- -webkit-border-radius: 3px;
263
- -moz-border-radius: 3px;
264
- border-radius: 3px;
265
- }
266
- .instant-img-container .cnkt-main.full{
267
- width: 95%;
268
- float: none;
269
- }
270
- .instant-img-container .cnkt-sidebar.full{
271
- display: none;
272
- }
273
- .instant-img-container h2,
274
- .instant-img-container h3,
275
- .instant-img-container h4{
276
- margin-top: 0;
277
- }
278
-
279
-
280
-
281
- /*
282
- Image listing
283
- */
284
-
285
- #unsplashwp{
286
- width: 102%;
287
- margin: 0 -1%;
288
- padding: 0;
289
- }
290
-
291
- #unsplashwp .item{
292
- width: 31.3333%;
293
- margin: 0 1% 2%;
294
- position: relative;
295
- }
296
- .full #unsplashwp .item{
297
- width: 23%;
298
- }
299
- #unsplashwp .item a.upload{
300
- display: block;
301
- position: relative;
302
- background-color: #222;
303
- background-position: center center;
304
- background-repeat: no-repeat;
305
- background-image: url('../img/ajax-loader.gif');
306
- overflow: hidden;
307
- }
308
- #unsplashwp .item a.upload.loaded{
309
- background-image: none;
310
- }
311
- #unsplashwp .item a.upload:focus,
312
- #unsplashwp .item a.upload:active{
313
- outline: none;
314
- border: none;
315
- box-shadow: none;
316
- }
317
-
318
- #unsplashwp .item a.upload img{
319
- -webkit-transition: all 0.35s ease;
320
- -moz-transition: all 0.35s ease;
321
- transition: all 0.35s ease;
322
- width: 100%;
323
- height: auto !important;
324
- padding: 0;
325
- vertical-align: top;
326
- }
327
-
328
- #unsplashwp .item:hover a.upload img,
329
- #unsplashwp .item a.upload.saving img,
330
- #unsplashwp .item a.upload.uploaded img{
331
- opacity: 0.4;
332
- }
333
- #unsplashwp .item:hover a.upload img{
334
- }
335
- #unsplashwp .item:hover .controls{
336
- opacity: 1;
337
- visibility: visible;
338
- }
339
- #unsplashwp .item:hover .likes,
340
- #unsplashwp .item:hover .zoom-in,
341
- #unsplashwp .item:hover .profile{
342
- opacity: 1;
343
- visibility: visible;
344
- }
345
-
346
- /* Saving */
347
- #unsplashwp .item a.upload.saving{
348
- background-image: url('../img/ajax-loader.gif');
349
- cursor: default !important;
350
- }
351
- /* Uploaded */
352
- #unsplashwp .item a.upload.uploaded{
353
- cursor: default !important;
354
- background: #fff !important;
355
- }
356
- #unsplashwp .item a.upload.uploaded img{
357
- opacity: 0.6;
358
- }
359
-
360
- /* Controls */
361
- #unsplashwp .item .img-wrap{
362
- position: relative;
363
- display: block;
364
- }
365
-
366
- #unsplashwp .item .img-wrap .notice-msg{
367
- position: absolute;
368
- z-index: 999;
369
- top: -30px;
370
- left: 0;
371
- height: 30px;
372
- width: 100%;
373
- line-height: 30px;
374
- background: rgba(113, 131, 200, 0.7);
375
- text-align: center;
376
- color: #e0e4f5;
377
- font-size: 12px;
378
- margin: 0;
379
- padding: 0 10px;
380
- transition: all 0.15s ease;
381
- opacity: 0;
382
- }
383
- #unsplashwp .item .img-wrap .notice-msg.active{
384
- top: 0;
385
- opacity: 1;
386
- }
387
-
388
- #unsplashwp .item .likes,
389
- #unsplashwp .item .zoom-in,
390
- #unsplashwp .item .profile{
391
- -webkit-transition: all 0.3s ease;
392
- -moz-transition: all 0.3s ease;
393
- transition: all 0.3s ease;
394
- color: #333;
395
- background: rgba(255, 255, 255, 0.45);
396
- -webkit-border-radius: 2px;
397
- -moz-border-radius: 2px;
398
- border-radius: 2px;
399
- height: 28px;
400
- line-height: 28px;
401
- font-size: 13px;
402
- opacity: 0;
403
- visibility: hidden;
404
- position: absolute;
405
- left: 6px;
406
- bottom: 6px;
407
- z-index: 2;
408
- }
409
- #unsplashwp .item .likes{
410
- padding: 0 8px 0 7px;
411
- width: auto;
412
- display: inline-block;
413
- width: auto;
414
- }
415
- /* Zoom */
416
- #unsplashwp .item .zoom-in,
417
- #unsplashwp .item .profile{
418
- width: 29px;
419
- left: auto;
420
- right: 6px;
421
- text-align: center;
422
- cursor: pointer;
423
- }
424
- #unsplashwp .item .zoom-in i,
425
- #unsplashwp .item .profile i{
426
- position: relative;
427
- left: 0;
428
- }
429
- #unsplashwp .item .zoom-in:hover,
430
- #unsplashwp .item .profile:hover{
431
- background: rgba(255, 255, 255, 0.9);
432
- }
433
-
434
- /* Profile */
435
- #unsplashwp .item .profile{
436
- width: 29px;
437
- left: auto;
438
- right: 38px;
439
- }
440
-
441
- /* Checkmark */
442
- #unsplashwp .item .check,
443
- #unsplashwp .item .err{
444
- position: absolute;
445
- left: 50%;
446
- top: 50%;
447
- margin: -17px 0 0 -17px;
448
- z-index: 1;
449
- width: 34px;
450
- height: 34px;
451
- -webkit-border-radius: 2px;
452
- -moz-border-radius: 2px;
453
- border-radius: 2px;
454
- background: rgba(255, 255, 255, 0.75);
455
- color: #7bcb58;
456
- }
457
- #unsplashwp .item .check .fa,
458
- #unsplashwp .item .err .fa{
459
- font-size: 20px;
460
- line-height: 34px;
461
- width: 100%;
462
- text-align: center;
463
- }
464
- #unsplashwp .item .err{
465
- background-color: #dd4b4b;
466
- color: #fff;
467
- }
468
-
469
-
470
- /*
471
- API Messaging
472
- */
473
-
474
- #unsplashwp-api-message{
475
- display: none;
476
- padding: 76px 50px 50px;
477
- text-align: center;
478
- }
479
- #unsplashwp-api-message h3{
480
- font-size: 22px;
481
- }
482
-
483
- #unsplashwp-api-init{
484
- display: block;
485
- padding: 0;
486
- height: 70px;
487
- background: url('../img/img-click-upload.png') no-repeat center 10px;
488
- }
489
-
490
- #unsplashwp-api-warning{
491
- display: block;
492
- padding: 0 0 20px;
493
- margin: 0 0 10px;
494
- }
495
- #unsplashwp-api-warning .inner{
496
- display: block;
497
- text-align: center;
498
- background-color: #fff9ea;
499
- border: 1px solid #dfd8c2;
500
- position: relative;
501
- padding: 50px 60px;
502
- }
503
- #unsplashwp-api-warning i{
504
- font-size: 60px;
505
- color: #dfd8c2;
506
- }
507
- #unsplashwp-api-warning h4{
508
- font-size: 22px;
509
- margin: 0;
510
- padding: 20px 0 20px;
511
- }
512
- #unsplashwp-api-warning h4 span{
513
- display: inline-block;
514
- padding: 10px 8px;
515
- margin: 0 3px;
516
- background: rgba(0, 0, 0, 0.5);
517
- color: #fffdd4;
518
- border-radius: 3px;
519
- }
520
- #unsplashwp-api-warning h4 + p{
521
- font-size: 14px;
522
- line-height: 1.65;
523
- padding: 5px 0 30px;
524
- }
525
- #unsplashwp-api-warning .inner a.dismiss{
526
- padding: 0 10px;
527
- }
528
-
529
- #unsplashwp-api-warning .inner a.button i{
530
- font-size: inherit;
531
- color: inherit;
532
- }
533
-
534
- #unsplashwp-api-warning.exceeded{
535
- padding: 0;
536
- }
537
- #unsplashwp-api-warning.exceeded .inner{
538
- background-color: #fff;
539
- border-color: transparent;
540
- }
541
- #unsplashwp-api-warning.exceeded i{
542
- color: #d93838;
543
- opacity: 0.65;
544
- }
545
- #unsplashwp-api-warning.exceeded h4{
546
- color: #d93838;
547
- }
548
- #unsplashwp-api-warning.exceeded p{
549
- color: #666;
550
- margin: 0;
551
- }
552
-
553
- .instant-img-container .loading-block{
554
- padding: 0;
555
- height: 90px;
556
- display: none;
557
- clear: both;
558
- background: url('../img/ajax-loader.gif') no-repeat center center;
559
- border: 2px dashed #efefef;
560
- }
561
-
562
- /*
563
- Search
564
- */
565
- .unsplashwp-search,
566
- .instant-img-container .more-wrap{
567
- display: block;
568
- padding: 15px;
569
- margin: 0 0 15px;
570
- overflow: hidden;
571
- background-color: #f7f7f7;
572
- border: 1px solid #efefef;
573
- overflow: visible;
574
- position: relative;
575
- }
576
- .instant-img-container.relax .more-wrap{
577
- display: none;
578
- }
579
- .unsplashwp-search .offscreen{
580
- position: absolute;
581
- left: -99999px;
582
- }
583
- .unsplashwp-search .field-wrap{
584
- position: relative;
585
- width: 90%;
586
- width: calc(100% - 65px);
587
- display: inline-block;
588
- vertical-align: top;
589
- }
590
- .unsplashwp-search input[type=search]{
591
- width: 100%;
592
- height: 50px;
593
- line-height: 50px;
594
- padding: 0 88px 0 15px;
595
- background: #fff;
596
- border-collapse: #e7e7e7;
597
- border-radius: 2px;
598
- font-size: 18px;
599
- }
600
- .unsplashwp-search input[type=search]::-webkit-input-placeholder {
601
- color: #ccc;
602
- font-weight: 300;
603
- font-style: italic;
604
- font-size: 15px;
605
- }
606
- .unsplashwp-search input[type=search]:-moz-placeholder {
607
- color: #ccc;
608
- font-weight: 300;
609
- font-style: italic;
610
- font-size: 15px;
611
- }
612
- .unsplashwp-search input[type=search]::-moz-placeholder {
613
- color: #ccc;
614
- font-weight: 300;
615
- font-style: italic;
616
- font-size: 15px;
617
- }
618
- .unsplashwp-search input[type=search]:-ms-input-placeholder {
619
- color: #ccc;
620
- font-weight: 300;
621
- font-style: italic;
622
- font-size: 15px;
623
- }
624
- .unsplashwp-search .clear-results{
625
- position: absolute;
626
- z-index: 1;
627
- right: 60px;
628
- top: 15px;
629
- font-size: 13px;
630
- width: 24px;
631
- height: 24px;
632
- line-height: 24px;
633
- text-align: center;
634
- color: #999;
635
- display: none;
636
- }
637
- .unsplashwp-search .clear-results:hover{
638
- color: #c53b3b;
639
- }
640
-
641
- .unsplashwp-search button{
642
- background: #f7f7f7;
643
- border-radius: 0 2px 2px 0;
644
- cursor: pointer;
645
- position: absolute;
646
- z-index: 1;
647
- right: 0;
648
- top: 2px;
649
- width: 48px;
650
- height: 48px;
651
- box-shadow: none;
652
- border: none;
653
- border-left: 1px solid #ddd;
654
- -webkit-appearance: none;
655
- color: #777;
656
- font-size: 18px;
657
- }
658
- .unsplashwp-search button:hover{
659
- color: #fff;
660
- box-shadow: none;
661
- background-color: #5f70b2;
662
- border-color: #5f70b2;
663
- }
664
- .unsplashwp-search button:active,
665
- .unsplashwp-search button:focus{
666
- background-color: #4f5f9e;
667
- color: #fff;
668
- }
669
-
670
- .unsplashwp-search .options{
671
- position: absolute;
672
- right: 15px;
673
- top: 16px;
674
- }
675
- .unsplashwp-search .drop-options{
676
- width: auto;
677
- position: relative;
678
- }
679
- .unsplashwp-search .drop-options > a{
680
- width: 50px;
681
- background: none;
682
- height: 50px;
683
- line-height: 50px;
684
- text-align: center;
685
- font-size: 24px;
686
- display: block;
687
- border-radius: 2px;
688
- color: #777 !important;
689
- border: 1px solid transparent;
690
- }
691
- .unsplashwp-search .drop-options > a span{
692
- display: none;
693
- }
694
- .unsplashwp-search .drop-options > a:hover{
695
- color: #5f70b2 !important;
696
- border-color: #ddd;
697
- background-color: #fff;
698
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.06);
699
- }
700
- .unsplashwp-search .drop-options.active > a,
701
- .unsplashwp-search .drop-options > a:active{
702
- color: #fff !important;
703
- box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.15) !important;
704
- background-color: #5f70b2;
705
- border-color: #5f70b2;
706
- }
707
-
708
- .unsplashwp-search .drop-options .dropdown{
709
- display: none;
710
- position: absolute;
711
- top: 53px;
712
- right: -23px;
713
- background: #fff;
714
- border-radius: 4px;
715
- border: 1px solid #ddd;
716
- padding: 15px;
717
- width: 250px;
718
- z-index: 9999;
719
- box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
720
- }
721
- .unsplashwp-search .drop-options .form-msg{
722
- font-size: 12px;
723
- }
724
-
725
- .unsplashwp-search .drop-options .dropdown:after,
726
- .unsplashwp-search .drop-options .dropdown:before {
727
- bottom: 100%;
728
- right: 39px;
729
- border: solid transparent;
730
- content: " ";
731
- height: 0;
732
- width: 0;
733
- position: absolute;
734
- pointer-events: none;
735
- }
736
- .unsplashwp-search .drop-options .dropdown:after {
737
- border-color: rgba(255, 255, 255, 0);
738
- border-bottom-color: #ffffff;
739
- border-width: 8px;
740
- margin-left: -8px;
741
- }
742
- .unsplashwp-search .drop-options .dropdown:before {
743
- border-color: rgba(221, 221, 221, 0);
744
- border-bottom-color: #dddddd;
745
- border-width: 9px;
746
- margin-left: -9px;
747
- right: 38px;
748
- }
749
-
750
- .unsplashwp-search .drop-options .dropdown.active{
751
- display: block;
752
- }
753
-
754
- .unsplashwp-search .drop-options .dropdown h4{
755
- margin: 0 0 10px;
756
- padding: 0;
757
- }
758
- .unsplashwp-search .drop-options .dropdown ul{
759
- padding: 5px 10px;
760
- border: 1px solid #efefef;
761
- background-color: #f7f7f7;
762
- margin: 0;
763
- border-radius: 2px;
764
- }
765
- .unsplashwp-search .drop-options .dropdown li{
766
- padding: 0;
767
- margin: 0;
768
- background: none;
769
- list-style: none;
770
- line-height: 1;
771
- font-size: 13px;
772
- }
773
- .unsplashwp-search .drop-options .dropdown li a{
774
- display: block;
775
- clear: both;
776
- float: none;
777
- padding: 13px 0 13px 23px;
778
- border-top: 1px solid #efefef;
779
- text-decoration: none;
780
- position: relative;
781
- color: #666;
782
- }
783
- .unsplashwp-search .drop-options .dropdown li:first-of-type a{
784
- border: none;
785
- }
786
- .unsplashwp-search .drop-options .dropdown li a:hover{
787
- color: #333;
788
- background: none;
789
- }
790
- .unsplashwp-search .drop-options .dropdown li a:hover span{
791
- background-color: #ccc;
792
- }
793
- .unsplashwp-search .drop-options .dropdown li a span{
794
- position: absolute;
795
- left: 1px;
796
- top: 13px;
797
- background-color: #fff;
798
- width: 12px;
799
- height: 12px;
800
- display: block;
801
- -webkit-border-radius: 100%;
802
- -moz-border-radius: 100%;
803
- border-radius: 100%;
804
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
805
- }
806
- .unsplashwp-search .drop-options .dropdown li a.active{
807
- color: #222;
808
- font-weight: 600;
809
- }
810
- .unsplashwp-search .drop-options .dropdown li a.active span{
811
- font-weight: normal;
812
- background-color: #5f70b2;
813
- box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.2);
814
- }
815
- .unsplashwp-search .drop-options .dropdown li a:focus{
816
- -webkit-box-shadow: none;
817
- -moz-box-shadow: none;
818
- box-shadow: none;
819
- }
820
-
821
-
822
-
823
- /*
824
- * Settings
825
- */
826
-
827
- .instant-img-container .save-settings{}
828
- .instant-img-container .save-settings p.submit{
829
- float: left;
830
- margin: 0 5px 0 0;
831
- width: auto;
832
- }
833
- .instant-img-container .save-settings .loading{
834
- width: 50px;
835
- height: 28px;
836
- display: none;
837
- float: left;
838
- background: #fff url('../img/loader.gif') no-repeat center center;
839
- }
840
-
841
-
842
- /*
843
- * Thickbox styles
844
- */
845
-
846
- #TB_ajaxContent {
847
- clear: both;
848
- line-height: 1.4em;
849
- overflow: auto;
850
- text-align: left;
851
- width: 100% !important;
852
- -webkit-box-sizing: border-box;
853
- -moz-box-sizing: border-box;
854
- box-sizing: border-box;
855
- padding: 15px !important;
856
- }
857
- a.button.instant-images span{
858
- position: relative;
859
- top: 3px;
860
- left: -2px;
861
- color: #999;
862
- }
863
-
864
-
865
- /* Table */
866
- .cnkt-sidebar .form-table {
867
- margin: 15px 0 20px;
868
- border: 1px solid #efefef;
869
- }
870
- .cnkt-sidebar .form-table td,
871
- .cnkt-sidebar .form-table label,
872
- .cnkt-sidebar .form-table p{
873
- font-size: 13px;
874
- }
875
- .cnkt-sidebar .form-table label{
876
- display: block;
877
- clear: both;
878
- float: none;
879
- }
880
- .cnkt-sidebar .form-table label span{
881
- opacity: 0.8;
882
- font-size: 13px;
883
- font-style: italic;
884
- }
885
- .cnkt-sidebar .form-table th{
886
- display: none;
887
- }
888
- .instant-img-container .form-table td{
889
- border-top: 0;
890
- padding: 0 15px 15px;
891
- float: left;
892
- width: 100%;
893
- margin: 0;
894
- }
895
- .instant-img-container .form-table tr:first-of-type td{
896
- padding: 10px 15px;
897
- }
898
- .cnkt-sidebar .form-table .form-msg,
899
- .cnkt-main .form-msg{
900
- display: block;
901
- line-height: 18px;
902
- padding: 12px 12px 12px 15px;
903
- margin: 15px 0 0;
904
- color: #666;
905
- background-color: #fff9ea;
906
- border-left: 5px solid #dfd8c2;
907
- border-radius: 2px;
908
- }
909
- .cnkt-sidebar .form-table .form-msg span,
910
- .cnkt-main .form-msg span{
911
- display: block;
912
- padding: 6px 0 3px;
913
- }
914
-
915
-
916
-
917
- .instant-img-container h1,
918
- .instant-img-container h3,
919
- .instant-img-container h4{
920
- color:#444;
921
- margin-top: 0;
922
- }
923
- .instant-img-container h4 + p{
924
- margin-top: -6px;
925
- }
926
- .instant-img-container p.small{
927
- font-size: 12px;
928
- margin-top: -10px;
929
- opacity: 0.7;
930
- }
931
-
932
-
933
-
934
- .instant-img-container ul{
935
- padding: 0;
936
- margin: 0;
937
- list-style: none;
938
- }
939
- .instant-img-container label,
940
- .instant-img-container input,
941
- .instant-img-container select,
942
- .instant-img-container textarea{
943
- -webkit-box-shadow: none;
944
- -moz-box-shadow: none;
945
- box-shadow: none;
946
- }
947
- .instant-img-container label{
948
- padding: 5px 0;
949
- }
950
- .cnkt-sidebar input{
951
- width: 10%;
952
- margin: 0;
953
- width: 100%;
954
- }
955
- #unsplash-form-options h2,
956
- #unsplash-form-options p.desc{
957
- display: none;
958
- }
959
- .instant-img-container input[type=text],
960
- .instant-img-container input[type=number]{
961
- padding: 10px;
962
- line-height: 1;
963
- border: 1px solid #ccc;
964
- background: #f7f7f7;
965
- width: 100%;
966
- border-radius: 2px;
967
- height: auto;
968
- }
969
- .instant-img-container input[type=text]:focus,
970
- .instant-img-container textarea:focus{
971
- border-color: #999;
972
- box-shadow: 0 0 3px #ccc;
973
- background: #efefef;
974
- }
975
-
976
-
977
- /*
978
- * Load More Button
979
- */
980
- .instant-img-container .more-wrap{
981
- margin: 15px 0 0;
982
- text-align: center;
983
- }
984
- .instant-img-container .more-wrap button{
985
- display: inline-block;
986
- padding: 12px 15px;
987
- font-size: 15px;
988
- font-weight: 600;
989
- transition: all 0.1s ease;
990
- height: auto;
991
- line-height: 1;
992
- cursor: pointer;
993
- background-image: none;
994
- background-repeat: no-repeat !important;
995
- background-position: 15px center !important;
996
- }
997
- .instant-img-container .more-wrap button.disabled{
998
- opacity: 0.3;
999
- cursor: default;
1000
- }
1001
-
1002
-
1003
-
1004
- /*
1005
- * Sidebar
1006
- */
1007
- .instant-img-container .cnkt-sidebar{
1008
- width: 26%;
1009
- float: right;
1010
- margin-top: 10px;
1011
- }
1012
- .cnkt-sidebar h2{
1013
- border: none;
1014
- padding: 15px 20px 3px;
1015
- font-size: 16px;
1016
- }
1017
- .cnkt-sidebar h2 + p{
1018
- padding: 0 20px 15px;
1019
- margin: 0 !important;
1020
- border-bottom: 1px solid #e7e7e7;
1021
- }
1022
- .cnkt-sidebar h2,
1023
- .cnkt-sidebar h2 + p{
1024
- background: #f7f7f7;
1025
- margin: 0;
1026
- }
1027
- .instant-img-container .cnkt-sidebar .cta{
1028
- background: #fff;
1029
- padding: 0 0 20px;
1030
- margin: 0 0 20px;
1031
- overflow: hidden;
1032
- position: relative;
1033
- }
1034
- .instant-img-container .cnkt-sidebar .cta.padding-bottom{
1035
- padding-bottom: 66px;
1036
- }
1037
- .instant-img-container .cnkt-sidebar h3,
1038
- .instant-img-container .cnkt-sidebar h4{
1039
- margin-top: 0;
1040
- }
1041
- .instant-img-container .cta.error-warning{}
1042
- .instant-img-container .cta.error-warning input{
1043
- margin: 15px 0 0;
1044
- display: block;
1045
- width: 100%;
1046
- font-size: 12px;
1047
- }
1048
- .instant-img-container .cnkt-sidebar .cta-wrap{
1049
- display: block;
1050
- padding: 5px 20px 0;
1051
- }
1052
- .instant-img-container .cnkt-sidebar .plugin-listing li{
1053
- position: relative;
1054
- padding-left: 53px;
1055
- margin: 10px 0 0;
1056
- min-height: 48px;
1057
- }
1058
- .instant-img-container .cnkt-sidebar .plugin-listing img{
1059
- position: absolute;
1060
- left: 0;
1061
- top: 2px;
1062
- width: 40px;
1063
- height: 40px;
1064
- }
1065
-
1066
- .instant-img-container .cnkt-sidebar .item{
1067
- overflow: hidden;
1068
- padding: 0 0 10px;
1069
- }
1070
- .instant-img-container .cnkt-sidebar .item h4{
1071
- margin: 0 0 5px;
1072
- font-size: 0.9em;
1073
- text-transform: uppercase;
1074
- opacity: 0.5;
1075
- }
1076
- .instant-img-container .cnkt-sidebar h4{
1077
- margin-bottom: 5px;
1078
- }
1079
- .instant-img-container .cnkt-sidebar ul{
1080
- margin: 0 0 10px;
1081
- overflow: hidden;
1082
- }
1083
- .instant-img-container .cnkt-sidebar li,
1084
- .instant-img-container .cnkt-sidebar p{
1085
- font-size: 13px;
1086
- line-height: 20px;
1087
- margin: 0 0 10px;
1088
- color: #888;
1089
- }
1090
- .instant-img-container .cnkt-sidebar .item i{
1091
- font-size: 12px;
1092
- float: left;
1093
- width: 18px;
1094
- height: 18px;
1095
- border-radius: 100%;
1096
- background: #efefef;
1097
- line-height: 18px;
1098
- text-align: center;
1099
- margin:0 7px 0 0;
1100
- }
1101
- .instant-img-container .cnkt-sidebar .item i.fa-check{
1102
- background: #90be59;
1103
- color: #fff;
1104
- }
1105
- .instant-img-container .cnkt-sidebar .item i.fa-exclamation{
1106
- background: #c43a3a;
1107
- color: #fff;
1108
- }
1109
-
1110
- .instant-img-container .cnkt-sidebar a.visit{
1111
- background: #5d72c3;
1112
- padding: 12px 20px 16px;
1113
- position: absolute;
1114
- bottom: 0;
1115
- left: 0;
1116
- width: 100%;
1117
- display: block;
1118
- color: #fff !important;
1119
- z-index: 2;
1120
- text-decoration: none !important;
1121
- }
1122
- .instant-img-container .cnkt-sidebar a.visit i{
1123
- font-size: 24px;
1124
- opacity: 0.7;
1125
- margin: 0 5px 0 0;
1126
- position: relative;
1127
- top:3px;
1128
- }
1129
- .instant-img-container .cnkt-sidebar a.visit:hover{
1130
- background: #4e65c0;
1131
- }
1132
- .instant-img-container .cnkt-sidebar a.visit:active{
1133
- background: #4e65c0;
1134
- box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
1135
- }
1136
-
1137
- .spacerrr{
1138
- display: block;
1139
- height: 40px;
1140
- overflow: hidden;
1141
- clear: both;
1142
- width: 100%;
1143
- }
1144
-
1145
- /*
1146
- * Media Queries
1147
- */
1148
-
1149
- @media screen and (min-width: 1600px){
1150
- #unsplashwp .item{
1151
- width: 23%;
1152
- }
1153
- .full #unsplashwp .item{
1154
- width: 18.888%;
1155
- margin: 0 0.5% 1%;
1156
- }
1157
- }
1158
- @media screen and (min-width: 2000px){
1159
- #unsplashwp .item{
1160
- width: 18%;
1161
- }
1162
- .instant-img-container .cnkt-main {
1163
- width: 75%;
1164
- }
1165
- .instant-img-container .cnkt-sidebar{
1166
- width: 23%;
1167
- }
1168
- }
1169
-
1170
- @media screen and (max-width: 900px){
1171
- .instant-img-container .cnkt-main,
1172
- .instant-img-container .cnkt-sidebar,
1173
- .instant-img-container .cnkt-main.full {
1174
- float: none;
1175
- clear: both;
1176
- margin: 10px 0 20px;
1177
- width: 100%;
1178
- display: block !important;
1179
- }
1180
- .instant-img-container .cnkt-main .expand{
1181
- display: none;
1182
- }
1183
- }
1184
-
1185
- @media screen and (max-width: 640px){
1186
- #unsplashwp .item,
1187
- .full #unsplashwp .item{
1188
- width: 47.666%;
1189
- margin: 0 1% 1%;
1190
- }
1191
- .instant-img-container #initialize{
1192
- padding: 0 20px;
1193
- }
1194
- .instant-img-container .init-content-wrap{
1195
- padding-bottom: 20px;
1196
- }
1197
- .unsplashwp-search .field-wrap{
1198
- width: 100%;
1199
- }
1200
- .unsplashwp-search .options{
1201
- display: none;
1202
- }
1203
- }
1204
- @media screen and (max-width: 480px){
1205
- #unsplashwp .item,
1206
- .full #unsplashwp .item{
1207
- width: 100%;
1208
- margin: 0 0 2%;
1209
- }
1210
- }
1211
-
1212
- input:-webkit-autofill {
1213
- -webkit-box-shadow: 0 0 0px 1000px white inset;
1214
- }
1215
-