Prefacing by saying I’m a total noob to webdev.
I’m trying to move my personal portfolio site off of Squarespace and onto some sort of static hosting. Since I know nothing, I’m cobbling together hugo templates and using LightBox2 to show image galleries. The blog I’m referencing includes LightBox2 using this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js" integrity="sha256-CtKylYan+AJuoH8jrMht1+1PMhMqrKnB8K5g012WN5I=" crossorigin="anonymous"></script>
I would prefer to not subject people viewing my page to any external tracking if I can avoid it. My page has zero tracking/analytics for this reason. I briefly tried downloading LightBox2 and directly including it instead, and was able to get it working mostly, but some things were broken that I would need to debug. Before I do that I was wondering, is this even a problem? Is including stuff from cloudflare cdn like this sketchy? It’s possible I’m being overly paranoid but I have no idea.
Something about how hugo is cooking everything down into a /public directory is breaking the overlay images (like the next/prev arrow). I’m sure I can track it down but since I’m pretty inexperienced this will take me some time (at cursory glance all the paths seemed good, so I’m not sure why it’s broken).
I would also prefer to host it myself so maybe I should just do this…
Looks like
…/ means previous directory so if CSS is public/css you want public/images.
OK, looks like the image paths are correct. It’s something about the JS that fades them in. If I toggle the opacity property on/off then suddenly it works fine, until I refresh, so something funky is going on there. At least I know the structure is correct hugo-wise so it’s just a matter of tracking down the fade-in issue.
Yeah I see nothing that using a local version that would cause that… Hmm next I would try mixing CDN ref and local ref for js/CSS try to pinpoint what one is making it buggy.
I’m starting to think it’s something super specific to the particular hugo theme I’m using and how it wants users to insert custom js/css to get it all baked down into the right place in the final output. I’ll keep bashing on it, thanks for your help!
Edit: OK this is kind of hilarious considering the community I posted to, but I actually think it works fine but something about my Librewolf setup is breaking it. It works fine in Firefox and Chrome, and since I jump around between them as I work I just happened to test in Librewolf right as I made this change. Not to get too far into the weeds but I think I’m going to just go ahead with not linking cloudflare. Thanks again.
Ah I didn’t think of the image references! Yeah probably better off downloading the whole library when it requires the other assets too. Its likely soft linking at point of the css file and you’d need assets paths stored in reference to the CSS file.