Fetch more than one image

Hi,

The plugin currently only finds the ‘primary’ image returned from the Amazon Web Service. I see that there are also other ‘image sets’ called ‘variants’ that could also be returned.

I could probably create an add-on that will grab all the variant images but the way that they are displayed would be very particular to each user.

Had you any ideas on how you would give a consistent product post? Bearing in mind there would be varying numbers of images returned?

I could just return the ‘variant’ images as a unordered list and you wrap it in a div and use css to style it how you want?

Might be able to update the plugin to have a modifier that returns the ‘Nth’ image in the template e.g. %IMAGE%2# returns the second ‘variant’ image.

Any ideas?

Paul

Hi Paul,

thank’s for your fast answer.

Ok, my thoughts on this multiple image function:

I was thinking about two div-container. In the top one I would display the image in big size, in the bottom div I would insert the thumbnails of all pictures. If a visitor hovers over the thumbnails in the bottom div-container the big image will change to the one the mouse focuses. Similar to the way Amazon used to display their images untill now. Do you unterstand what I am thinking of?

For that function the addon should have one setting –> maximum number of pictures. Everybody could make his own template and the maximum image setting would prevent screwing the layout.

template would be something like this:

<div><img... /></div>
<div>%IMAGES%</div>

or

<div><img... /></div>
<div>%IMG% %IMG2% %IMG3% %IMG4% %IMG5%</div>

Where %IMAGES% respectively %IMGx% outputs not only the image link, but the complete code meaning <img src=”…. /”>

Mike

Hi Mike,

I can help provide the mechanics to do what you want, but CSS and Javascript really isn’t my area of expertise. I think what you want would involve some quite complex css and scripting (See this page for an example).

If you could produce a template that duplicated something like this (or perhaps build most of it into your theme) , then all the plugin needs to provide is a comma separated list of images. Might need some way of creating a unique ‘id’ for the image that is being updated in case more than one ‘gallery’ is shown on a page.

So I guess what we need to make this work are:

1. An addin to retrieve all the variant images,
2. an option to limit the maximum returned or make it template specific.
3. An option to describe how each IMAGE should be expanded

The last one would just use the current template syntax but repeat it for each IMAGE
e.g. "%IMAGE%", for a comma sep list or
<li><a href="%IMAGE%"><img class="thumbnail" src="%IMAGE%"></a></li> for something a bit more complex. Where %IMAGE% expands to be IMAGE 1 to N.

Any more ideas?

Paul

Hi Paul,

thank’s again for your answer.

The page you mentioned shows exactly what I was thinking of how the gallery should look. The last 30 minutes I made an example gallery with jQuery and CSS and it works fine. So, if you provide the “mechanics”, I can and will do the rest.

Regarding the unique “id” for the image being updated I would propose “mainImage_ASIN”, where ASIN is replaced by the products ASIN.

To point 3: The template which describes each image would be some kind of a subtemplate? Or is it a template which I include in my own gallery code?

Also we could think of getting small (for the thumbnails) and big size (for the main image) images from Amazon. So if someone doesn’t look through the gallery we don’t have to load all the big size images…

Mike

Hi,

I’ve uploaded the beta version of this change to the development version of the plugin which can be downloaded from https://downloads.www.ads-software.com/plugin/amazon-link.zip.

I’ve knocked together a plugin to extend the functionality to do roughly what you want, a version of this can be grabbed from here:

https://www.houseindorset.co.uk/amazon-link-images.php.txt

Adds an option ‘max_images’ to limit the number of images processed.
Adds an option ‘image_template’ that can be used to set the HTML returned as the plugin processes each image/thumbnail.

Adds the keywords ‘%IMAGES%’ and ‘%THUMBS%’ that cause it to expand the ‘image_template’ for each IMAGE URL or THUMB URL found.

This Template supports all the usual plugin keywords, except the keyword ‘%IMAGE%’ will be replaced with each successive image url, and %IMAGE_INDEX% will be replaced with the array index of each image. (Note the same keywords are used in both THUMBS and IMAGES).

Currently the same functionality is used to expand the THUMBS and IMAGES keywords, would be quite easy to copy and paste the function to have one for THUMBS and one for IMAGES and add another option for ‘thumb_template’.

