B2B Articles - October 07, 2011
By Chris Wallace
This is an issue that has caused me some headaches when working with Adobe's Business Catalyst content management system, so in the interest of trying to prevent the same from happening to you, I'd like to share some tips about these fields. First, an explanation of the behavior.
A custom web app field with type Text (String) will display exactly as entered when outputted on the front end.
A field with type Text (Hyperlink) will output automatically wrapped in an <a> tag with both the href property and the text of the <a> tag set as what you entered.
The result of this is that if you want to display the link on the front end, if you use Text (Hyperlink) you have no choice over what the text actually says. You can't change it to "Click Here", "Article Title", or anything else, it will always be "https://theurlyouentered.com".
Unfortunately, you can't change the type of a field once data has been entered. We set up one client with a web app that had two URL fields, and they entered hundreds of items in to the system. When it came time to display the link on the front end though, I realized that there was no way to edit the text, so instead of the link saying "Click here" as it was supposed to, it was saying "https://urlthecliententered.com", which happened to be quite a long URL with lots of GET variables.
So how did I solve the issue? To sum up the process, first, I created <div>s where the links would go. I then assigned the full output of the adobe tag {tag_fieldname} to a javascript variable. Next, I parsed the actual URL, without the HTML tags, with a regular expression. Finally, I added the script that said when the page loads, insert my own custom <a> tag with the parsed URL as the href value, and the display text of my choice, into the correct <div>. Worked perfectly!
There are two ways to do this, with jQuery and without jQuery. Below are both versions.
<div id="linkgoeshere"></div>
<script type="text/javascript">
var linkhtml = '{tag_fieldname};' //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="https://www.site.com">https://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,""); //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>"; //assign the a tag in the format we want to a variable
document.getElementById("linkgoeshere").innerHTML = goodhtml; //insert the html into the div on our page
</script>
<head><script type="text/javascript" src="/js/jquery.js"
</head>
<body>
<div id="linkgoeshere"></div><script type="text/javascript">
var linkhtml = '{tag_fieldname};' //assign output of adobe tag into a JS variable
//it will look like this:
//<a href="https://www.site.com">https://www.site.com</a>
var linkurl = linkhtml.replace(/(<([^>]+)>)/ig,""); //strip out the html tags with a regex
var goodhtml = "<a target='_blank' href='"+linkurl+"'>Click Here!</a>"; //assign the a tag in the format we want to a variable
$("#linkgoeshere").html(goodhtml); //insert the html into the div on our page using jQuery
</script>
</body>
Learn more: Ironpaper: web design
Tel 212-993-7809
Ironpaper ®
10 East 33rd Street
6th Floor
New York, NY 10016
Map
New York Agency
B2B marketing
B2B Content
Demand generation agency
Digital Marketing
Account-Based Marketing
ABM for SaaS
ABM for energy
Demand generation campaigns
Industry marketing
Privacy Policy
First-party data marketing
SaaS marketing
SEO for B2B
IoT Marketing
B2B Marketing for IoT Companies
HubSpot Agency
B2B Product Marketing
B2B Software Marketing
IoT go-to-market strategy
IT Marketing
HubSpot for ABM
ABM for AI companies
Technology Marketing
Marketing for IT Companies
ABM Campaigns
B2B lead generation
B2B Marketing and Growth Agency.
Grow your B2B business boldly. Ironpaper is a B2B marketing agency. We build growth engines for marketing and sales success. We drive demand generation campaigns, ABM programs, B2B content, sales enablement, qualified leads, and B2B marketing efforts.