Peter Knight

This works but only picks up a single set of Before and After images <?php for($i = 0; $i < count($page->Images) / 2; $i++) { echo "<div id='container1' class='twentytwenty-container'>"; echo "<img src='{$page->Images->eq($i*2)->url}'> "; echo "<img src='{$page->Images->eq($i*2+1)->url}'>"; echo "</div>"; } ?> I just added curly braces around your img src.

Many thanks. I don't mind doing that and client would be relatively happy doing that too. This is the output I'm getting at the moment with that code. <div id="container1" class="twentytwenty-container"> <img src="sw11-master-bedroom-before.jpg|sw11_sitting-rm-after.jpg|sw11-childs-room-before.jpg|sw11-master-bedroom-after.jpg->eq(1*2)->url"> <img src="sw11-master-bedroom-before.jpg|sw11_sitting-rm-after.jpg|sw11-childs-room-before.jpg|sw11-master-bedroom-after.jpg->eq(1*2+1)->url"> </div>

I'm working on an interior design site and they have a series of before and after images. Using a jQuery script, each Before and After image needs to be wrapped in a single container DIV The following works for me if I use image tags and tag an image 'before' and then other 'after' <?php foreach($page->Images as $image) { $before= $page->Images->getTag('before'); $after= $page->Images->getTag('after'); echo "<div id='container1' class='twentytwenty-container'>"; echo "<img src='$before->url'> "; echo "<img src='$after->url'>"; echo "</div>"; } ?> The problem though is it's not very scalable and won't work for more than 1 before and 1 after image. I thought about using the ProFields Table but it doesn't support an image field. What I'd really like is a field that will holds 2 images which can then be multiplied. ProFields Multiplier doesn't support images either

Ah, thanks. Forgot about that one

In 2.6, one of my Croppable image fields won't accept any updates to it's Crop Settings. Services-Feature,500,300,services-detail Updating either the name or the allowed template above has no effect. I downloaded the error log and enabled debug mode and there's no explanation. is this a known bug with 2.6?

Speaking of images, here's some feedback from a client training session. Again, Images being the only area that confused my client. Process of steps.Everything good until after step 4 Click Insert Image in CK editor Click Upload Image Select a file from your computer Hit Save once the image is uploaded At this point, its unclear what the required step is. "I can see my grid of uploaded images but no indication that I still have to select one. It's made a little less obvious by the two Upload Image buttons too." and... "When I do select my image, I am presented with the cropping UI and more options (Insert this image, Select another image, Cancel) and I'm not sure what to do next".

Thanks for the feedback. LostKobrakai. I agree with pretty much all your comments. Regarding 1B (combined Select and Drag/Drop) I've struggled to achieve a balance here and you've picked up on that. After several different layouts I eventually settled on that one but I'm convinced a better layout can be realised. Regarding 1C (grid images), this assumes you've set Grid as the Default view in the Image field > Input tab. 2 (Cropping). Agree on the 2 Cancel buttons. Perhaps the first one should be Reset instead?

Hi Matt. What's the end result? An error or missing content? If you're experiencing missing content, have a look at the following https://processwire.com/talk/topic/9652-pagination-bug-disappearing-content/

