nbcommunication

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 Screen Recording 2021-11-29 at 08.35.37.mov

Hi @Stefanowitsch, I'm always using UIkit when developing so either make use of the Image component which has background image srcset functionality, or if using the <picture> element functionality of this module, I use the Cover component. Cheers, Chris

Excellent thanks @ryan!

Hi, Is anyone else finding that noSlashUrls is no longer respected on top-level (e.g. /page-name) pages on 3.0.186? Cheers, Chris

Hi @sodesign, Haven't found a workaround, but can confirm @Clarity's message above is correct. For us it happens on sites which are querying external APIs every so often and updating the site data based on the results. Cheers, Chris

Hi @Stefanowitsch, Thanks. I'll leave the implementation as it is at the moment, if there are further reports of the issue I'll investigate further. Cheers, Chris

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

??????

Hi @Stefanowitsch, It is working for me with that example. Do you have access to any other server environments to test it out? I'm wondering if it may be related to this issue described here: https://stackoverflow.com/questions/7456939/what-is-the-preg-match-all-u-flag-dependent-on Cheers, Chris

Hi @Stefanowitsch, It is definitely working for me. It suggests that perhaps unicode support isn't available on your server? Could you supply an example caption that isn't working? I've been testing with a caption that uses the characters you mentioned but I'm maybe missing something. Cheers, Chris

Hi @Stefanowitsch, preg_match_all on line 1045 required a unicode flag. I've added that and released 1.4.3. That should hopefully be working for you now - please let me know if not! Cheers, Chris

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

HI, Magic thanks - no donations, just delighted to get feedback! Cheers, Chris

I've released version 1.1.2 today: Javascript file now a minified UMD module Only unique reports from users are now logged to prevent excessive duplication in the log file. This is done using localStorage. Cheers, Chris

Hi @Stefanowitsch, Excellent, yes the module handles the URL callbacks. Glad you got it working and I hope you find the module useful. Cheers, Chris

Hi @Stefanowitsch, I've been able to set up my personal account on my sandbox PW install without any issues. I'd definitely recommend trying again, starting from scratch with the app setup if possible. Cheers, Chris

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

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

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

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

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

Hello, I've just released a new module called PageimageSource which effectively supersedes PageimageSrcset. I've wanted to rewrite this module for a while now, to remove some features that I feel aren't necessary (e.g. UIkit widths / portrait mode), and have a more stripped back module that is more focused on specific functionality. I'd hoped to be able to do this by having a version 2.0.0, indicating breaking changes, but PW doesn't indicate this when upgrading, so the situation where users upgrade and things break would almost certainly happen. I therefore decided to rewrite the module and release it under a different name. I don't expect to do any more work on PageimageSrcset, but will apply any fixes as required. If you are starting from scratch on a project, PageimageSource is the one to use. If you are thinking to migrate a project using PageimageSrcset to PageimageSource, this list of changes should hopefully allow you determine if it is possible: The sizes() method/property has been removed The portrait mode has been removed (still possible through settings though - see the PageimageSource README for an example) UIkit widths -> sizes has been removed All the debug stuff has been removed The render() method behaves differently. It is more geared toward a <picture> implementation (requested by @teppo) Basically if all you've used is the default configuration and the srcset property, migration shouldn't cause any issues. Pretty much any other situation isn't suitable for migration. Cheers, Chris

