happywire

Another very important find I just made that might be helpful for others as well. There is no need to upload a webp version of an image in the admin panel if you have already uploaded the jpg version of it to that page. As long as the webp versions of that image adhere to the variations naming, meaning filename DOT width x height DOT file extension, they will be served by ProcessWire! That is scary but also awesome. Not sure yet. For what I am trying to do though, that is great news. Now I can just pull the jpg variations array, swap the file extension for webp, have my srcset array for webp, done. Well one thing though. With this approach there will be no "official variations" of webp versions in ProcessWire. Meaning one will not be able to work with "variations" in the code or dump them. Ideally it would be great if given the original filename one could add variations of different file types to the same variations array. Something like this if you dump an $image. $image info path url array "variations" jpg image.0x260.jpg image.2400x360.jpg ... webp image.0x260.webp image.2400x360.webp ... png image.0x260.png image.2400x360.png ... In the admin panel, when clicking on Variations for an image, it would kind of be helpful to include an "add variation" button where then users can add variations of different file types to the original image.Perhaps with this approach also different versions of the same image, i.e. a 300x300 version with low quality and a 300x300 version with high quality could be included. But I think this is already possible by just including one more DOT and simply have hq (high quality) and lq (low quality) in front of it. Meaning filename DOT lq DOT width x height DOT file extension and then filename DOT hq DOT width x height DOT file extension. Just me thinking out loud.. and more testing to be done. ?

Does it install stuff through a live stick/cd or does one need the OS to then install ninite to then have ninite install software? Also in case it has a live usb/sick version that can install stuff I guess it would need to be connected to the internet to get all the sources? I mean does ninite run on an empty partition without OS? If not, how could it be useful for resetting Windows? Perhaps I misunderstand you. Its purpose is to install and update, not sure how that is handy for resetting the OS. I guess it can be handy once the OS is restored, meaning freshly installed on an empty and formatted partition. In that aspect, yes sure, I guess it can be useful. Though only after firewall and anti-virus have been installed, still offline, with all rules in place. Comes to mind, some of the software do have "oh while you install this we are also going to set your default bookmarks, default browser and slap on another anti-virus on your system", and that coming up during the install options. Would be great if ninite defaults to not choosing such options, i.e. not installing 3rd party apps. Fingers crossed.

Have webp support enabled as per this post. Thank you for that! Now I have just installed TracyDebugger and if it is on I cannot upload a new image in the webp format. No worries I can disable TracyDebugger when I upload new webp images to a page. However it would be great if webp support can land in ProcessWire core somehow. https://caniuse.com/#feat=webp looks great to me with the (obvious) exception being Safari. But we now have Edge, Firefox, Chrome and Opera onboard, so that is great news.

I am not sure ninite can revert to a previously created, possibly clean image of the OS and installed software and its settings. Had a quick look, seems like one can tick the options and install all the stuff. However once you have installed stuff and then installed one more app that messed up the whole OS I am not sure ninite can revert to a previous state of the OS. Never used it so don't know, however I could not find anything about it on the website. Often, when setup correctly and afterwards an OS image is made, it is not necessary to completely reset Windows. Been there, done that, too many times. Just slap the previous clean image on and all your OS and software and its settings and the registry are fine again. Naturally given the image is clean. Takes about 2 - 5 minutes to revert to a previously made image. So the best time to make a first image is right after you have installed Windows again. Also it might be a good idea to format and clean the partition you are installing Windows to. I used to do this with Gparted Live. In fact I have a partition just for the OS and a separate partition for all data. Like this I do not have to go into numerous folders on the OS partition to backup. I just have my data on a partition that as nothing to do with the OS. Also, not sure if you do this, but I never had internet access on while installing Windows.

Heads up. If you run ProcessWire with TracyDebugger inside Devilbox you need to make sure you have Output Mode set to DEVELOPMENT, otherwise you will not see the Debug Bar.

