Image Links Mod Request

[Ax Slinger]

This may have been covered before, but I searched and did not find anything related to this idea. Of course, I don't speak German, so means I can't read a lot of threads here. I wish I could. Anyway, here goes...

The members of my forum have requested (if it is possible) to make the full size images (not thumbnails) into clickable links. The reason being I have set the maximum dimensions of images to 550x412, and some people have much larger images, and they would like to link to them from the gallery (which is version 1.7, by the way) to where these larger images would be stored on their own websites.

So what I have in mind is adding a field on the upload screen to put a link in, and a similar field in the control panel so a link could be added manually. If there is a link placed in this field, the image would be a clickable link, but if not it obviously wouldn't.

Is this possible?

Thanks in advance for your consideration of this request.

[Xyu BAM]

I think its simple.
1) add a new field into 4images_images table ( VARCHAR(255) ) name it as image_link or whatever
2) in includes/db_field_definitions.php add:

Code: [Select]

$additional_image_fields['image_link'] = array("Image link", "text", 0);3) in media templates use {image_link} and condition: {if image_link} and {endif image_link}
i.e. jpg.html:

Code: [Select]

{if image_link}<a href="{image_link}" target="_blank">{endif image_link}<img src="{media_src}" border="1" alt="{image_name}"{width_height} />{if image_link}</a>{endif image_link}

[Ax Slinger]

Ok, DB table created, files edited and uploaded, so good so far... 

Where do you put the links?

[Ax Slinger]

I added 2 steps to the process. Here's what I did...

4) In lang/main.php

Find:
$lang['image_name'] = "Image Name:";

Add after:
$lang['image_link'] = "Image Link:";

5) In the HTML code for templates/your template/member_uploadform.html

Find:

        <tr>
          <td class="row2"><b>{lang_image_name}</b></td>
          <td class="row2"><input type="text" name="image_name" size="30" value="{image_name}"
          class="input" /></td>
        </tr>
       
Add after:
       
        <tr>
          <td class="row2"><b>{lang_image_link}</b></td>
          <td class="row2"><input type="text" name="image_name" size="30" value="{image_link}"
          class="input" /></td>
        </tr>

But what I got wasn't quite what I had in mind... 

The link appears as plain text above the image, next to where it says "Image added" on the upload screen. I can live with that... But it also puts it on the main screen for the image in huge letters, and in the thumbs on the main page, thus messing up the display.

Did I screw this up, or miss something perhaps? What I intended for it to do was turn the image itself into a link... But so far that isn't what is happening.

And by the way. I forgot to tell you thanks for your help!

[Ax Slinger]

Oops... I missed an edit. In Step 5...

5) In the HTML code for templates/your template/member_uploadform.html

Find:

        <tr>
          <td class="row2"><b>{lang_image_name}</b></td>
          <td class="row2"><input type="text" name="image_name" size="30" value="{image_name}"
          class="input" /></td>
        </tr>
       
Add after:
       
        <tr>
          <td class="row2"><b>{lang_image_link}</b></td>
          <td class="row2"><input type="text" name="image_link" size="30" value="{image_link}"
          class="input" /></td>
        </tr>

Fixing that got rid of the huge letters (it was displaying the url as the image name), and the link is no longer shown in the thumbs. It still shows above the image after uploading, it's in the "image Link" field in the ACP edit image screen, but it doesn't show anywhere on the image's page, and the image still isn't clickable. So I'm still missing something somewhere.

[Xyu BAM]

are you sure you've updated needed media templates? (jpg.html, gif.html, png.html, etc)

[Ax Slinger]

Yep. Using jpg.html as an example, I changed...

This:
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />

To this:
<!-- Template file for JPG Files -->
<!-- <img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br /> -->
{if image_link}<a href="{image_link}" target="_blank">{endif image_link}<img src="{media_src}" border="1" alt="{image_name}"{width_height} />{if image_link}</a>{endif image_link}

And looking at your code there, I see no reason why the link isn't being created properly... Except for possibly using UltraEdit to edit the files. Because if I look at jpg.html in the MS FrontPage editor I see this instead...

<!-- Template file for JPG Files -->
<html>

<head>
<title></title>
</head>

<body>

<p><img src="{media_src}" border="1" alt="{image_name}" {width_height} /><br />
</p>
</body>
</html>

Do you think that could have anything to do with it?

I made backups of the files. I'll test that theory, just to be sure.

[Ax Slinger]

Well... That didn't change anything. I didn't think it would, but I wanted to make sure.

Then I had an idea, and even though this isn't quite what I wanted, it does work, and it will do...

Step 6:
In templates/your template/details.html

Find:
                  <tr>
                    <td valign="top" class="row2"><b>{lang_added_by}</b></td>
                    <td valign="top" class="row2">{user_name_link}</td>
                  </tr>
                 
Add below:                 
                  <tr>
                    <td valign="top" class="row2"><b>{lang_image_link}</b></td>
                    <td valign="top" class="row2">{image_link}</td>
                  </tr>

This adds a text link in the info box below the image. And it is clickable. I would have liked it better if you could just click on the image, but like ol' Mick says "Ya can't always get what ya want. But ya get what ya need." 

[Xyu BAM]

hmmm...didnt know that it wont work in media templates...
have u tryed replace {image} in details.html with:

Code: [Select]

{if image_link}<a href="{image_link}" target="_blank">{endif image_link}{image}{if image_link}</a>{endif image_link}

[Ax Slinger]

Yeah, I thought of that but it didn't work. The link was shown, and it was clickable, but it displays like this...

Text above the image: <a href="http://www.website.com/image.jpg" target="_blank">
Image display
Text below the image: </a>

That's what made me think to try putting the link in the info box below the image instead. It basically does the same thing, but it's "prettier" and looks like its "supposed" to be there, as opposed to stray html code that obviously isn't.

That method works ok, so I'm a happy camper. And I say thank you very much for your help and good ideas. 

[teszeract]

... I have set the maximum dimensions of images to 550x412, ...

Hi Ax

Please tell me how you did this? I have already set the limiters in functions.php, but have not been able to yet figure out how to change the display.