Visitor Access to WIX Image Collection?

[david-seroy]

Is there anyway that my website users can access the Wix Image Collections? Preferably the Stock and Free Images.

I want to create an image gallery, populated by my members. Frankly, unless they have access to a database of quality images, I know it will quickly lose the aesthetic and consistency. It seems like it should be very easy and a great additional revenue stream for Wix to open this up to website users, not just the website creators.

** EDIT ** Or are there any free databases of high quality images with captions that I can download and create my own dataset from? I know there are plenty of free image websites out there, but I need something that I can download the entire database instead of one by one imges.

OR
Can I integrate another website that already has an image database into my WixSite and let website users pull those images into my Wix Datasets??

[admin-23]

Hi David,

At the moment it is not possible to allow your users to interact with the free/stock Wix Image collection.
Thank you for your feedback.

On the brighter side, it is technically possible to add such a service using a third party api.
A Google search for ‘images api’ will surely produce relevant services.

I would highly recommend making sure that the use-case you are developing is allowed under the Terms of Use of the selected third party service.

[david-seroy]

Thanks Ido! You’re correct, tons of third party api’s for images are out there.

As this will be my first time ever working or trying to implement third party API’s, do you have any recommended resources I could research or learn from?

[david-seroy]

Ido (or anyone) – Is there a way to set the items in an image gallery using a loop? Right now, I’ve used a Third party API which allows a user to search a keyword and the API return’s a listing of links for high quality images related to the word. I’ve hard coded the keyword to be “office” just for testing purposes.

The piece that is incorrect is the FOR loop at the bottom of the code. I’ve tried to run a for loop that sets the gallery according to the image links returned. The code is succesfully querying and returning the image links, just cannot get the loop to operate.

Thoughts??

import {fetch} from 'wix-fetch';

let images = [];

$w.onReady( () => {
	var api = "https://api.unsplash.com/search/photos/?";
	var apiKey = "client_id=8b5fa908a9e4f8f7b74dddc4b66a56b60bc57b5b63259e3cc9598d5e1400b6e6";
	var search = "&query=" + "office";
	
	var url = api + apiKey + search;
	console.log(url);
	
fetch (url, {method: 'get'})
	.then( (httpResponse) => {    
		if (httpResponse.ok) {
		return httpResponse.json()
    	.then(function(data) {
    		for (var i = 0; i < data.results.length; i++) {
			images.push(data.results[i].urls.raw);
			console.log(data.results[i].urls.raw);
			}
			
			$w("#gallery1").items = [  
			for (var i = 0; i < images.length; i++) {
			{
			    src: images[0],
			    description: "Description" + 0,
			    title: "Title" + 0
			  },
			}
			];
		});
  		}
	});   
  });

[system]

Hi David!
It’s great to see that you keep making progress!
Regarding the code you shared… your inner ‘for’ loop won’t work in javascript… it would work for PYTHON though
So basically you need to build your images array and the assign it to the gallery.
Your main ‘for’ loop should look more like this:

for (var i = 0; i < data.results.length; i++) {
  images.push({
      src: data.results[i].urls.raw,
      description: 'Some description here',
      title: 'title goes here'
  }); 			
 } 

Then, assigning ‘images’ to the gallery should do the trick:

$w("#gallery1").items = images;

Hope this helps,
Liran.

[system]

BTW, Using an API key from your page code in insecure.
I suggest creating a function that uses the API from a backend module .

Liran.

[david-seroy]

Wooh, it works! Thanks Liran! Yah I definitely am making progress and the support I get from these forums and Wix is instrumental to that, so great job to you all as well.

I’ll read up on the back end module and fix that later.

I do notice, that there is some lag to running this. Is that just the nature of the beast when using loops, images and third party API’s? I am concerned this is going to be a problem at scale.

[system]

I would guess that most of the time is consumed by showing the images, since they are being read and rendered.
Maybe there’s a way for you to use the API in a way that allows you to request a light weight images?

[david-seroy]

Brilliant! Yes, I was pulling in the raw image files, with the highest quality. Modifying it to lower qualities made a noticeable difference. Thanks!

[david-seroy]

One or two more questions :). If I look at the way Wix Image collections are set up, once a user opens the lightbox it is populated with all the image collections, but on each image in the gallery there are options to either magnify the image if that icon is clicked or if the image is clicked, a check mark is placed on the property and the frame is highlighted.

Any guidance on how I can do this? I know I could set up Gallery_itemClicked function, but I have no idea how to add the visuals that would indicate to a user which image was actually selected.

