Peter Knight

I have some width and height restrictions on my images field so the image gets uploaded and resized. In this case I'd assume anything specified in the gets applied. But i'm only guessing.

Is there a way to make JPGs progressive by default via the API? I've added the following to my site/config.php file but user-uploaded images are often displayed as non progressive. $config->imageSizerOptions = array( 'upscaling' => true, // upscale if necessary to reach target size? 'cropping' => true, // crop if necessary to reach target size? 'autoRotation' => true, // automatically correct orientation? 'interlace' => true, // use interlaced JPEGs by default? (recommended) 'sharpening' => 'soft', // sharpening: none | soft | medium | strong 'quality' => 95, // quality: 1-100 where higher is better but bigger 'hidpiQuality' => 60, // Same as above quality setting, but specific to hidpi images 'defaultGamma' => 0.5, // defaultGamma: 0.5 to 4.0 or -1 to disable gamma correction (default=2.0) ); Thanks

Lovely work as usual. Well done.

If you want to limit the amount of posts listed on a page, just use the 'limit=X' API call in your selector. I think the docs are a little broken at the moment as a new site has just been launched but there should be plenty of examples available. How are you handling categories? Can you screengrab your tree structure ?

Does anyone know if all the old URLs that Google had indexed have been updated to the new URLs? If not, there'll be a pretty big dive in SEO rankings. As an example, I was searching for some API info and was brought to this page https://www.google.com/search?q=processwire+selector+limit&rlz=1C5CHFA_enIE731IE731&oq=processwire+selector+limit&aqs=chrome..69i57j0.6332j1j7&sourceid=chrome&ie=UTF-8 If you click on the search result, you'll be taken to a 404 page etc.

A necessary evil ? I'm fully locked in

