clickable links in item description

eliz82

Joined: 2009-11-06
Posts: 71

Posted: Sat, 2011-12-10 17:36

any idea how to make links clickable in the description of an item?
i have the Raw html enabled in my options. but if i paste a link in the description of the image, will be displayed as a text not as a clickable link.
for example if http:// is detected in the description, then put the link in a html <a href ....... />
phpbb3, wordpress and many other applications have this function (even in wordpress is disabled by default)
i have found some examples in php or javascript: http://www.tbforum.com/artikel/117842.html

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sat, 2011-12-10 18:08

http://gallery.menalto.com/node/96882#comment-348236

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82

Joined: 2009-11-06
Posts: 71

Posted: Sun, 2011-12-11 10:40

i allready read that thread and other similar (http://gallery.menalto.com/node/95000)
disabling safehtml will not make links clickable . i have test this.

have you test this solution ?

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2011-12-11 12:10

assuming the description field has a class of "giDescription"
jQuery:

<script type="text/javascript">
    $(document).ready(function() {
      var h = $('.giDescription').html();
      if(h) $('.giDescription').html(h.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>'));
    });
</script>

vanilla javascript:

<script type="text/javascript">
    window.onload = function() {
      var e = document.querySelector('.giDescription');
      var h = e.innerHTML;
      if(h) e.innerHTML = h.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>');
    };
</script>

@see it working here.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82

Joined: 2009-11-06
Posts: 71

Posted: Mon, 2011-12-12 21:46

the class of my description is giDescription
i have opened themes\matrix\templates\local\theme.tpl

under <body> i have put this code

  {literal}
  <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      var h = $('.giDescription').html();
      if(h) $('.giDescription').html(h.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>'));
    });
</script>
{/literal}

then i cleared the cache of gallery and my browser.

but it dosent seem to work
i have studied the code of the generated page, and the javascriot it's there just under <body>, but it's not make links clickable

i have also tried vanilla javascript (pure javascript?). the same problem, the code is there just under <body>, but not working.

what i'm doing wrong ?

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2011-12-11 13:40

jquery is not being loaded use:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> instead of:
<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82

Joined: 2009-11-06
Posts: 71

Posted: Mon, 2011-12-12 21:47

i had a look and the source of generated and was perfect for me. <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
maybe you have not seen correct code because i have enabled Full Acceleration (cache) for guests. i disabled temporary the cache for guests, to not have this kind of problem.

i have modified and try the pure javascript
i entered this in my theme template under the body

{literal}
<script type="text/javascript">
    window.onload = function() {
      var e = document.querySelector('.giDescription');
      var h = e.innerHTML;
      if(h) e.innerHTML = h.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>');
    };
</script>
{/literal}

i see the code correct in the source, but it's not working.

i have also tried this code on a html test page and it works perfect.
so it must be gallery2 that interfere with the code.

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2011-12-11 14:22

previously you had a2 js errors on that page:
$ is undefined
and
uncaught exception: Error: Permission denied for <http://www.facebook.com> to get property Proxy.InstallTrigger
now you just have the facebook error which can stall script execution

AND
window.onload is being overwritten later in your page in the maps script

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2011-12-11 14:32

Oh and BTW <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> should be:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
src= not scr=

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82

Joined: 2009-11-06
Posts: 71

Posted: Sun, 2011-12-11 15:09

i have save a html file of that page using browser save as. then i started to delete portions of the html code and refresh the page.
i observed that when i delete the sidebar then the javascript start to function.
so the problem was here modules/imageblock/templates/local/ImageBlock.tpl

  {if isset($ImageBlockData.show.title) && isset($block.item.title)}
    <h4 class="giDescription">
      {$block.item.title|markup}
    </h4>
  {/if}

i have replaced the giDescription with something else and your javascript is working.
so ... thank you very much suprsidr.

suprsidr wrote:

src= not scr=

p.s. do you use a browser plugin to see javascript errors on a page ?

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2011-12-11 15:22

Quote:

p.s. do you use a browser plugin to see javascript errors on a page ?

I prefer firbug but built-in browser tools are getting better.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

suprsidr

Joined: 2005-04-17
Posts: 8339

Posted: Sun, 2011-12-11 15:58

you need to make sure there is a space after the link. like your example page shows the link http://google.com</span></li> which would not resolve.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82

Joined: 2009-11-06
Posts: 71

Posted: Sun, 2011-12-11 16:22

yes, i have replaced with &nbsp</span></i></p> in photo template and now is ok

eliz82 Joined: 2009-11-06 Posts: 71	Posted: Sat, 2011-12-10 17:36
	any idea how to make links clickable in the description of an item? i have the Raw html enabled in my options. but if i paste a link in the description of the image, will be displayed as a text not as a clickable link. for example if `http://` is detected in the description, then put the link in a html `<a href ....... />` phpbb3, wordpress and many other applications have this function (even in wordpress is disabled by default) i have found some examples in php or javascript: http://www.tbforum.com/artikel/117842.html
	XUser login Username: * Password: * Create new account Request new password
suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sat, 2011-12-10 18:08
	http://gallery.menalto.com/node/96882#comment-348236 -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82 Joined: 2009-11-06 Posts: 71	Posted: Sun, 2011-12-11 10:40
	i allready read that thread and other similar (http://gallery.menalto.com/node/95000) disabling safehtml will not make links clickable . i have test this. have you test this solution ?

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sun, 2011-12-11 12:10
	assuming the description field has a class of "giDescription" jQuery: <script type="text/javascript"> $(document).ready(function() { var h = $('.giDescription').html(); if(h) $('.giDescription').html(h.replace(/((ftp\|http\|https):\/\/(\w+:{0,1}\w@)?(\S+)(:[0-9]+)?(\/\|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>')); }); </script> vanilla javascript: <script type="text/javascript"> window.onload = function() { var e = document.querySelector('.giDescription'); var h = e.innerHTML; if(h) e.innerHTML = h.replace(/((ftp\|http\|https):\/\/(\w+:{0,1}\w@)?(\S+)(:[0-9]+)?(\/\|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>'); }; </script> @see it working here. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82 Joined: 2009-11-06 Posts: 71	Posted: Mon, 2011-12-12 21:46
	the class of my description is giDescription i have opened themes\matrix\templates\local\theme.tpl under `<body>` i have put this code {literal} <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var h = $('.giDescription').html(); if(h) $('.giDescription').html(h.replace(/((ftp\|http\|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/\|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>')); }); </script> {/literal} then i cleared the cache of gallery and my browser. but it dosent seem to work i have studied the code of the generated page, and the javascriot it's there just under `<body>`, but it's not make links clickable i have also tried vanilla javascript (pure javascript?). the same problem, the code is there just under <body>, but not working. what i'm doing wrong ?

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sun, 2011-12-11 13:40
	jquery is not being loaded use: `<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>` instead of: `<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>` -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82 Joined: 2009-11-06 Posts: 71	Posted: Mon, 2011-12-12 21:47
	i had a look and the source of generated and was perfect for me. `<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>` maybe you have not seen correct code because i have enabled Full Acceleration (cache) for guests. i disabled temporary the cache for guests, to not have this kind of problem. i have modified and try the pure javascript i entered this in my theme template under the body {literal} <script type="text/javascript"> window.onload = function() { var e = document.querySelector('.giDescription'); var h = e.innerHTML; if(h) e.innerHTML = h.replace(/((ftp\|http\|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/\|\/([\w#!:.?+=&%@!\-\/]))?)/gi, '<a href="$1" target="_blank">$1</a>'); }; </script> {/literal} i see the code correct in the source, but it's not working. i have also tried this code on a html test page and it works perfect. so it must be gallery2 that interfere with the code.

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sun, 2011-12-11 14:22
	previously you had a2 js errors on that page: $ is undefined and uncaught exception: Error: Permission denied for <http://www.facebook.com> to get property Proxy.InstallTrigger now you just have the facebook error which can stall script execution AND window.onload is being overwritten later in your page in the maps script -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sun, 2011-12-11 14:32
	Oh and BTW `<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>` should be: `<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>` src= not scr= -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82 Joined: 2009-11-06 Posts: 71	Posted: Sun, 2011-12-11 15:09
	i have save a html file of that page using browser save as. then i started to delete portions of the html code and refresh the page. i observed that when i delete the sidebar then the javascript start to function. so the problem was here modules/imageblock/templates/local/ImageBlock.tpl {if isset($ImageBlockData.show.title) && isset($block.item.title)} <h4 class="giDescription"> {$block.item.title\|markup} </h4> {/if} i have replaced the giDescription with something else and your javascript is working. so ... thank you very much suprsidr. suprsidr wrote: src= not scr= p.s. do you use a browser plugin to see javascript errors on a page ?

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sun, 2011-12-11 15:22
	Quote: p.s. do you use a browser plugin to see javascript errors on a page ? I prefer firbug but built-in browser tools are getting better. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

suprsidr Joined: 2005-04-17 Posts: 8339	Posted: Sun, 2011-12-11 15:58
	you need to make sure there is a space after the link. like your example page shows the link http://google.com</span></li> which would not resolve. -s FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2

eliz82 Joined: 2009-11-06 Posts: 71	Posted: Sun, 2011-12-11 16:22
	yes, i have replaced with `&nbsp</span></i></p>` in photo template and now is ok

clickable links in item description

XUser login