Dynamic image inside tab link?

Hey!

Is there any way to display dynamic images inside tab links?

See tabs here: Particimate

I want client logo’s inside the tab links instead of plain text.

Read-only: https://preview.webflow.com/preview/particimate?utm_medium=preview_link&utm_source=designer&utm_content=particimate&preview=068fe58c19642568a69b79e23975e8ba&mode=preview

Thanks!

Has anyone tried and solved this before?

Hey, it’s too easy.
You just have to insert an image into the tab link.

Let me know if I get you wrong.

Thanks @anthonychan2509 but I want the images to be dynamic and linked to the collection list inside the tab panes, by adding a new collection with client logo’s and connecting the two collections with ref fields.

Let me know if this clarifies the question enough!

I see!
You will need to hack the tabs.

Not sure if it is the same thing as you said. I did not dig into it yet.
Hope it helps!

Thanks again! However I already used this exact Finsweet library to create dynamic panes. Thing is, I want dynamic images in the tab links and that doesn’t seem to be possible here.

Again to clarify: everything is already dynamic and set - I just need to be able to insert images inside the tab links that directly refer to the collection item inside the link’s connecting pane.

1 Like

@renzetc

In the F’nsweet example he uses .tab-name to dynamically create the tab name of a text component. What he’s basically doing is taking whatever component what class (and anything inside it) and applying it to the tab menu dynamically.

If you are still wondering how to do this or if this would be helpful for others, you can do it by making the .tab-name component to be an image instead of a text component.

In fact, you can create a div with whatever you want inside of it and apply the class you want and it will apply to the tab menu.

In the screenshot below, I created a div with class .tab-name-wrapper with a dynamic image and text inside. You can apply that to the javascript like so:

<!-- Hosted Library script file on CDN for free -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.7.js"></script>
<script>
// create a new Library instance and store it in a variable called "fsTabs"
(function() {
	var fsTabs = new FsLibrary(".tabs-data-feed")
  // run Tabs component on our instance
	fsTabs.tabs({
		tabComponent: ".tabs-component",
		tabName: ".tab-name-wrapper",
    resetIx: true
	})
})();

</script>

Screen Shot 2022-03-04 at 17.05.16 PM

Hi,

Did you manage to get your solution to work?
I tried using this method, but image wouldn’t appear in the tab. The heading was also missing and replaced by a string of numbers.

I don’t know what is going on behind the Java script, but I’m suspecting the dynamic tab can only get text within the text block.

Hey Max,

Ended up using text only in my case, but @devonlind’s reply should do the trick it seems – try it out!

Cheers,