Hi guys, Been "kicking the tyres" on some UI tweaks to the PW image fields and modal windows. Many of these are in-progress designs and to be straight, none of the designs are entirely resolved. At this stage, I thought I'd throw them up (poor choice of words!) and maybe someone can take them further or offer some fresh eyes. I'm not a developer so making these a reality is impossible for me. They're flat designs. Why? PW is an amazing experience for editors. It's just so elegant and beautifully realised (especially with Reno Theme) that often, my training sessions with clients are very brief. One area which does cause friction though has always been concerned images, image fields and image modals. Especially with the latest image modules, I think a lot of inconsistency has crept into the UI. Hopefully these designs can help improve things a bit. A tiny part of the design work is influenced by a similar idea I had for MODX but which never progressed. 1A. Current Image Modal Editor has clicked 'Add image' icon in CK editor. Issues: I believe the Upload Image button can be better placed. It's not clear to users that they have a choice of two actions (Select an Image OR Upload one) To help solve this, I thought we could: Place available images under a Choose tab Create another tab titled Upload Rename modal to just Image (from Select Image) tweak slightly the Images on page path to be less prominent The following image illustrates the result. Clicking the Upload tab would result in: In the above image I've created toggle-able accordians for Drag and Drop and Manual upload. This follows closely the UI an editor is presented with when choosing Insert Link within CK Editor. IE Link to URL, Select Page and Select File and the extra Attributes tab. So overall, it's more consistent. 1B. Alternative to above - combined Select and Drag/Drop I thought it might be worth exploring what modal would look like with no tabs and a single UI for both Selecting an image and Drag/Dropping. 1C. The Image field I then moved onto looking at the Image field in PW. So currently it looks like this (below) for a simple image field called Image Gallery. So although the current Image field works great, I wondered if there was a way to simplify it by Making the drag/drop more visual and obvious Moving the Choose Files button and removing the No file chosen text and the file types allowed Here's the result. Admittedly, this treatment adds more height to the overall field. Here's how it looks when images are uploading (slightly smaller plus icon and "drag and drop..." text. To be honest, I can't recall what other changes I made there! And here's a proposed layout for when there are multiple images. This includes image titles grid layout mouse-over for edit and delete options/buttons 2. Cropping Next thing I looked at was cropping. Native cropping introduced recently is one of my clients favourite features and time-savers and I wondered if things could be improved a little. So heres the current layout (this may have changed further recently) And here's my proposal. Changes are: Width, height and X and Y fields are moved below the image Apply and Cancel placed bottom right of the image Save Crop should be titled Apply. I think that's less confusing as in some instances there are so many Save options Save and Replace should be greyed out further In addition to this, I thought it'd be neat if we had the free-form cropping function introduced by Ryan combined with some kind of list of pre-sets (displayed on right hand side). Forgive the croptions label (Crop + Options pun - I was tired!) The benfit of this I think is that Modules such as CoppableImage and native Crop would be unified in a single UI. Presets (on right) could be a few out-of-the-box presets which come natively. Croptions houses any crop ratios defined in image modules. if CopppableImage isn't installed, they just don't display.. That's it. I wish I'd more time to work on this but it's at the stage where it's ready for some initial thoughts. Hope you guys like.

They're both great masonary alternatives. Thanks for the share

Adrian - thanks. Been tying myself up in knots with this one. Trying to integrate with jQuery Masonary grid fried my Friday evening brain. Working now

Hi guys. I know how to echo an Images field from a template called Portfolio and limit the echo to 5 results (5 pages) $imagePages = $pages->find("template=Portfolio, limit=5"); This assumes I have more than 1 page based on the template 'Portfiolio'. But what if I have a single page based on Portfolio and only want the first 5 images from that single page? The following doesn't work as limit applies to the pages and not the images field: <?php $imagePages = $pages->find("template=Portfolio, limit=5"); foreach($imagePages as $i) { foreach($i->Images as $image) { $thumb = $image->size(100, 100); echo "<img src='{$thumb->url}'>"; } } ?>

I thought that new Avatar was some extremist uniform until I realised it was a Viking outfit. But I showed this post to a developer friend via Skype. The conversation went like this: Me: ProcessWire scalability (and link to thread) Friend: Impressive - ISIS must be very pleased with their dev Me: that's a beard ! Friend :oh, horns. obviously casual Friday

Perhaps it would help if you indicated your current level of experience with PHP and building websites? I can't help with the actual question but I imagine other more proficient developers are wondering how much if you require. IE a point in the right direction Vs a fuller set of instructions. Hope that helps P

So it's all boiling down to risk. Could you make it risk-free for them? Tell them if they're not happy with the system after 6 months, that you'll do "X". X could be that you'll give them their money back or you'll only invoice for the second half of the project after 6 months. Whatever it is, take that risk upon yourself and make it a moot point for them. You could also point out that the PW forums have quite a few ex Drupal and WordPress users. Show them the recent WP security scares. Ask them if they want to introduce that security risk into their corporate environment. Do they wish to introduce a security risk into their clients homes?

Ok, my fault. Basically, the docs say a Crop can be called as follows: <img src='{$preview->Images->first->getCrop('Blog_Preview_Thumb')->url}'> but in the case below, the first image doesn't have a Crop applied and the page throws an error. So I have to instruct my editors that in a series of images / array of images, the image with the Crop needs to be first in the list.