On Windows I regularly use Macrim Reflect Free to make an image of the OS and registry state before I make changes to the system, then when I don't like it I just slap the clean image on and have all changes reverted. Do look into https://www.macrium.com/reflectfree it will save you time and hassle. All the best. Regarding not having https, I am not sure if that is a good way to go forward. I think Chrome even now has something built in that will either give you a warning in the console or hinder you from doing local work when you are not on https. Don't quote me on it, but the general motion is to do everything via https.

Sorry to hear neither Linux nor Devilbox is working for you. Regarding Linux, what distro have your tired? I am on Kubuntu and super happy with it. Started using it beginning of this year. Yes sure it is an uphill battle at first but then when you get into it it is just fab. I have been (and still use it as times) a long time Windows user, XP, 7 then 10. Used Macrium Reflect a lot to have clean images and not suffer from Windows rot, restrictive firewall rules and Pana cloud. With this it all works fine to this day. Though lately for web development my workflow shifted from UI tools to command line tools. I started to use Cygwin a lot, well to do stuff that I could natively do on a Linux box. A couple month later when I had to get a new laptop for work I slapped on dual boot onto that, Windows 10 and Kubuntu. Well so far I booted into Windows about 3 or 4 times, the rest of the time I am on Linux. Even have a shared partition for my data so that I can develop from both OS and have the files and folders working. Why am I saying this? I am not trying to convince you are tell you that Windows is bad. Just saying I did switch and just find it very convenient to work with. Also I am sure there is quite a few people here as well as other places on the web that can/will help you if you have something that does not work. Regarding Devilbox. Docker. Yes. Super nice to use. If you know how to. If.. Upon discovery of Docker I thought "oh great I can have my entire development setup in there, start it up and never think about it again". I was so wrong. Months and months of time invested, time not lost since I learned a lot, but time spent being really quite frustrated. Just like you say. PHP modules. Connecting hosts. Config files missing. Nginx config. And so on and on and on.. I always thought, "yes nice I can learn this and set it up myself". Well for smaller things it did work, but for something like I want to be able to do, i.e. freely switch components while having my work files and configs left intact, well that was a whole different league. Also, I always thought, "nah I don't need something from someone else, I don't need another tool, I can do this myself". Turns out, it was too much for me to get right. Just like you say, error messages during build, those lead to SO questions with no answer, going to GitHub to file an issue only to have that closed the next day with a kind note "go ask in the Docker community or on SO", going in circles, mad times, unhappy times, and most of all times without writing a single line of PHP, HTML, CSS or JS. And that in the end was what got to me the most. Not being able to get on with work but having to fiddle with some damn settings that in order to understand those I would have to read books on. And so after this, I might call it a bit of a dark time, I gave in and gave Devilbox a shot. And there it was. I read 2 pages of the manual, not more and it is running. Every time I start it up I have all the things and certs created automatically, am on https, everything is super fast and super smooth and now, at times, I keep asking myself, "why have you not tried this first". Some things are left for people who have been doing that for ages and know the score. I do web development and do not setup servers or backend environments, have no clue about PHP modules or whatever else is needed to make neat and nice sites with whatever I am working at the moment. Some things a better left to people that know this stuff in and out. So given your issues with Devilbox and https, have you seen this? https://devilbox.readthedocs.io/en/latest/support/troubleshooting.html Or have you tried opening an issue with Cytopia. That person is an animal. I do not see a single issue not answered and even if it might be a tiny bit off Devilbox there is still some help given. Perhpas give that a shot and see how it pans out? To conclude, I guess all I want to say is "I feel your trouble" as I have been there and me too I was close to giving up and giving in. But then at the very last moment there was ray of light at the end of this dark tunnel, I clinged onto that and today I stand on a lovely glade and can enjoy the scenery.