[system]

What you’re asking for is actually to duplicate some components (let’s say a green check mark) with all the images you have in a gallery.
Currently, there is no easy way of doing that (hopefully there will be soon).
Two alternate suggestions:

1. Have a limited number of images in a gallery (or use pagination). Then place a green check mark shape on every image, make the check marks hidden on load, and show/hide them upon gallery item click.
   The pro - you get the behaviour you want.
   The Cons - limited number of images on screen, a lot of green check marks on screen.

2. Have some other ‘Chosen images’ indication. Two ideas here:

   • A text box that changes every item click… something like “Chosen: image1, image2”
     Adding images names to the list is easy, removing can be a bit tricky, but see here how you can take substring out of a string
     -Have a table, let’s say with two columns (you can make it look more like a list). first column will show the selected image name (or image itself), second column will act at a ‘Remove from list’ button.

Let me know how it goes,
Liran.

[david-seroy]

Liran – Finally getting a chance to look back at this issue. Going back to simply pulling in the image API dataset, the API only allows me to return back 30 images and place them into the gallery. I’ve spent a significant amount of time toying with the code in an attempt to make it return more images. I’ve been unsuccessful. Any ideas on how you would go about doing this?

I’ve tried creating a loop both inside the .jsw file on the actual Fetch, or a loop in the front end code. Neither works.

Scratching my head here…
The below code is what I currently have and it works perfectly to pull in a full single page of images (30). I’d like for it to be able to pull on a lot more of the images.

// Page Code 
export function button2_click(event) {	
	let imageSearch = $w('#input1').value;
	
	(unsplash1(imageSearch, 1))
	.then( (imagesQuery) => {
		console.log(imagesQuery);
	$w("#gallery1").items = imagesQuery;
	});			   
}

import {fetch} from 'wix-fetch';

let images = [];

export function unsplash1 (imageSearch, pageNum) {	

		var api = "https://api.unsplash.com/search/photos/?";
		var apiKey = "API KEY
		var search = "&query=" + imageSearch;
		var perPage = "&per_page=30";
		var page = "&page=" + pageNum;
		var url = api + apiKey + search + perPage + page;
	
	
		return fetch (url, {method: 'get'})
			.then( (httpResponse) => {
		    if (httpResponse.ok) {
		    	console.log("HTTP OK");
		    return httpResponse.json();
		    }
		  	} )
		    	.then( (json) => {	
					for (var i = 0; i < json.results.length; i++) {
		//				console.log(json.results[i].urls.regular + page);
					images.push({
					  	src: json.results[i].urls.regular,
					    description: json.results[i].description,
					    title: "Title" + i
					  });	
					}
				return images;
			
		});
}
 

[system]

Hi David,

Any chance unsplash API single page only contains 30 images?
If so, maybe you should run the query a few times…
How about something like that:

// Page Code  
export function button2_click(event) { 
    let imageSearch = $w('#input1').value; 
    let allImagesToShow = [];
    const maxPageNumber = 5;
    for (let i = 1; i <= maxPageNumber; i++) {
        (unsplash1(imageSearch, i)) .then( (imagesQuery) => { 		         
            console.log(imagesQuery); 
            allImagesToShow = allImagesToShow.concat(imagesQuery); 
       }); 
    }
    $w("#gallery1").items = allImagesToShow;
}
   

Let me know if it helps
Liran.

[david-seroy]

So, you’re right that API only contains 30 images per page. So I had this same idea to loop and concatenate as well. Unfortunately, it doesn’t work. When I run the above code, it returns 240 SRC’s in the console Log, but nothing shows up in the gallery, it just goes blank.

Both of these results are very odd, as I know the JSON has 7,000+ items.

[system]

EDIT

I think I just figured out the issue…
Since fetch() returns a Promise, the code int then() will only run after the function is finished running.
Therefore what actually happens is that we set $(‘#gallery’).items to be an empty array, then running the API.
Can you please try changing to following line:

allImagesToShow = allImagesToShow.concat(imagesQuery);

to be:

$w("#gallery1").items = $w("#gallery1").items.concat(imagesQuery);

If this still not helping, please share a URL to your site.

Liran.

[david-seroy]

Not working, unfortunately. The site isn’t operational and still incomplete, but here you go. https://dsseroy.wixsite.com/philcopy1122.

If you know the solution, I’d be curious just for future learning. However, I was so frustrated by this that I actually just grabbed a separate API Key from a different Stock images website that has a 100 page limit. Problem solved.