That's a great question and actually, would be very useful. Without using Croppable Image, Ryan introduced a 'native' image crop recently which will allow you to save a version of an image. You can most likely drop that version into CK editor. It's one of the latter Dev versions I believe.

I have a list of Tags on a blog. They basically list all the tags used across all posts using the selector below. <?php echo "<ul class=\"rhs-meta\">"; $browse_tags = $pages->find("template=el-tag-individual"); foreach ($browse_tags as $tag) { echo"<li class=\"\"><a href=\"{$tag->url}\">{$tag->title}</a></li>";} echo"</ul>" ;?> I notice when a page is unpublished, tags used by a page are still included on the list of tags. PW is just doing what I ask it- pull in all tags from pages with the template el-tag-individual is there a way to exclude tags from unpublished pages? The selector documentation refers to the opposite (including unpublished pages).

What I mean is (and this might be a bug).... An image field of mine has several images. Unless I crop the very first image in the image field, the selector won't work. I like to let my editor choose which image to crop. That image could be the second or third image. With this ... <img src='{$person->Images->first->getCrop('Staff-Photo')->url}'> there seems to be a quirk where PW isn't looking for the very first instance of 'Staff Photo'. It's looking for the very first image. If that image has no cop applied, I get an error. The alternative it to setup a special image field solely for each crop but that shouldn't be necessary ?

@videokid I didn't think this mattered as you can only have one instance of a crop on any one Images field. Sure, you can have many differently sized crops but you can only cropped image based on the Staff-Crop setting? Clearly I was wrong as your code works (thanks) although I modified it slightly yo my own requirements <?php echo"<div class='row'>"; $peoples = $pages->find ("template=team-detail"); foreach ($peoples as $person){ echo"<div class='small-6 medium-4 columns'>"; echo" <div class='person-wrapper grid'> <div class='service-img'> <a href='{$person->url}'> <img src='{$person->Images->first->getCrop('Staff-Photo')->url}'> </a> </div> <strong>{$person->title}, {$person->Qualification}</strong><br/> {$person->Role} </div>"; echo"</div>"; } echo"</div>"; ?>

Hey. I should have mentioned, it's really any/everywhere that I want to mask the parent page name. Particularly URLs and breadcrumb trails. Otherwise, thanks for the tips. I'll test during the week.

Is this the proper way to call a crop called Staff-Photo in a field called Images? <?php $peoples = $pages->find ("template=team-detail"); foreach ($peoples as $person){ echo"<a href='{$person->url}'><img src='{$person->Images->getCrop('Staff-Photo')}\'></a>"; } ?> I'm getting an error as follows. I'm not sure if it's my syntax or a problem with my install. Croppable Image is installed properly and the pages I am calling in my selector all have an image with Staff-Photo crop applied.

Have a screengrab?

Short explanation Is it possible to hide a page from front-end output but keep the ability display it's children? Ideally I'm looking for a solution that doesn't involve htaccess or nginx So lets say I have a breadcrumb trail of: Home > News > Posts > news story 1 and I want to mask off the folder called Posts so it becomes just Home > News > news story 1 I still want to retrieve the child pages of Posts using selectors etc. Long explanation I'll give you a use case... I start off with a News section and its children are news stories. News (name=news, template=news-container) - news post 1 ( template=news-item) - news post 2 ( template=news-item) - news post 3 ( template=news-item) - news post 4 ( template=news-item) The structure above lets me use the Add New function because the Parent and Children both have very specific templates and settings. Client then tells me that there are News child pages which are not news items. Lets say they want to add pages called Public Relations Contacts, Media Enquiries and Events They need to be child pages of News but they can't go in the root. They don't need a news-item template and I don't want them to be pulled into any selectors targeting template=news-item or parent=/news/ etc What I usually end up doing is putting all the news items inside a hidden folder called Posts and redefining the Family settings to retain the Add New functionality News (name=news, template=news) - PR Contacts - Media Enquiries - Events - Posts (name=posts, template=news-container) - - news post 1 ( template=news-item) - - news post 2 ( template=news-item) - - news post 3 ( template=news-item) - - news post 4 ( template=news-item) The problem is that my breadcrumb trail looks like this Home > News > Posts > news story 1 Although it's logical and structurally sound, there's a duplicate there in terms of content. Both News and Posts pages display a list of News items. I'm probably not describing this very well but maybe you have the same issue and have a solution?

Thanks Wanze