need help using vast tabber as resource link(s)

[reddot]

Hi,

Pulling out my hair on this - I've added a vast tabber for users to have easy access to multiple pdf files - on this page. Seemed like a good idea at the time. Scroll down to view tabber.

https://www.sonicu.com/resources/partner-resources

I was intending that each tab would contains links to different resource files. Monitoring Kits, Case Studies, etc. So, I loaded each tab with multiple image thumbnails, intending each thumbnail to be a clickable link to load the pdf into a browser. I can edit each image link property in the module so I thought I was home free, but turns out each tab only allows for 1 link - for all the thumbnails at a time. So what I mean is, each time I add a new link to a thumbnail, it supersedes the old link on all the thumbnails. The net effect is all the thumbnails all link to only 1 resource.

Is there code I can add to allow each thumbnail image to have a unique clickable link, within 1 tab?

Here is the module:

https://app.hubspot.com/design-manager/1795205/modules/26876518390

Here is the code for tab_1_content

<p><a href="https://www.sonicu.com/hubfs/Resources/Monitoring-Kits/differential-air-pressure-monitoring-kit.pdf" rel=" noopener" linktext=""><img src="https://www.sonicu.com/hubfs/Temperature-Monitoring-kits-thumb.jpg" alt="Temperature-Monitoring-kits-thumb" width="150" style="width: 150px;"><img src="https://www.sonicu.com/hubfs/ambient-temperature-kits-thumbnail.jpg" alt="ambient-temperature-kits-thumbnail" width="150" style="width: 150px; margin: 0px 0px 0px 20px;"><img src="https://www.sonicu.com/hubfs/ultra-low-cryogenic-temp-monitor-kit-thumb.png" alt="ultra-low-cryogenic-temp-monitor-kit-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;"><img src="https://www.sonicu.com/hubfs/Sonicu-vaccine-monitoring-kits-thumb-1.jpg" alt="Sonicu-vaccine-monitoring-kits-thumb-1" width="150" style="width: 150px; margin: 0px 20px;"><img src="https://www.sonicu.com/hubfs/differential-air-pressure-kit-thumb.jpg" alt="differential-air-pressure-kit-thumb" width="150" style="width: 150px; margin: 0px 20px 0px 0px;"><img src="https://www.sonicu.com/hubfs/room-conditions-monitoring-kit-thumb-1.png" alt="room-conditions-monitoring-kit-thumb-1" width="150" style="width: 150px; margin: 0px 20px 0px 0px;"></a><img src="https://www.sonicu.com/hubfs/sonicu-clean-room-kits-thumb.jpg" alt="sonicu-clean-room-kits-thumb" width="150" style="width: 150px;"><a href="https://www.sonicu.com/hubfs/usp-800-monitoring-kits-4.pdf" rel=" noopener" linktext=""><img src="https://www.sonicu.com/hubfs/usp-800-monitoring-kit-thumb.png" alt="usp-800-monitoring-kit-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;"></a><a href="https://www.sonicu.com/hubfs/Resources/Monitoring-Kits/Sound-Level-Monitoring-Kits.pdf" rel=" noopener"><img src="https://www.sonicu.com/hubfs/Sound-Level-Monitoring-Kits-thumb.jpg" alt="Sound-Level-Monitoring-Kits-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;"></a></p>
<p>&nbsp;</p>

[reddot · Accepted solution]

Hi Dennis,

Thanks so much for checking on me. Yes, I found a way to make it work. I don't know if its the "right" way but it seems to be working. 

Don't know why applying normal image links was not working, but eventually I found a way to hand code href's in for each image link, and broke syntax so only 1 </p> at end of code so thumbnails would string out L-R as I intended inside the tab.

Here is some code that may help someone someday...

<p><a href="https://www.sonicu.com/hubfs/Sonicu-enterprise-monitoring-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-enterprise-monitoring-thumb.jpg" alt="Sonicu-enterprise-monitoring-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 10px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-pharmaceutical-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-pharmaceutical-brochure-thumb.jpg" alt="Sonicu-pharmaceutical-brochure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-healthcare-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-healthcare-brochure-thumb.jpg" alt="Sonicu-healthcare-brochure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-differential-air-pressure-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-differential-air-pressure-thumb.jpg" alt="Sonicu-differential-air-pressure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-life-sciences-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-life-science-thumb.jpg" alt="Sonicu-life-science-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/resources/Brochures_Combo_Pieces/Sonicu%20Temperature%20Program%20Broch..." rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-temperature-monitoring-thumb.jpg" alt="Sonicu-temperature-monitoring-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/sonicu-sound-monitoring-brochure%20(11)-26.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-sound-monitoring-brochure-thumb.jpg" alt="Sonicu-sound-monitoring-brochure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-Executive-Summary%20(15)-18.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-Executive-Summary-thumb.png" alt="Sonicu-Executive-Summary-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;"></a></p>

