Search the Community

Hi, I'm having problems getting a series of images in the same standard images field to sort by date modifed/created. How would I add the ->modified property here to get the images to display in order of date modified/created? if ($page->images) { foreach($page->images as $image) { $thumbnail = $image->size(868,0); echo "<img class='r' src='{$thumbnail->url}'/>"; } } Have tried a few variation with no luck yet : ( thanks Alex

Is there a way to select an image from another image field on the page, much the same way as CKEditor fields can when embedding images? Why not just use an ordinary image field? Because in my case, I have a repeater for creating a home page carousel for featured news items. Each row in the repeater has an image field. Sometimes you want to be able to use the same image for more than one slide. Currently you have to upload the same image to each row. And if you need to replace an image but know you'll need to use it again at a future date, you have to leave it attached to the image field but move it away from the first position so any new images can be first instead. So each row ends up with 5-6 different images that are used frequently for different types of topics, which is a) a bit untidy, and b) means you have to repeatedly upload common images, i.e. duplication of effort. It would be better if I could have a global images field for the page, and then in each repeating row, a fieldtype that can choose an existing image from that field. I thought about using a CKEditor fieldtype, but that generates all the markup too, and I don't want to do that as the markup will be generated with dynamic image sizes in the template. I also know of the image manager module that Soma made but that's not really what I'm after either. Is there any way to accomplish this?

I'd like to resize some images on demand, that are not page images, so they are not attached to a page. How to use the ImageSizer class? I could browse through the code but perhaps someone who used this, could provide some lines of example code. I basically want to pass the image path and cropping options. Are the cropped images saved somewhere if they are not page images, or will the cropping be executed every time? Thanks!

Hey all - I've got a new question concerning the image resize timeout discussed here: https://processwire.com/talk/topic/3718-lots-of-images-to-resize-timeout-in-frontend/ https://processwire.com/talk/topic/7744-image-width-function-timeout/ But the problem I've run into is that when the timeout occurs, it corrupts or doesn't properly build the resized images. I need a way to force the resize to run again, preferably just for the damaged/missing images. You can see an example of the missing images here: http://arthistoryproject.com/artists/ferdinand-hodler/ - scroll down in the right and check "Autumn Evening" - the image name has been created, but the file is broken Any ideas? Thanks so much!

