Responsive Example ?

[ghost]

Using the JS from this CodePen http://codepen.io/dimsemenov/pen/ZYbPJM and am trying to add responsive images as functionality to it but I do not know how to do that.

Can I simply replace:

            // create slide object
            item = {
                src: linkEl.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10)
            };

with

var items = [

    // Slide 1
    {
        mediumImage: {
            src: 'path/to/medium-image-1.jpg',
            w:800,
            h:600
        },
        originalImage: {
            src: 'path/to/large-image-1.jpg',
            w: 1400,
            h: 1050
        }
    },

    // Slide 2
    // {
    //     mediumImage: {
    //         src: 'path/to/medium-image-2.jpg',
    //         ...
    //     
    // ...

];

and then add

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;

// beforeResize event fires each time size of gallery viewport updates
gallery.listen('beforeResize', function() {
    // gallery.viewportSize.x - width of PhotoSwipe viewport
    // gallery.viewportSize.y - height of PhotoSwipe viewport
    // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
    //                          1 (regular display), 2 (@2x, retina) ...

    // calculate real pixels when size changes
    realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

    // Code below is needed if you want image to switch dynamically on window.resize

    // Find out if current images need to be changed
    if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;
    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

    // Invalidate items only when source is changed and when it's not the first update
    if(imageSrcWillChange && !firstResize) {
        // invalidateCurrItems sets a flag on slides that are in DOM,
        // which will force update of content (image) on window.resize.
        gallery.invalidateCurrItems();
    }

    if(firstResize) {
        firstResize = false;
    }

    imageSrcWillChange = false;

});

// gettingData event fires each time PhotoSwipe retrieves image source & size
gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here, 
    // as long as item.src, item.w and item.h have valid values.
    // 
    // Just avoid http requests in this listener, as it fires quite often

});

// Note that init() method is called after gettingData event is bound
gallery.init();

in between

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

        // insert responsive image code here 
        gallery.init();

?

I have looked at the index.html from the website folder of this repo and loaded it on the local server with XAMPP but it does not work at all, meaning PhotoSwipe is not initialized. I thought that the website folder is a fully working example, as repsonsive image code is found in the JS section of that index.html file.

Does any one have a working example of how to get responsive images working with PhotoSwipe on a server that does have medium and large images? Or is there a live website perhaps that uses responsive images with PhotoSwipe?

I am really new to JS and trying to put the pieces together. My question is basically how can I get the JS to read the var items = .. for responsive images when using the JS from this CodePen http://codepen.io/dimsemenov/pen/ZYbPJM ?

Since the slide object is parsed with JS from the DOM I have no clue where to add the responsive images object in the JS.

Any help or live example would be awesome.

[ghost]

Well if not here, is there anywhere an example online to be found where PhotoSwipe is being used with responsive images ? Any help highly appreciated. Doing pro bono work for a handicapped friend and would love to really tune PhotoSwipe to work nice on PDAs as well. Any example would really be helpful, I guess I can piece together the rest from that.

[ghost]

Anyone feel like leaving a comment or possibly some input?

Dmitry?

Thank you.

[thetiby]

@monolux The key is here

gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here, 
    // as long as item.src, item.w and item.h have valid values.
    // 
    // Just avoid http requests in this listener, as it fires quite often

});

Use your server (by sniffing the user agent) to write either <script> var useLargeImages = true; </script> for desktop or <script> var useLargeImages = false; </script> for mobile before your script that initializes the gallery. For the above code to work, have the initial items with which you created the gallery store both types of images: big and small (and you need src, w and h for each of these).

You don't need the gallery.listen('beforeResize'... part, unless you want to replace your images when the window is resided, which usually only happens on desktop where you might as well keep the large images.

Hope this helps.

[ghost]

@thetiby Thank you for your comment that I read just now. Is user agent sniffing really necessary? Can I avoid that and do something different?

On this page of the doc: http://photoswipe.com/documentation/responsive-images.html it says:

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;

