diff --git a/app/assets/images/communication/photo_import/pexels.png b/app/assets/images/communication/photo_import/pexels.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fdda8d646eaefdee64a9275b0e5c523f5db2946
Binary files /dev/null and b/app/assets/images/communication/photo_import/pexels.png differ
diff --git a/app/views/admin/communication/photo_import/_selector.html.erb b/app/views/admin/communication/photo_import/_selector.html.erb
index a1ea39feab99454edee7d87bc74ff9709bd2428d..7d1af9a6d59c34423555763a91850fe627f1056c 100644
--- a/app/views/admin/communication/photo_import/_selector.html.erb
+++ b/app/views/admin/communication/photo_import/_selector.html.erb
@@ -92,6 +92,36 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
</div>
</div>
</div>
+ <div class="col-md-6">
+ <div class="row pure__row--small" ref="results">
+ <p v-if="pexels.data.results.length === 0 || !pexels.data" >
+ <%= t 'photo_import.nothing' %>
+ </p>
+ <div v-for="image in pexels.data.results" class="col-6 col-lg-4">
+ <img
+ :src="image.thumb"
+ :alt="image.alt"
+ v-on:click="select(image)"
+ class="img-fluid img-thumbnail mb-3"
+ :class="image === selected ? 'bg-secondary' : ''">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-5">
+ <a href="#" v-if="pexels.page > 1" v-on:click="pexels.page = pexels.page - 1" class="btn btn-light btn-sm">
+ <%= t 'photo_import.previous' %>
+ </a>
+ </div>
+ <div class="col-lg-2 text-center">
+ <%= image_tag 'communication/photo_import/pexels.png', width: 100, alt: 'Unsplash' %>
+ </div>
+ <div class="col-lg-5 text-end">
+ <a href="#" v-if="pexels.page < pexels.data.total_pages" v-on:click="pexels.page = pexels.page + 1" class="btn btn-light btn-sm">
+ <%= t 'photo_import.next' %>
+ </a>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -121,6 +151,14 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
total: 0
}
},
+ pexels: {
+ url: '<%= pexels_path %>',
+ page: 1,
+ data: {
+ results: [],
+ total: 0
+ }
+ },
targets: {
image: '<%= about_featured_image_image %> img',
imageContainer: '<%= about_featured_image_image %> .sdfi-deletable-file__preview',
@@ -157,12 +195,17 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
watch: {
'unsplash.page': function(newVal, oldVal) {
this.searchUnsplash();
+ },
+ 'pexels.page': function(newVal, oldVal) {
+ this.searchPexels();
}
},
methods: {
research() {
this.unsplash.page = 1;
+ this.pexels.page = 1;
this.searchUnsplash();
+ this.searchPexels();
},
searchUnsplash() {
if (!this.query) {
@@ -185,6 +228,27 @@ pexels_path = admin_communication_pexels_path(website_id: nil, format: :json)
false );
xmlHttp.send( null );
},
+ searchPexels() {
+ if (!this.query) {
+ return null;
+ }
+
+ var xmlHttp = new XMLHttpRequest();
+ xmlHttp.onreadystatechange = function() {
+ if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+ this.pexels.data = JSON.parse(xmlHttp.responseText);
+ }
+ }.bind(this);
+
+ xmlHttp.open( "GET",
+ this.pexels.url
+ + '?query=' + this.query
+ + '&per_page=' + this.parameters.per_page
+ + '&page=' + this.pexels.page
+ + '&lang=' + this.parameters.lang,
+ false );
+ xmlHttp.send( null );
+ },
select(image) {
var inputImage = document.querySelector(this.targets.image),
inputImageContainer = document.querySelector(this.targets.imageContainer),
diff --git a/app/views/admin/communication/photo_import/pexels.json.jbuilder b/app/views/admin/communication/photo_import/pexels.json.jbuilder
index 5491f62290eb1a3f17e026960837ecac871466c5..ad0ef5a834ad383ec058d1681431f744f263cf2f 100644
--- a/app/views/admin/communication/photo_import/pexels.json.jbuilder
+++ b/app/views/admin/communication/photo_import/pexels.json.jbuilder
@@ -1,5 +1,10 @@
json.total @total
json.total_pages @total_pages
json.results @search do |photo|
- json.partial! 'admin/communication/photo_import/unsplash/photo', photo: photo
+ json.id photo['id']
+ json.filename "#{photo['id']}.jpg"
+ json.alt photo['alt_description']
+ json.credit "Photo by <a href=\"https://www.pexels.com/@daria\">Daria</a> on <a href=\"https://www.pexels.com\">Pexels</a>"
+ json.thumb photo['urls']['small']
+ json.preview photo['urls']['regular']
end
diff --git a/app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder b/app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder
deleted file mode 100644
index 34175cfbd7f1daaedbc030b953bb03b2d294d643..0000000000000000000000000000000000000000
--- a/app/views/admin/communication/photo_import/pexels/_photo.json.jbuilder
+++ /dev/null
@@ -1,6 +0,0 @@
-json.id photo['id']
-json.filename "#{photo['id']}.jpg"
-json.alt photo['alt_description']
-json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
-json.thumb photo['urls']['thumb']
-json.preview photo['urls']['regular']
diff --git a/app/views/admin/communication/photo_import/unsplash.json.jbuilder b/app/views/admin/communication/photo_import/unsplash.json.jbuilder
index 5491f62290eb1a3f17e026960837ecac871466c5..59eeb59df36a37a80c3750cc5a7771d25c886647 100644
--- a/app/views/admin/communication/photo_import/unsplash.json.jbuilder
+++ b/app/views/admin/communication/photo_import/unsplash.json.jbuilder
@@ -1,5 +1,10 @@
json.total @total
json.total_pages @total_pages
json.results @search do |photo|
- json.partial! 'admin/communication/photo_import/unsplash/photo', photo: photo
+ json.id photo['id']
+ json.filename "#{photo['id']}.jpg"
+ json.alt photo['alt_description']
+ json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
+ json.thumb photo['urls']['small']
+ json.preview photo['urls']['regular']
end
diff --git a/app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder b/app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder
deleted file mode 100644
index 1dc8aac83ca2c200025cee363aa40eb8492c45e7..0000000000000000000000000000000000000000
--- a/app/views/admin/communication/photo_import/unsplash/_photo.json.jbuilder
+++ /dev/null
@@ -1,6 +0,0 @@
-json.id photo['id']
-json.filename "#{photo['id']}.jpg"
-json.alt photo['alt_description']
-json.credit "Photo by <a href=\"https://unsplash.com/@#{ photo['user']['username'] }?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\"> #{ photo['user']['name'] }</a> on <a href=\"https://unsplash.com/?utm_source=#{ Unsplash.configuration.utm_source }&utm_medium=referral\">Unsplash</a>"
-json.thumb photo['urls']['small']
-json.preview photo['urls']['regular']