To refresh my thumbnails I have been using a solution found in this thread. It is a script in the root of my PW installation on my localhost that when accessed in the browser displays a list of all "orphaned" image files and directories, this way: if (!in_array($f->getFilename(), $valid)) { echo "Orphaned file: " . wire('config')->urls->files . "$id/" . $f->getBasename() . "\n"; // unlink($f->getPathname()); } So you can preview the list first, and then choose to un-comment the unlink function and re-run the script to delete them, and fresh thumbs will be regenerated the next time they are requested, all the outdated ones will be eliminated. I want to make this a simple module: Include this script on an admin page Create a Fresh Thumbs action option on the page (just a button, rather than having to un-comment that line in the source) Enable a cron job option... Seems simple enough so I was hoping maybe someone could shed some light on this for me. Past the creation of a blank admin page, I'm sure I can just include the file and figure out the rest with that foundation. I have also been curious as to how to do this for a long time. As always all your gracious input is much appreciated in advance.

Currently when you upload images in PW, they are display in the order that they finished uploading - not necessarily in the order that they need to be in. I have a client that will be uploading approx. 100 images per page and needs them in filename order so that he can annotate each image using the description box. I can get PW to spit out the live page in the correct order: $images = $page->images->sort('name'); But this only works on the live page, which means that inside PW it is still a bit of a mess and my client still needs to reshuffle the images by hand in order to get the annotation right. Is there a way to get PW to sort the uploaded images in the page editor?

Hello everybody! I've been using processwire for more than 1 year and I love it. Recently I've had this problem: I have some pages using the basic template with headline, body and images. I need to access their data from an external page that I put outside the templates folder. In this external page I initialize the engine this way: include("../../index.php"); And I get the page I need like that: $internalpage=$wire->pages->find("id=".$pageid.",include=all")->get(0); I can read the headline and the body of the page normally, but the images array is NULL I try to access the images array as usual: foreach($internalpage->images as $image){ ... } The images field is called "images", like the default one. I've also tried to get the field list of the page, I get the field images but still it is null. I checked the admin and the images are correctly uploaded on the page I try to access. What am I doing wrong? Thank You!

Hi Guys, So I am working on a project and wanted to get the best advice using the api on the next step. I have two image fields in one template. postimage which holds an image for the article and postimage2 which holds an image for the home page. Basically I want to make it so that when a user uploads postimage and not postimage2 the home page will just pickup postimage instead. If the user does upload postimage2, it should pick up postimage2. What I did: I did add a conditional statement to check if postimage2 was empty to simply default to postimage but I was not seeing any images display. Here is my code: <?php foreach($featured as $featuredp){ foreach($featuredp->postimage2 as $postimages2) { echo"<div class=\"row panel\" style=\"margin:20px auto;\">"; echo"<div class=\"large-4 columns\"><p> <a href='{$featuredp->url}'><img src='{$postimages2->url}' width=\"300\"/></a></p></div>"; echo"<div class=\"large-8 columns\"> <h4>{$featuredp->title}</h4> <p><em>{$featuredp->date}</em></p> <p>{$featuredp->summary}</p> <p><a href=\"{$featuredp->url}\" class=\"button tiny radius\">Read More</a></p> </div> </div>"; $found = 1; } } if ( ! $found ) { echo"<p>Sorry, no posts.</p>"; } ?> Any advice is appreciated? Also any suggestions or workarounds are also welcome!

Hello All! This is my first post here and am a newbie with PW. So far I've been able to accomplish everything I've wanted to do dynamically in my first PW site, but ran into a big snag yesterday. Ok here's the setup: I have on my site 4 pages that deal with separate plumbing services. We offer a discount coupon for each service. For each service, I am displaying it's coupon image in the sidebar. Each coupon image resides in the images field of the individual rootParent parent services page, and each image has a tag of "coupon" assigned to it. So for example, I have a rootParent level "Drain Cleaning" page and it is in this page's images field that the Drain Cleaning coupon image resides with the tag "coupon." The next coupon resides in the images field for my rootParent "Sewer Cleaning" page, and so on. For each service page, I have some Hanna Code I wrote to include the coupon image in the sidebar of the rootParent and all of it's children: $coupon = $page->rootParent->images->getTag('coupon'); This works great! Now, here's my problem... For pages other than the service pages, like form confirmation pages, the Contact Us page, etc., I still want to display a coupon image in the sidebar, but I want to grab a random coupon image and display it. So far, I have not found a way to successfully scan all page's images field, grab the images with the tag of coupon, then display a random image. Here is the code I've come up with so far that is not working: First, build the array of pages containing an image with the tag of coupon (this works): $couponpages = $pages->find("images.tags=coupon"); Next, get the images tagged coupon from the array of pages containing them (this is where the code breaks and throws an error): $coupons = $couponpages->images->getTag("coupon"); The error reads: "Fatal error: Call to a member function getTag() on a non-object." Beyond that, I would then want to fetch a random image and display it: $coupon = $coupons->getRandom(); echo "<img alt='{$coupon->description}' src='{$coupon->url}' />"; If anyone can help me solve this it would be most appreciated! Thanks, Dave

Hi guys I recently found Colors of Images, a php library for getting colors from images: https://github.com/humanmade/Colors-Of-Image That's the only thing that I'm missing from PW to get started on a project. As I'm no php developer (let alone module developer ), I was wondering if it's possible to use it in PW pages without having to create a module?

Hey guys, Why does ProcessWire automatically creates folders for each page images? Is it possible to create and use my own folders for uploaded images? For example, I want a "projects" folder to store project images and a "blog" folder to store images from the blog. How can I do that?

Hello! I have a cool upcoming project which its content will heavily depend on external images. Although I'd like to get rid of WordPress for this project and would love to use ProcessWire, WP has a great plugin called Grab & Save, that allows you to grab and save images from remote urls into your own WP media library. I was wondering if ProcessWire has a similar plugin or functionality, which it would be a huge time saver for these kind of projects!

It would be great if PW would resize images using Imagemagick/graphicsmagick if one of those libs is installed as theyy provide far better quality and use less memory than GD or GD2. Just an idea.

Hi, I wish to have a core ImageManipulationClass like the ImageSizer but not only for resizing and cropping images. It should provide these easy to use functionality like with the ImageSizer and additionally a step to step image manipulation whereas the user / module author is not restricted anyhow. The basic image manipulation methods should be included, like: im_flip im_rotate im_crop im_crop_auto im_resize im_sharpen im_stepResize If someone want to do something more fancy or magic, he/she should not to have to reenvent the basics again. He/She just should start with the class by opening the imagefile and create a GD-object, use some basic methods, and at any point get the GD-IM-Reference out, do his fancy magic with it and put it back to the class to use its basics to finalise the file: im_get_im() im_set_im( &$im ) I have started to write something for this. I tried to be as close to the ImageSizer as possible, but some differences will be there. Before I've started with it I have done some tests with sharpening, rotating and others. First I've tried to create a module that hooks into ImageSizer, but have figured out that this wouldn't solve most things what I imagine one want to do with images. I have read the code of ImageSizer very carefully and there are allready very good inprovements in it from the community here. Ok, Ryan has written it and done the most work of all, so tribute to him , - adamkiss, interrobang, mrx, teppo, u-nikos have contributed the improvements to it: . I have looked into apeisas Thumbnail-Module and tried adding functionality for sharpening to it. It think he would have liked if there was a CoreImageManipulation class once when he has written the module. Also Soma actually work on a very cool Module where I really would like to see a link/button or some links/buttons for every image that just let you do some manipulations/corrections to them. <hint, hint ;-)> Any thoughts or Meinungen are welcome. --- EDIT: there is actually a modified ImageSizer class with autoRotation & sharpening available for testing: http://processwire.com/talk/topic/3278-core-imagemanipulation/#entry32284 --- Here are an overview of what allready is in, (I post only properties and method names, not the method bodies): class ImageManipulation extends Wire { // information of source imagefile /** * Filename ImageSourcefile */ protected $filename; /** * Extension ImageSourcefile */ protected $extension; /** * Type of image ( 1 = gif | 2 = jpg | 3 = png ) */ protected $imagetype; /** * Information about the image (width/height) and more */ protected $image = array(); /** * Was the given image modified? */ protected $modified = false; // default options for manipulations /** * Image quality setting, 1..100 */ protected $quality = 90; /** * Allow images to be upscaled / enlarged? */ protected $upscaling = true; /** * Allow images to be cropped to achieve necessary dimension? If so, what direction? * * Possible values: northwest, north, northeast, west, center, east, southwest, south, southeast * or TRUE to crop to center, or FALSE to disable cropping. * Default is: TRUE */ protected $cropping = true; /** * Should a optional Auto-Rotation be performed if EXIF-Orientation-Flag is available? */ protected $auto_orientation = true; /** * the default sharpening mode * * @var array with custom pattern or a string: 'soft' | 'medium' | 'strong' | 'multistep' */ protected $sharpening = 'medium'; /** * if extended imageinfo should be retrieved: number of Channels, Bits/per Channel, Colorspace */ protected $extended_imageinfo = false; /** * Extension / Format for resulting Imagefile (default is same as ImageSourcefile-Extension) */ protected $outputformat; /** * Filename ImageTargetfile if $outputformat is different than InputImage (default is same as ImageSourcefile) */ protected $targetfilename; // other properties /** * Directions that cropping may gravitate towards * * Beyond those included below, TRUE represents center and FALSE represents no cropping. */ static protected $croppingValues = array(); /** * Supported image types (@teppo) */ protected $supportedImageTypes = array(); protected $option_names = array(); private $property_names; // Methods to set and get Properties /** * Here you can specify multiple options as Array, whereas with the * single set* functions you can specify single options * * @param array $options May contain key-value pairs for any valid Options-Propertyname * @return this */ public function setOptions(array $options) public function setQuality($value) public function setUpscaling($value) public function setCropping($value) public function setAuto_orientation($value) public function setSharpening($value) public function setTargetFilename($value) public function setOutputformat($value) /** * Return an array of the current options */ public function getOptions() /** * makes protected and private class-properties accessible in ReadOnly mode * * example: $x = $class->propertyname; */ public function __get( $property_name ) // Construct & Destruct the ImageManipulator for a single image public function __construct( $filename, $options=array() ) public function __destruct() public function im_release() // read image informations, basic and extended protected function loadImageInfo() private function extendedInfo_gif(&$a) private function extendedInfo_jpg(&$a) private function extendedInfo_png(&$a) // helper functions /** * check file exists and read / write access * * @param string $filename * @param boolean $readonly * @return boolean */ private function check_diskfile( $filename, $readonly=false ) /** * helper, reads a 4-byte integer from file */ private function freadint(&$f) // the IM's (ImageManipulation Methods) private $im_dib_dst = null; // is the output for every intermediate im-method and optional a check-out for the im! private $im_dib_tmp = array(); // holds all intermediate im references private function get_next_im( $w=true, $h=null ) public static function is_resource_gd( &$var ) public function im_get_im() public function im_set_im( &$im ) public function im_flip( $vertical=false ) public function im_rotate( $degree, $background_color=0 ) public function im_crop( $pos_x, $pos_y, $width, $height ) public function im_crop_auto( $direction, $width, $height ) public function im_resize( $dst_width=0, $dst_height=0, $auto_sharpen=true, $sharpen_mode='medium' ) public function im_sharpen( $mode='medium' ) public function im_stepResize( $dst_width=0, $dst_height=0 ) // static oneLiner Methods that can be called only with a filename passed to them public static function file_get_exif_orientation( $filename, $return_correctionArray=false ) public static function file_jpeg_auto_rotation( $filename, $quality=95 ) }

Hello ppl I'm trying to create an image banner to show in all pages of the site, and for this i created a page to hold multiple images in a field (latter im gonna deal with animating them). The page is published, So this is the tree of values i got: i can address the page with $pg_settings = $pages->get('name=settings'); it seem to be correct because print_r gets me a biiiig array if info now the problem is getting the array of images, with their respective url's. I tried: $pg_settings = $pages->get('name=settings'); // echo "<br />pg_settings: " . print_r($pg_settings->get("banners_slideshow")); // seems ok... $imgs = $pg_settings->get("banners_slideshow"); print_r($imgs[0]->get("url")); // i got nothing?? In this page i also have a non repeatable image field for the logo, so i think i cant use the images array from that page. the question remains: how do i address a field with multiples images, that is in another page? thanks for the patience!

Hello Everyone! I was trying to upload images into a page, and it gave me the "Is not a recognized image" error. Now every time i try to go into the page to edit it, it takes me to a screen where the page editor is missing and the error is showing on the top. I am attaching an image of the error. Any ideas?? THANKS!! Julian

I made an image field name slider1 with max of 3 images. uploaded the 3 images for my slider to use on my slider in my homepage. but how do i call it one by one? for ex. ignore the code for my first item it doesnt work but how do i make my slider work? have 3 images uploded on a single image field called slider1 how do i call each of them , what is the code to be put on img src for each item

Hello, Not sure I'm in the right section. I've just noticed something. In site > assets > files, there are folders apparently named after the id of the page in which the images are inserted in the admin. I'm developping a website locally this time, with version 2.5.0 now after an upgrade. It is the same for the first gallery rendered (before the upgrade) on it's own page and for the second gallery that've I've just rendered on the parent page of the page in which the images are inserted in the admin. For the first "gallery", the code is: foreach($page->children('include=hidden') as $child) { $thumb = $child->images->first()->width(320); echo "<a href='$child->external_url' target='_blank' rel='nofollow'><img src='$thumb->url' width='$thumb->width' height='$thumb->height' /></a>"; } (I've just updated this gallery code from width='320' height='200' to width='$thumb->width' height='$thumb->height') For the second gallery, it is: foreach($pages->get(1032)->images as $image) { $thumb = $image->width(90); echo "<a href='$image->url'><img src='$thumb->url' width='$thumb->width' height='$thumb->height' /></a>"; } For the first gallery, there are these versions: the original version (640x400), the .320x0.png version (320x200), in two folders a .300x212.png version (300x187 - perhaps old images with dimensions that I tested...(?)), and a .0x100.png version (160x100). For the second gallery, there are these versions: the original version (640x480), the .90x0.jpg version (90x68), and again a .0x100.jpg version (133x100). Where can I disable the creation of this .0x100.jpg version, in which file, is it "normal"? Thanks in advance !

Because I’ve never been really happy with the current strategies (I know) to deliver images the right solutions in responsive layouts, I lately started to work on my own approach. Other solutions like for example Wilcox’ Adaptive Images just rely on the screen resolution/window size or require additional (and manually added) data attributes or even js/noscript hacks in the markup. For me it was important to have a solution, that is installed once and then just works. So I took some ideas from other stratgies and put something together that seems to work so far (but I still have to test it in older browsers). Feel free to give it a try. I’d love to get some feedback on this. For detailed info have a look at the README. https://github.com/oliverwehn/Responsive-Images

I think it would be a nice idea to add an image/field count to these inputfields. Something like below, where it says '(12)'. For me this would be a handy little addition.

Hey guys, I was wondering if you could answer a few questions of mine... - Does ProcessWire handle high traffic and large content sites? - Is PW a suitable choice for building an image-based site? Something like those inspirational Tumblogs we often see, for example: twotimeselliott.tumblr.com and bybuildshop.tumblr.com. If it is, what would be the best practices for building something like that? - Is it possible to create custom post types with PW? Like in tumblr we have text, link, quote, image, video... - How do we create "categories" and "tags" with PW pages? Any guidance will be appreciated!

Edited: read this https://processwire.com/talk/topic/7379-module-altgrid/

Can I suggest an improvement to the PW Manager. When editing a page, I should be able to mouse-over a fields label to display the actual field name as referenced in the API and templates. I just had a problem whereby calling a series of images onto a page was not working for me using the code example from the API docs. <?php foreach($page->images as $image) { echo "<img src='$image->url'>"; }?> This was because the field within my manager page was actually "blog_images" and not the regular "images" field. As both fields had a label of "Images" and the regular images field wasn't used elsewhere on my manager page, it took a while to realise my mistake. Better house-keeping on my behalf would definitely help but it's an idea that might make building sites a little quicker.

Hey, guys. I'm having some difficulty in outputting an image description as alt attribute. I created a field called featured_image. Using foreach I list all articles that use a certain template. I can display the image normally using: $article->featured_image $article->featured_image->url, works just fine. But when i use $article->featured_image->description nothing happens =( I'm just learning php and have no idea what am I doing wrong. Any help? Thank you.

Hi Everyone, a quick and stupid question: how do I insert image description in images field when I set the default view to "grid" ?