The only issue I've ever had with Transmit is with regards to folder syncing. They may have solved it now but at the time they didn't think it was a bug. Basically on Dreamweaver, I can upload a single file that's several directories deep and DW will auto-create the necessary parent folder. On Transmit, this wasn't (or didn't used to be) the case and I had a scary moment where a few PHP files landed where they shouldn't. Transmit also used to have a super IOS app which they are shelving. My favourite FTP application ever was actually an app called Fetch back in early 90's. When a file transfer was in progress, there was a cute dog animation ?

Transmit by Panic is also good.

Good excuse to use Jumplinks here ?

I think the site is a huge step forward. Nice work ? IMHO it should go live ASAP and changes and bug fixes could be streamed in incrementally My main points would be: Text It seems 'wordier' that the current site. On almost every page I'm hit with a wall of text. We should have more screenshots on internal pages. Screenshots I think we've lost something with the wall of text and more emphasis should be put on the screenshots. I think you should loose the iMac mockup and replace with a simple collection of 10 or so screenshots which a user can cycle through. None of my clients has ever tried PW based on a description of the CMS. In contrast, almost every one has been an instant fan of the simplicity of the UI. I've had clients who were new to PW fire up the initial tree view and become instant fans. I think the essential simplicity of ProcessWire has been lost in an effort to describe ProcessWire. Pictures and 1,000 words and all that etc... Video One of the things that attracted me to PW was Ryan's video where he spoke about the CMS and what it means / stands for. It was sincere, clear and honest without hyperbole. I just rewatched it and it's still a very compelling piece of video and 100% of what is said is still relevant. Of course the screengrabs are out-dated but that didn't stop me exploring PW and diving in at the time. Is it worth including this and later on re-doing it? Edit: I found the video on the new site ? API examples This is subjective but I'd rather the API samples were a little more user-friendly in tone and presentation. An example I like is on Stripe.com https://stripe.com/ie If you scroll down the the section 'Developers First' they have a lighter background and a nice way to flick between the different methods Zooming text That's the only part I'd 100% change. It's too gimmicky for my tastes. But seriously - good work. ?

Hi Mike Must be an out-dated version of Jumplinks (1.5.48) The Examples link goes here: https://rockett.pw/jumplinks/examples

Hi Mike When creating a jumplink, there's a link to your site for examples. Currently generating a 404 error

Correct. I am using echo $photo_header->srcsetUrls['smallest']; If I use echo $photo_header->srcsetUrls; there is an error but it only shows up in the network tab. The images seem to still work but they could be cached versions.

That's it. Removing the [0] at the end worked. Many thanks ?

Yep - I think it's all good. <div data-sizes="auto" data-bgset="/site/assets/files/1089/adams-cubes.-crop-staff-photo.1200x550.jpg 1200w, /site/assets/files/1089/adams-cubes.-crop-staff-photo.800x366.jpg 800w, /site/assets/files/1089/adams-cubes.-crop-staff-photo.600x275.jpg 600w, /site/assets/files/1089/adams-cubes.-crop-staff-photo.400x183.jpg 400w" class="uk-width-uk-width-1-1 staff-pic uk-first-column lazyloaded" style="background-image:url('/site/assets/files/1089/adams-cubes.-crop-staff-photo.1200x550.jpg') ;"> Have cleared the cache, refreshed from small size and expanded that way.

I've been using LazySizes manually for a while and wanted to try your Module. Can I check that the following is setup correctly? I'm applyng this is a background image which is new to me. First of all, I have been setting a variable of photo_header which uses a named, cropped image of 1250x550 <?php $photo_header = $page->image_staff_header->getCrop('crop-staff-photo'); ?> My actual html which outputs this image looks like this (pre MarkupSrcSet) <div class="uk-width-uk-width-1-1 staff-pic" style="background-image:url(<?= $photo_header->url?>);"> When I apply my MarkupSrc set, I think this is the proper way <div data-bgset="<?php echo $photo_header->srcset('1200x550,/1.5,/2,/3'); ?>" data-sizes="auto" class="lazyload uk-width-uk-width-1-1 staff-pic" style="background-image:url(<?php echo $photo_header->srcsetUrls[0]; ?>);" > and it does produce the following... <div data-bgset="/site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.1200x550.jpg 1200w, /site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.800x366.jpg 800w, /site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.600x275.jpg 600w, /site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.400x183.jpg 400w" class="uk-width-uk-width-1-1 staff-pic uk-first-column" style="background-image:url(/site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.1200x550.jpg);" > However, I notice that when I inspect the Div above in Chrome, I always seem to have the same image regardless of device width element.style { background-image: url(/site/assets/files/1089/adams_-_cubes-1.-crop-staff-photo.1200x550.jpg); } Is this right? Surely I should be seeing different image sizes above? Cheers @tpr

Hi all Just wanted to wish everyone who celebrates it a very Merry Christmas. Thanks to everyone on the forums for all the time and support over the year and all the answers, help and general banter. 2019 is hopefully going to be like 2018. Lots of learning, lots of Processwire, lots of great new Processwire developments. Anyway - have a good one ? P

That's pretty cool. And new to me too. I'll try that tomorrow and file under 'new stuff'. In the meantime, Robin's observation had me back on track.

That was it. Thanks ?

Hi I'm unsure why my code below doesn't limit the results to 3 as specified. I have a Repeater Matrix (pro fields) on my page with 10 items and I want to echo out slides 2,3,4 only IE Start from the second slide and limit to the next 3 $items = $page->matrix_slider('start=1,limit=3'); foreach($items as $slide) { echo " <div class='uk-width-1-1 uk-width-1-3@s'> <div class='desk-wrap uk-text-left'> <a href='{$slide->url}'><img src='{$slide->images->first()->size(640,320)->url}'></a> <div class='desk-wrap-content'> <h4><a href='{$slide->url}'>{$slide->title}</a></h4> {$slide->body_mini}<br/> <a href='{$slide->url}' class='uk-button uk-button-primary'>Read more</a> </div> </div> </div> Thanks

Hi @Michkael I haven't read back through the previous posts so apologies if this is addressed above by someone else. Responsive Images I primarily use UIKit (v3) for my sites and one thing I really like is that images are responsive by default and don't require any extra markup. This is particularly useful for clients because they don't have to apply any CSS to their images. I like to keep things super-simple for my clients to save them having to remember CSS class names and it also keeps my support times down. Blog Overview Structure My blog 'Overview' page is very simple and here's a simple wireframe. To have the blog overview page populate with content, I am only asking my clients for a few simple items Create a page with template=blog-post Add a preview image (the thumbnail above) to an images field Complete a field called blog-summary The key thing here is really how you handle the preview image and there's a couple of ways to do this as outlined in the help docs FIRST IMAGE You can can tell your client that the first image in an image file will always be the preview thumbnail. This has worked well for me. // grab and output first image $image = $page->images->first(); if($image) echo "<img src='$image->url'>"; or IMAGE WITH TAG You can tell your client to 'tag' an image within an image field to make it the preview thumbnail. That works well too. // retrieve first image with tag 'mytag' $image = $page->images->getTag('mytag'); or SPECIAL IMAGE FIELD You could always create a specific images field just for the thumbnail and limit it to 1. That way your client has zero configuration. I know some of the guys like to keep their fields to a minimum and usually I too try to avoid this. I make a call based on the actual client and their level of experience with CMS etc. Blog Post Structure On the actual blog post, I almost always have the preview image as the first image in the post. Crucially, this is added automatically by my PHP / templating. IE client only adds an image once for it to be both thumbnail intro image For the other images within the body of a post (number 2 and 3 below), it's up to the client to add these to the images field and then apply via the text editor etc. So I never run into the issue you mentioned re CSS and images. I know there are ways to add CSS to the CK Editor and ask the client to apply them but I try to steer clear of that. To me, a CMS is a content tool. Not a design tool. Telling clients they have formatting options within the CKEditor field beyond H1, H2 etc opens up the possibility for them to get 'creative' and can quickly make the site content look messy. If I really, really had to apply CSS to the images within the body field, I would probably look at something called field templates which was announced a while back. I can't recall but i *think* this allows you to specify a mini field template. Within that you could probably target your images with something like .my-body-template img { // css rules } Might be worth a look.

@ryan Can you clarify how those images options are accessed? I've installed the Module, have the latest ListerPro etc but am not sure where this appears within the UI.

I'm looking at the Sanitizer API and don't see a way to echo a field as all lower case. Is that an issue? It seems we can convert to lower case but only if it's separated by an underscore or a hyphen Thanks

Looks great. Are there plans to also allow multipliers on the front end?

Is this image a general image that appears within the main blog content. Or is it the thumbnail image which is used on some overview pages to represent the main thumbnail image of an article/post ?