I've been meaning to revise PageimageSrcset for a while now, to remove some features that I felt were unnecessary and to implement a better rendering strategy. The result is PageimageSource. What does it do? It provides a configurable srcset method/property for Pageimage It allows WebP to be enabled for images it generates. It allows Pageimage:render() to return a <picture> element It provides a Textformatter that replaces <img> elements with the output of Pageimage:render() Although it is based on a current module, this should still be considered beta and not used in production without a prior development stage. Here's the README: PageimageSource Extends Pageimage with a srcset property/method plus additional rendering options. Overview The main purpose of this module is to make srcset implementation as simple as possible in your template code. For an introduction to srcset, please read this Mozilla article about responsive images. Installation Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.165 and PHP >= 7.3 are required to use this module. Configuration To configure this module, go to Modules > Configure > PageimageSource. Default Set Rules These are the default set rules that will be used when none are specified, e.g. when calling the property: $image->srcset. Each set rule should be entered on a new line, in the format {width}x{height} {inherentwidth}w|{resolution}x. Not all arguments are required - you will probably find that specifying the width is sufficient for most cases. Here's a few examples of valid set rules and the sets they generate: Set Rule Set Generated Arguments Used 320 image.320x0-srcset.jpg 320w {width} 480x540 image.480x540-srcset.jpg 480w {width}x{height} 640x480 768w image.640x480-srcset.jpg 768w {width}x{height} {inherentwidth}w 2048 2x image.2048x0-srcset.jpg 2x {width} {resolution}x How you configure your rules is dependent on the needs of the site you are developing; there are no prescriptive rules that will meet the needs of most situations. This article gives a good overview of some of the things to consider. When you save your rules, a preview of the sets generated and an equivalent method call will be displayed to the right. Invalid rules will not be used, and you will be notified of this. WebP If enabled, WebP versions of the image and srcset variations will be generated and these will be returned by Pageimage::srcset(). As with the default implementation, the image with the smaller file size is returned. In most cases this is the WebP version, but sometimes can be the source. Make sure to experiment with the quality setting to find a value you find suitable. The default value of 90 is fine, but it is possible that lower values will give you excellent kB savings with little change in overall quality. For more information on WebP implementation please read the blog posts on the ProcessWire website. Rendering These settings control how the output of Pageimage::render() is modified. Use Lazy Loading? When enabled this adds loading="lazy" to the <img> attributes. It is useful to have this on by default, and you can always override it in the options for a specific image. Use the <picture> element? When enabled, the <img> element is wrapped in a <picture> element and <source> elements for original and WebP variations are provided. This requires WebP to be enabled. For more information on what this does, have a look at the examples in Pageimage::render() below. Remove Variations If checked, the image variations generated by this module are cleared on Submit. On large sites, this may take a while. It makes sense to run this after you have made changes to the set rules. Please note that although the module will generate WebP versions of all images if enabled, it will only remove the variations with the 'srcset' suffix. Usage Pageimage::srcset() // The property, which uses the set rules in the module configuration $srcset = $image->srcset; // A method call, using a set rules string // Delimiting with a newline (\n) would also work, but not as readable $srcset = $image->srcset('320, 480, 640x480 768w, 1240, 2048 2x'); // The same as above but using an indexed/sequential array $srcset = $image->srcset([ '320', '480', '640x480 768w', '1240', '2048 2x', ]); // The same as above but using an associative array // No rule checking is performed $srcset = $image->srcset([ '320w' => [320], '480w' => [480], '768w' => [640, 480], '1240w' => [1240], '2x' => [2048], ]); // The set rules above are a demonstration, not a recommendation! Image variations are only created for set rules which require a smaller image than the Pageimage itself. This may still result in a lot of images being generated. If you have limited storage, please use this module wisely. Pageimage::render() This module extends the options available to this method with: srcset: When the module is installed, this will always be added, unless set to false. Any values in the formats described above can be passed. sizes: If no sizes are specified, a default of 100vw is assumed. lazy: Pass true to add loading=lazy, otherwise false to disable if enabled in the module configuration. picture: Pass true to use the <picture> element, otherwise false to disable if enabled in the module configuration. Please refer to the API Reference for more information about this method. // Render an image using the default set rules // WebP and lazy loading are enabled, and example output is given for <picture> disabled and enabled echo $image->render(); // <img src='image.webp' alt='' srcset='image.jpg...' sizes='100vw' loading='lazy'> /* <picture> <source srcset="image.webp..." sizes="100vw" type="image/webp"> <source srcset="image.jpg..." sizes="100vw" type="image/jpeg"> <img src="image.jpg" alt="" loading="lazy"> </picture> */ // Render an image using custom set rules echo $image->render(['srcset' => '480, 1240x640']); // <img src='image.webp' alt='' srcset='image.480x0-srcset.webp 480w, image.1240x640-srcset.webp 1240w' sizes='100vw' loading='lazy'> /* <picture> <source srcset="image.480x0-srcset.webp 480w, image.1240x640-srcset.webp 1240w" sizes="100vw" type="image/webp"> <source srcset="image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w" sizes="100vw" type="image/jpeg"> <img src="image.jpg" alt="" loading="lazy"> </picture> */ // Render an image using custom set rules and sizes // Also use the `markup` argument // Also disable lazy loading // In this example the original jpg is smaller than the webp version echo $image->render('<img class="image" src="{url}" alt="Image">', [ 'srcset' => '480, 1240', 'sizes' => '(min-width: 1240px) 50vw', 'lazy' => false, ]); // <img class='image' src='image.jpg' alt='Image' srcset='image.480x0-srcset.webp 480w, image.1240x0-srcset.webp 1240w' sizes='(min-width: 1240px) 50vw'> /* <picture> <source srcset="image.480x0-srcset.webp 480w, image.1240x0-srcset.webp 1240w" sizes="(min-width: 1240px) 50vw" type="image/webp"> <source srcset="image.480x0-srcset.jpg 480w, image.1240x0-srcset.jpg 1240w" sizes="(min-width: 1240px) 50vw" type="image/jpeg"> <img class='image' src='image.jpg' alt='Image'> </picture> */ // 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"> TextformatterPageimageSource Bundled with this module is a Textformatter largely based on TextformatterWebpImages by Ryan Cramer. When applied to a field, it searches for <img> elements and replaces them with the default output of Pageimage::render() for each image/image variation. Assuming a default set of 480, 960 and lazy loading enabled, here are some examples of what would be returned: Example <figure class="align_right hidpi"> <a href="/site/assets/files/1/example.jpg"> <img alt="" src="/site/assets/files/1/example.300x0-is-hidpi.jpg" width="300" /> </a> </figure> WebP enabled <figure class="align_right hidpi"> <a href="/site/assets/files/1/example.jpg"> <img alt="" src="/site/assets/files/1/example.300x0-is-hidpi.webp" width="300" srcset="/site/assets/files/1/example.300x0-is-hidpi.webp 480w" sizes="100vw" loading="lazy" /> </a> </figure> <picture> enabled <figure class="align_right hidpi"> <a href="/site/assets/files/1/example.jpg"> <picture> <source srcset="/site/assets/files/1/example.300x0-is-hidpi.webp 480w" sizes="100vw" type="image/webp"> <source srcset="/site/assets/files/1/example.300x0-is-hidpi.jpg 480w" sizes="100vw" type="image/jpeg"> <img alt="" src="/site/assets/files/1/example.300x0-is-hidpi.jpg" width="300" loading="lazy" /> </picture> </a> </figure> Because the variation is small - 300px wide - the srcset only returns the source image variation at the lowest set width (480w). If the source image was > 1000px wide, there would be a variation at both 480w and 960w. PageimageSrcset This module is built upon work done for PageimageSrcset, which can be considered a first iteration of this module, and is now deprecated. Migration PageimageSource is a simplified version of PageimageSrcset with a different approach to rendering. Most of the features of the old module have been removed. If you were just using $image->srcset(), migration should be possible, as this functionality is essentially the same albeit with some improvements to image variation generation.

Hi @Scar, My apologies, I thought I was getting notifications for this thread but I wasn't! You need to upgrade to PHP 7, PHP 7.3 at a minimum. The spaceship operator <=> that is used is a PHP 7 addition. I'll add this as an installation condition on the module. Cheers, Chris

Hi @cjx2240, I've tried to replicate this without success. I tried adding another account with a valid token from a different account, and I just got the 'User could not be added' response. Adding the second user with an incorrect token should not have resulted in a record being added to the database - I'm sure that this is what has caused the subsequent issues. It sounds like the original user details were partially overwritten with the new (incorrect) ones. No idea how this could've happened. Are there similarities in the usernames/ids? Are the two accounts linked in some way on the IG side? Cheers, Chris