[reddot]

mysonicu is password to webpage

[dennisedson]

did you figure this out?  seems like everything has a dif link

[reddot · Accepted solution]

Hi Dennis,

Thanks so much for checking on me. Yes, I found a way to make it work. I don't know if its the "right" way but it seems to be working. 

Don't know why applying normal image links was not working, but eventually I found a way to hand code href's in for each image link, and broke syntax so only 1 </p> at end of code so thumbnails would string out L-R as I intended inside the tab.

Here is some code that may help someone someday...

<p><a href="https://www.sonicu.com/hubfs/Sonicu-enterprise-monitoring-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-enterprise-monitoring-thumb.jpg" alt="Sonicu-enterprise-monitoring-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 10px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-pharmaceutical-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-pharmaceutical-brochure-thumb.jpg" alt="Sonicu-pharmaceutical-brochure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-healthcare-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-healthcare-brochure-thumb.jpg" alt="Sonicu-healthcare-brochure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-differential-air-pressure-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-differential-air-pressure-thumb.jpg" alt="Sonicu-differential-air-pressure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-life-sciences-brochure.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-life-science-thumb.jpg" alt="Sonicu-life-science-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/resources/Brochures_Combo_Pieces/Sonicu%20Temperature%20Program%20Broch..." rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-temperature-monitoring-thumb.jpg" alt="Sonicu-temperature-monitoring-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/sonicu-sound-monitoring-brochure%20(11)-26.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-sound-monitoring-brochure-thumb.jpg" alt="Sonicu-sound-monitoring-brochure-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;">

<p><a href="https://www.sonicu.com/hubfs/Sonicu-Executive-Summary%20(15)-18.pdf" rel=" noopener">
<img src="https://www.sonicu.com/hubfs/Sonicu-Executive-Summary-thumb.png" alt="Sonicu-Executive-Summary-thumb" width="150" style="width: 150px; margin: 0px 0px 0px 20px;"></a></p>

[reddot · Accepted solution]

um... sorry - the code above was not finished code. this code illustrates the solution more accurately.

<p><a href="https://www.sonicu.com/hubfs/E-books/sonicu-facilities-monitoring-ebook.pdf" rel=" noopener" linktext="">
<img src="https://www.sonicu.com/hubfs/Sonicu-Facilities-Monitoring-thumb.jpg" alt="Sonicu-Facilities-Monitoring-thumb" width="200" style="width: 200px;">

<a href="https://www.sonicu.com/hubfs/E-books/Sonicu%20Naming%20Convention%20Ebooks/Sonicu-Temperature-Monito..." rel=" noopener" linktext="">
<img src="https://www.sonicu.com/hubfs/E-books/Temperature%20Monitoring%20E-book.png" alt="Temperature Monitoring E-book" width="200" style="width: 200px; margin: 0px 0px 0px 20px;">

<a href="https://www.sonicu.com/hubfs/E-books/Sonicu%20Naming%20Convention%20Ebooks/Sonicu-Targeting-Sound-EB..." rel=" noopener" linktext="">
<img src="https://www.sonicu.com/hubfs/Sonicu-targeting-sound-thumb.jpg" alt="Sonicu-targeting-sound-thumb" width="200" style="width: 200px; margin: 0px 0px 0px 20px;">

<a href="https://www.sonicu.com/hubfs/E-books/Sonicu%20Naming%20Convention%20Ebooks/Sonicu-Quieting-The-NICU-..." rel=" noopener" linktext="">
<img src="https://www.sonicu.com/hubfs/E-books/Noise-in-the-NICU-thumb-new.png" alt="Noise-in-the-NICU-thumb-new" width="200" style="width: 200px; margin: 0px 0px 0px 20px;"></a></p>

[dennisedson]

looks like an opportunity to turn that into a repeater 🙂

[reddot]

showing my ignorance here - What's a repeater?   : )

[sharonlicari]

Thank you for stepping in @dennisedson 🙂

Hey @reddot thank you for sharing this information, it might be helpful for someone in Community 🙂