So here the variable is created and no mention of viewport calculations in the doc. I think this is done by PhotoSwipe, no? Please read on as I think this explains itself further down.

Now to this block.

// beforeResize event fires each time size of gallery viewport updates
gallery.listen('beforeResize', function() {
    // gallery.viewportSize.x - width of PhotoSwipe viewport
    // gallery.viewportSize.y - height of PhotoSwipe viewport
    // window.devicePixelRatio - ratio between physical pixels and device independent pixels (Number)
    //                          1 (regular display), 2 (@2x, retina) ...

Do I need to remove the commented lines here at all to do the calculations? Or can I just leave it like that?

Now this.

    // calculate real pixels when size changes
    realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;

I think here the realViewportWidth is calculated so no need to do this with user agent sniffing, no?

Now this.

    // Find out if current images need to be changed
    if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;
    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

Here the "media query" or "breakpoint" are set at 1000px. Why? Does this incorporate retina screens with double the resolution on the same viewport width? I understand what this does, at least I think so, but am not sure exactly why 1000px?

Getting to the part you mentioned.

// gettingData event fires each time PhotoSwipe retrieves image source & size
gallery.listen('gettingData', function(index, item) {

    // Set image source & size based on real viewport width
    if( useLargeImages ) {
        item.src = item.originalImage.src;
        item.w = item.originalImage.w;
        item.h = item.originalImage.h;
    } else {
        item.src = item.mediumImage.src;
        item.w = item.mediumImage.w;
        item.h = item.mediumImage.h;
    }

    // It doesn't really matter what will you do here, 
    // as long as item.src, item.w and item.h have valid values.
    // 
    // Just avoid http requests in this listener, as it fires quite often

});

So do I, after the if else statement, insert the var = items with all the original and medium image sources where it says "It doesn't really matter what you do here.." ?

About the beforeResize. For my understanding it would help tremendously to be able to replace images when the window is resized. I need to understand this completely really, or at least I would love to.

Using the user agent sniffing really puzzled me as I think viewport calculations are done by PhotoSwipe, at least I think so from looking at that script in the responsive images doc.

How do you do this if you do in combination with PhotoSwipe? Have you got a pen or fiddle perhaps showing how your suggestions work with PhotoSwipe responsive images? That would be tremendously helpful. If you can spare the time, thanks man!!

I am going to give what you said a good try and see if I can come up with a pen or fiddle myself. Any help on this greatly appreciated. If you like email me, email address is in profile, would love to get this sorted and understood completely.

Once I got this completely I will for sure make a working pen or fiddle to help others get this. I think there is quite a few people that would love to know how to get responsive images working with PhotoSwipe but don't know how to exactly because of the JS hurdle.

So thank you again for actually getting back to me about this. Really happy to have a reply. Thank you!

[ghost]

@thetiby I just hope to hear back from you at some point. I did not have notifications linked to my email and missed your initial reply. If you find the time please do get in touch either here or through email on my profile. Thank you.

[thetiby]

I will try to as soon as I get the time.

[ghost]

@thetiby Thank you heaps. I will try a get a pen or fiddle going with what I have tried to get to work. Take your time. I am happy you are getting my messages here and that we have not lost touch over the "issue" or rather "my issue" with not being on par with JS. ;) Super happy to heave heard back from you!!

[ghost]

Just letting you know that I am working on the responsive images fiddle in my spare time. So before I have not posted that you do not need to post a fiddle yourself.

I will try and see if I can get it to work with your approach or by following TFM line by line. I want to learn this and when you see my fiddle we can take it from there.

Otherwise if you have something already, perhaps a demo/codepen/fiddle I would be super happy to see it. As you have time. Thank you.

[thetiby]

Ok, please do that, it will be much easier for me to look at your code and see why it's not working. I will have a live example for you soon (a site I'm working on).

[ghost]

Yes will do so. A live site would be great! Thank you for getting back to me so swiftly.

[thetiby]

Here's a live implementation that uses different resolutions for different devices and relies on the server to do that difference: vacatia.com; you can use the chrome emulator from the developer tools (make sure to refresh the page) to see the mobile version.

