Jump to content

nbcommunication

Members
 View Profile  See their activity

  • Posts

    201

  • Joined

  • Last visited

  • Days Won

    2

 Content Type 

Posts posted by nbcommunication

    PageimageSource

    in Modules/Plugins

    Posted

    Today I needed to implement a background image with sources, using the new UIkit Image component implementation: https://getuikit.com/docs/image#picture-sources

    PageimageSource doesn't do this out of the box, but I found I neat solution, which I thought I'd share: 

    <?php

// $bannerImage = Pageimage;

preg_match_all('<source\ssrcset="(.*?)"\ssizes="(.*?)"\stype="(.*?)">', $bannerImage->render(), $matches);

$sources = [];
foreach($matches as $index => $match) {
  if(!$index) continue;
  $sources[$index] = [];
  foreach($match as $i => $v) {
    $sources[$index][[
      'srcset',
      'sizes',
      'type',
    ][$i]] = $v;
  }
}

echo '<div class="uk-background-cover" sources="' . $sanitizer->entities(json_encode(array_values($sources))) . '" data-src="' . $bannerImage->url . '" data-uk-img></div>';

    This assumes that the render() function is returning a <picture> element.

    Cheers,

    Chris

    • Like 5

    PageimageSource

    in Modules/Plugins

    Posted

    Hi @neophron,

    Apologies for the late response.

    This is a bit of a cop-out answer, but there are no prescriptions for srcset/sizes. What is right is whatever works best for your use case. The only way to get there is to experiment.

    That said, perhaps this is what you should do? 

    <?php

echo "<img class='photo' src='{$slide->size(760, 0, $options)->url}' srcset='{$slide->url} 2x' alt='{$slide->description}' loading='lazy'>";

    Regarding the 'orientation: portrait' sizes attribute - this isn't to do with the image's orientation, it is the device orientation. You can use it to specify a size profile for this e.g. 

    <?php

// Render an image using custom set rules and sizes
// These rules will render 'portrait' versions of the image for tablet and mobile
// Note the advanced use of the `srcset` option passing both `rules` and image `options`
// WebP is disabled
// Picture is disabled
echo $image->render([
	'srcset' => [
		'rules' => '320x569, 640x1138, 768x1365, 1024, 1366, 1600, 1920',
		'options' => [
			'upscaling' => true,
			'hidpi' => true,
		],
	],
	'sizes' => '(orientation: portrait) and (max-width: 640px) 50vw',
	'picture' => false,
]);
// <img src='image.jpg' alt='' srcset='image.320x569-srcset-hidpi.jpg 320w, image.640x1138-srcset-hidpi.jpg 640w, image.768x1365-srcset-hidpi.jpg 768w, image.1024x0-srcset-hidpi.jpg 1024w, image.1366x0-srcset-hidpi.jpg 1366w, image.1600x0-srcset-hidpi.jpg 1600w, image.jpg 1920w' sizes='(orientation: portrait) and (max-width: 768px) 50vw' loading="lazy">

    I'm not 100% myself on how the above actually works, but it provides '2x' portrait images for small portrait devices e.g. mobile.

    If there's one bit of advice I'd give with srcset, it is keep it simple! I hope that helps.

    Cheers,

    Chris

    • Like 1

    PageimageSource

    in Modules/Plugins

    Posted

    Hi @Stefanowitsch,

    Sorry for the late reply. I've had a quick look this morning and for me the variations are being regenerated correctly after a change of focus, but the browser's image cache is the issue - the filename doesn't change after the focus change so it just displays the old one it has cached. Hopefully the brief screencast attached will demonstrate. 

    I'm not sure I can remedy this - will have a look when I can to see what's been suggested elsewhere for the issue.

    Cheers,

    Chris

    PageimageSource

    in Modules/Plugins

    Posted

    Hi @elabx,

    Apologies it has taken a while to get back to you.

    From what I've been able to determine, the browser selects the first <source> in the list in the absence of media queries. In this case the webP version would always be selected as it comes first.

    I've added a couple of things that can help with the issue. The first is the ability to disable the render() extensions, falling back to the default Pageimage:render() method. This is done by passing $options as false. Here's an example, where if the webP image url isn't actually webP due to it being larger it uses the default render(). 

    <?php

