SamC

Hi, I've been busy on other stuff but had a chance just now to try cropping with the console open. Still not working. The error is: An invalid form control with name='width' is not focusable. with a link address of: http://mysite.com/login/page/image/edit/?id=1019&file=1019,dsc01214.jpg&rte=0&field=mainImage&modal=1 So, still not working. The saving just keeps spinning ad infinitum. Maybe some of the more experienced members will be able to replicate this. I found this: http://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable Maybe something to do with it. I checked out the 'ProcessPageEditImageSelect.module' file but tbh I don't know exactly what I'm looking for here. On line 857 if you change: "<button type='submit' class='ui-button ui-state-default hide_when_processing' id='button_crop' name='submit_crop' value='1'>" to... "<button type='button' class='ui-button ui-state-default hide_when_processing' id='button_crop' name='submit_crop' value='1'>" ..the error disappears. However, the form doesn't submit either!

Thanks

Got it working now with my updated code above thanks. What I mean is this: // sorts news articles in same order as they are in admin area, each page will be 10 articles <?php $entries = $pages->find("template=news-entry, limit=10, sort=-sort"); $pagination = $entries->renderPager(); echo $pagination; ?> This works. BUT, my original code didn't use 'find', it listed the children of the current page which is site.com/news/. So, I had: <?php $entries = $page->children(); $pagination = $entries->renderPager(); echo $pagination; ?> ...which just lists ALL the child pages on a single page, no pagination. How would you get pagination to work when using children(), how do you limit to 10? Is this even possible?

Ok, so the page numbers checkbox is for news-index.php. The following works: <?php $entries = $pages->find("template=news-entry, limit=10, sort=-sort"); $pagination = $entries->renderPager(); $created_by = $page->createdUser->displayName; ?> <?php foreach ($entries as $entry): ?> <?php $publish_date = date('d/m/y', $entry->created); if ($entry->mainImage) { $image = $entry->mainImage->size(768, 280, 'center'); $thumbnail = $image->url; } else { $thumbnail = ''; } ?> <div class='news-item zebra'> <div class='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-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> </div> <?php endforeach; ?> <?php echo $pagination; ?> But can this be applied to $entry->children() or will that just always list all the children on the same page? Thanks.

Awesome, thanks. But I'm using: // children of current page /news/ $entries = $page->children(); rather than: $entries = $pages->find("template=news-entry, limit=10, sort=-sort"); Should I be using the latter in order for renderPager() to work? --EDIT-- Also, do I need to check the 'use page numbers' on news-index.inc template or the actual news entries template (news-entry.inc)?

This looks quite cool although I personally only ever seem to use bourbon/neat for grid and a few helper things. Never used a full blown framework as I just write the sass as I go along. One thing I like about bourbon/neat is that you don't end up with stuff like this: // materialize <div class="col s7 push-s5"> What's this div for again? </div> // bourbon/neat .news-item @include span-columns(6 of 12); <div class='news-item'> Ah, sanity restored. </div> just my opinion of course.

I've got a news page set up now and wanted to add some pagination to a set limit, say 10 articles. The current code is like so: // news-index.php template <?php $entries = $page->children(); $created_by = $page->createdUser->displayName; ?> <?php foreach ($entries as $entry): ?> <?php $publish_date = date('d/m/y', $entry->created); if ($entry->mainImage) { $image = $entry->mainImage->size(768, 280, 'center'); $thumbnail = $image->url; } else { $thumbnail = ''; } ?> <div class='news-item zebra'> <div class='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-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 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> </div> <?php endforeach; ?> I was reading this https://processwire.com/docs/admin/setup/templates/#allow-page-numbers and can see there is a 'URLS tab -> allow page numbers' setting for my template in the admin area. Not really sure what to do here, whether I use this setting or do something manually. The news-index.inc list the news articles, and a news-entry.inc template outputs the individual ones. It all currently works but of course the list will just keep growing! Any hints are appreciated, thanks.

Clever thanks! Why does this work and not without?

