Search the Community

I'm currently developing a site where some image fields need to be able to have two images associated with them, a thumbnail and a full sized image (which is often a different crop) which will be shown in a lightbox view. This is fine for most templates, I'm just using normal image fields that return an array and support up to two images. If a second image is present in the field then it will be used as the alternative image for the lightbox. If only one image is present, it will be used for both thumbnail and full sized (the template resizes for the thumbnail using the API). However I have templates with flexible layouts using a repeater matrix, and one of the matrix types is an 'image grid'. This is an image field that supports an unlimited number of images, so obviously this method is not suitable here. I've tried creating a repeater in this matrix type which contains an image field (each supporting two images, as above), but this means that I can no longer drag and drop multiple images at once. Each image in the grid has to be uploaded individually which is a big problem as there are many instances of these grids with a large number of images. I've tried the ImageExtra module but it seems you can't add an image field as a secondary field. Any suggestions as to how I might solve this problem?

I'm having trouble with the formatted value of certain image fields. Regardless of what i select it always returns a PageImages object. Is this known to be buggy and is there a solution?

I have a page which lists articles, and if there are images uploaded via the images field for that page, a thumbnail is displayed next to the article headline. However for a number of pages, I will be placing an existing image from another page in the tree into the body field. In these cases, is there anyway to check the body field's content for an image so I can display that in the article list? Logic would be: If the image field has one or more images uploaded { get first and display as thumbnail } elseif the body field has one or more images placed from another page { use the first body image as the thumbnail } else { omit thumbnail } Anything I can try that would work as shown (or is there an alternative to consider)? Thanks in advance!

I have been trying everthing about images. I have read the documentation about the field itself, some threads, a tutorial, and the cheatsheet. I am creating an events portal, and I have a template called Event, with an Image field for the poster of the event. In the homepage I am listing the events, and I am able to output the Tiitle and the Date (with is another field), but I am not able to output the poster. How can I do this? I am missing something? If you need any other information, just tell me. Thanks in advance!

Hi, i don't understand why this problem only appears when im trying to edit the root page (home). All subpages are working. I made a video of the problem: Video My boss made an update yesterday from php version 5.3.29 to 5.6.17-1~he.2 (At the moment i am not able to downgrade the version) Maybe this is the reason? My Processwire Version: 2.7.2 MySQL-Version (PHPMYADMIN) MySQL-Version (phpinfo();)

Hi, I installed my new site with processwire with classic theme. My site is: http://www.permaculturaorganica.info and the photos-files don't appearing! If you click on image on right top, appear this page: http://www.permaculturaorganica.info/site/assets/files/1/westin_interior2.jpg It's normal? How can I to correct this? My permission that I put when I installed processwire is: 700 - 600. It's correct?

How to set the image quality as per desired.. I tried using the above code but I get the original image size.. <!--Content with Image left--> <?php $i = 2; foreach($page->page_content as $each) { if( $i%2 == 0 ){ ?> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft"> <div class="background-image-holder"> <?php $option1 = array( 'quality' => 60, 'upscaling' => true, 'cropping' => true, ); $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <!--Content with Image on left--> <?php } else { ?> <!--Content with Image on right--> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight"> <div class="background-image-holder"> <?php $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-sm-8 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <?php } ++$i; } ?> <!--Content with Image on right-->