echo $pageimages->each(function($pageimage) {
	return strpos($pageimage->webp()->url, '.webp') === false ? // If the webP url is not webp
      	$pageimage->render(false) : // Disables the PageimageSource::render() extensions
  		$pageimage->render();
})

    The second is a similar option to the $config->webpOptions option 'useSrcUrlOnSize'. If this is enabled, the module checks to see if the webP url is actually webP (as in the example above) and if it is not (e.g. if it is a .jpg), then it disables webP for that image, which in turn disables the picture option: 

    <?php

echo $pageimage->render([
	'useSrcUrlOnSize' => true,
]);

    This takes the module to v 1.0.2, still in beta.

    Cheers,

    Chris

    • Thanks 1

    InstagramBasicDisplayApi

    in Modules/Plugins

    Posted

    Hi @Stefanowitsch,

    Are you getting the hashtags through the tags property (e.g. $instagram->getImages()->first->tags)?

    The caption is passed through $sanitizer->entities1($value, true), I suspect the tags will require the same treatment.

    This should be a straightforward fix, will try and replicate and fix this tomorrow.

    Cheers,

    Chris

    InstagramBasicDisplayApi

    in Modules/Plugins

    Posted

    Hi @Stefanowitsch,

    I've had a brief look over the docs you linked and I don't think anything else has changed. It is a fiddly process!

    I'll fire up my sandbox install and see if I can auth my own account when I get a chance, hopefully later today and let you know how I get on.

    In the meantime, might be worth uninstalling/reinstalling the module and trying again.

    Cheers,

    Chris

    Error: Exception: Unable to obtain lock for session

    in General Support

    Posted

    Hi,

    I upgraded 100+ sites to the latest master on Friday, and we've gotten the following error email notification from a few of them over the weekend:

    Umm… Error: Exception: Unable to obtain lock for session (retry in 30s) (in processwire/wire3/modules/Session/SessionHandlerDB/SessionHandlerDB.module line 96) 
    User: ?, Version: 3.0.184

    This is a new error, added in the latest master release: https://github.com/processwire/processwire/commit/7a2ff6c15dde8f6768676181bfbeeaefe4761b0b#diff-4c158c18e5f331d4e9ff8b27eff8ae2c4cd34d16f6d0f2b427aa36791637c64f

    The session lock time is set to 50 seconds, I think this is the default, so I suspect the issue is on our end with our databases/server(s). 

    I'm going to investigate further and try and figure out the issue and will update here if/when I do.

    If anyone else has come across this or has any more info, please let me know!

    Cheers,

    Chris

    • Like 2

    PageimageSource

    in Modules/Plugins

    Posted

    Hi @elabx,

    Great point, I hadn't thought of this. When we were using GD for image resizing the WEBPs were often larger than the JPEGs, but we got ImageMagick in place around the time I developed this module and forgot about this quirk.

    I'll need to do a bit of research before implementing something but I'm a bit swamped at the moment. Will let you know when I figure something out.

    Cheers,

    Chris

    • Like 2

    PageimageSource

    in Modules/Plugins

    Posted

    Hi @Krlos,

    Apologies for the late reply, I've been on leave.

    I actually find srcset/sizes quite hard to get my head around, even more so to try and explain its use! I'd recommend having a read over https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images and perhaps https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

    From what you've posted above, Try using a sizes value e.g. sizes="33vw". You may need this to use media queries e.g sizes="(min-width: 640px) 50.00vw, (min-width: 960px) 33.33vw". You should also experiment with a different srcset configuration - you shouldn't need all the variations from the default rules in this case.

    Some browsers cache the largest resolution image loaded and use it regardless of resolution which makes debugging srcset really tricky.

    Hope that helps!

    Cheers,

    Chris

     

    PageimageSource

    in Modules/Plugins

    Posted

    Hi @totoff,

    It really depends how you've used the module. I probably wouldn't recommend it unless you have just used the sizes call ($image->srcset) without any additional options in the call.

    We've got plenty of sites using PageimageSrcset, and almost all of them are just using the srcset call, but I don't plan on changing this as PageimageSrcset works and will continue to. The development of PageimageSource is more about a change in approach, focusing more on extending Pageimage::render().

    If you were to attempt a migration, be aware that the majority of the additional functionality of PageimageSrcset is no longer present. It would make sense to tackle a new project with PageimageSource first to get a feel for the differences.

    Cheers,

    Chris

×
×
  • Create New...