Search the Community

Within CKEditor's default image properties dialog, you can set a percentage width on inline images and leave the height blank, which works better with responsive layouts. Within processwire's image manager (for CKEditor), it looks like you are limited to entering fixed pixel dimensions. Is there a config setting or module to change this behavior? It can be fixed manually by switching to source code view, but that's not very user-friendly. It can be overridden in CSS, but that's not as flexible. Thanks!

Hi, Having ploblems with this search page code. I'm trying to get all images with tagged with the search query, which works currently. Then get a url and add <a> wrapping the image to a page that references that image in its image_select field - doesnt work. if($input->get->q) { $q = $sanitizer->selectorValue($input->get->q); $input->whitelist('q', $q); } $matches = $pages->find("imageTags.title%=$q, limit=20"); if(count($matches)) { $out .= "<ul class='grid-list'>"; foreach($matches as $m){ // $name = $m->image->name; // $out = $name; // $mWork = $pages->find("image_select=$name, limit=1"); // var_dump($mWork); $out .= "<li>"; // $out .= "<a class='' href='{$mWork->url}'>"; $image = $m->image; $image = $image->width(450); if($image) $out .= "<img src='$image->url'>"; // echo "</a>"; echo "</li>"; } $out .= "</ul>"; }

following the tutorial on youtube by Philipp Reiner On the part on putting image I copied the code <?php foreach($page->children as $c): ?> <div class="row"> <br><br> <div class="col-lg-6 centered"> <img src="<?= $c->image->url; ?>" alt="<?= $c->image->description; ?>"> </div><!-- col-lg-6 --> <div class="col-lg-6"> <h4><?php echo $c->title; ?></h4> <?php echo $c->body; ?> </div> </div><!-- row --> <br><br> <hr> <br><br> <?php endforeach; ?> But it doesn't show.. see attached

Hello all, My page has a lot of images. I created a gallery_image field to upload and display them. Unfortunately they are sort of unordered in the backend, though the filenames are numbered sequentially. I understand that this reflects the order of finished uploads. I figured out how to sort them on the frontend, but is there a way to do the same in backend? I guess this HookAfterPagesSave.module found here https://processwire-recipes.com/recipes/extending-page-save-process/ might do the trick but I'm too new to processwire and too unexperienced in coding to see what code to write. Anyone can help? Thanks in advance Hanna

Like others here, I build sites that require reuse of images. In my case, the images must always be accompanied by correct credits and descriptions, and must be replaced sitewide when our contract with the photographer ends. So centralized image storage is a must, and one page per image works fine. The challenge is selecting image pages from other pages in an easy, visual way. Soma's images module is a great move in that direction, but for my needs, users should work only with thumbs, never with HTML. The default pages field seems like it's allllmost there. I'd just like one of the field label choices to be the image field, and to choose a page by thumbnail. Ideally, the thumb will be shown on the page after selection, as it is with the images field. Even more ideally, the page picker will include search. Even even more ideally, I'd have the time and php chops to build this module myself.