Thanks for replies, but none of them work for some reason: <?php $quickLinks = $pages->find("parent.template=quick-links"); echo $quickLinks; foreach($quickLinks as $item) { // outputs site.com/1015->url. Title is correct 'About Us'. echo "<li><a href='$item->internalPage->url'>$item->title</a></li>"; // outputs site.com/1015->httpUrl. Title is correct 'About Us'. echo "<li><a href='$item->internalPage->httpUrl'>$item->title</a></li>"; } ?> I have selected single page in the options. I thought '$item->internalPage->url' would work but no luck still.

Can't seem to output the friendly urls here: // home.inc <?php $quickLinks = $pages->find("parent.template=quick-links"); // outputs 1045, 1046, 1047, 1048 so got the IDs ok... echo $quickLinks; foreach($quickLinks as $item) { echo "<li><a href='$item->internalPage'>$item->title</a></li>"; } ?> This outputs 'site.com/1045' rather than 'site.com/about-us/'. 'internalPage' is a page field type on the quick-links template, where I select a single page to link to. Not sure what I'm doing wrong here. Any help is appreciated, thanks! --EDIT-- Can I add that '$item->internalPage->url' outputs 'site.com/1045->url'.

Thanks

Lol. I'll check it out thanks! (adds to #916 on the impossibly long web dev bucket list)...

Hi @Sérgio thanks for the info, that link will come in handy no doubt. I haven't got the hang of version control yet. Got git installed but yet to follow any guides to use it effectively, seems quite confusing to me. I guess the next logical step would be to learn it.

I recently moved my dev site into dropbox so I can share it between macbook/windows desktop. I'm having some issues however with my css. I'm working directly out of the dropbox folder using sass and compiling with node/gulp-sass to a normal styles.css file. When I use: // main.php <link rel="stylesheet" type="text/css" href="<?php echo $assets . '/css/styles.css' ?>" /> // outputs <link rel="stylesheet" type="text/css" href="/site/templates/assets/css/styles.css" /> ...any changes I make to my sass (even changes directly to styles.css) are not reflected on the page. However: // main.php <link rel="stylesheet" type="text/css" href="<?php echo $assets . '/css/styles.css?a=1' ?>" /> // outputs <link rel="stylesheet" type="text/css" href="/site/templates/assets/css/styles.css?a=1" /> ...works as intended with any changes I make visible immediately. It's obviously a caching thing but template caching is all disabled. I'm not sure where this is being cached? If the system is not outputting "/site/templates/assets/css/styles.css", then where is it getting the css from? Is it in the database? If I actually delete the styles.css file, the file is still there and populated in 'view source'. I thought maybe it's a dropbox thing (maybe this file is cached in dropbox) but I'm not sure. I also don't know how to clear the css cache in processwire (or set it to off). Of course I can just leave it as "/site/templates/assets/css/styles.css?a=1" but I'm intrigued. Any help is appreciated. Thanks.

This is interesting, I posted this: I didn't see any errors (although I didn't check the console). Where did you see the errors so I can check myself to see if I get similar? Maybe this is related.

So this image is a hefty 4000 x 3000 and I tried to crop out an area 2500 x 1500. The little red 'saving' icon appears when I click 'Apply', then just spins, and spins, and spins... for the past 20mins. I get the feeling it's not liking this too much. My auto generated images work ok on page refresh, a bit slow the first time (I believe the cached one is used after that) but this site is only going to have about 10 full size images total so space is not my concern, I will use larger images for larger resolutions, smaller ones for tablet/mobile with some inline CSS background images using PHP variables holding the different image sizes (and a class that only populates in a div if there is actually an image present, set to 1 image or null) i.e. // main.php <?php if ($page->mainImage) { $className = 'main-image-wrapper'; $options = array( 'cropping' => 'center' ); // the original image sizes will be anything up to 4000 x 3000 but at least 768px wide $small = $page->mainImage->size(768, 280, $options); $large = $page->mainImage->size(1000, 350, $options); $smallBgImage = $small->url; $largeBgImage = $large->url; } ?> <style type="text/css"> #main-image-wrapper { background-image: url('<?php echo $smallBgImage ?>'); } @media screen and (min-width: 768px) { #main-image-wrapper { background-image: url('<?php echo $largeBgImage ?>'); } } } </style> Anyway, the API generated images don't take 'too' long, not fast but bearable. However, the slow cropping in the admin area might be an issue. Is there a way to speed this up other than using smaller images? ImageMagick perhaps? Thanks. --EDIT-- To add, this is on localhost with PW v3 (not sure exact version off hand). Thanks.

@kuba2 could you post the code but with: // template-name.php at the top of your snippets, it makes it a bit easier (for me personally) to tell what you are trying to do. For example: // product-index.php // I would guess this lists all your subpages of 'Products' // single-product.php // I would guess this is a single page showing the product (image/description/whatever) It's a small thing but it would help in your code above where you have: <?php foreach($page->image_field as $image) { // is 'image_field' the fieldname on a single product template? $thumbnail = $image->size(150,100); echo "<p><a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a></p>"; } ?> and: <?php foreach ($page->children() as $product): ?> <div class='single-product-wrapper'> <img src="<?php echo $product->img->first()->url; // or is the image field called 'img'? ?> "/> <p><?php echo $product->inhalt1; ?></p> </div> <?php endforeach; ?> I'm a bit confused as to what you are doing and on what template. Seem to be getting there though! If you also want to set some defaults, you can have a look at this: https://processwire.com/docs/tutorials/how-to-structure-your-template-files/page4 The 'Adding an init.inc file to the mix (a best practice)' bit. Maybe you could set some image size defaults in there, I haven't tried this though (but probably will rather than have to set sizes all over the place).