[solution] ========================================================= This is probably more PHP than ProcessWire. <?php namespace ProcessWire; // ready.php if ($page->images) { foreach ($page->images as $image) { var_dump($image); } } The var_dump looks like this. Now when I do <?php namespace ProcessWire; // ready.php var_dump($image->variations); var_dump($image['variations']); I get NULL and bool(false). Ok for the 'variations' key I see it holds an array, is there the reason I cannot var_dump its values? Yes I do know that there are methods for this, getAllVariations() and getAllVariations() with $options. When I do <?php namespace ProcessWire; // ready.php dump($image['filename']); dump($image->filename); I get the name of the file just fine. Ok, wait. This is not only when I do that with an $image. Similar things happen with I try to var_dump a $page for example. <?php namespace ProcessWire; // ready.php var_dump($page); var_dump($page['created']); // works fine var_dump($page['hooks']); // bool(false) var_dump($page['data']); // bool(false) The var_dump($page) returns this. So inside the $page object I only seem to be able to access the keys and values that are not nested. Anything that is a key and has an array as value will tell me NULL or bool(false). Why is that and how could I var_dump ['hooks'], ['data'] of a $page or ['variations'] of an $image? I used to use var_export a lot but get the "var_export does not handle circular references" warning a lot with ProcessWire. So I started using var_dump but there face borders where I simply cannot seem to access properties of an object.

Aha, so each side of the square has the same length, so if I put 'gridSize'=>250 then each side of that preview in the admin panel should be 250px long? Regardless of gridSize, when I put <?php namespace ProcessWire; // config.php $config->adminThumbOptions = array( 'width' => 200, 'height' => 0, ); into config.php the default image variation is not 200x0 both either 0x260 or 260x0. How can I get the default image variation to have a width of 180 or 200 and a proportional height please?

@Autofahrn Excellent! I figured that once the variants have the PW variations nomenclature they are added. However I was only ever in the admin panel and checked the "Variations" tab after making the variants. There they would only show up after hitting Save for that page. To be expected. So this lead me to think that the same thing goes for the frontend. My bad!! That is why I thought I have to Save each page in order for PW to a) put those into its db and b) make them show up as "Variations". Interesting that PW does not put the variations into its db. I thought they have to be there to be able to be shown. Just did a test, made variants of an image in the assets folder, var_dumped the variations for that page in the frontend and they are all there, without having to save them into the db or make PW save the page in the admin panel. Uff!! Great to know. This should be documented somewhere. Super nice.

