Auto create hyperlinks from multiple URLs in a text box

12 posts by 4 authors in: Forums > CMS Builder
Last Post: June 25   (RSS)

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 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

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

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 equinox - June 25

Hey Greg, following up on this suggestion...what happens in the forum (with that hyperlink conversion piece) to any image links - does it convert them, too, or leave them alone? Thanks in advance.

Cheers,

“There are only two ways to live your life. One is as though nothing is a miracle." ~ Albert Einstein