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

The first CMS Builder reference book is now available on-line!







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?

Greg Thomas







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

The first CMS Builder reference book is now available on-line!







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!

Greg Thomas







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

The first CMS Builder reference book is now available on-line!







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.

Jeff Shields

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.

Jeff Shields

By gkornbluth - May 22, 2020

Thanks for taking the time to answer so thoroughly, Jim

Good points

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







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

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php