Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added support for retina images using srcset in img tag. #348

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

hennikul
Copy link

  • Used by adding srcset string when pushing images to gallery.

Example:

slides.push({
    thumb: image.getThumbnailUrl(),
    image: image.getWebImageUrl(),
    big: image.getSlideUrl(),
    title: gallery.getName(),
    description: image.getDescription(),
    srcset: image.calculateSrcSet()
});

Results in:

<img width="921" height="691" style="image-rendering: optimizequality; display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; transform: translate3d(0px, 0px, 0px); width: 921px; height: 691px; position: absolute; top: 0px; left: 490px; cursor: pointer;" src="slideshow/2014-10_062.jpg" srcset="thumbnails/thumb_2014-10_062.jpg 200w, pics/2014-10_062.jpg 800w, slideshow/2014-10_062.jpg 1600w, 2048x2048/2014-10_062.jpg 2048w, 3840x2160/2014-10_062.jpg 2880w" sizes="921px">

This will tell the browser that the image will be rendered at 921px width (initially), calculated by the Galleria scaler, and that there is a set of sources available. On my Nexus 9, it will choose the 2048w image.

@hennikul
Copy link
Author

After closer inspections of the network traffic, it seems the preloading is still using the smaller image. This causes every image to be loaded twice. One for retina, and one normal. I haven't been able to figure out where to connect this to the preloading functionality.

@jpkempf
Copy link

jpkempf commented Jul 31, 2015

Does anyone currently have plans to continue working on this?

$( image.image ).attr( 'sizes', image.width+"px" );
} else {
// We don't know the size of the image yet, but it can't be wider than the viewport
$( image.image ).attr( 'sizes', "100wv" );
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It should probably say "100vw", not "100wv"

@jpkempf
Copy link

jpkempf commented Aug 13, 2015

Anybody? No?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants