SamC

I'm sure there will be a solution, but maybe a core contributor would have a better chance than myself at narrowing down the exact problem. I'll give it a shot though.

@esl I think it's a bug too. Removing those values is not a solution for me neither. But I can't work out why it works at min-width 500 and not 1000. I need users not to be able to crop less than 2400px wide (or upload images less than 2400px wide).

@esl I believe these are causing your problems.

Ok, no solution yet, but for information, these are the version numbers of the two sites I am building: ProcessWire 3.0.41 - cropping works (1st site) ProcessWire 3.0.33 - not working (2nd site) The sites have no fancy .js or anything, just a toggle class for the mobile menu. They are actually relatively similar brochure style sites, no added modules, just with different templates and CSS. I will try and upgrade the older version hopefully this week to see if this is the problem. So I tried a bit of troubleshooting, please note I am only working on the image widths here: 1) I upgraded the 2nd site to v3.0.42, cropping still not working. I noticed the only difference here is that on one site I have set max/min dimensions set on my mainImage field. 2) I changed max-width AND min-width dimensions from 2400 to blank, went back to the page, cropping works. 3) Went back to settings, added max-width back to 2400, left min-width blank, went back to the page, cropping works. 4) Went back to settings, left max-width at 2400, changed min-width to 2399 and went back to the page. I tried setting the crop width in the actual modal window to 2399px AND 2400px (it allowed me to stretch the overlay box one extra pixel past the min allowed). Both didn't work. 5) Went back to settings, left max-width at 2400, changed min-width to 500. In theory, this means I can't physically crop the image any less then 500px wide. The resizable box didn't allow this so the behaviour worked as expected. Went back to the page, tried cropping the image at widths of 500px and full width of 2400px. Worked both times. 6) Went back to settings, left max-width at 2400, changed min-width to 2398. Cropping didn't work. 7) Went back to settings, left max-width back to 2400, changed min-width to 1500. Cropping didn't work. 8) Went back to settings, left max-width back to 2400, changed min-width to 1000. Cropping didn't work. 9) Went back to settings, left max-width back to 2400, changed min-width to 1400. Cropping didn't work. 10) (repeated step 5 to make sure it wasn't a random fluke). Went back to settings, left max-width at 2400, changed min-width to 500. Cropped image from 2500 x 1569 to 500 x 549. Cropping works. 10) Got bored. Now, in my case, I want a user to upload an image that is AT LEAST 2400px wide, but when cropping, ONLY allow to crop top and bottom (so the final image on the system is guaranteed to be 2400px regardless of height), hence me setting the min-width also to 2400px. Not sure what to conclude here, but something seems weird. In all cases, 'didn't work' means javascript error 'An invalid form control with name='width' is not focusable.'. 'Works' means no error in console. Tested on Win 10, Chrome Version 55.0.2883.87 m

Strangely, I just tried it on my new local dev portfolio site, cropped a 4000x3000 image. Worked just fine. On my other dev site, the cropping does not work, same issue as before. Need to investigate further this week.

Maybe the more frequent posters would have a better idea? @ryan @adrian @Soma @LostKobrakai to mention a few. This is a problem though if clients can't crop an image.

Thanks for the replies. If it was a paid site then media manager looks awesome. I'll cobble something together.

Hi, I've been reading this and it seems quite interesting: I'm not sure how to go about the following so could do with a bit of advice on how other people handle this: 1) Upload or link to a file as an attachment to a page whilst editing. For example, I can quite easily use the file type field and just add it to the template. Then when I edit a page, I can upload a file. However, what I really need is a way to (when editing a page), be able to either choose an existing uploaded file, or upload a new one (all word documents .doc/x). I tried creating a template 'downloads' (family - parent) with a second template 'siteFiles' (family - child), with a file type field on siteFiles in order to centralize some kind of 'downloads section'. But with this way, I had to manually create pages under 'downloads' one at a time for each file, mucho laborious. This isn't the way I want to do this. Ideally, the workflow would go something like this: 1) Log in. 2) Go to page > edit. Fill in title, body, etc... 3) Choose already uploaded file/upload new file from computer 4) If choose, then pick from tree 5) If upload, automatically create child page under downloads using newly uploaded file as page title Downloads - test.doc - test2.doc Any help or advice would be most appreciated! Bit lost here. Thanks.

That thread just descended into chaos! I'm in Surrey but could manage Bletchley area (would visit the computer museum at the same time to geek out a bit). Not sure I want to mission it up to Manchester. Although I live 20mins train ride from Waterloo, I hardly ever go to London either, too busy and hectic for my liking.

Just needed to do this, thanks @ryan

Just stopping by to wish all the other members a happy Christmas. Or if you don't celebrate Christmas, then a happy holidays! And if you don't have a holiday, maybe you'll get one next year :-p Been working on two websites concurrently with PW so pretty busy! Not been able to stop by here as much as I would have liked. On a plus note, both are now at the demo stage. I actually need to find some work in the new year as I'm kicking off my self employment again, so anyone wants to see the demo sites to see the kind of stuff I'm doing, then I'm happy to share in a PM. TBH, they're not highly technical, still more brochure style at the moment, but looking to move onto bigger and better things. Maybe a meetup in Surrey or something would help kickstart things a little. Have a good one people Sam.

Hi @adrian that's great, thanks for the info. I think it makes sense actually, no discussion needed.

Scratch that idea. I added a 2nd field for body images with unlimited uploads. Then when inserting via RTE the images just insert to this 2nd field. Seems more intuitive to me. I don't really need to select from other pages when I think about it. Admin for a basic page looks like: Title Main image Summary (RTE limited formatting options) Additional images (for body content) Body content (RTE full formatting options) Works great, another +1 for processwire in my book.

Hmmm, not working for me. I uploaded and installed module, set the root parent, but when I go to insert image via RTE, still defaults to the current page under 'If you would like to select images from another page, select the page below'. Not sure what I'm doing wrong here?

Awesome thanks

