Hi everyone, hope you are all doing well! I have run into a really weird issue, I am placing an expression which isn’t working on the line I need it to work, line 128, but when I placed it on line 131, it seems to be working as it gets highlighted in green (scrn shot attached)
How does this make sense?
Hey @Nick_B hope all is well.
Can you please post the html you used in that screenshot, please?
Could you also please try to inject the actual url to the <img> instead of an expression?
Hi Jabbson, thanks for the reply, I tried putting in the actual url in an HTML Online viewer and it didn’t work, so I’m assuming it’s a URL problem. My images are hosted on Google Drive. The code I shared here has the google drive link not the expression.
Here is the HTML:
<div style="font-family: Tahoma, Verdana, sans-serif; max-width: 700px; margin: 0 auto; border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
<style>
/* --- CSS FOR TABS (EBAY COMPLIANT) --- */
.tab-container-css {
display: flex;
flex-wrap: wrap;
}
/* Hide the actual radio buttons */
.tab-container-css input[type="radio"] {
display: none;
}
/* Style the labels to look like buttons */
.tab-label {
flex: 1;
padding: 18px 10px;
cursor: pointer;
text-align: center;
font-weight: bold;
font-family: Tahoma, Verdana, sans-serif;
background-color: #000000;
color: white;
border-right: 1px solid #222222;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.tab-label:last-of-type {
border-right: none;
}
/* Style for hover effect - LIFT and color change */
.tab-label:hover {
background-color: #333333;
transform: translateY(-3px);
}
/* Style for the active/selected tab label */
.tab-container-css input[type="radio"]:checked + .tab-label {
background-color: #333333;
}
/* The tab content panels */
.tab-content-css {
display: none;
order: 1;
width: 100%;
padding: 25px;
border: 1px solid #eee;
border-top: none;
line-height: 1.6;
color: #333;
}
/* Show the content that corresponds to the checked radio button */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
/* --- END OF TAB CSS --- */
/* Main headers like Product Name, Description, etc. */
h2.product-title, .desc-main-h2, .desc-main-h3 {
font-family: Georgia, 'Times New Roman', serif;
font-weight: normal;
letter-spacing: 1px;
}
.desc-main-h2 {
font-size: 24px;
color: #333;
font-weight: bold;
}
.desc-main-h3 {
font-size: 20px;
color: #333;
font-weight: bold;
margin-bottom: 5px;
}
/* Header style for inside the tabs */
.tab-header {
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: normal;
text-align: center;
color: #333;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
/* Sub-headers inside tabs */
.tab-content-css h4 {
font-family: Tahoma, sans-serif;
font-size: 1.1em;
font-weight: bold;
margin-bottom: 5px;
margin-top: 25px;
color: #333;
}
.desc-image {
float: left;
width: 130px;
margin-right: 15px;
margin-bottom: 15px;
border-radius: 8px;
}
.desc-feature-p {
font-size: 1.05em;
margin-top: 0;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<!-- 1. HEADER BANNER -->
<img src="upload://lsRPCLbSipOecsMRknd2B6JchKL.png" style="width: 100%; display: block;" alt="My Store Banner">
<!-- 2. PRODUCT NAME & HERO IMAGE -->
<div style="background-color:#000000; text-align:center; padding: 30px 20px;">
<h2 class="product-title" style="font-size: 44px; color: #ffffff; margin: 0; font-weight: bold;">{{ $json.Name }}
</h2>
</div>
<div style="background-color: #000; text-align: center; padding: 10px 0;">
<img src="upload://dKHd2A6eNPUKJVC5xDj8eR6EhVv.png" style="display: block; max-width: 100%; max-height: 450px; margin: 0 auto;" alt="Product Hero Image">
</div>
{{ $json.imageUrls[0] }}
<!-- 3. DESCRIPTION -->
<div style="padding: 25px; line-height: 1.6; color: #333;">
<h3 style="color: #333333; border-bottom: 2px solid #555555; padding-bottom: 5px; font-size: 22px;">Description</h3>
{{ $json.html }}
<!-- WHY CHOOSE A LAB-GROWN EMERALD SECTION -->
<div style="border-top: 1px solid #ddd; margin-top: 30px; padding-top: 20px;">
<h2 class="desc-main-h2" style="text-align: center;">Why Choose a Lab-Grown Emerald?</h2>
<p>Discover an Emerald that combines iconic elegance with responsible luxury. Our lab-grown Emeralds are physically, chemically, and optically identical to their mined counterparts—capturing the same lush, vibrant green that has captivated royalty for centuries. They are created using advanced technology that often yields higher clarity and durability.</p>
<!-- IMAGE & TEXT PAIR 1 -->
<div class="clearfix" style="margin-top: 20px;">
<img src="https://i.postimg.cc/dtwN3hb8/5.png" alt="Ethically refined emerald" class="desc-image" style="width: 110px;">
<h3 class="desc-main-h3">True Luxury, Ethically Refined</h3>
<p class="desc-feature-p">Each Emerald is crafted without environmental disruption or ethical compromise. Free from conflict and responsibly produced, this is a gem of rebirth and renewal you can wear with pride.</p>
</div>
<!-- IMAGE & TEXT PAIR 2 -->
<div class="clearfix" style="margin-top: 20px;">
<img src="https://i.postimg.cc/0jdtZvwM/6.png" alt="Exceptional value and quality emerald" class="desc-image" style="width: 110px;">
<h3 class="desc-main-h3">Exquisite Quality, Exceptional Value</h3>
<p class="desc-feature-p">Enjoy the same verdant green and prestige as a top-grade natural Emerald—at a fraction of the cost. Lab-grown Emeralds typically have fewer inclusions, offering superior clarity and a more flawless appearance for your investment.</p>
</div>
<!-- IMAGE & TEXT PAIR 3 -->
<div class="clearfix" style="margin-top: 20px;">
<img src="https://i.postimg.cc/tRhm93Mq/7.png" alt="Certified authentic gemstone" class="desc-image" style="width: 110px;">
<h3 class="desc-main-h3">Certified Authentic. Crafted for the Future.</h3>
<p class="desc-feature-p">Each stone is accompanied by a certificate of authenticity, verifying its quality and origin. Grown under strict conditions, every gemstone reflects innovation, integrity, and modern luxury.</p>
</div>
</div>
<!-- COMPLIMENTARY LASER ENGRAVING SECTION -->
<div style="border-top: 1px solid #ddd; margin-top: 30px; padding-top: 20px;">
<div class="clearfix">
<img src="upload://zfYxoHO0YaQG5Gc4ZSgmItkCFrW.png" alt="Ring with custom laser engraving" class="desc-image" style="width: 110px; margin-top: 8px;">
<h3 class="desc-main-h3">Complimentary Laser Engraving</h3>
<p class="desc-feature-p" style="font-size: 0.95em;">Personalize your piece at no extra cost. We offer complimentary laser engraving on ALL purchases. Add a special date, a name, or a meaningful message to make your jewelry truly one-of-a-kind. Please mention your engraving request after purchase by contacting us.</p>
</div>
</div>
<!-- FINAL - DISCOVER OUR COLLECTION SECTION -->
<div style="border-top: 1px solid #ddd; margin-top: 30px; padding-top: 20px;">
<div class="clearfix">
<img src="upload://5CLIY0qam5ed1NAB6N3Uwe8k6BZ.png" alt="Discover our curated collection of fine jewelry" class="desc-image" style="width: 110px; margin-top: 8px; border-radius: 50%;">
<h3 class="desc-main-h3">Discover Our Curated Collection</h3>
<p class="desc-feature-p" style="font-size: 0.95em;">Is this piece close, but not quite the one? Explore our full range of exquisite jewelry to find your perfect heirloom. From unique engagement rings to timeless classics, our store offers a legacy of craftsmanship.</p>
<!-- Centered Button Container -->
<div style="clear: both; text-align: center; padding-top: 10px;">
<a href="https://www.ebay.com/sch/i.html?_ssn=noble-gems" target="_blank" style="display: inline-block; padding: 12px 30px; background-color: #000000; color: #ffffff; text-decoration: none; font-weight: bold; font-family: Tahoma, Verdana, sans-serif; border-radius: 4px; transition: background-color 0.3s ease;">
Visit the Noble Gems Store
</a>
</div>
</div>
</div>
</div>
<!-- 4. MENU TABS (EBAY COMPLIANT) -->
<div class="tab-container-css">
<!-- Tab 1 -->
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1" class="tab-label">About Us</label>
<!-- Tab 2 -->
<input type="radio" id="tab2" name="tabs">
<label for="tab2" class="tab-label">Shipping</label>
<!-- Tab 3 -->
<input type="radio" id="tab3" name="tabs">
<label for="tab3" class="tab-label">Warranty</label>
<!-- Tab 4 -->
<input type="radio" id="tab4" name="tabs">
<label for="tab4" class="tab-label">Customization</label>
<!-- TAB CONTENT -->
<div id="content1" class="tab-content-css">
<div style="text-align: center; margin-bottom: 20px;"><img src="upload://ffUvCGkyE96QunlVjBckN7VHqXg.png" alt="Your Store Logo" style="width: 150px;"></div>
<h3 class="tab-header">Our Philosophy of Craftsmanship</h3>
<p>At Noble Gems, we don’t just create jewelry — we craft future heirlooms. Each piece reflects a harmonious blend of timeless design, exceptional materials, and masterful artistry. Our focus lies in high-end, bespoke creations — transforming hand-selected diamonds and rare gemstones into meaningful works of wearable art.</p>
<p>Every item we offer is an investment in craftsmanship, beauty, and legacy — pieces meant to be worn, cherished, and passed down for generations.</p>
<ul>
<li>
<strong>Uncompromising Quality & Authenticity:</strong> We source only the finest diamonds and gemstones, each ethically selected and certified for exceptional brilliance.</li>
<li>
<strong>Bespoke Customization:</strong> From custom engagement rings to heirloom redesigns, our expert team brings your vision to life.</li>
<li>
<strong>Fast & Complimentary Worldwide Shipping:</strong> We offer insured, express global delivery — always included with your purchase.</li>
</ul>
<p>Let Noble Gems be your trusted partner in discovering — or designing — your next legacy piece. Experience jewelry that speaks not only to the eye, but to the soul.</p>
</div>
<div id="content2" class="tab-content-css">
<h3 class="tab-header">Shipping & Handling</h3>
<section id="shipping-delivery">
<p>At Noble Gems, every piece is made to order by our artisan partners. Handcrafted using ethically sourced materials, each creation is individually produced with meticulous attention to detail — a process that ensures exceptional quality and integrity. Please allow <strong>4 to 7 weeks</strong> for your piece to be completed and delivered.
</p>
<h3>Complimentary Insured Shipping</h3>
<p>
We offer <strong>free worldwide shipping</strong> on all orders. Every shipment is <strong>fully insured</strong> and includes <strong>tracking for complete peace of mind</strong>.
</p>
<h3>Handling Time</h3>
<ul>
<li>Our pieces are either made to order or carefully finished upon purchase to meet our highest standards.</li>
<li><strong>Handling time ranges from 3 to 15 business days</strong>, depending on stock availability and production requirements.</li>
<li>Customers are encouraged to <em>inquire about availability</em> before placing an order.</li>
<li>Once your item is ready, it is securely packaged and promptly dispatched.</li>
</ul>
<h3>Shipping Method</h3>
<p>
Orders are shipped via <strong>trusted, fully tracked, and insured carriers</strong> to ensure reliability and safety.
</p>
<h3>Estimated Delivery Time</h3>
<ul>
<li><strong>Standard delivery:</strong> 7 to 25 business days <em>after dispatch</em></li>
<li>Delivery times may vary depending on location, customs clearance, and local service conditions.</li>
</ul>
<h3>Shipping Details</h3>
<ul>
<li>All orders are <strong>discreetly packaged</strong> and <strong>securely sealed</strong> for safe and confidential delivery.</li>
<li><strong>Tracking information</strong> is provided upon shipment.</li>
<li>A <strong>signature may be required</strong> at delivery to maintain security.</li>
</ul>
<p>
From artisan craftsmanship to final delivery, Noble Gems is committed to providing an extraordinary, seamless luxury experience every step of the way.
</p>
</section>
</div>
<div id="content3" class="tab-content-css">
<h3 class="tab-header">Warranty & Service Policy</h3>
<p>We are committed to delivering exceptional craftsmanship and long-term care for your fine jewelry. Please review our warranty coverage below.</p>
<h4 style="margin-top: 20px;">No Returns or Exchanges</h4>
<p>Due to the bespoke nature and craftsmanship involved in our pieces, we <strong>do not accept returns or exchanges</strong> under any circumstances. Each item is made-to-order and undergoes strict quality control prior to shipment.</p>
<h4>Warranty Coverage: Day 1–30</h4>
<p>We offer a limited warranty within the first 30 days of purchase, subject to the following conditions:</p>
<ul style="padding-left: 20px;">
<li style="margin-bottom: 10px;">
<strong>Customer-Caused Issues:</strong><br>
Damage resulting from misuse, accidental impact, or changes in preference (e.g., sizing or style adjustments) is <strong>not covered</strong>. We do, however, offer professional repair services <strong>at cost</strong>. The buyer is responsible for all repair and shipping fees.
</li>
<li>
<strong>Manufacturer Faults or Natural Wear:</strong><br>
Should the piece experience quality issues not caused by handling — such as prong failure, natural stone loosening, or premature metal fading — we will <strong>cover the repair costs</strong>. The buyer is responsible only for shipping charges.
</li>
</ul>
<h4>Lifetime Jewelry Care</h4>
<p>We proudly offer lifetime maintenance and repair services at the most competitive rates in the industry. This includes:</p>
<ul style="padding-left: 20px;">
<li>Prong tightening</li>
<li>Professional cleaning and polishing</li>
<li>Rhodium re-plating (for white gold)</li>
<li>Resizing and structural adjustments</li>
</ul>
<p>While all service and shipping costs are the responsibility of the buyer, we guarantee certified workmanship and premium materials in all repairs.</p>
<p style="margin-top: 20px; font-size: 0.95em; color: #555;">
<strong>Note:</strong> We recommend insuring your jewelry for full protection. All work is performed by expert jewelers using original-grade materials to preserve the value and integrity of your piece.
</p>
</div>
<div id="content4" class="tab-content-css">
<h3 class="tab-header">Custom Design Service</h3>
<p>We are pleased to offer bespoke jewelry design services tailored to your vision. Whether you have a concept, a reference photo, or specific requirements, our expert designers and jewelers will bring your idea to life.</p>
<h4>How It Works</h4>
<ol style="list-style-position: inside; padding-left: 0;">
<li style="margin-bottom: 15px;">
<strong>Share Your Design</strong><br>
Submit your design concept (image or sample), along with detailed specifications:
<ul style="margin-top: 5px; padding-left: 20px;">
<li>Metal type and purity</li>
<li>Gemstone shape, size (in millimeters), and type</li>
<li>Ring size or other measurements</li>
</ul>
</li>
<li style="margin-bottom: 15px;">
<strong>CAD Rendering & Approval</strong><br>
Once we receive your request, a <strong>non-refundable $50 design fee</strong> is required to initiate the project. This fee covers the creation of a <strong>custom CAD rendering and mold design</strong>.<br>
- The CAD design will be ready within <strong>3 business days</strong> for your review.<br>
- Production begins only after you approve the CAD.
</li>
<li style="margin-bottom: 15px;">
<strong>Production Timeline</strong><br>
After approval, your custom piece will be crafted by our professional jewelers within <strong>15 business days</strong>.
</li>
</ol>
<h4>Important Notes</h4>
<ul>
<li>The $50 design fee is non-refundable once the CAD rendering is delivered, even if you decide not to proceed with production. This fee covers design labor and mold creation.</li>
<li>Final pricing for the completed piece will be quoted based on your specifications and confirmed before production.</li>
</ul>
</div>
</div>
<!-- 5. FOOTER BANNER -->
<img src="upload://haherCi4udD7zZI5vfQD7EzCxhy.png" style="width: 100%; display: block;" alt="Thank you for visiting!">
</div>
All your image urls come back as 404, not found if I try to get them in the browser.
and this is not a valid URL upload://zfYxoHO0YaQG5Gc4ZSgmItkCFrW.png
Oh sorry about that, I pasted the wrong text in, but you are right the images weren’t being shown publicly, now they are, cause I tried pasting one of the links in incognito mode, and it worked. The only issue is, it’s still not working in the workflow.
Here is a link to one of the images:
As you can see, I pasted the now public image in line 128. Even the Online HTML viewer isn’t showing the photo. So my guess is, the problem is photos hosted on google drive…
This happens because the link like
https://drive.google.com/file/d/1-MFGstDXWjJGF4qo50MQnHTLiSJkGyNa/view
is not a direct link to an image, it’s a link to google drive viewer app, which shows the image.
One way you could try to embed is via thumbnail url, like so
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My HTML document</title>
</head>
<body>
<img src="https://drive.google.com/thumbnail?id=1-MFGstDXWjJGF4qo50MQnHTLiSJkGyNa&sz=w1000" />
</body>
</html>
See if that works for you
It worked! Thank you so much, this has been stressing me for the past couple of days, much appreciated!
If this helped you, please mark the answer as solution. Thank you!
Cheers!
How do I mark it as a solution please? sorry very new to this forum
This has to be one of the options under the answer.
Hey,
You should have all the settings to mark the answer as a solution @Nick_B.
Have you found it?
Thanks!
Melinda
Not really, as you can see from my previous screenshot I do not have the option…
@melinda.n8n kindly help with figuring this out, there is another case I flagged with the same issue. Thanks.
Hi there,
For now, only posts under Questions can be marked as Solved. We’ll review this soon, but that is why users cannot mark questions under Help me Build my Workflow as solved. @jabbson