Hi @franciccio-ITALIANO . Why not copy the articles straight to the online blog from your local word documents (.doc)? You don't have to publish them in processwire, you can save it, edit it, do whatever to it, then after a week, just click 'publish'. Would this not work for you? Seems like a lot of hassle to sync a local copy to an online one.

As a side note so Windows users are not put off reading this, it's a breeze to do in XAMPP too. I use MAMP on the laptop and XAMPP on the desktop (windows or linux) and I don't find one easier than the other. The only real difference I've ever seen is that in XAMPP you have to manually set the document root in http.conf and you can't change the ports as easily. I think the moral of the story is just don't use Bitnami

I edited my earlier post to show the actual css that the scss spits out.

I know your pain! This is totally what you're looking for:

Thanks. I knew very little about PHP before a few months ago. I just studied the processwire API and it's very well written. I'm more a designer so my CSS skills outweigh any PHP ones this is what I like about processwire, I have 100% control over HTML/CSS and the built in methods make it quite simple to grab stuff out the database.

http://neat.bourbon.io/examples/ Automatic rows is your friend here! Works very well once you're all set up.

Hi @kuba2 and welcome. I can't tell from the screenshots what templates you are using. However, this is how I do it for my 'news-index.inc' template. This pulls in all children of that page and displays them like you are asking (except mine are news entries, not tires!). // news-index.inc <?php $entries = $page->children(); $created_by = $page->createdUser->displayName; ?> <?php foreach ($page->children() as $entry): ?> <?php $publish_date = date('d/m/y', $entry->created); ?> <div class='news-wrapper'> <div class='news-column-left'> <h1 class='news-title'><a href="<?php echo $entry->url ?>"><?php echo $entry->title; ?></a></h1> <?php echo $entry->summary; ?> </div> <div class='news-column-right'> <p class='entry-info'><span class='fa fa-calendar' aria-hidden='true'></span><?php echo $publish_date; ?></p> <p class='entry-info'><span class='fa fa-pencil-square-o' aria-hidden='true'></span><?php echo $created_by; ?></p> </div> </div> <?php endforeach; ?> So I guess you could do something similar like: // keramik.php <?php foreach ($page->children() as $entry): ?> <div class='single-product-wrapper'> <h1 class='tire-name'><a href="<?php echo $entry->url ?>"><?php echo $entry->title; ?></a></h1> <img src="<?php echo $entry->img ?>" /> <p><?php echo $entry->inhalt1; ?></p> </div> <?php endforeach; ?> $page above is the current page you're on. $page->children returns an array with all the child page iDs (say '1|5|12|22|22'). So each child page is looped through (foreach) and printed to the webpage one at a time. $entry is the ID of the array item each loop through. If that makes sense. I am just starting working with images so I don't know what will happen with the img in the code above, I think it may just print at whatever size you uploaded it at. However, this should get you started. Regards the printing three in a row, this is css. I use http://neat.bourbon.io/ for layouts, so in my case (for my first example), the scss is: // styles.scss /* News index page */ .news-wrapper { @include row(); padding-bottom: 1em; border-top: 5px solid $light-grey; } .news-column-left { @include pad(0 2em); @include media($tablet) { @include span-columns(9 of 12); } } .news-column-right { background: #FFE6A7; @include media($tablet) { @include span-columns(3 of 12); @include pad(0.5em); } } // OUTPUTS // styles.css /* News index page */ .news-wrapper { display: block; padding-bottom: 1em; border-top: 5px solid #e7e7e7; } .news-wrapper::after { clear: both; content: ""; display: table; } .news-column-left { padding: 0 2em; } @media screen and (min-width: 600px) { .news-column-left { float: left; display: block; margin-right: 0%; width: 75%; } .news-column-left:last-child { margin-right: 0; } } .news-column-right { background: #FFE6A7; } @media screen and (min-width: 600px) { .news-column-right { float: left; display: block; margin-right: 0%; width: 25%; padding: 0.5em; } .news-column-right:last-child { margin-right: 0; } } Hope this helps. EDIT: @blynx beat me to it :-p

Awesome, thanks @BitPoet I'll get there in the end! Can I just say, points 1, 2, and 3 were to avoid this: <li><a class='' href='/'>Home</a></li> I prefer double quotes in all my HTML and empty classes seem pointless. That aside, the logic seems more sensible.