Setting cross origin on images using jrImage_display

SteveX
@ultrajam
6 years ago
2,584 posts

I'm using a js library which is asking for crossorigin="anonymous" to be set on images (logging each one as. a warning to console)

Is there any way to pass that in through jrCore_module_function function="jrImage_display"? When I add that as a parameter it doesn't make it through to the html.

Until recently I built the url so as not to use jrCore_module_function, but ran into jamroom image cache problems with these being written to the log, and failing to load the page.

[29-Mar-2018 14:05:14 Europe/Dublin] PHP Warning:  fopen(/home/jamroom/sites/virti.co/public_html/data/cache/jrImage/24070/1/1/31/ujPhoto360/145/00002567224f3d6e973e76b483010a41.tmp): failed to open stream: No such file or directory in /home/jamroom/sites/virti.co/public_html/modules/jrImage-release-2.0.8/include.php on line 1561 [1]
[29-Mar-2018 14:05:14 Europe/Dublin] PHP Warning:  rename(/home/jamroom/sites/virti.co/public_html/data/cache/jrImage/24070/1/1/31/ujPhoto360/145/00002567224f3d6e973e76b483010a41.tmp,/home/jamroom/sites/virti.co/public_html/data/cache/jrImage/24070/1/1/31/ujPhoto360/145/00002567224f3d6e973e76b483010a41): No such file or directory in /home/jamroom/sites/virti.co/public_html/modules/jrImage-release-2.0.8/include.php on line 1573 [1]
[29-Mar-2018 14:05:14 Europe/Dublin] PHP Warning:  file_get_contents(/home/jamroom/sites/virti.co/public_html/data/cache/jrImage/24070/1/1/31/ujPhoto360/145/00002567224f3d6e973e76b483010a41): failed to open stream: No such file or directory in /home/jamroom/sites/virti.co/public_html/modules/jrImage-release-2.0.8/include.php on line 1531 [1]

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 06/30/18 07:53:55AM

@michael
6 years ago
7,717 posts

all jrCore_image does is construct the url into a

<img src=........>

structure.

If you're making the src url

 {jrCore_module_url module="jrEvent" assign="murl"}
{$jamroom_url}/{$murl}/image/event_image/{$params['item']['_item_id']}/original/poster.jpg

then its the same URL as would be output by the jrImage_display function.

Tweak as necessary.

If it NEEDS to be addable in via a param im sure it could become an option.

SteveX
@ultrajam
6 years ago
2,584 posts

Thanks Michael. It isn't a need at the moment, the library adds crossorigin="anonymous" to each media element without it and logs the warning that it is missing.

When I used the url everything worked fine until I started testing from uncached browsers. If the images aren't in the cache then the load fails every time with the above jr errors logged. I can reproduce those errors by emptying the browser cache and emptying the jamroom image cache, then I get the error on first load but all is fine on the second. But if I use jrCore_module_function it works fine every time, even the first visit.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@michael
6 years ago
7,717 posts

weird. The only thing that occurs to me right now is the jrCore_module_function function infront of it. That one just checks to see if that function exists before calling it. But the jrImage_display function should always be available.

So the guess is that jrCore_module_function is running before the jrImage_display has been included so its not firing first time.

I'll have a play around and report back.

@michael
6 years ago
7,717 posts

Its possible right now to add in the crossorigin="anonymous" via a listener on the 'img_src' event.

Looks like as a param is not supported at the moment. May be easy to add though, still looking.

@michael
6 years ago
7,717 posts

could you confirm this looks correct please. If yes, it will be in the next version of jrImage.

updated by @michael: 03/29/18 04:21:28PM

@michael
6 years ago
7,717 posts

Pretty sure thats what you want. Its in jrImage 2.0.9 which is in the marketplace now. Update and you can use like this:

{jrCore_module_function function="jrImage_display" module="jrSeminar" type='seminar_image' item_id=201 size="medium" class="img_scale" alt="seminar poster" crop="16:10" crossorigin="allowed"}

SteveX
@ultrajam
6 years ago
2,584 posts

Yes, that looks correct

If that can be in the next version of jrImage that sure tidies up my console output, but if not and I can achieve the same thing through an img_src listener I'd be happy with doing that as well.

Thanks Michael!

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

@michael
6 years ago
7,717 posts

Its already in the next version of jrImage. That version 2.0.9 has been released to the marketplace. You can use it now.

SteveX
@ultrajam
6 years ago
2,584 posts

Marvellous!!! Thank you Michael!

That's going to save me so much time - My console log is readable again

now I can see the errors of my javascript ways

Thanks man!

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

solved Setting cross origin on images using jrImage_display

Tags