[ghost]

Thank you for the real life example. Great!! I will certainly have a good look and see if I can manage.

One question though, when you write "it relies on the server to do that difference" do you mean you do device detection server side rather than letting a responsive design carter for the differences?

[thetiby]

Yes, the device detection is done server-side. The gallery design is responsive, but the rest of the website is not, so that's why you need to fully reload the page after you emulate a device.

Here's the bit of code that does the important job:

dimensions: {
    HD: !m ? "1920x1080" : "770x513",
    LD: !m ? "480x270" : "135x90"
}

and in another place I have:

item = {
    src: getUrl(photoData[dimensions.HD]),
    msrc: getUrl(photoData[dimensions.LD]),
}

And that's it. The m flag stands for mobile and comes from the server. You can easily detect on the client should you need to. I simplified the above code a bit to only leave the relevant bits. One important aspect: I parse and initialize the item w and h properties using the dimensions from that first block above. Thus, I know that all my images are the same size (one of those 4 sizes) beforehand. If you're images have different sizes, you might want to put their dimensions directly in their URL.

Good luck.

[ghost]

Thank you. Just trying to find the JS file where the mentioned bits of code are present. Could not find it in vacatia_core.js or common.js.

So if I understand correctly the server side device detection is not really relevant for this since the gallery design is responsive anyway. So I don't really need to care for the device detection as long as I have a good look at the bits of code you mentioned, is this correct?

I was thinking that you do the device detection in such a way: if device = mobile then serve small images if device = desktop then server big images But from my understanding for this case this is not relevant, correct?

Here all I need to understand is the code that belongs to the responsive gallery, right? Or does the device detection flow into the responsive gallery with variables or functions in any way?

[thetiby]

Let's make some things clear.

