I have a dynamic page, with a repeater connected to the Stores/Products collection . I want to change the displayed image when I hover the mouse on the product in the repeater to the second in the product.
I use this code to do so:
export function repProdContainer_mouseIn(event) {
// Get item from repeater
let $item = $w.at(event.context);
let prodItem = $item("#datasetStoresProducts").getCurrentItem();
// Show button with slide effect
$item('#repProdButton').show('slide', slideOptions);
// Change to second image
$item('#repProdImage').link = prodItem.mediaItems[1].src;
}
export function repProdContainer_mouseOut(event) {
// Get item from repeater
let $item = $w.at(event.context);
// Hide button with slide effect
$item('#repProdButton').hide('slide', slideOptions);
// Change back to main image
let prodItem = $item("#datasetStoresProducts").getCurrentItem();
$item('#repProdImage').link = prodItem.mainMedia;
}
In both cases (mouseIn and mouseOut) I get the same error, as if the link of the image is not in the expected format, but looking to the documentation in here, I can not see why this string is in the wrong format.
Wix code SDK error: The link property that is passed to the link method cannot be set to the value "wix:image://v1/1fe34d_78427492ce054df682b5bafa03e0549f~mv2_d_1200_1500_s_2.jpg/file.jpg#originWidth=1200&originHeight=1500" as this is not a supported link type.
What am I doing wrong? I would appreciate any help on this.
Description : Displays the main media item (image or video) for this product as it appears in the Store Manager. Type : Image Can connect to data : Yes Can use in dynamic page URL : No Can be sorted : No Can be filtered : No Read-only : Yes
MediaItems (mediaItems)
Description : Lists all the media items available for this product in an array of JSON objects. Type : Text Can connect to data : No Can use in dynamic page URL : No Can be sorted : No Can be filtered : No Read-only : Yes
{
type: "Image",
src: "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120",
title: "title",
description: "whatever first line\nthe second line.",
link: "https://www.whatever.com"
}
{
type: "Video",
src: "wix:video://v1/11062b_03c50f8fe4a34cc297a984e483a282ef/simpsons.mov#posterUri=96fbec_52cd5b00f7fd48e0a83bc1fb1dfb06ea.jpg &posterWidth=1920&posterHeight=1080",
title: "title",
description: "whatever first line\nthe second line.",
link: "https://www.whatever.com",
thumbnail: "wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg/#originWidth=1970&originHeight=1120"
}
Yes that will then get the full url of the image needed, however then they will have to use the website url and not be able to use the Wix Stores Product Collection in their code.
Setting the src property changes the displayed image to the image found at the new src value.
Getting the src property returns the location of the current image file.
The image file can either be an image file from the Media Manager or an external file from any web location.
The URL formats supported are:
Images from the Media Manager: wix:image://v1//#originWidth=&originHeight=[&watermark=<watermark_manifest_string>]
Images from the web: http(s)://
Set the image to be an image from the Media Manager
I knew it was a simple mistake, thanks for all your replies!
However, just for completeness, do you know why this is not a ‘supported link type’, as it seems to be exactly as specified in the documentation . Is it because ‘wix:image’ is not supported as link, and it should only be ‘wix:document’?
Wix code SDK error: The link property that is passed to the link method cannot be set to the value "wix:image://v1/1fe34d_78427492ce054df682b5bafa03e0549f~mv2_d_1200_1500_s_2.jpg/file.jpg#originWidth=1200&originHeight=1500" as this is not a supported link type.
Thanks, I understand this fully. There’s no nneed to copy documentation
My question is that, as you can see, it is not possible to set the ‘link’ with the ‘src’ property of the image which has a format of ‘wix:image://v1// #originWidth =&originHeight=[&watermark=<watermark_manifest_string>]’ from the Media Manager.
If anyone knows the answer, that’d be perfect. If not, my original problem is already resolved.
Thanks!
You already know the answer! You can only use the link function with Wix Documents and the src function with Wix Image or Web Images.
link
The different types of links you can use are:
wix:document://: a document stored in the Media Manager
src
The URL formats supported are:
Images from the Media Manager: wix:image://v1// #originWidth =&originHeight=[&watermark=<watermark_manifest_string>]
Images from the web: http(s)://
If you wish to receive a link to the picture you can use:
import wixData from 'wix-data';
///rest of code....
wixData.query("yourCollection")
.find()
.then((results) => {
const firstItem = results.items[0]
const linkToImage = firstItem.yourImageFieldKey
// linkToImage is a string with the url to you image.
// Good for "$w('yourImage').src = linkToImage"
);