COLUMN BACKGROUND IMAGES

Ask the community
,
1

Hello super beings.
is it possible to connect the background image in a column on a dynamic page to the relevant photo in the dataset so that it too changes with the other elements?

1 Like
2

Hello super user.
while the background property of a column isn’t exposed through the connect dialog, you can do that with a bit of JS code.
take a look at the API reference on columns: Column - Velo API Reference - Wix.com

it should point you in the right direction.
good luck!

3

Does it show how to add JS code in any tutorial?

4

This tutorial shows the basics of adding scripts to your page:
https://www.wix.com/alpha/resources#!add-interactions/pvoe0

for your specific case, what you need to do:

  • select your dataset in your dynamic page
  • open the properties panel (tools ==> properties panel)
  • hover over “onCurrentIndexChanged” in the events list
  • click the ‘+’ sign to create an event handler. this is where you will write your image-setting logic.
    this event is called by the wixcode runtime whenever the “active record” in the dataset changes.
    you can read about it more in the API reference.
  • write the code that changes the background image by accessing the image URL from the active record in the dataset and setting it into the background property of the column component.
    your code should look similar to:
  1. let image_url = $w(“#myDataset”).getCurrentItem().myImageURL; //assuming you store image URLs in a field called my image URL .
  2. $w.(“#myColumn”).background.src = image_url;

hope this helps…

5

Note that “$w.(” #myColumn “).background.src = image_url;” above should actually be “$w(” #myColumn “).background.src = image_url;”

6

Hi guys, thanks for the help.
i am trying to implement this according to Ziv’s instructions but i’ve realised the columns element is on a strip and it’s the strip background that i need to change depending on the service. how do i access this element and implement the change?

7

see attached to illustrate my question above

1760×1072 480 KB

8

is it possible to add more than one dataset to a page. for instance on my homepage i have several strips. one such strip is for services and one is for testimonials. i have successfully linked the gallery on the testimonial strip to the testimonial dynamic page and dataset. but i now want to link the columns on my services strip to my services dynamic page and dataset. can i do both? i tried copying the dataset icon and changing it and it gave me a warning message. as you see below.

1224×1106 102 KB

9

yes, it is possible to have more than one dataset on a page.
you need to add a new dataset through the add panel, configure it to point to the desired collection, and if relevant define filter conditions and sort order to determine which records are retrieved from the collection and in what order.

once the dataset is configured, you can connect it to visual elements just as you would for the dynamic dataset on the page.

Take a look at these articles to get the full understanding of using datasets:
https://support.wix.com/en/article/wix-code-articles-list#data-binding

Good luck!

10

As for your request to change the strip’s background, this is not currently exposed through our API.
If you can add this as a feature request to the feature request forum, it would be great.

thanks!

11

Hello, I am trying to change the background of a strip using an element from my database. The dataset is called, “portfolioDataset,” the strip is called “screenshotStrip” and the database element is called “screenshot.”

I have put the following code into my page, but I continue to get the error, “background is undefined” and the background of the strip does not change.

Can you help me understand why this isn’t working, and how to fix it?

$w.onReady(function () {
$w(“#portfolioDataset”).onReady(function(){
$w(‘#screenshotStrip’).background.src = $w(‘#portfolioDataset’).getCurrentItem().screenshot;
});
});

12

If you take a look at our API Reference you’ll see that a ColumnStrip element does not expose a background property. However a Column element does have a background property. So, if it works for your case, you can set the background of each individual column in your strip.

13

Thank you! I was able to get it fixed.

14

Hey Guys! I am using a column as a slideshow linked to buttons that when clicked changes the column background. It works great on desktop but doesn’t work on tablet/iPad. Also having the same issue doing this with a page background. Any suggestions?

15

Hi,
Can you please re-post your question in a new thread?
Moreover, please share with us the code you’ve written.

Thanks,
Tal.

16

Thanks Tal! I have posted it here: https://www.wix.com/code/home/forum/questions-answers/column-background-and-page-image-change-not-working-on-ipad