Alternatively you can always set the template in the shortcode for simple templates e.g. [amazon asin=0123456789&image_template="%IMAGE%",&template=image_javascript]. Although I haven’t tested that option!

Paul

Hi,

great work! It nearly works like a charm right from the beginning. I tried to set up the template and install my example gallery in it and it works fine, except of two things.

1. I tested two products from amazon. In one case, the main image was posted twice (index 0 and 1). How can this be possible? I looked at amazon.com and the picture wasn’t duplicated there… Would it be possible to check the received variant images for same image URL?

2. I wanted to use %THUMB% and %IMAGE% inside the sub-template for %IMAGES%, but %THUMB% was only replaced by the main image’s thumbnail. Would it be possible to change it that way, that %THUMB% will be replaced according to %IMAGE%?

I will tweak around a little bit more with the CSS and template and will post the result here then so that you can see how it looks.

Cheers,

Mike

Hi Mike,

I’m just in the middle of trying to re-factor the code to make it useful for other features, so can’t offer a quick fix at the moment.

However couple of things that might have an impact with 1:

If you have uploaded the cover image to your own media library the plugin may display both the local image and the Amazon image.

I’ve noticed that if the product has a ‘Look Inside’ option then I get two images (frustratingly the look inside one is first and only supports a low resolution small image, so usually is picked by default by the plugin!).

Which ASIN was giving the problem?

It would be relatively simple to filter if the URLs are indeed identical, in the function ‘alx_images_process_images‘ just change the last line to:

return array_unique($data);

2. The version you have will change the %IMAGE% keyword in the sub-template to the appropriate THUMB url _only_ if it is being processed for the %THUMBS% keyword. However if you want to expand both %IMAGE% and %THUMB% in the same sub-template then you could try changing the code in the alx_images_display_images function:

Change the line:

$output .= str_replace( array('%IMAGE%', '%IMAGE_INDEX%'), array($image,$index), $input);

to read:

$output .= str_replace( array('%IMAGE%', '%THUMB%', '%IMAGE_INDEX%'), array($image,$data[$country]['thumb'][$index], $index), $input);

Note: I haven’t tested either of these changes!

Cheers,

Paul

Hi Paul,

thank you very much for your help, again!

Problem one occured with ASIN B001NQHN7S. I added the array_unique() function and now it works fine.

For the second problem – I use the %IMAGE% and %THUMB% function together in the sub-template for faster loading time of the images. Your hint for number 2 worked fine as well!

You may be curious about the result?! You can look at the image gallery at this page:

https://www.bestkidsoutdoortoys.com/little-tikes-activity-garden/

What do you think? Any more improvement ideas?

my gallery template:

<div id="gallery">
	<div class="mainImage">
		%LINK_OPEN%<img src="%IMAGE%" class="mainImg" id="mainImage_%ASIN%" alt="%TITLE%" title="%TITLE%"  />%LINK_CLOSE%
	</div>
	<div class="thumbnails">
		%IMAGES%
	</div>
 </div>

%IMAGES% sub-template (reduced to essential part):

%LINK_OPEN%<img src="%THUMB%" class="thumb" onmouseover="changeImage('mainImage_%ASIN%','%IMAGE%');" />%LINK_CLOSE%

Mike

Hi Mike,

Looks great!

I’d be tempted to change the IMAGE_INDEX to range from 1..N rather than 0..N.

Simply change:

$output .= str_replace( array('%IMAGE%', '%THUMB%', '%IMAGE_INDEX%'), array($image,$data[$country]['thumb'][$index], $index), $input);

to:

$output .= str_replace( array('%IMAGE%', '%THUMB%', '%IMAGE_INDEX%'), array($image,$data[$country]['thumb'][$index], $index+1), $input);

Glad you got it working, once I’ve finalised how the plugin will do this stuff in the next version I’ll drop you a new version of the ‘amazon-link-images.php’ file in case you want to upgrade.

Cheers,

Paul

Hey Paul,

great! Yes, please keep me posted about updates because I always want to stay up 2 date ??

Was nice working with you!

Take care,
Michael

The amazon-link-images.php plugin is included in the amazon link extras page, for the new version (3.1.0).