Add a custom redirect link to each Images

[doolin]

Hi guys

How is it possible to add a external link for each images? First i try to use the image description field as an url. but it doesn't work, redirect problem.

Second try create a field called "website-link", and add it to the template, so the customer is able to type the website url by himself but i can't add it in the backend to each one of the pictures?

 

How can i fix this.

 

my template:

 

<?php
foreach($page->referenzen as $image) {
$thumbnail = $image->size(120);
$weblink = $thumbnail->description;
echo "<li><a href='$weblink'><div class='frame'><span class='helper'></span>
<img class='sigalthumb' src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></div></li>";}
?>

[adrian]

There is this new fieldtype: http://modules.processwire.com/modules/fieldtype-image-extra/

But be sure to look at my comment about some things that need fixing:

https://processwire.com/talk/topic/7910-module-fieldtype-image-extra-multi-language/?p=85654

So long as you don't have debug mode on, that warning won't show and therefore won't break things.

Otherwise, you can use a PageTable field (core module, but needs to be installed) with a template that contains an images field along with a URL field, and any other metadata fields that you might want. Let us know if you need more info about this field type (https://www.google.com/?q=site%3Aprocesswire.com%20%22pagetable%22)

You can also just use child pages - one for each image - since you seem to be relatively new to PW I'll assure you that this is not actually a bad idea, even though it may seem like it at first glance

[doolin]

hi adrian

i had a look at the image extra field. It allows just internal site links not external, so thats no option. Child pages are also no option.

Yes i am a newbie, and it's sometimes hard to understand. The PageTable  field don't make sense at the moment for me. I read a lot about it in the forum here...but i'm not figured out how to use it. My programmer skills are unfortunately not so very well.

how should i proceed with PageTable?

Is there not a simple php solution to use a custom link?

Thanks

[kongondo]

@doolin,
 
You can add as many custom fields to ImageExtra module as you wish. Just add a url field for your custom external links and you are good to go...see otherField below
 

Define your custom fields

• Login to ProcessWire admin and click Modules.
• Open Images Extra Inputfield Settings.

The following fields are available by default:

• orientation - image orientation
• orientation values - values to use as classnames or identifiers for different image orientations
• title - image title to use for title/alt tag or/and caption, if empty, the content will be generated from the applications filename
• description - image description
• link - image link to internal pages

If these fields are not enough for you, you can add any other field (for example authorand location) by writing it (separated by comma) in the field otherField.

 
More here
https://processwire.com/talk/topic/7910-module-fieldtype-image-extra-multi-language/

[doolin]

Hi kongondo
 
Thanks. I tried and add a new text field where i can type the url called "www".
Ive customized the template, and called the field:

<?php echo "<a href='$image->www'>Click Here for the WEBSITE</a>";?>

When i click on this link it redirect me to this adress:

http://localhost/wire/bildextra/www.google.com

is this because i use a local xampp environment?

[adrian]

Looks like you are typing the address into the www field without the http:// so you can either make sure you do that, or you can do this in your template:

<?php echo "<a href='http://{$image->www}'>Click Here for the WEBSITE</a>";?>

I would recommend the former approach though because you never know if it will be a http or https site if you do it from your template.

Nevermind - not thinking this morning - listen to kongondo below

[kongondo]

Or just use a ProcessWire URL field rather than a text field...it will automatically add the http:// for you... ...and you can edit it if it is https:// you want..

[doolin]

Thank you very much! When i add th "http://" before, it works...the proposal of kongondo doesn't!?

 

i add a new field in processwire choose "url" as type, and called it "curl".

My template looks like this.

 

<?php echo "<a href='$image->uurl'>Click Here for the WEBSITE</a>";?>

try this too

<?php echo "<a href='$image->www->uurl'>Click Here for the WEBSITE</a>";?>

 

and it dont work . I add this in the Module options too, nothing happens.

[kongondo]

What doesn't work? No link output? Or does it output an internal PW page link? Also, is it uurl or curl?

[doolin]

i've created a field with the name "uurl". The type are "URL"

when i add:

<?php echo "<a href='$image->uurl'>Click Here for the WEBSITE</a>";?>

i get the same link like before:

http://localhost/wire/cdsacdsac/www.google.com

and when i try this:

<?php echo "<a href='$image->www->uurl'>Click Here for the WEBSITE</a>";?>

contains the link of the current site

[kongondo]

You need to refer to the URL field properly...i.e. $page->uurl - assuming you added it directly to the page. Or did you add it to ImageExtra field instead? In that case, assuming your image field is one that accepts one image max, then you need to access it as $page->image->uurl

Edited February 3, 2015 by kongondo

[doolin]

ok. But i want it to add in a loop. I think in this case its only possible this way?

foreach($page->bildermitlink as $image) {
   $thumbnail = $image->size(150,100);
   echo "<p><a href='http://{$image->www}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>";}
   ?>

[kongondo]

A loop is fine but I am confused.   . Help me out here.

• What type of field is bildermitlink? Image or ImageExtra (FieldtypeImageExtra)?
• What is www? I thought you said you had a field called 'uurl'?
• Where did you add www/uurl? Directly to the template or to bildermitlink settings only (assuming this is an ImageExtra field)?

Edited February 3, 2015 by kongondo

[doolin]

im sorry kongondo....ok i restart, forget the names of the fields above

Here my template, a simple code that displays all of my images on this site.

I use the ImageExtra Module for this:

<?php
foreach($page->referenzen as $image) {
$thumbnail = $image->size(120);
echo "<li><a href='http://{$image->Webseite}'><div class='frame'><span class='helper'></span>
<img class='sigalthumb' src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></div></li>";}
?> 

"referenzen" = ImageExtra Field

"Webseite" = a custom created field od ImageExtra

in the field "Webseite" i can now enter the URL, if i add the "http://" in the template.

I try your solution with an URL Field but, without succes.

[kongondo]

I can confirm that behaviour. If you use a URL field outside ImageExtra (i.e. add it directly to the template) then it works as expected - the http:// is added for you. However, that behaviour does not seem to work if you pass the name of the URL field for use in ImageExtra. I don't know whether it is a limitation of URL fields or of ImageExtra. Try it and you will see - i.e. try adding the URL field directly to your template and enter www.google.com - the http:// will be added for you. I know that is not what you want (i.e. you want each image to have the URL link) but try it anyway to see what I mean..

I also noticed that ImageExtra does not use the label you give to your custom field (at least not when I tested with a URL field); instead it uses your field's name. In my testing mine was 'www'. It used that as a label and capitalised the first word making it 'Www' whilst ignoring my label 'Custom URL'.

Btw: you didn't mention it but in your ImageExtra module configuration screen, did you enter the name of your URL field, i.e. Webseite in the 'otherField'?

Which reminds me, I think I will make a suggestion to the module author to move those inputs to the fields Input (or details) tab. Otherwise, it means that every time one uses the module, it would pick up on the fields entered in otherField + the titleField, linkField, etc, meaning everything would be uniform for all instances of that field. In contrast, if those were added to the Inputs tab, then, they would be unique for each instance of the field...hope this makes sense...and it was a btw...

Edited February 3, 2015 by kongondo

[doolin]

ok. Better later than never ;-)

I've used an repeater field, so the customer are available to add new items by himself. I solve this problem like this.

 

I created an repeater called "refrep" and add Two fields:

 

1 x img field called "img" and..

1 x url field with the name "linkurl".

 

so the repeater field "refrep" looks like:

 

refrep

-->img

-->linkurl

 

I add the "refrep" field into a template, and add this code:

 

<?php
foreach($page->refrep as $ref) {  
$image = $ref->img;
$thumbnail = $image->size(120); 
echo "<li><a href='$ref->linkurl'><div class='frame2'><span class='helper2'></span><img class='sigalthumb2' src='$thumbnail->url' title='$thumbnail->description' alt='$thumbnail->description' ></a></li>";
}
?> 

Thank you

[adrian]

You should also check out Bea's new module - it is much more powerful and stable than the one I mentioned above and I think would be a great fit for your needs:

https://github.com/justonestep/processwire-imageextra