Thanks @adrian how do I try out your module from github? I'm only after something simple for starters. The paid module looks pretty good though too (but they'd have to spend £££), this site may have audio clips on it so managing could become tricky. It's a charity gig I'm doing for free (although building a new portfolio at the same time so I can get some self employed work again isn't altogether altruistic).

Hi, I needed a way to insert images into the RTE so I created a template (no file) called site-images and added a field to that called siteImages which is an image field with unlimited uploads (set to 0). The idea is that when in my body field, a user can click on the image icon and insert an image. So the popup happens and I am given the choice of the current image on the page (from mainImage field) and a 'select from page'. This is where I can select my 'Site images' page which was created with the site-images template. Basically, is there a way to set this page as the default option here? It's not very intuitive at the moment. Please see screenshot for example of what I'm talking about. Thanks in advance.

Ok, so I've gone for this approach. My images are being created in a few places and the templates are getting a bit unruly, so I thought I'd get this into a function. Of course, any improvements I can make are appreciated. The function and new news-index.php look like this now. // _func.php /** * * @param PageID $item * @param $img string (medium, large, xLarge) * @return $imgUrl string * */ function getImage($item, $img) { if ($item->mainImage) { switch ($img) { case 'medium': $img = $item->mainImage->size(750, 250, 'center'); break; case 'large': $img = $item->mainImage->size(1500, 500, 'center'); break; case 'xLarge': $img = $item->mainImage->size(2400, 800, 'center'); break; } $imgUrl = $img->url; return $imgUrl; } } // news-index.php <?php $entries = $pages->find("template=news-entry, limit=6, sort=-sort"); $firstItem = $entries->first(); $otherItems = $entries->not("$firstItem"); $pagination = $entries->renderPager(); $firstItemPublishDate = date('d/m/y', $firstItem->created); $firstItemCreatedBy = $firstItem->createdUser->displayName; ?> <style type="text/css"> .large-image-wrapper { background-image: url('<?php echo getImage($firstItem, 'medium'); ?>'); } @media screen and (min-width: 850px and max-width: 1499px) { .large-image-wrapper { background-image: url('<?php echo getImage($firstItem, 'large'); ?>'); } } @media screen and (min-width: 1500px) { .large-image-wrapper { background-image: url('<?php echo getImage($firstItem, 'xLarge'); ?>'); } } </style> <div class='large-image-wrapper'> <div class='title-wrapper'> <h1><a href='<?php echo $firstItem->url; ?>'><?php echo $firstItem->title; ?></a></h1> <?php if ($firstItem->summary) { echo $firstItem->summary; } ?> <div class='entry-info'> <span class='fa fa-calendar' aria-hidden='true'></span> Posted by <span class='entry-highlight'><?php echo $firstItemCreatedBy; ?></span> on <span class='entry-highlight'><?php echo $firstItemPublishDate; ?></span> </div> </div> </div> <div id="page-tabs-wrapper"> <div class='page-tabs'> <div class='upper'> <?php echo $pagination; ?> </div> </div> </div> <div id='news-row'> <?php foreach ($otherItems as $entry): ?> <?php $publishDate = date('d/m/y', $entry->created); $createdBy = $entry->createdUser->displayName; ?> <div class='news-column news-column-left'> <div class='news-index-image-wrapper' style='background-image: url("<?php echo getImage($entry, 'medium'); ?>")'> <div class='news-index-title-wrapper'> <h2> <a href='<?php echo $entry->url; ?>'><?php echo $entry->title; ?></a> </h2> <div class='entry-info'> <span class='fa fa-calendar' aria-hidden='true'></span> Posted by <span class='entry-highlight'><?php echo $createdBy; ?></span> on <span class='entry-highlight'><?php echo $publishDate; ?></span> </div> </div> </div> </div> <div class='news-column news-column-right'> <?php if ($entry->summary) { echo $entry->summary; } ?> <?php if ($entry->body): ?> <p class='read-more'><a href='<?php echo $entry->url; ?>'>Read full article <span class='fa fa-arrow-circle-right' aria-hidden='true'></span></a></p> <?php endif; ?> </div> <?php endforeach; ?> </div> <div class='page-tabs'> <div class='lower'> <?php echo $pagination; ?> </div> </div> // _images.scss .large-image-wrapper { padding-top: 0; @include media($tablet) { padding: 75px 0; } @include media($hidpi) { padding: 150px 0; } background-position: center; background-repeat: no-repeat; background-size: cover; } I have set a default image as suggested by @Zeka (awesome feature!) and my max upload width is 2400px, with min also being 2400px. The biggest size image I will ever display is 2400px (the xLarge size will just be cropped in height). Next step is making '<?php echo $created_by; ?>' into a link which lists all news items posted by that user. Not sure whether I'll end up with a URL like site.com/news/username/ or site.com/user/news/ or whatever. Cross that bridge when I get to it. Seems to work ok so far though. I still like the fact that I can focus on the design so much better than I could in other CMS's I've used.

Ok, the penny has dropped finally :-p I needed a default image so I could visualize how the page looked... <?php $publish_date = date('d/m/y', $entry->created); $created_by = $entry->createdUser->displayName; if ($entry->mainImage) { $image = $entry->mainImage->size(768, 280, 'center'); $thumbnail = $image->url; } else { $thumbnail = $assets . '/images/placeholder.jpg'; // <<< my page is full of these! } ?> I think that check for an image may be a good idea. Thanks people.

@Zeka thanks for the help. Here's what I've currently got so I thought the code should have been ok. Especially since I call the same size() function later in the code within the loop and it works fine.

Actually having another problem, that is, getting the mainImage field from the page being used for the highlighted item and then pass on resized options to generate a few CSS rules for a background image. Trying this: <?php $entries = $pages->find("template=news-entry, limit=6, sort=-sort"); $firstItem = $entries->first(); $otherItems = $entries->not("$firstItem"); $pagination = $entries->renderPager(); $small = $firstItem->mainImage->size(768, 256, 'center'); $large = $firstItem->mainImage->size(1500, 500, 'center'); $xLarge = $firstItem->mainImage; $smallBgImage = $small->url; $largeBgImage = $large->url; $xLargeBgImage = $xLarge->url; ?> ...but on line 7 ($small = $firstItem->id->mainImage->size(768, 256, 'center');) I'm getting an error: Fatal error: Uncaught Error: Call to a member function size() on null If $firstItem is an id (1017 in my case), I thought the above would work. I need to grab the mainImage field from the page that this id refers to, but only for the first item, the rest of the page works perfect (showing item 2 onwards).

Ok, thanks, I get it now.

Hi, I have a page which list news items but I wanted to be able to have the most recent one at the top as a featured news item. Like this: -- NEWS ITEM 1 -- - news item 2 - news item 3 - news item 4 I'm not sure how to list just one news item (most recent) and then list the rest underneath but skipping the first one, offset of 1. Here's the code so far: // news-index.inc <?php $entries = $pages->find("template=news-entry, limit=6, sort=-sort"); $pagination = $entries->renderPager(); ?> <div class='large-image-wrapper'> <div class='title-wrapper'> <h1><?php echo $title; ?></h1> </div> </div> <div id="page-tabs-wrapper"> <div class='page-tabs'> <div class='upper'> <?php echo $pagination; ?> </div> </div> </div> <div id='news-row'> <?php foreach ($entries as $entry): ?> <?php $publish_date = date('d/m/y', $entry->created); $created_by = $entry->createdUser->displayName; if ($entry->mainImage) { $image = $entry->mainImage->size(768, 280, 'center'); $thumbnail = $image->url; } else { $thumbnail = $assets . '/images/placeholder.jpg'; } ?> <div class='news-column news-column-left'> <div class='news-index-image-wrapper' style='background-image: url("<?php echo $thumbnail; ?>");'> <h2> <a href='<?php echo $entry->url; ?>'><?php echo $entry->title; ?></a> </h2> </div> </div> <div class='news-column news-column-right'> <div class='entry-info'> <span class='fa fa-calendar' aria-hidden='true'></span> Posted by <span class='entry-highlight'><?php echo $created_by; ?></span> on <span class='entry-highlight'><?php echo $publish_date; ?></span> </div> <?php if ($entry->summary) { echo $entry->summary; } ?> <?php if ($entry->body): ?> <p class='read-more'><a href='<?php echo $entry->url; ?>'>Read full article <span class='fa fa-arrow-circle-right' aria-hidden='true'></span></a></p> <?php endif; ?> </div> <?php endforeach; ?> </div> <div class='page-tabs'> <div class='lower'> <?php echo $pagination; ?> </div> </div> Do I have to loop twice? i.e. the first one loops and grabs item 1, the next loop offsets item 1 and grabs items 2 onwards. The first item will be further up the page using the page title to show the latest news title i.e. // FROM <div class='large-image-wrapper'> <div class='title-wrapper'> <h1><?php echo $title; ?></h1> // prints 'Latest News' </div> </div> // TO <div class='large-image-wrapper'> <div class='title-wrapper'> <h1><?php echo FIRST NEWS ITEM TITLE; ?></h1> // prints 'This is my first news item' <p>FIRST NEWS ITEM SUMMARY</p> // textfield with 220 character limit <span class='button'><a href='#'>LINK TO FIRST NEWS ITEM</a></span> </div> </div> ...then the rest of the page will be item 2 onwards. Make sense? I attach a screenshot to further demonstrate what I'm talking about. Thanks for any advice ---EDIT--- Just had a thought, not sure how this is gonna work on page 2, page 3 etc... any thoughts on that are welcome too! ---EDIT 2--- The whole thing can go in the loop, that'll stop the item 1 being the same on every subsequent page. Maybe something like this: for each (if is item 1) output HTML (item 1) (else) output this HTML (every other item) endforeach

Hi @adrian, doing my best here but on a phone. Logged into my demo site and got a screenshot. Nice to see the admin works well on a mobile Please see image, it is indeed a textarea (the summary field) and I have max length set to 220 characters. This is not enforced when I go over that, the page saves as normal whatever the number of characters (tested on win10 chrome).

As the title says, I created a text field, set the maximum character count to 220. But I just noticed one of the fields is like 330 characters and I am still allowed to save the page. Am I missing something? I thought this would kick up an error until the character count was under 220. Thanks for any input (pardon the pun!).