Search…

X3 Photo Gallery Support Forums

Search…
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Attribute: data-embed-popup-caption-template

12 Oct 2021, 04:44

I am trying to incorporate the attribute data-embed-popup-caption-template into my html and have copied it into my html as described here:  https://forum.photo.gallery/viewtopic.php?f=67&t=10180
data-embed-popup-caption-template="<strong>{{basename}}</strong><br>{{mtime}}<br>{{description}}"
but am getting console errors:

       Uncaught ReferenceError: description is not defined
    at eval (eval at O (compile.ts:32), <anonymous>:3:138)
    at Object.e.render (render.ts:66)
    at Object.addCaptionHTMLFn (embed.min.js:2)
    at u.V.update (embed.min.js:2)
    at yi (embed.min.js:2)
    at updateCurrItem (embed.min.js:2)
    at u.init (embed.min.js:2)
    at embed.min.js:2
    at Object._f.popup (embed.min.js:2)
    at HTMLDivElement.<anonymous> (embed.min.js:2)

Demonstrations:
https://selfdrive.com.na/photo-embed.html This works fine - no attribute.
https://selfdrive.com.na/data-embed-popup-caption-template.html Errors with attribute
I have updated the embedded IPTC/EXIF info in the first image (map.jpg) so that some fields are populated:
ImageImage
There doesn't seem to be any more documentation on the attributes - or not that I can find, anyway.

Carl - could you enlighten us all on how to use what could be a very useful function?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 06:45

The examples for data-embed-popup-caption-template may not have been entirely accurate quite yet. There are a few things though ... First of all, can you confirm that it works when you remove <br>{{description}}? Just to make sure it works ...

Next up, I checked IPTC description for the file map.jpg, and the current uploaded version doesn't seem to contain any IPTC (description). You can see here:
http://metapicz.com/#landing?imgsrc=htt ... %2Fmap.jpg

I also checked the JSON data loaded for the file, and it doesn't contain any IPTC-description when loaded into Embed. This would have to be resolved before anything else.

Finally, here's the thing ... Even if/when you get the above working properly, it probably wouldn't work as expected. Embed (based on files app) stores data in objects,  and to access the actual IPTC description, you would probably need to use {{image.iptc.description}}, since description is a property of iptc which is a property of image. Embed uses squirrelly.js.org as template engine for the caption-template, and unless image.iptc is available for all your images, you might need to include additional conditions like {{@if(image.iptc) ... }}. So it's definitely possible, but to avoid errors, you might need to add more advanced syntax if you are to include properties that are only available in some of your images. I would have liked to make this easier, but using a template engine (like squirrelly) is necessary to make the captions customizable.
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 08:19

OK, I have removed <br>{{description}} and it seems to be fine.
Image
I see from your metapicz link that no description is showing. However, in Windows and in IrfanView, a description does show. This leads me to think that I need an app  which is confirmed to apply the IPTC data(which squirrely is happy with) to an image - maybe you an advise?

Also - it's inevitable that not all images in a gallery will have a description - can you provide a way to set the attribute to display: none in such circumstances? Maybe you can help with the 'advanced syntax' which you refer to?
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 08:31

I hope this isn't a distraction, but iptc.org seems to accept there is embedded data:
Get Photo Metadata (iptc.org)
Last edited by traxnamibia on 13 Oct 2021, 21:39, edited 1 time in total.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 08:44

traxnamibia wrote:I see from your metapicz link that no description is showing. However, in Windows and in IrfanView, a description does show. This leads me to think that I need an app  which is confirmed to apply the IPTC data(which squirrely is happy with) to an image - maybe you an advise?
I have reason to believe your server PHP does not reading image IPTC. Either that, or you updated the image directly on server after folder cache was created, and it fails to update (for some reason). Try to rename it to map2.jpg and then reload. If that fails, you can try this script "test.php" uploaded into the dir where the file exists:
Code
<?php
$size = getimagesize('./map.jpg', $info);
if(isset($info['APP13'])){
  $iptc = iptcparse($info['APP13']);
  var_dump($iptc);
}
I tried the above from here, and it outputs your test properties correctly. I also tried to upload the file from here, and the IPTC tags are loaded correctly from PHP:
Image