@evan Thank you for your help. Let's assume this case. Using the Intermediate profile. I made a Gallery page, made a gallery-page.php file and connected it with a template file that is called "gallery-page". Now inside gallery-page.php I simply put var_dump($page) and that returns me the "gallery-page" object. There I can see the page object and its arrays. For example I can see that under the ['data'] key there is a ['path'] key that has a value of "/shared/httpd/intermediatewire/htdocs/site/assets/files/1016/". So far so good. In the admin panel, on the Gallery page I only upload the original image (hi-res) by hand. Hit Save and the default variation, 0x260 or 260x0, is being created, done. Not sue why sometimes 260x0 and other times 0x260 default image variation is being created. I don't mind since I don't want to work with these default variations. Let's assume I/user/client does this for all the images they like to have on that page, just upload original his-res image via admin panel. Now, external from ProcessWire, so not using image->size(), I run several image resizing/encoding/compression scripts/libs on that folder "/shared/httpd/intermediatewire/htdocs/site/assets/files/1016/". That creates exactly the versions (variations) of the original image I like to have, with the exact commands for the image resizing/encoding/compressions scripts that I like to give. These new versions (variations) of the original image also adhere to the ProcessWire naming scheme. Meaning original filename DOT width x height DOT file extension (jpg, png, webp, etc), i.e. sunshine.300x200.jpg will be created of original sunshine.jpg. Back to your example. Let's say I want to add this image. https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA13316 The original hi-res image is here original image In gallery-page.php I simply put this given this post I found https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA13316 <?php namespace ProcessWire; // inside gallery-page.php $page->of(false); $page->images->add('https://photojournal.jpl.nasa.gov/jpeg/PIA13316.jpg'); $page->save(); That indeed uploads the original image to the page (and also creates the default (260x0 or 0x260) variation). So this works but it is not really what I am after, albeit we are close already. Now, given I have manually, through the admin panel, uploaded the original (hi-res) images to the pages I want and ran all image resizing/encoding/compression scripts/libs on those folder folder I am left with "variations" of the original image. How can I, for example in ready.php now tell ProcessWire to do the following. a) Scan the assets folders for pages with images. b) If you find "variations" of an already uploaded original image then add those as "variations" to the page. c) ? What have I tried? Back to gallery-page.php I have tried this. Trying to add an already existing variation of an already uploaded image. <?php namespace ProcessWire; // gallery-page.php $imageVariation = '/pia13316.300x200.jpg'; $page->of(false); $page->images->add($imageVariation); $page->save(); This results in Error: Exception: Unable to read: /pia13316.300x200.jpg (in /shared/httpd/intermediatewire/htdocs/wire/core/Pagefile.php line 162). So ProcessWire cannot find the file. How can I tell ProcessWire where the image for that page is please? ? I tried putting it directly in the corresponding assets folder of the Gallery page, that did not work. I assume, being in gallery-page.php or ready.php I do not need to bootstrap ProcessWire through include './index.php'; any more, tried and it gave me an error, so leaving that out. Now one thing that happens with ProcessWire is that if there is an image with the variations naming scheme, filename DOT width x height DOT file extension inside any of the assets folders, ProcessWire will add that file as "variations" if that page is reloaded in the admin panel. So that is a somewhat good thing. ? But now let's say there are quite a few pages, each have images, the external image resizing/encoding/compressions scripts/libs ran on all those assets folders and created variations. Now in order for all those to be "linked" to ProcessWire I would have to re-visit all those pages in the admin panel, reload them and save them. Something I do not want to do. ? Therefore, ideally I am looking for something, ideally in ready.php, as I assume that runs on every page load, admin panel or frontend, that does scan the corresponding assets folders and adds the externally created variations. So, in ready.php (please tell me if another location is better) I would do something like this. https://processwire.com/talk/topic/4530-how-to-get-a-list-of-all-pages-recursiv-without-admin-pages/ https://processwire.com/talk/topic/1216-how-do-i-test-for-images/?tab=comments#comment-10877 <?php namespace ProcessWire; // ready.php $pageWithImages = $pages->find("images.count>0"); var_dump($pageWithImages); // Trying to get the array 'items' returns bool(false) var_dump($pageWithImages['items']); // Trying to get the array 'items' as object property returns NULL var_dump($pageWithImages->items); So I am unfortunately stuck at trying to access the object property "items". Given I can somehow access 'items' I would do.. foreach items - get assets path - get original images - get all variations - add variations to assets path - save page end foreach Do you have an idea why I cannot var_dump 'items' ? No clue. ? To conclude, I would be super happy about either you having "an idea" or code samples or links to tuts/forum posts/docs that would help me get this done somehow. New to ProcessWire and trying to wrap my head round how I can integrate this image workflow with ProcessWire. Any help much appreciated. ?

