Responsive Images

[bytesource]

@horst

I will be installing a classic LAMP stack when I am back home later this day. Then at least we will have roughly the same installation base which should reduce the number of unknowns.

@Oliver

This sounds truly fantastic! I cannot wait to test it out.

Cheers,

Stefan

[horst]

Bitnami Stacks are quite shitty to customize from what I remember. There are settings scattered all over the place and it's real pain to search for the right file to alter behavior. 

That's exactly the reason why I do not use any of those packages (Bitnami, XAMPP, LAMP, WAMP, etc.). The only reason to use one of those is to save time, what get dropped if you get in a situation hunting for configuration settings. Bah! I have installed a unique Apache and enabled vhosts and have installed a unique MySQL. To grasp the basics of Apache, I have bought a book 12 years ago (Apache 1.3). All what I have learned at that time helps me until today. The basics are the same, some parts have slightly changed with Apache 2.x, but I'm able to change configurations where / when needed, because I know where it is noted

Apache httpd.conf -> httpd-vhosts.conf & my systems hosts file. Thats manageable!

@bytesource: good if you can change your development setup to be more comfortable!

[bytesource]

Having moved my current Processwire installation to a vanilla LAMP stack, the Responsive Images plugin is finally working!

After testing it out and making it work with my picture gallery and maybe even the Lazyload plugin, I will come back with some feedback.

I also might consider opening a new thread focussing on the plugin's latest features.

Cheers,

Stefan

[bytesource]

I just wanted to mention that I opened a new thread here: Oliver's Responsive Images Plugin: Some Questions

Cheers,

Stefan

[bytesource]

@Oliver

Making Responsive Images work with the Lazyload plugin has been relatively easy, but I have been struggling to achieve the same with the Magnific Popup gallery on opening dynamically created images.

My latest attempt at tackling this problem can be found here:

https://processwire.com/talk/topic/7623-olivers-responsive-images-plugin-some-questions/#entry74160

If you have some time it would be great if you could take a look at this code, as I believe my way of calling responsiveImages() is not correct.

Cheers,

Stefan

[Martijn Geerts]

but I have been struggling to achieve the same with the Magnific Popup gallery on opening dynamically created images.

The only thing you need to do is swap the link to an image, so it has nothing to do with adaptive images.

You need to get the viewport width and use that information to choose a link to an image image and set the href. 

[bytesource]

Martijn,

I understand why I need to use the viewport width. However, I am not sure I can follow along the rest of your explanation.

In the gallery, before clicking on a thumbnail, the url to the large image is the value of the href attribute of the surrounding <a> tag:

echo "<a href='{$image->url}'><img src='{$thumb->url}' /></a>";

As far as I know this.currItem that is accessible from the change callback is not the final image, but an object I can retrieve the url to the large image from. This is why, in order to be able to call responsiveimages(), I created a temporary image. Not sure, if that works, though.

You said this problem had nothing to do with adaptive images, but as I am using the Responsive Images plugin (which essentially produces adaptive images), I guess the urls to the large gallery images should also be handled by this plugin.

Please correct me if any of my assumptions are wrong.

Cheers,

Stefan

[Martijn Geerts]

Picture this:

<a href='/path/to/small-photo.jpg'  
    data-large='/path/to/large-photo.jpg' 
    data-medium='/path/to/medium-photo.jpg'
    data-small='/path/to/small-photo.jpg'>
    
    <picture>
    	<source srcset="/path/to/large-thumb.jpg" media="(min-width: 1000px)">
    	<source srcset="/path/to/medium-thumb.jpg" media="(min-width: 800px)">
    	<img srcset="/path/to/small-thumb.jpg" alt="tralalala">
    </picture>
</a> 

The only thing you need to do is swap the HREF of the <a>.

The sizes of the images to link to i have set in the data attributes. 

[bytesource]

Martijn,

Thanks for your clarification.

I have evaluated the Picturefill plugin before, which is similar to your solution. However, I found the Responsive Images plugin (RI) to be more convenient, as images of different sizes are created on the fly as needed.

Using RI to handle the gallery images should be very well possible, but with my limited javascript skills I got kind of stuck.

Cheers,

Stefan

[Martijn Geerts]

My post is not about the the image, it's about the url(s) of the HREF. So what is wrapped, doesn't matter.

[bytesource]

Martijn,

Yes, and it is an elegant solution to my problem that I might go with in the end.

It's just that I have pulled my hair out trying to make the gallery work using the Responsive Images plugin that I don't want to just give up but keep on looking for a solution.

Cheers,

Stefan