<!--Content with Image left--> <?php $i = 2; foreach($page->page_content as $each) { if( $i%2 == 0 ){ ?> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-left animated fadeInLeft"> <div class="background-image-holder"> <?php $option1 = array( 'quality' => 60, 'upscaling' => true, 'cropping' => true, ); $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-md-push-7 col-sm-8 col-sm-push-4 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <!--Content with Image on left--> <?php } else { ?> <!--Content with Image on right--> <section class="imageblock about-1"> <div class="imageblock__content col-md-6 col-sm-4 pos-right animated fadeInRight"> <div class="background-image-holder"> <?php $pravin= $each->single_image->size(790,650,$option1); ?> <img alt="image" src="<?php echo $pravin->url; ?>" /> </div> </div> <div class="container container-body"> <div class="row"> <div class="col-md-5 col-sm-8 animated fadeInUp"> <?php echo $each->body; ?> </div> </div> <!--end of row--> </div> <!--end of container--> </section> <?php } ++$i; } ?> <!--Content with Image on right--> How to set the image quality as per desired.. I tried using the above code but I get the original image size..

Does anybody know why I am unable to debug images? I only see the field name, but not the array with the list of images, I tried xdebug and tracy debugger... This is my code: var_dumb($page->fields) or dumbAll($page->fields). This is what I see, note that I have several images (array) in this page: If I try foreach on the fieldgroup and output the fieldname I can get the image url... P.S. a little bit off topic...but is there a way to just get the data/values of the fields? I don't really care about all the other fields like hooks, wire, notices, etc etc...

Hello everyone, greetings from Belo Horizonte / Brazil. I'm on the process of converting a site from WP to Processwire, this one: http://www.ricardo-vargas.com I needed a simple Flickr Gallery and tried to find a way to create album pages via API and download the images to the local filesystem (just a few, for cache purposes). So I created yesterday a simple script that, given an album ID, download its data using cURL and save the photos to a temp dir. After that, add them to a new page under /pictures/ Feel free to comment on the code, I'm a designer, not a developer, and this is my first time using PW API You can grab it on GitHub: https://github.com/sjardim/processwire-simple-flickr-album Instructions Download the files Put the templates/get_flickr_sets.php on your templates/ folder. Create a page on Processwire using this template Create or edit the page where the albums will be created. In my case it was /pictures/ IMPORTANT: Add guest edit/create permissions to this /pictures/ page, otherwise the script won't work Create a temp dir on your server and set it on the previous file Get a Flickr API on https://www.flickr.com/services/apps/create/ Add one or more Flickr album IDs on get_flickr_sets.php Open the page using the get_flickr_sets.php template on your browser <?php include "../lib/curl.class.php"; // You will need to get a Flick API Key // Get it here: https://www.flickr.com/services/apps/create/ // Load it on the file below include "../lib/flickr_album_utils.php"; function download_file($url) { // Save the image on local filesystem (You need to create this folder first) // On your server it can be /var/www/name_of_folder/ $tempdir = '/Users/XXX/phpFlickrCache/'; $fp = $tempdir . basename(parse_url($url, PHP_URL_PATH)); // if we already downloaded the images for some reason (like testing), just return it if (!file_exists($fp)) { $fh = fopen($fp, 'wb'); $curl = curl_init($url); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_BINARYTRANSFER, 1); curl_setopt($curl, CURLOPT_FILE, $fh); curl_exec($curl); curl_close($curl); fclose($fh); } return $fp; } // Get some public album id to test $albumID = ["72157636029541784"]; //$albumID = ["72157649576832173", "72157633296236495", "72157644132091553", "72157636029541784"]; // Load ProcessWire API $pages = wire('pages')->get('/pictures/'); /* -------------------------- GET ALBUM INFO FROM FLICKR -------------------------- */ foreach($albumID as $album) { // Via GET, return album and its photos info $album = fa_get_album($album); // create a new post $page = new Page(); $page->template = 'picture_album'; $page->parent = $pages; // disable page output formatting $page->of(false); $page->name = wire('sanitizer')->pageName($album['title'], true); $page->flickr_album_id = $album['id']; $page->title = $album['title']; $page->generic_integer = $album['total']; //total number of photos on flickr album – OPTIONAL //My client albums descriptions have two phrases, one in English and other in Portuguese // let's separate then by the period, but sometimes there is no period, so the PT description will remain blank $description = explode('.', $album['description']); $en = $languages->get("default"); $page->summary->setLanguageValue($en, $description[0]); $pt = $languages->get("portuguese"); $page->summary->setLanguageValue($pt, $description[1]); $page->set("status$pt", 1); //activate portuguese page $page->save(); // We need to save the page BEFORE adding images /* ------------------------------------ DOWNLOAD AND SAVE IMAGES FROM FLICKR ------------------------------------ */ $images = array(); $i=1; $maxImages = 11; foreach($album["all_images"] as $f) { //we do not want all the photos, just a little bit if ($i >= $maxImages) break; // mount the flickr photo url using its attributes $photo_url = 'https://farm'.$f["farm"].'.staticflickr.com/'.$f["server"].'/'.$f["id"].'_'.$f["secret"].'_b.jpg'; // download and return the image file in the filesystem $images[$album['id']][$i] = download_file($photo_url); // add images to the current page in the loop $page->images->add($images[$album['id']][$i]); $i++; } $page->save(); echo "<p>Created page for album: <strong>".$album['title']. "</strong></p>"; // Tip: Now, after we saved the images to ProcessWire /site/assets/files/, we can safely delete them from the $tempdir if needed } print "<pre>"; print_r($images); print "</pre>"; Admin Screenshot

What are your experiences with profile/color consistency when using Image Magick for resizing? I know @horst is probably the person with the most experience on this, (hope you can chime in here Horst) Problem: I noticed that In some cases Image Magic resized jpgs appear darker than the original, and after some digging it appears to involve various factors concering both the image preparation (Photoshop's save for web and even general profile handling before that) and the way the Image Magic resizing process is setup. - Images with an embedded (srgb) profile that were exported via Photoshop's "save for web" function with "convert to srgb" and "embed profile" ON, somehow result in muted colors and a darker image, (actually it looks very much like when you would assign an srgb profile to an image that was already converted to srgb before, not dramatic, but quite noticeable with e.g. reds and cyans.) - I tried multiple variations, with embedded and excluded srgb profile, "convert to srgb" on and off, but the result appears to be the same darker, muted image. Need to find time to do more structured testing though.. Possible causes: - The way the srgb profile is embedded in the jpg - The way the Imagick module detects/ignores profiles - Colorspace handling changes between imagick versions - One of the above plus these rather involved technical reccomendations (tldr: convert to linear RGB, resize, convert back) http://www.4p8.com/eric.brasseur/gamma.html#ImageMagick http://www.imagemagick.org/Usage/resize/#resize_colorspace Would be nice to get a discussion going here. I am out of my league with this, technical knowledge wise but I'll try to keep up Cheers guys, Phil

Hey! I am working on a module that imports some images. But I have some struggles with a check. I need a check because if I hit the import button twice, I have the images double. I have the following code: protected function importImages() { $languages = wire("languages"); $images = $this->get_images(); $images->execute(array(':iso' => 'en')); $pictures = $images->fetchAll(PDO::FETCH_ASSOC); foreach ($pictures as $picture) { $id_product = $picture['id_product']; $product_page = $this->pages->get("productid=$id_product"); // ensure output formatting is off $product_page->of(false); $str_prlink = $picture['product_name']; //make sure end of string ends with alphanumeric $image_name = preg_replace('/[^a-z0-9]+\Z/i', '', $str_prlink); //echo $picture['id_product'] . '-' . $image_name . '-' . $picture['ean13'] . '.html'; $image_url = $picture['file_id'] . "/" . $image_name . '.jpg'; //echo "<br />"; $image_path = "http://www.r-go-tools.com/" . $image_url; //echo "file id:". $file; try { $product_page->images_product->add($image_path); } catch (Exception $e) { } // $product_page->of(false); $product_page->save(); } } I want to delete the images that are currently in that field, and then import the new images. How can I fix this?

Hi all, I'm trying to upload an image to a blog post. The ProcessWire blog editing page is relatively simple. See attached. When I try to add more images and publish the post an internal server error is returned and a blank space is where the additional images should be. Can anyone advise on how this can be resolved quickly. Please let me know any additional information you'd need. Many thanks. JMH

I have been plagued by this issue since day one. I cannot access or use any image I have uploaded. I can see them in the directory on the server and when I click on an image I can see a preview in the editor but as the video Video in my dropbox shows it doesn't provide me with a way to utilize those images. I can't see anything obvious. I did upgrade to 3.0.34 and have left the site pretty bare bones until this issue is resolved. Thanks in advance! processwire-images-bug.mp4

Hi I have an image field in the back end, that expects multiple images. Now I've added this hook as the files are added: $page->addHookAfter('InputfieldFile::fileAdded', function($event) { $inputfield = $event->object; wire('log')->save('image-resizing', "Resizing "); $image = $event->argumentsByName("pagefile"); $image->size(800,0,array('upscaling' => false)); $image->size(300,200,array('cropping' => true, 'quality' => 80 )); }); It works absolutely fine for a small amount of images, but uploading a large amount doesn't seem to work. No errors are logged either. Now all thes photos appear to have uploaded in the back end, and show the thumbnails, but upon clicking save images are missing. I've checked all my php settings and ensured they are all adequate enough. memory_limit 512mb upload_max_filesize 200mb max_execution_time 300 If I disable this hook, I can upload all images fine. Please could anyone other any insight into what may be causing this issue? Thanks in advance

Hi everyone, I am new to Processwire and am hoping that you will be able to help me out. I have currently taken over a website from one of my colleagues and have been asked to implement a gallery. I have created the appropriate fields and code but have come across an issue when trying to upload images to the field. Initially I uploaded multiple images of varying sizes and I found that the loading bar reaches the end very quickly then the loading icon/graphic just continues to spin, I waited for an hour or so for them to load but it never did, it just kept spinning. I then reloaded the page and the images were not shown in the field. I decided to then upload one small image (roughly 200KB) and again it did the same as above. I left the site 24 hours to see if it would fix itself. However when that time had passed and I tried again it failed again. I asked my colleague if he had any issues with uploading images but apparently it was fine when he was using it. Does anyone know what is causing this and if there is a fix? See attached image. Thanks, Matt

Hello! I just found processwire yesterday (actually i heard about it before, but never looked into it) and installed it to play around. I'm really impressed, as a guy who only used wordpress i like it very much and i tried to replicate one of my sites in processwire and so far it seems doable, the taxonomies will be a little tricky i think. Now to the main point, i've read a blog post here giving some tips, one tip was to use only one image field and to group images by tags. The problem: there doesn't seem to be a way to add a tag to multiple images at once, making the process inconvenient. Would it be possible to add a prompt for defining a tag before selecting the images and the uploaded images will have that tag.

Hey, I'm pulling my hair out abit with CKeditor settings (documentation is impregnable), I'm trying to set the default width x height in the image modal to the same as the original image by default, not some random number which it seems to be currently. is this possible?

Hello all I have successfully displayed an array of images using the following code. if (count($page->images)) { $images = ''; foreach($page->images as $image) { $image = $image->size(800); $images .= "<img src='{$image->url}' /><br />"; } } However, occasionally this template calls an image that is smaller than 800 pixels wide, and when these images are forced to display larger than their original size, they are pixellated (see example here). I would like to edit the above code to make it do the following: check the size of each image if the image is >800px wide, display as 800px wide if the image is <801px wide, display at original size My best guess is this: if (count($page->images)) { $images = ''; foreach($page->images as $image) { if {$page->image->height(<801); $image = $image->size()} else {$image = $image->size(800)}; $images .= "<img src='{$image->url}' /><br />"; } } But I have a poor understanding of loops. My question is: Can someone suggest a fix for my second code example to make it work? Please note my templates are written in object oriented php, so solutions using 'echo' will not work in my use case. Thanks for reading!

Hi! I have finally managed to start my first project in ProcessWire. Loving the simplicity and flexibility but I have stumbled upon a problem with Image field. It just does not upload anything. What happens is: Upload progress bar is going up to 100%. Folders in assets/files are properly created, with permissions set to 777. Unfortunately, no image is being uploaded as there are no files in created folders. Nothing shows in Javascript console (Chrome and Firefox), so it is not a front-end problem. I have been searching for solution on this problem but what I have found was not helpful. I have safe_mode in PHP turned off. The issue persists for File fields as well. Thanks!

Hi there, I noticed, that one can easily import images from other pages into a textarea field in the backend, while the images field only allows for upload from the local machine. Correct me if i am wrong. Is there a possibility to copy images from another page, e.g. a special image repository page, into an image - type field from the backend, for the average page editor? Thanks for your thoughts.

Hi there, in an image gallery with the following code foreach ($page->bilder as $bild) { $thumbnail = $bild->size($page->thumbnail_size,$page->thumbnail_size); ... a JS gallery function broke down with the error message: "unitegallery.min.js:6 Uncaught Error: Can't get image size - image not inited." I looked into the /assets/files/nnnn/ folder and found 5 images (of about 16 or so) having api - generated version with only 42 Bytes. 4 of them had the string "....0x0.jpg" in their filename, but the 5th had an unsuspicious filename. They were all generated within the same second, according to their timestamp. In the backend, they could neither be opened nor deleted. Via FTP they could be deleted. This fixed the problem with the gallery. In the /logs/exceptions.txt I found lines like leute_im_boot.0x0.jpg - not a recognized image (in /wire/core/ImageSizer.php line 257) In the errors log I did not find anything apparently related. Did anybody observe something similar? cheers - - -

Hey, I would like to add tags to an image field upload via api. Does anybody have some information on that? im using the following code to update images on a page. # remove images if(count($page->images)) { $page->images->deleteAll(); $page->save(); } # upload images foreach($product->image as $image) { $page->images->add($image->url); $page->images->tags = ? // not working } $page->save(); During Page Update the backend says: Session: Item 'tags' set to ProcessWire\Pageimages is not an allowed type Thanks for help.

I have made the following module that automatically grabs images from Youtube and Vimeo URLs and adds them to an image field ('article_visual_snippet'). public function init() { $this->pages->addHookBefore('save', $this, 'getvideoimage'); } public function getvideoimage($event) { $page = $event->arguments[0]; $url = $page->article_snippet_video; if ($page->parent_id == 1023) { if (strpos($url, 'youtube') > 0) { parse_str( parse_url( $url, PHP_URL_QUERY ), $id ); $ytURL = 'http://img.youtube.com/vi/' . $id['v'] . '/maxresdefault.jpg'; if($page->article_visual_snippet->count() < 1){ $page->of(false); $page->article_visual_snippet = 'http://img.youtube.com/vi/' . $id['v'] . '/maxresdefault.jpg'; $page->save(); } } if (strpos($url, 'vimeo') > 0) { $id = substr( parse_url( $url, PHP_URL_PATH ), $id ); if($page->article_visual_snippet->count() < 1){ $page->of(false); $response = file_get_contents("https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com$id"); $jsonobj = json_decode($response); $page->article_visual_snippet = $jsonobj->thumbnail_url; $page->save(); } } } } } It's all working perfectly but for one slight problem. The image field ('article_visual_snippet') is a required field and when the page is saved I get 'Missing required value' error even though the image has successfully uploaded to the field. Does anyone know how I can circumvent this error?

Hi there, I'm using ImageSizerEngineIMagic and it has an overridable, default image quality value. In my application code, you can override the module's value based on a user Page field value. However, if there is no "custom" value in the page field, I'd like to be able to access the ImageSizerEngineIMagic module's default value. There is likely a very easy way to do this. If anyone could point me to it, I'd be very grateful! Many thanks.