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

Fallback/default is the only crop being pulled by broswers at all screensizes (and without a fallback set no crops are pulled) #12

Open
liaprins opened this issue Aug 19, 2017 · 0 comments

Comments

@liaprins
Copy link

I would like to achieve this equivalent (plain HTML version):

<img sizes=“(max-width: 817px) 100vw,
		     1108px”
          srcset=“img-390.png 390w,
		       img-650.png 650w,
		       img-816.png 816w,
		       img-1108.png 1108w”
	      src=“img-650.png”>

So I entered this into the config.php:

c::set('responsiveimages.sizes', array( 
    'contentimage' => array(
        'size_value' => '100vw',
        'mq_value'   => '817px',
        'mq_name'    => 'max-width'
    ),
    'contentimage' => array(
        'size_value' => '1108px'
    ),
));

c::set('responsiveimages.sources', array( 
    'small'  => array('width' => 390),
    'medium' => array('width' => 650),
    'large' => array('width' => 816),
    'x-large'  => array('width' => 1108, 'grayscale' => true) // good for debugging
));

c::set('responsiveimages.defaultsource', 'medium');

When I check the thumbs folder all the crop sizes I want are being created. But I have tried several browsers and several screen sizes, and no matter what, only the default is ever the one that is loaded, even when the screen is much larger or much smaller.

Some other strange things happening (possibly clues):

  • All crops' names are being auto-generated with the pixel dimensions and then "-blur" afterward (e.g. "...816x1136-blur.jpg"). You can see from my code only the size I call x-large has grayscale, and none have "blur" set. Even the x-large crops end with names like "...1108x1699-blur-bw.jpg".
  • Removing c::set('responsiveimages.defaultsource', 'medium'); altogether results in all crops being created, but none being used by the browser: it will only use the original image at all screen sizes
  • Not at all sure if it's related, but there seems to be an ongoing issue with Kirby's thumb functionality and its Github issue is still open (but this issue was always there, so if this responsive images plugin works normally, the Kirby issue may be unrelated).

Please let me know what I can do to get this plugin to work properly, and if others have had the same issue with the fallback taking over? Thank you so much!!!

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

No branches or pull requests

1 participant