360° Logo is not shown (and would be loaded from CDN) / don't load images from CDN to not harm GDPR

@thomas.frobieter please compare it to https://scaleflex.github.io/js-cloudimage-360-view/

The implementation and settings are very basic and simple via HTML attributes.

This is the element that should be shown:

<div class="cloudimage-360-view-360-icon" style="background: rgba(255, 255, 255, 0.8) url(&quot;https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg&quot;) 50% 50% / contain no-repeat;"></div>

Perhaps you can check in code, why it's not added or shown.

I had a look on the demo page: https://scaleflex.github.io/js-cloudimage-360-view/

Seems that this logo only appears if autoplay is turned off. Its kind of a "play button". So we should change the label & description of the setting then.

Seems we should set logo-src and provide the file locally!

https://github.com/search?q=repo%3Ascaleflex%2Fjs-cloudimage-360-view%20...

@thomas.frobieter might also be something WE need to add in CSS?
Please read:
https://github.com/scaleflex/js-cloudimage-360-view/blob/39469ed58823ebe...

Over and out.

Sure, we can simply place the logo in the module folder.

The CSS seems kind of dirty on the library side.. but sure, we could fix that.

@grevil We need to solve this together:

1. @grevil: Set "logo-src" (not "data-logo-src") on the attributes (image path should be 'MODULE_PATH/images/360_view.svg'
2. @grevil: Change the "Hide 360° logo" label to "Hide 360° logo (only on autoplay), or hide the setting with the States API if autoplay is disabled?
3. @thomas.frobieter: Put the logo into an /images folder: https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_vi...
4. @thomas.frobieter: Same for the SVG images in the CSS file: https://github.com/scaleflex/js-cloudimage-360-view/blob/39469ed58823ebe...
5. @thomas.frobieter: Add a css file to js_cloudimage_360_view.libraries.yml and override the images defined in https://github.com/scaleflex/js-cloudimage-360-view/blob/39469ed58823ebe...

@grevil: Change the "Hide 360° logo" label to "Hide 360° logo (only on autoplay), or hide the setting with the States API if autoplay is disabled?

First one would be hard to understand, I'd vote to either hide it by states API or write a feature request to add a data-attribute in the library to also show the 360° logo if autoplay is enabled. From my perspective that would also make sense to be controllable.

@grevil these are the methods to use to get the frontend path to the module folder:
https://www.drupal.org/node/2940438 →

$path = \Drupal::service('extension.list.module')->getPath('js_cloudimage_360_view') . '/images';

I am done with my part, while I am not sure if we need any of the images except 360_view.svg?! Currently, there is no option to enable zoom or manage hotspots .. mhm.

And I have already added (src/Plugin/Field/FieldFormatter/Cloudimage360ViewFormatter.php):

 // @todo add correct variables for the module path
 $attributes->setAttribute('logo-src', '/modules/contrib/js_cloudimage_360_view/images/360_view.svg');

Okay, so the images are used, but we currently miss some options to enable the controls etc: 📌 Add missing important options to the field formatter Fixed

@grevil Please reassign me to this issue once 📌 Add missing important options to the field formatter Fixed is fixed so I can check that all images are now served locally.

@grevil see #10 for the correct implementation that should have been used to get the correct path.

@thomas.frobieter, lädt irgendwie noch nicht vernünftig:

Der URL Call sieht mir aber vernünftig aus (siehe https://developer.mozilla.org/en-US/docs/Web/CSS/url_function).

Wow... hiding the logo also hides the arrow icons... 😅

Ok, for me most icons are still coming externally:

I'll leave the rest to you @thomas.frobieter!

@Grevil: Also please implement data-folder:
https://github.com/Scaleflex/js-cloudimage-360-view#data-folder-or-folder

No idea... "data-folder" doesn't seem to do anything... Let's see if thomas.frobieter has an idea.

Take a look at the sourcecode from their repo for further details, I'd say. Until that, keep it as-is (and is documented)

Yea still no idea. Our css overwrite doesn't seem to have any effect. All the icon styles (apart from the main 360 image) are still loaded from remote...

The library probably overwrites our css file itself.

data-folder defines the src of the 360 jpgs and has nothing to do with the icon styles.

So, I think we're done here. Someone pls review!

@grevil I left some comments. Please also review.

Ok rebased the fork now, let's not merge anything else before this is fixed, as the conflicts are quite annoying.

Not a pro regarding css, but the css still contains the cdn url for me, or am I simply looking wrong? Looking at the header "style" section:

Also the formatter is broken entirely for me, but that could be due to shenanigans with @Anybody in core. Yea no idea, somebody more knowledgeable should agree and merge this (if the formatter still works, but parens::viewElements returns NULL for me, which sounds like some weird shenanigans).

Not a pro regarding css, but the css still contains the cdn url for me, or am I simply looking wrong? Looking at the header "style" section:

Sure, we can't remove this, we can only override it in our CSS file. If you look in the dev consoles network tab, you should not see any images loaded from the libs CDN.

Ok, yea LGTM!

Automatically closed - issue fixed for 2 weeks with no activity.