Your server PHP does not include the IPTC.
Image
traxnamibia wrote:Also - it's inevitable that not all images in a gallery will have a description - can you provide a way to set the attribute to display: none in such circumstances? Maybe you can help with the 'advanced syntax' which you refer to?
Sure. Please can we resolve the above first?
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 09:03

OK - I have renamed map.jpg to map02.jpg and also uploaded the test.php (with line 02 reflecting modified map02.jpg)
What next?
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 09:17

 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 09:52

Have you updated the embed js? Things are happening...
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 09:59

Image
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 10:13

I don't fully undertsand what's going on, but the image shown above is without using data-embed-popup-caption-template. So the standard pwsp_caption is now showing:

normal (no extra attribute): filename.filextension

If the core IPTC fields exist:
Document Title
Caption (description)

Is there any chance of you providing some 'advanced syntax' {{@if(image.iptc) ... }} etc..  so that when an IPTC Document Title does not exist, then set css pwsp_caption to display: none
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 10:16

Just to clarify my thinking, it will be great to display captions when IPTC data such as Document Title exist, but to to display nothing if there is only a filename to display.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 10:32

I was not sure what link you were testing from earlier, but I see you have the IPTC fields working in the link below. Maybe I was checking the wrong link. Or maybe page cache was refreshed after you renamed file. Anyway.
https://selfdrive.com.na/photo-embed.ht ... =map02.jpg
traxnamibia wrote:I don't fully undertsand what's going on, but the image shown above is without using data-embed-popup-caption-template. So the standard pwsp_caption is now showing:
This is easy to explain. When NOT using data-embed-popup-caption-template (which by far is the easy solution), Embed app will automatically create a caption from IPTC title (if exists) and IPTC description (if exists). If IPTC title does NOT exist, then it will use the filename ...

In the case you want to create your own caption template, then that's created entirely from the template (that is after all the point). In this case, you need to use {{image.iptc.title}} and {{image.iptc.description}}. Then you need to add syntax if you want to display name if title doesn't exist ... basically what DEFAULT (without using data-embed-popup-caption-template) already does ... So you would only use data-embed-popup-caption-template if you want a specific caption that is not provided by default.
traxnamibia wrote:Just to clarify my thinking, it will be great to display captions when IPTC data such as Document Title exist, but to to display nothing if there is only a filename to display.
Yep, then you would need to use data-embed-popup-caption-template with conditional syntax, because default captions will simply assign filename if IPTC title does not exist. It would require some conditions to check if IPTC title exists. I can look into template syntax tomorrow ... It's late here now.
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 10:53

Thanks - we can chat tomorrow. Where is 'here', by the way? Asia somewhere?
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Attribute: data-embed-popup-caption-template

12 Oct 2021, 23:53

traxnamibia wrote:Just to clarify my thinking, it will be great to display captions when IPTC data such as Document Title exist, but to to display nothing if there is only a filename to display.
Ok so I understand you want to check image IPTC TITLE and DESCRIPTION, and display them if they exist. If none of them exist, display nothing, correct? I believe something like this would work:
Code
data-embed-popup-caption-template="{{ @if (image.iptc) }}{{ @if (image.iptc.title) }}{{ image.iptc.title }}{{/if}}{{ @if (image.iptc.description) }}{{ image.iptc.description }}{{/if}}{{/if}}"
If neither title or description exist, caption will be empty and therefore won't display.

In the future, for convenience, I might "flatten" the object of properties, in which case you would instead use {{ @if (title) }}{{ title }}{{/if}}. I am in Thailand!
 
traxnamibia
Experienced
Topic Author
Posts: 36
Joined: 17 May 2021, 08:16

Re: Attribute: data-embed-popup-caption-template

13 Oct 2021, 02:52

Good afternoon Thailand...
We are nearly there!

The attribute code you provided nearly works, but iis concatenating the IPTC fields:
Image
Modifying the squirrelly stuff is beyond my paygrade - can you please modify it - ensuring that I will still be able to style the css so that I can change font-family, font-size?

Many thank from Nam. (ibia)