Hi, Recently i came across a strange behaviour of core image cropping function. My Core version is Dev 2.6.17, OpenServer (Apache 2.4, PHP 5.4 and PHP 5.6) I have an image like that: And when i try to crop it with that code: for($i=0;$i<=9;$i++) { $img = wire('pages')->get(1850)->page_header_images->eq(1)->crop(0, $i*80, 1280, 80); // crop($x, $y, $w, $h) echo "<img src=\"{$img->url}\"><br/><br/>"; } I get always get the same peaces of picture though it has different $y I also have a problem when i use resize/crop interface in modal window in page editor. I wanted to post n issue to github, but would like to ask you to check if you can reproduce this behavior

Hi folks, I know how to get ONLY the first image from an Image field, but how to you exclude the first image? <?php foreach ($page->project_images->not()->first() as $image) : ?> Any thoughts? Sorry... just noticed slice in the cheatsheet... <?php foreach ($page->project_images->slice(1) as $image) : ?>

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?

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

I have an image and video carousel that I want to use on a page and have it be editable via processwire. The problem is that the code for images and video is completely different. What is the best way to go about making one repeater field where you can pick either a video or image? I thought about having nested repeaters but not sure if that would work. I want it to be possible to order the slides so having them as separate repeaters wouldn't work either. I am a bit stumped. Any help would be great. Images: <div class="rsContent"> <img class="rsImg" src="abc.jpg" alt=""> <div class="infoBlock infoBlockLeftBlack"> <h1>...</h1> <h3>...</h3> <h4>...</h4> <p>....</p> etc etc </div> </div> and for video is this: <div class="rsContent"> <a class="rsImg" href="abc.jpg" data-rsVideo="https://www.youtube.com/"></a> </div> Thanks you

Short version Can we make the Page fieldtype as the tagging engine for images? Long version / real example I started using image tags for the first time after reading making efficient use of fields in PW. There's a part titled Use multi-file fields to replace several single-file fields where Ryan mentions tagging. As I was building a site for an interior designer, I needed an almost identical setup and to tag images with a gallery with "basement", "living room", "garden" and "kitchen" tags. At one stage, my client wanted "basement" changed to "basement and garden" and I had to manually edit about 15 images. No big deal really but it doesn't seem very scalable. Having used the Page fieldtype for tagging blog posts and news and experienced how easy it is to make global tag names changes etc, I wondered if the Page fieldtype could be put on the roadmap as the tagging engine for images or at least as an option.

I'm doing some updates on a site that only just launched last week and during development everything was fine. But now I've exported the db from the production site, imported it back into my local and get Call to a member function size() on a non-object. My template looks like: foreach($products as $product) : $img_src = $product->images->first(); echo $img_src; // this works echo $img_src->url; // so does this echo $img_src->size(300,300)->url; // this gives me the error endforeach; What would be causing this to error now when it was working fine before and I can get values for the image and its source, just not the resized version?

Hi All, I have an images field for multiple images set to always return an array. My images field holds 5 images. I'm trying to get the first image of the array and then remove that to get an array that holds images 2-5. Here's my testing code so far $images = $page->images; $firstimage = $images->eq(0); //also tried $images->first() with same result $restimages = $images->remove($firstimage); echo count($images) . " images<br>"; foreach ($images as $img) { echo $img->basename . "<br>"; } echo "firstimage<br>"; echo $firstimage->basename . "<br>"; echo "restimages<br>"; foreach ($restimages as $img) { echo $img->basename . "<br>"; } And here's the output: 4 images mario_florenz_1.jpg mario_florenz_3.jpg mario_florenz_2.jpg mario_florenz_5-1.jpg firstimage mario_florenz_4.jpg restimages mario_florenz_1.jpg mario_florenz_3.jpg mario_florenz_2.jpg mario_florenz_5-1.jpg A few things that buffle me: -count($images) returns 4 where it should be 5 -foreach through $images returns only 4 images where it should be 5 -$images->eq(0) returns the first image but this one is not returned when I loop through all images -$images and $images->remove($firstimage) return the same I really don't understand what is happening here. Reading through the API docs on images and WireArray manipulation it seems my code should work. Any help would be much appreciated.

We have an internal company site that we use to document specifications for software development. Currently, we use Adrian's ProtectedMode module to restrict the site to logged-in users, but one of the engineers just noted that uploaded files are (naturally, given the scope of the module) visible without authentication. While this isn't a huge risk (you have to know the URL to view an uploaded file), it is technically a security issue since we have lots of proprietary things attached to pages on the site. Any ideas on how I could lock down these files so you have to be logged in to view them?

Hello! I often have to change image sizes in templates using the ->width() or size functions and on a image heavy site this a cause timeout errors or massie lag before all the images are resized when changing to the new template. I was wondering if there was a good way of creating these images without having to hit each page on the site for the template to be called and images updated? Basically to avoid the errors? Thanks

Do field dependencies work on Image fields? I tried this selector, to show a field if there's an image: image_field.count > 0 ...and it didn't work. Any ideas? Thanks! -evan

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?

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!

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!

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.

Why is upscaling false being ignored with the following template? foreach($page->images as $image) : $options = array( 'quality' => 85, 'upscaling' => false ); $large_img = $image->width(800,$options); $thumb_img = $image->size(100,100,$options); $img .= '<a href="'.$large_img->url.'"><img src="' . $thumb_img->url .'"></a>'; endforeach; The page I'm testing has images that are smaller than 800 but the linked versions are all 800px wide (and pixellated because they've been stretched).

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! I'm new to ProcessWire and i need a "little" help with my family's website. What i want: The website of my family contains a gallery, where photos are shown in several albums. The current tree looks like this: ---photos ------ New Year 2013 ------ Going to the zoo ------ Dad's 60th birthday ------ Our Pug ------ ... Showing all pictures on one page is no problem for me, i got that working. But the photos should be Instagram-like "commentable" and "likeable". So i have to create a page for every single image, right? My questions are now: what's "the best" way to do this? Is it possible to automate this process? And how? I hope you understand, what i'm trying to do... my english is not that good, school is a few days ago... paulbrause