Add code to each image(thumb)

Phoentje · 2014-10-03 21:42:19

Hi, is it possible to put extra code on each thumbnail generated by lightroom?

I want to place some JavaScript in the index. That should not be a problem. But this Java Script expects certain code on each thumbnail. With this code it can order real products in certain webshops (Like printouts on pencils, mugs etc)

The real question is then if it is possible to give each thumbnail some extra code within the IMG tag.

Is the cart using code like :
<div id=”gallery”> <img src=”/albums/image1.jpg” height=”600” width=”400” /> </div> ?

And if so can I have it automated be filled with extra info within that line?

Thanks!

Ben · 2014-10-03 22:02:54

Is there a certain third-party site or product you'd like the gallery to work with? What would the extra code contain?

If the extra contents can be derived from the img tag or a parent element, then you could try crafting some custom JavaScript or jQuery prior to the extra script you're trying to run, that adds the necessary attributes to the img tag.

Phoentje · 2014-10-07 15:44:08

Hi Ben, yes is the answer. The product I am trying to add, adds a picture on top of the thumb wich should redirect the customer to a webshop to order certain product.

They ask me to add some Javascript in de HEAD of my website. Something like:
<script type="text/javascript" src="http://www.website.nl/index.php/affiliate/script/index/key/b516e95asdae26662ff be9b42d8d9f7b256a212cf"></script>

Then they ask me if the current IMG tag would be

to change it like

So they want me to have all IMG within a DIV.

Matthew · 2014-10-07 16:36:17

I don't know whether you can talk to anyone over there, but if that's all they want to do, then there are better ways of going about it. Shoving an invalid "foto" attribute into your img tag is not only annoying, but it's structurally invalid HTML, which makes it bad web-design.

Instead, at least in our case, they could fetch the same piece of information using:

$('a.image-link').attr('href');

... without your having to put invalid garbage into your gallery structure.

Phoentje · 2014-10-07 17:00:10

Thanks Matthew, ill get back on this. Will ask them where this goes beyond my knowledge

Phoentje · 2014-10-07 17:42:16

Hi Matthew some more info btw (still waitin for an answer).
What they try to do is

Where the ID foto is the place where the original picture is located (on ftp for example)

So this way with the script in the head connects to their shop.. then after this with the extra ID the thumbnail can be redirected to the original file on ftp.

With the example of you above you don't put a new image on top of the thumbs?

Phoentje · 2014-10-07 18:24:43

Translation of the answer from the support team:

Matthew is correct. This is not the best solution on code level.
The meaning of the foto tag is, is that within this the path is noted where the image is located on the ftp server. This path is different than the path selected on the image (thumb with watermark etc).
With Matthews solution we gather the path of the image only with the copyright sign in it. Not the full res photo.

So we need to create a path where the script recognizes to gather it somewhere else.

Matthew · 2014-10-07 22:01:31

in which case, you will need to hack the template to insert the necessary information.

Another point, though, is that if the source code contains the path to the for-sale image rendition, then users can simply access those files directly to download them, without making a purchase. Not the best way to go about selling your images.

Phoentje · 2014-10-07 22:05:24

Nah those files would be located with the same path/name on a different FTP server. So you would still need a username/password to gather those.

But as you mention above I understand this is not possible for me to achieve? There is no simple way to give each file I upload trough TTG LR Plugin a different extra info into the code?

Matthew · 2014-10-08 00:53:47

Not without hacking the template ...

Though I had another thought. If I remember correctly, the CE3 gallery used the image file name as anchor ID:

<a id="image-filename" ...

So we could put it all together using Javascript as before, if your people are willing to cooperate.

var image = $('a.image-link').attr('id'), 
    foto  = "/spanje/" + image + ".jpg";

Phoentje · 2014-10-08 03:48:03

I will send this to the support team.

Is it easier for achieve when I go for the CE4? As before I did not have a 200% reason to get the newest verison but if it makes life easier I might

Ben · 2014-10-08 05:58:01

