Auto create hyperlinks from multiple URLs in a text box
11 posts by 4 authors in: Forums > CMS Builder
Last Post: June 25, 2020 (RSS)
By gkornbluth - May 11, 2020
Hi All,
Does anyone have a favorite script that they’re willing to share, for automatically converting URLs in a text box to hyperlinks when the page is displayed?
Preferably with the ability to do some CSS formatting and modification of the link text
There are scads of snippets out there but I figured I’d ask here first, before fighting my way through them.
Thanks,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By gregThomas - May 12, 2020
Hey Jerry,
Would it be possible to provide me with an example of how the URL's are formatted in the textbox? Is it one per line:
https://www.example.com
https://www.example.com
https://www.example.com
https://www.example.com
Something like this?
PHP Programmer - interactivetools.com
By gkornbluth - May 12, 2020 - edited: May 12, 2020
Hi Greg, Thanks for looking at this one.
The links could be one per line, or they could be interspersed in the text.
I guess I've been spoiled by the forum where links are automatically created for any URL.
In this particular instance, I've been creating a set of FAQs for performing musicians that want to 'up their game' in this virtual world where we currently find ourselves.
You can see the result at http://www.jazzonJStreet.com/faq.php
Each topic record has a text box and a number of links to examples and to pertinent videos.
For each topic, I've been entering the following a number of times in its text box field: <a href="#"><span class="text_font" style="text-decoration:underline; color:#FFF; border-bottom: 2px solid white;" >LINK TEXT</span></a>, and then filling in the specific information for that link, which gets a bit tedious.
I was hoping to find a more automated solution (preferably with specific URL and link text combinations) that someone had already created, so that I could concentrate on the content rather than the programming.
Hope that makes more sense.
Stay Safe!
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By gregThomas - May 14, 2020 - edited: May 14, 2020
Hey Jerry,
Your mention of the forum made me think of a really easy way to do this. Do you have a copy of the Simple Forum plugin? If you do, it comes with a function that will convert any URL's it finds to links as well as removing any malicious looking HTML from a string. If you had the Simple Forum plugin installed you could call the function anywhere in your site like this:
<?php
include_once 'cmsb/lib/viewer_functions.php'; //Include the viewer functions (if not already included)
$testString = 'Here is my test string with a URL: https://www.google.com'; //Example string which you want any URLs converted to links.
$testString = sforum_cleanAndFormatHTML($testString); //Forum function to convert the url to a link.
echo $testString; //Display the string
If you don't have that plugin, I found this article from css-tricks.com that explains how you can convert a URL to a link:
https://css-tricks.com/snippets/php/find-urls-in-text-make-links/
I've not tested the method in this article, but css-tricks are normally reputable. It also looks like it wouldn't be difficult to modify this method to add the span around the link.
Thanks!
PHP Programmer - interactivetools.com
By gkornbluth - May 14, 2020
Hi Greg,
Thanks for looking and for your discoveries.
No I don't have the simple forum plugin, but I looked at the css-tricks code briefly and I think that between that and another idea I have for the 'link text' it should work.
I'll post how it turns out.
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By kitsguru - May 22, 2020
`jerry
You don’t need the span, just add the class and style to the A element.
By gkornbluth - May 22, 2020
Hey Jim,
When I do that it, often doesn't style the link text.
Maybe I'm doing something wrong...
Thanks,
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By kitsguru - May 22, 2020
Jerry
If that is a rhetorical question, then I shouldn't respond, BUT...
since you asked. I have a couple of observations.
Using inline styles is bad practice. Also I am not sure what your class text-font does but I assume it sets the font, size and colour.
I would create a new class in your css.
// usage <a href="#" class="text-font auto-link">LINK TEXT</a>
.auto-link {
text-decoration: underline; // not necessary with border-bottom applied
color: #FFF;
border-bottom: 2px solid #fff;
}
.auto-link:hover,
.auto-link:focus {
text-decoration: none;
color: #FFF;
border-bottom: 2px solid #ccc;
}
I should point out that the text-decoration and border-bottom applied at the same time will conflict, use one or the other. Also you might want to add a :hover/:focus variant for the class shown above. Apply these classes to the A element and get rid of the span.
Using the class allows you to change the styling once without needing to find and replace all the occurrences of style.
By gkornbluth - May 22, 2020
Thanks for taking the time to answer so thoroughly, Jim
Good points
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php
By gkornbluth - June 25, 2020 - edited: June 25, 2020
Hey Equinox,
Here's an image link:
http://www.jkwebdesigns.com/apr.png
Jerry Kornbluth
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php