Thank you heaps! Excellent idea! Also thank you for having mercy with a ProcessWire newcomer. ? If I add $config->adminThumbOptions = array( 'width' => 180, // max width of admin thumbnail or 0 for proportional to height (@deprecated, for legacy use) 'height' => 0, // max height of admin thumbnail or 0 for proportional to width ); to config.php and upload a new image to the page I get a variation of a) filename then a DOT and then 260x0 then a DOT and the file format. e.g. image-waterfall.260x0.jpg b) the variation of the image itself being 260px wide and a proportional height value. So regardless of what I put into $config->adminThumbOptions the 0x260 default variation is being created. I am now wondering if that has to do with the 'gridSize' => 130, // Squared grid size for images (replaces the 'width' and 'height' settings) setting? If so, what is the squared grid size for images? Do I need to calculate the square root of the value I want, that cannot be, as then how would I specify what value I want for width for example. Confused but willing to learn this, hehe. edit: I changed values for gridSize and that would make default variations of double the height of the value for gridSize with a proportional width. So if I have gridSize 200 then I would get a variation of 0x400 in the filename and a file of 400 px height with a proportional width. So this gridSize setting is kind of beyond my understanding. What does gridSize do?

It really is that easy! Thank you! Great to know this, now that part makes a lot more sense, invaluable information.

Each image has variations. From those I create a srcset array. Having an item in there that is not needed/wanted is the issue. But you are right. I should not try to make ProcessWire behave in a certain way that would break/go against default functionality. Instead I will just skip adding that item to the array I am after. If, like you say, that default variation is always being created there is no use going against that.

And even after creation of the default image variation, there is no method or way to delete a single variation if I wanted to? I found http://cheatsheet.processwire.com/files/image-methods/image-removevariations/ but would need that to be able to do stuff like $image->removeVariations($imageVariation0x260) Curious if that also gets rid of the default variation.

How could I please stop ProcessWire from creating the default 0x260 image variation when I upload an image to a page? One way would be to hook into the "InputfieldFile::fileAdded" method, no? public function init() { $this->addHookAfter('InputfieldFile::fileAdded', $this, 'remove0x260Variation'); } public function remove0x260Variation($event) { // Get the object of the uploaded image $inputfield = $event->object; // Must be the "images" input field, otherwise return if($inputfield->name != 'images') return; // https://processwire.com/talk/topic/14840-create-pagefile-or-pageimage/?tab=comments#comment-133328 // but instead of doing arguments[0] we do argumentsByName('pagefile'), right?? $image = $event->argumentsByName("pagefile"); // And then in pseudo code I would try something like if ($image->width = 0 && $image->height = 260) { $image->remove; // or $image->delete; } } Or how else could I tackle this? What also comes to mind, the default image variation being created and eventually deleted would always happen in this case. So second part of question is, how can this creation and deletion process be avoided altogether and just have a flag somewhere that says "no default image variation needed"? edit: What I also found is that the width and the actualWidth of the default image variation are not equal, so I wonder what use it has to have a key for width and then another key for actualWidth, just wondering..

[solution] ========================================================= Trying to come up with a strategy to handle images. variations and webp versions thereof. From what I understand from the docs and posts here this can be done in the following ways. In a template on first page load of that template. In the admin panel on upload of an image with a hook intercepting the process. Given both a try and am not sure if this works for me or if I am doing something wrong. Things time out or the versions expected are not created. This more so with ImageMagick doing the encoding rather than the native image resizer. At this stage I would also do not know how to visually output verbose log of the encoding process. Now I guess there are following options.. 1. Local variations and webp versions are connected with pages and db Given I use ImageMagick locally to be able to pass it the options similar to here. https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/ I then have all the variations for a single or multiple images. How do I "sync" those with the db and the page I want those images and their variations to reside? How can I import prepared variations of an image into a page while not importing all variations as a single image? By giving the webp versions a certain filename suffix, could those also be made variations of the original image? I found this topic but that approach creates pages and possibly loads all images as a single image? I need to have the 1 original image and then other files as variations of that original image. Best would be if I could drop the original and all variations and webp versions into the assets folder for that page. Then simply do a refresh of that page in the admin panel and have a script connect the original, variations and webp versions with that page and the db. This so that I can then work with it in the page template with the images object. That should hold an array of let's say, all urls to all the images, all image filenames and ideally width and height values. The description would be given manually on the single original image for example. 2. Local files are uploaded with a module I have found http://modules.processwire.com/modules/jquery-file-upload/ Am wondering if that supports to upload 1 master image and read the variations/webp versions as such, perhaps by checking the image filename? 3.Local files are uploaded and managed with a module I have also found https://mediamanager.kongondo.com/. Same thing here, not sure if that supports what I am trying to get done. Manage one original image per page and assign that variations of it before I upload it. Ideally I like to see something like upload - image - variations and then be able to pick all variations from the corresponding assets folder - save, done. I can now use the images object for the page in the template and work with the images array. 4.Local files and all variations are uploaded as single images for the page in question This is simply done with the native upload for images. All images are singular and have no variations. Somehow getting option 1 working would be awesome. However if I am missing a concept here or misunderstand how files and images are supposed to be handled with ProcessWire then please let me know. At this stage I am not looking for output generating modules or solutions. But rather something that can perhaps easily add existing images to certain ProcessWire pages.

[solution] ======================================================== I installed the ImageSizerEngineIMagick module and am using @Soma 's hook to create image variations in the admin panel when uploading a new image. 1. How can I limit the ImageSizerEngineIMagick module to not create image variations that are above the original file's dimensions? For example I have this image. https://www.jpl.nasa.gov/spaceimages/details.php?id=PIA13128 Full resolution. https://photojournal.jpl.nasa.gov/jpeg/PIA13128.jpg Using Soma's hook and adding the image variation sizes I want to be created like this.. <?php // https://gist.github.com/somatonic/5685631 // not all the hook is inserted here, this is just to show the image size variations public function sizeImage($event) { $inputfield = $event->object; if ($inputfield->name != 'images') return; $defaultOptions = array( 'upscaling' => false, 'cropping' => false, 'quality' => 100 ); $image = $event->argumentsByName("pagefile"); $image->size(9000, 0, $defaultOptions); $image->size(7680, 0, $defaultOptions); $image->size(3200, 0, $defaultOptions); $image->size(2560, 0, $defaultOptions); $image->size(1920, 0, $defaultOptions); $image->size(1280, 0, $defaultOptions); $image->size(800, 0, $defaultOptions); $image->size(768, 0, $defaultOptions); $image->size(240, 0, $defaultOptions); $image->size(180, 0, $defaultOptions); } ..I get the following image size variations. This means that regardless of image dimensions there are variations created that are above the original file dimension. How can I tell the module or include what logic in the hook that I do not want to create image variations that are above the dimensions of the original image? 2. The original is max 2MB big and has a max width of 4801px. Having the quality set to 100 in the module I get images that have a bigger file size than the original at a lower dimension. An image variation of 1920px width is created with 2.9MB. An image variation of 2560px width is created with 4.4MB. An image variation of 3200px width is created with 6.0MB. Setting the quality to 90 following image variations are created. Does that mean I cannot put the quality setting of the module to 100 as otherwise image variations that have a higher file size than the original are being created at lower dimensions of the original? Does ImageMagick work like this with the quality being 100?

This is exactly what I am trying to do. Create image variations outside a page load, so not inside the template file but during the initial upload process in the backed/admin panel when then thumbnail is generated. Had a look at the docs you like for the Pageimage class but I am not sure how to use that info. Reading through this https://selftaughtcoders.com/from-idea-to-launch/lesson-14/how-to-use-classes-in-php/ and then for example inserting <?php $galleryImg = new Pageimage; $defaultOptions = array( 'upscaling' => false, 'cropping' => false, 'quality' => 90, ); $galleryImg->size(1280, 0, $defaultOptions); into _func.php of the Intermediate profile does not create the desired 1200px width image variation. Would be super grateful to learn how I can generate image variations during the initial upload process in the admin panel. Thank you.

@MoritzLost Great post, thank you. New to PW. I am having trouble getting the beginning of your function to work in the Intermediate profile. <?php // ########################## // I have this in _func.php function buildResponsiveImage(Pageimage $img, int $standard_width): string { $default_img = $img->maxWidth($standard_width); return '<img src="' . $default_img->url() . '" alt="' . $img->description() . '">'; } // ########################## // In a Gallery page I created and where I added a gallery-page template that does have the Images field I put this. // There I also added two images, both larger than 7000px width. <?php namespace ProcessWire; // gallery-page.php template file $content = $page->images; $content .= buildResponsiveImage($page->images, 1200); // ########################## // In the _main.php file I like to output the code in the main tag. <!-- main content --> <div id='content'> <h1><?php echo $title; ?></h1> <?php echo $content; ?> </div> "Fatal error: Uncaught TypeError: Argument 1 passed to ProcessWire\buildResponsiveImage() must be an instance of ProcessWire\Pageimage, instance of ProcessWire\Pageimages given". Thank you for any help or learning resources to get this right.

Yeah, someone else also did highly recommend to do that course. Have been watching the first couple hours through this site http://learnwebdev.net/ and had so many concepts suddenly make a lot of sense. Window object, this, execution context, lexical scope. Just the first 2h of that cleared up a lot of what I was missing all this time.

@louisstephens In that thread you linked I found and since I cannot edit my above post I meant that in fact the source from the later , "srcset, sizes and picture support" uses art direction instead of sizes and dpi, however I also read through the MarkupSrcSet thread and it does not seem correct to me at least, however I might be able to look into that repo to learn how image variations are created server-side so that I can have an image array to work with without affecting the frontend. If you are unsure, test the output with https://ausi.github.io/respimagelint/ it is the definite answer to having correct syntax when it comes to responsive images, be this using art direction or sizes.

That approach/code uses art direction as opposed to changing image sizes. When I started learning responsive images I also went for that approach thinking that having different source tags meant that each different source is a different size of the same image. Have a look at this detailed post https://dev.opera.com/articles/responsive-images/ . That code in the post you linked uses the "Changing image sizes, high-DPI images & art direction use case". It means that when you resize the browser window not the same image at a different size will be shown but a completely different one, one that you choose to show. This also means that when you resize that source will be downloaded again and again as you keep resizing, more requests, bad performance. However I do not have the need for art direction. I am after responsive images, the same identical image, albeit with a different size where I let the browser decide what version is best for the given viewport. That is the last example in that post I linked, the "Changing image sizes, high-DPI images & different image types use case". Like this, for example once you go from wide viewport to narrow, i.e. landscape to portrait, the smaller size of the image will only be downloaded once. When you go back into landscape mode the wider image is cached and not re-downloaded. To make all this more fun, different browsers handle this differently. If what I write does not make sense read through the 10 parts starting here https://cloudfour.com/thinks/responsive-images-101-definitions/ . That really helped me understand it properly.

This. I certainly need to create an image_array of all image variations and store that in the db. Found this topic. Alongside https://processwire.com/blog/posts/processwire-3.0.10-expands-image-resize-options/ and this part of the docs https://processwire.com/api/ref/pageimage/ . Now when I include something like this, having installed the ImageMagick module as per this post https://processwire.com/blog/posts/processwire-3.0.10-expands-image-resize-options/ <?php namespace ProcessWire; // gallery-page.php template file $content = ""; // $page->images; if (count($page->images)) { // the page has one or more images foreach ($page->images as $image) { // http://cheatsheet.processwire.com/files/image-methods/image-size-width-height-options/ // $defaultOptions = array( 'upscaling' => true, 'cropping' => true, 'quality' => 90 ); // $image->size($width, $height, $options) $defaultOptions = array( 'upscaling' => false, 'cropping' => false, 'quality' => 100 ); $img_size_9000 = $image->size(9000, 0, $defaultOptions); $img_size_8400 = $image->size(8400, 0, $defaultOptions); $img_size_8000 = $image->size(8000, 0, $defaultOptions); $img_size_7680 = $image->size(7680, 0, $defaultOptions); $img_size_6000 = $image->size(6000, 0, $defaultOptions); $img_size_5400 = $image->size(5400, 0, $defaultOptions); $img_size_4096 = $image->size(4096, 0, $defaultOptions); $img_size_3840 = $image->size(3840, 0, $defaultOptions); $img_size_3200 = $image->size(3200, 0, $defaultOptions); $img_size_2560 = $image->size(2560, 0, $defaultOptions); $img_size_2048 = $image->size(2048, 0, $defaultOptions); $img_size_1920 = $image->size(1920, 0, $defaultOptions); $img_size_1600 = $image->size(1600, 0, $defaultOptions); $img_size_1280 = $image->size(1280, 0, $defaultOptions); $img_size_1140 = $image->size(1140, 0, $defaultOptions); $img_size_1024 = $image->size(1024, 0, $defaultOptions); $img_size_960 = $image->size(960, 0, $defaultOptions); $img_size_900 = $image->size(900, 0, $defaultOptions); $img_size_800 = $image->size(800, 0, $defaultOptions); $img_size_768 = $image->size(768, 0, $defaultOptions); $img_size_640 = $image->size(640, 0, $defaultOptions); $img_size_525 = $image->size(525, 0, $defaultOptions); $img_size_425 = $image->size(425, 0, $defaultOptions); $img_size_320 = $image->size(320, 0, $defaultOptions); $img_size_240 = $image->size(240, 0, $defaultOptions); $img_size_180 = $image->size(180, 0, $defaultOptions); $content .= "<a href=" . $img_size_9000->httpUrl . ">$img_size_9000->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_8400->httpUrl . ">$img_size_8400->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_8000->httpUrl . ">$img_size_8000->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_7680->httpUrl . ">$img_size_7680->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_6000->httpUrl . ">$img_size_6000->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_5400->httpUrl . ">$img_size_5400->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_4096->httpUrl . ">$img_size_4096->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_3840->httpUrl . ">$img_size_3840->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_3200->httpUrl . ">$img_size_3200->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_2560->httpUrl . ">$img_size_2560->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_2048->httpUrl . ">$img_size_2048->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_1920->httpUrl . ">$img_size_1920->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_1600->httpUrl . ">$img_size_1600->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_1280->httpUrl . ">$img_size_1280->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_1140->httpUrl . ">$img_size_1140->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_1024->httpUrl . ">$img_size_1024->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_960->httpUrl . ">$img_size_960->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_900->httpUrl . ">$img_size_900->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_800->httpUrl . ">$img_size_800->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_768->httpUrl . ">$img_size_768->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_640->httpUrl . ">$img_size_640->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_525->httpUrl . ">$img_size_525->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_425->httpUrl . ">$img_size_425->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_320->httpUrl . ">$img_size_320->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_240->httpUrl . ">$img_size_240->httpUrl</a>" . "</br>"; $content .= "<a href=" . $img_size_180->httpUrl . ">$img_size_180->httpUrl</a>" . "</br>"; } } and upload for example following image https://fee.org/media/24571/nasa_space_outer_universe-min.jpg and that being 7857 × 7462 pixels wide I get the following. 1. The image variations are not created during file upload in the backend. They are created only when I visit the Gallery page on the frontend. How can I create the image variations when uploading in the backend without touching the frontend? Doing this locally is not an issue, though if this is being done on the live site it won't be good. First time I loaded the Gallery page it crashed the local server, on 2nd load it would display the image variation links. 2. Each time I reload the Gallery page it does take some time to load, considerably more than usual (1-2 seconds), I assume this is due to the $image->size method being called and added to $content for each image size and this happens each time the page loads. 3. Despite the $defaultOptions set to upscaling=>false there are still httpUrls created for image variations larger than the original image. How can I only get httpUrls for image variations that are not larger than the original image? So in this example I would expect to only get httpUrl up to 7680px width. Thank you. I will have a look at this right this moment, still trying to figure out how to create image variations in the backend/admin panel rather than on first time of page load.

Thank you, will do. No worries at all.