1. responsive design = CSS properties change with resolution via media queries; this is not really relevant to this thread
2. the device detection helps the responsive CSS a bit, but its main purpose is to use the right size of images; I have an API that returns all of those 4 image sizes you see specified above and it also returns the m flag which tells me which 2 of those 4 to use for the current user-agent (remember that each photo or item in this gallery can have 2 different srcs, one which is in high definition and will download slower -- the src -- and the other that should be of a lower definition and loads up first (the msrc)

The scripts are there. You won't find that exact code I pasted though, because I edited out what's not necessary for this thread.

[ghost]

Thank you for your explanation. So I think if I understood this correctly in your case it is the device detection that actually passes the information about what image to pick to PSWP, right? Therefore I cannot really use your example as I am looking for a way to do this without device detection but purely with PSWP. Is my assumption for this correct?

Regardless of this I have picked up a bit of JS in the past months and understand objects and arrays much better (fingers crossed). This leads me to actually understand the PSWP documentation about responsive images also better to a slight degree.

In the responsive images example the viewport width is checked with a simple if else if statement.

if(useLargeImages && realViewportWidth < 1000) {
        useLargeImages = false;
        imageSrcWillChange = true;

If useLargeImages and realViewportWidth are smaller than 1000px large images are not used and the image source will be changed.

Likewise the rest of that code

    } else if(!useLargeImages && realViewportWidth >= 1000) {
        useLargeImages = true;
        imageSrcWillChange = true;
    }

means. If useLargeImages is not false (so actually true) and the realViewportWidth is greater or equal to 1000 px then uselargeImages is true and the image source won't change in that case.

What my issue with items was is that I was looking for way to connect items to the PSWP function since at that point I did not understand what function parameters are, but now since I studied all this it is actually straight forward, it being the following.

The array var items does actually contain objects where each object again has properties (the images and their properties) that are declared in literal notation.

As the items array is part of the var gallery variable that creates a new PhotoSwipe object there is no need to "connect" the items array with the PhotoSwipe object since it is part of it as an argument.

In short the items array is passed to the PhotoSwipe object as part of that object's values.

What I suggest is for me to really get a basic fiddle going that uses the responsive images example the way I think this can be achieved with PSWP and perhaps with your help and possibly corrections I will get this done without device detection.

Regarding device detection it is not that I am against it per se, I just read often that it actually should be avoided for the main reason it not really being able to identify each device correctly, especially with new devices popping up like mushrooms in wet field in spring. This leads me to stick to the approach with the "media query" if under 1000 if else equal or over 1000.

Is my thinking here on the right track or am I missing fundamental parts (again) ?

[thetiby]

It seems I misunderstood you a bit. What I thought you needed is how to switch the image sizes based on some detection (device detection, like I do, or viewport detection, like in your example, it's irrelevant). The point is that this lib doesn't do it for you. Haven't looked at your fiddle yet, but yes, you're on the right track.

[ghost]

Tried to come up with a fiddle yesterday but realized I would have to rewrite the parseThumbnailElements function as the items for that are taken from the DOM. So basically the responsive image example from the documentation is not complete, it merely shows the approach but lots more work needs to be done to get a working gallery with responsive images going.

For this still I have too little knowledge, or rather not the time to invest at this stage. The lib actually does do the viewport detection in the responsive example from the documentation (under 1000 px or over or equal to 1000 px).

I am now thinking of swapping image sources with something like EnquireJS and jQuery while still using PhotoSwipe. Should be doable with the code example from the getting started page and I will try to at least show a fiddle with that approach.

Considering responsive images and the plethora of solutions there and no real winner from all the various approaches I am going to use EnquireJS and jQuery for that, not only because of cross-browser functionality. Will keep you updated with whatever I can come up with.

Thank you for your continued support or guidance in this matter. I think a ton of people would be tremendously happy about a working fiddle with PhotoSwipe and responsive images and I will surly link one if I manage one day.

[ghost]

@monolux this thread is stale. can this be closed?

[ghost]

I think quite a few people would be tremendously happy about a working fiddle with PhotoSwipe and responsive images.

Is there no one out there that can provide a simple example with two images, using them in a responsive design?

Still trying to figure this out.

[ghost]

@monolux kewl. just checking. I did a pour over issues yesterday to see if I could help get stuff cleaned up and consolidated. Some folded and closed, some fought to stay open. And some people just didn't give a shit. Haha. Anyway, I hope you're able to work this out. And thanks for your response.

[ghost]

@jhabdas Could you kindly provide an understandable example on a jsfiddle with two images that are being used in a responsive setting?

[ghost]

When you say "responsive image", are you referring to an image with a srcset attribute as suggested by the lazysizes library, or something different?

[ghost]

Never mind. Clearly you are. I've been working on a prototype for LazySizes to drop into https://hackcabin.com. It cannot be released until I create a dynamic watermarking solution as a result of Amazon vs. Perfect 10. I'll look to provide an example with responsive images as well, at your request @monolux

[ghost]

Also, FWIW, I've already achieved PhotoSwipe image deep linking as a result of the work, and created a new pattern for the Web thanks to PhotoSwipe's composite nature and a strong desire for Web performance. The library and example can be seen in https://github.com/dimsemenov/PhotoSwipe/issues/1297

The dynamic watermarking solution will use JavaScript to overlay a layer on a watermarked static image so the watermark only appears when the image is deep linked or downloaded to help protect IP of the copyright holder.

[ghost]

@jhabdas I am referring to this part of the documentation. http://photoswipe.com/documentation/responsive-images.html.

The part that follows the "Then:" and the code for it starting with

// initialise as usual
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

// create variable that will store real size of viewport
var realViewportWidth,
    useLargeImages = false,
    firstResize = true,
    imageSrcWillChange;
..
..
..

is what I am having trouble with, or do not understand. Also the two points

Try to avoid serving images just based on devicePixelRatio or just based on viewport size, always combine both. Feel free to use srcset on thumbnails that open PhotoSwipe.

make a lot of sense outside of PhotoSwipe naturally, I know how to deal with srcset usually, though implementing this in JS in an object in PhotoSwipe is what I am not getting from the documentation. The part on how to then take that object and feed it to the rest of PhotoSwipe is where I am getting lost.

So yes, to confirm, let's say I have three sources, small, up to 425px, medium up to 768px and large up to 1200px and depending on the device size or viewport width, regardless of the thumbnail, PhotoSwipe serves the image that best fits the given viewport.

For me this also means, to test things out, on a desktop browser with a viewport of up to 1920px, when resizing the viewport from 240px width all the way through 1920px + width, I would like to see the the source of the image change from small through to large.

That is what I mean really when mentioning responsive images.

About Perfect 10 vs. Amazon, I had no clue what you meant and read the whole wiki. Quite interesting! And even more so most interesting that you will or might be able to provide a solution where

the watermark only appears when the image is deep linked or downloaded to help protect IP of the copyright holder

. This in fact would be excellent news.

I am doing a pro bono website project for an artist friend of mine that unfortunately suffers from a nasty mental illness (what mental illness is not nasty actually?) and just likes to paint great, truly great once you seen them, oil paintings on quite large canvas. There are already galleries showing some interest and with the help of such a website perhaps this friend could get a few exhibitions done and be able to thus afford new canvas and better colours or even pay for the tiny studio space that is being given to this person.

Naturally this person already asked me about how to deal with downloading high quality versions of photos of those paintings and so far we have agreed to just really have a copyright notice on the website itself I am doing for this person. Naturally being able to include a copyright notice when these images are being accessed from search engines or even downloaded would be super super, really super great!!

Because of the benefit for the community at large using and implementing PhotoSwipe I am happy to send you some cash for your efforts, given that at the end of this ride I understand how to implement these techniques.

I am anything but rich and learning everything myself in web development and see the huge benefit this will make, not only for me, but for many people out there using PhotoSwipe in a professional context on a website. At the moment I am going through this course to learn JS, or at least get a basic understanding of it, so I am not a total beginner and have already managed to use PhotoSwipe on another website, though without PhotoSwipe responsive feature.

Then to LazySizes. As far as I understand when you mention LazySizes, you have managed to get PhotoSwipe working with LazySizes? Is that what you mean? Now this also would be great, but hang on, one step at the time before I think it is Christmas come early this year.

Web performance is actually what I have been researching quite intense the past half year, using such techniques as criticalCSS, loadCSS, loadJS and fontfaceobserver, and must say truly love getting 100% on PageSpeed and straigt As on WebPagetest, so yes, totally into performance tweaking the last bit out of a site till it pops up in milliseconds on any device on pretty much any network connection.

How do you like to proceed? In fact I think it would be great to change the PhotoSwipe documentation with a pull request in the responsive images part of the docs once we have a clearly and basic understandable example of how to get this working with PhotoSwipe.

Needless to say I am really excited about this and your undertakings. Please do keep me posted, thank you. If I can be of any help or if you have topics for me to research or learn or have prerequisites that I must meet to get this going I am all ears. Thank you.

edit: jeeez, just had a look at your https://github.com/jhabdas/fetch-inject and the waterfalls, my eyes are getting watery. Will need to dig through that ASAP, so with fetch-inject you are telling me that CSS and JS and possibly fonts can be loaded asynchronously and on top of that super fast? Is that what it does in essence?

edit2: man! just checked the use cases, fetch-inject will be my new weapon of choice for delivering blazing fast websites, you rock man!

[ghost]

I am doing a pro bono website project for an artist friend of mine

That's super thoughtful of you, and will likely lead to some very interesting and enjoyable work on your end without the duress of business deliverables. Have you considered integrating an e-commerce aspect? Here are some things to get you thinking:

https://www.siteleaf.com/blog/jamstack-ecommerce/ https://github.com/CloudCannon/fur-jekyll-template

Naturally being able to include a copyright notice when these images are being accessed from search engines or even downloaded would be super super, really super great!!

My concept is to use https://github.com/brianium/watermarkjs. Beyond that I need to protect the IP until I decide how I'm going to implement it and which parts I'll open source.

Because of the benefit for the community at large using and implementing PhotoSwipe I am happy to send you some cash for your efforts, given that at the end of this ride I understand how to implement these techniques.

That's very thoughtful. Whatever cash it makes will be a very small per-use fee (like fractions of a penny) akin to the Amazon AWS model.

I would like to see the the source of the image change from small through to large.

I believe this only occurs with the picture element, which is intended to be used for art direction and not necessarily for responsive images (though it is anyway). Based on my understanding of srcset for responsive images last summer, it was up to the browser to decide which image to choose based on a number of factors such as screen size, pixel density, current network speed, etc. I could be wrong. I haven't looked into this for about a year.

At the moment I am going through this course to learn JS

That's awesome. I hope you're enjoying the course. I have a few tutorials on my website here you may find valuable for putting your learnings into practice in building websites:

• https://habd.as/simple-websites-jekyll-docker/
• https://habd.as/pagespeed-100-with-jekyll-s3-and-cloudfront/
• https://habd.as/zero-to-http-2-aws-hugo/

And a list of tools I'm building to help keep some of the best ones easily accessible and with opinion provided by the community:

https://habd.as/jamstack-css-framework-tool-library/

How do you like to proceed?

I need to finish a client website, give a talk in a couple weeks, do my US taxes and then I'm hoping to get back to the watermarking work for my website: https://hackcabin.com/post/after-dark-error-page-redesign/

Please do keep me posted, thank you.

You got it. And thanks for reading into the copyright stuff. That kind of diligence is unusual. Also, enjoy Fetch Inject. As mentioned, I created it to load PhotoSwipe. Funny how things like that happen. Cheers.

[ghost]

@jhabdas When I meant to send you some cash for helping me implement responsive images in PhotoSwipe I meant to send it directly to you, then create an extensive and understandable example, perhaps create a pull request (the first ever in my life, yeaiii..) for the PhotoSwipe documentation and thus enable quite possibly lots and lots of people to be able to implement using responsive images with PhotoSwipe. I did not want to generate any sort of cash from either the copyright protection technique or the responsive image technique. Though I guess I understand that you might want to generate cash from the copyright protection technique. Fine, as long as I will be able to understand it, it will be a very valid piece of knowledge to have for the future to come.

I believe there are lots of people out there using PhotoSwipe, but many of them have no to very basic JS skills and thus do not know how to get the swapping of the sources as per PhotoSwipe documentation going. I would like to change this, and hence making the Web better and faster for all the people that use PhotoSwipe, and there are lots.

So basically I was proposing to pay you to make me understand this technique in connection with PhotoSwipe and then give back that learned knowledge to the community with an elaborate example that could possibly be included in the PhotoSwipe documentation.

I also see that you are on https://www.codementor.io/jhabdas so you might hear from me sooner rather than later to book a few sessions and finally get this piece of knowledge into my head and then give back to the PhotoSwipe community. Just not sure about the webcam part of that, will see..

I am very very privacy conscious, don't do social networks (and neither should you!! Get off it now, I would not sell my data or friends if Satanberg would pay me a 6 digit figure every day, I simply would not do it!!) and don't even have a webcam. My ultimate nightmare along services like Skype and what not that just pull your biometric data, facial recognition etc. from tapping into those connections to then be able to follow you and quite possibly show you personalized adds in the future to come à la Minority Report. Don't tell me they are not already doing that, I know they are and I am doing everything I can to not be part of that, in the future the most private people will be the most valuable people, the level of privacy you exhibit will be like a currency, enough rambling about this..

It might sound unusual but I thoroughly checked out your hackcabin last night. Many great topics to find there and oh yeah yes and yes I will surly get that Book Yourself Solid book as well as the Designing For Performance book that Steve Sounders mentions, naturally also read how to set up a Jamstack site and now see that also ecommerce can/could be done with a JAMstack site, needless to say am super thrilled about your input, best of all the hosting part is also super interesting, serverless, etc. Regarding hosting JAMstack sites, this comes to mind as well. Looking into all this.

Great stuff and the artist will/might also quite possibly be thrilled about this because their partner now has an exhibition and could also use a small site where artwork/prints/photographs/illustrations can be bought. The whole concept of a JAMstack site is still slowly pouring over my brain, though I am sure I will get the hang of it. Seeing how super fast and awesomely smooth your hackcabin loads, having these nice transitions between page loads makes me want to have it straight away.

Regarding the browser choosing the best image, I am not sure about that, I still think that if you code it into the site and order the bowser to deliver a medium sized image above 768px the browser will comply and no I am not going on about art direction but really swapping image source for the given viewport.

Yes fetch-inject stuck with me, so much that I dreamt about it last night dreaming how I can now not have multiple libs for asynchronously loading CSS, JS and web fonts but one piece of super lightweight code that does this in an easy to understand manner, checked the source of that and naturally/unfortunately don't get it just yet but am amazed what can be done with a few lines of JS and I definitely want to get there.

Indeed very funny, when I read your first message about closing this issue I wanted to give in at first but then decided to show my passion and perseverance for this topic asking you to help me with it, and by chance all this happened in the past 24 hours. Perhaps it was meant to happen, who knows, I know for sure I will try to reach you on codementor and get this going.

Yes the diligence is something I find I like to exhibit, perhaps this has already lead to clients turning me down or me turning down clients, but I like to think that I am thorough and like to learn things properly with best practices and web performance in mind. Just recently I had a startup asking me to make a presentation site for their app, knowing that I know my stuff regarding web performance. When they learned that this costs money and takes time they went for a 44 $ WP theme arguing that they don't need to be found on the web as they will email potential customers about their app. Can you believe that? And these are people that studied IT and commerce/business at uni. For crying out load..

Anyone can bang a theme on a server and fill it with content, I am not needed for that though many people ask me to do this. When I see the tons of horribly overloaded WP themes, ThemeForest is full of those (there is not a single theme on there with performance in mind!!), that look nice and shiny on the outside but just reeks rotten on the inside having up to 20-30 libs in the head tag I am shake my head in disbelieve, most of all when I see how many of such themes are sold to hordes or unknowing users that just like to get a basic site going that looks nice.

It is our responsibility as developers to code clean and performant sites and themes instead of just making shiny shit (excuse my language here but it really isn't anything but that) that attracts unknowing people from its shiny look and has nothing under the hood. I find it super hard to believe that people buy that, I mean when you buy a car of a pair of jeans you look at the engine or at how well the threads are knit, you don't just go to the car dealer or shop and throw your money at them and leave with a 3rd, 4th or last grade product, you want value for your money. Why do people not understand that, and why to devs provide these opportunities, literally littering the web with slow loading immensely overloaded and badly coded themes? Enough of that I say! Enough with making a few bucks littering the web!

So yeah, making the web better step by step, the first thing will be to, with your help, understand how to get responsive images going with PhotoSwipe. All the best with your client project, the taxes and your watermarking endeavours. You will hear from me.

[ghost]

I would like to change this, and hence making the Web better and faster for all the people that use PhotoSwipe, and there are lots.

Best place I can think of to start would be to rewrite that very clever script in the docs using functional programming in ES6. It's quite a piece of work, and I spent 2 hours trying to rewrite it before giving up (for now).

[A]synchronously loading CSS, JS and web fonts but one piece of super lightweight code that does this in an easy to understand manner

I'm still trying to grok it, but I believe HTTP/2 multiplexing will help address this. Guy Bedford, creator of JSPM, did some very interesting work in this area if you care to dig deeper.

All the best with your client project, the taxes and your watermarking endeavours. You will hear from me.

Thank you kindly. Hope you're enjoying the work. Enjoyed the posts. Watch out for self-driving cars. More to come. 😉

[dimsemenov]

Closing, as it's now built-in feature in v5 https://photoswipe.com/v5/docs/getting-started/#responsive-images-with-srcset