Do you have a working site we can look at? I'm interested in seeing what you're trying to do with the cart.

Matthew · 2014-10-08 13:04:05

Ben wrote:

Do you have a working site we can look at? I'm interested in seeing what you're trying to do with the cart.

If I'm understanding the situation correctly, this actually has nothing to do with the cart, and all to do with the gallery. I think he's trying to implement a Fotomoto-like service, but one that's local to the Netherlands.

Phoentje · 2014-10-08 17:28:11

Ben wrote:

Do you have a working site we can look at? I'm interested in seeing what you're trying to do with the cart.

Yes, take a look at this example. http://developmentone.printjecanvas.nl/demo/walibi/

Phoentje · 2014-10-09 18:15:24

Hi Matthew, indeed it is something simulair as that fotomoto site.
Update from the support team is that they can not adjust their side.. so my question then would be if this adjustment could be made in CE4 to put the tag there. If so ofcourse I will buy it and implement it!

If you can edit it for me in CE3 I would ofcourse also be a happy person. Ha ha

Matthew · 2014-10-09 19:04:12

It's not something I'm going to build into the plugin, as that would be pointless. But you can edit your exported template to patch in the necessary code.

Phoentje · 2014-10-10 05:06:18

Matthew wrote:

It's not something I'm going to build into the plugin, as that would be pointless. But you can edit your exported template to patch in the necessary code.

Ok that is a pitty but understandable. Any chance to help me into the right direction. What to edit and where? I am complete blank on this one unfortunately

Matthew · 2014-10-10 13:25:53

Without knowing which options you've selected for your export, and whether or not you're using publisher, I cannot say. I'd need to see your exported template. And this would probably be a better conversation to have about the CE4 version, as I'm more familiar with that code at present; I haven't looked at CE3 in a very long time.

Phoentje · 2014-10-10 15:27:44

Ok. This will be a winterjob for me though , migrating to CE4 cart and such. I am using publisher.
If we can agree on fixing it I will make the purchase on the new CE4 in December or so.

Matthew · 2014-10-10 16:27:08

Nothing needs to be "fixed". You're hacking it.

Phoentje · 2014-10-10 17:54:43

Matthew wrote:

Nothing needs to be "fixed". You're hacking it.

Fixing it for me lol Yeh you are right. Hacking it.. And not that you have to put all time in it but pointing me in the right direction

Community @ The Turning Gate

#1 2014-10-03 21:42:19

Add code to each image(thumb)

#2 2014-10-03 22:02:54

Re: Add code to each image(thumb)

#3 2014-10-07 15:44:08

Re: Add code to each image(thumb)

#4 2014-10-07 16:36:17

Re: Add code to each image(thumb)

#5 2014-10-07 17:00:10

Re: Add code to each image(thumb)

#6 2014-10-07 17:42:16

Re: Add code to each image(thumb)

#7 2014-10-07 18:24:43

Re: Add code to each image(thumb)

#8 2014-10-07 22:01:31

Re: Add code to each image(thumb)

#9 2014-10-07 22:05:24

Re: Add code to each image(thumb)

#10 2014-10-08 00:53:47

Re: Add code to each image(thumb)

#11 2014-10-08 03:48:03

Re: Add code to each image(thumb)

#12 2014-10-08 05:58:01

Re: Add code to each image(thumb)

#13 2014-10-08 13:04:05

Re: Add code to each image(thumb)

#14 2014-10-08 17:28:11

Re: Add code to each image(thumb)

#15 2014-10-09 18:15:24

Re: Add code to each image(thumb)

#16 2014-10-09 19:04:12

Re: Add code to each image(thumb)

#17 2014-10-10 05:06:18

Re: Add code to each image(thumb)

#18 2014-10-10 13:25:53

Re: Add code to each image(thumb)

#19 2014-10-10 15:27:44

Re: Add code to each image(thumb)

#20 2014-10-10 16:27:08

Re: Add code to each image(thumb)

#21 2014-10-10 17:54:43

Re: Add code to each image(thumb)

Board footer