Search the Community

I'm having a weird situation where I'm trying to get the URL for an image attached to a page, but I'm getting back the wrong paths. The URL is mysite.com/5gum/. My file structure is like this: /admin/ <-- ProcessWire is in here -- /site/ -- /wire/ /5gum/ <-- my site templates are in here -- index.php (calls header.php below) /assets/ -- /includes/ ---- header.php I'm bootstrapping PW into header.php of a file under /5gum/. I'm trying to do something like this: $brand_slug = basename ($_SERVER['REQUEST_URI']); // this would get me "5gum" $brand = wire('pages')->get("name=".$brand_slug); // this gives me a specific page echo $brand->meta_image->url; // this should output the path to an image attached to the page If meta_image is a field that accepts a maximum of 1 image, shouldn't this return the full URL to the image? Instead, it returns: /5gum/site/assets/files/1027/ What doesn't make sense to me is that the root of the site isn't /5gum/, it should be /admin/ right, according to PW? Do I need to set the root somehow?

If a page contains an image, I get no error. If a page does not contain an image I get the following. Fatal error: Exception: Invalid type to Pageimages::remove(item) message. Any suggestions is appreciated. my code: $first = $page->image->first; if (count($page->image) > 1) { echo "<h4>$page->title</h4>"; } foreach($page->image->remove($first) as $img) { if ($img) { echo "<img src='{$img->url}' />"; } }

Now that tags are possible for images I wonder whether this could be stored with images also: - ALT - COPYRIGHT Why? I have the description field which I use as caption and as "alt" attribute at the moment. But my editors have problems with that and fill up the description with to much information. I would like to store some information separately: 1. description would be output as caption. 2. the alt attribute would be open for manipulations to the SEO guys - without them ruining the caption. If no alt attribute is set, I would output the the description and if there is no description either, a ".". So we are always validating with out the need to code this manually for every single image used. 3. The copyright: This could be placed where we like it, maybe at the bottom of the page. This is very important to make the usage of many stock images legal. And we do not need to misuse the description for that any more.

Hello, I have an imagefield set to limit=1 and I try to replace this image via the API: $video->of(false); $video->teaserbild->removeAll(); $video->save(); $video->teaserbild = 'http://new_image.jpg'; $video->save(); The result in the admin is a broken image (missing file) as the first image (which was supposed to be removed) and the new one intact as second. I'm on PW 2.3.0. I've had this problem for a while and can't seem to solve it. Can someone help? Thanks, thomas

Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations. EDIT: A good solution for protecting original images can be found a bit down in this thread: Old content of this initial post:

Hello I am trying to figure out how I can do this particular thing... when I upload a bunch of Image in a page I would like to make the first Images as a big thumbnail and rest in smaller thumbnails... I could not figure how I can manipulate each image separately.. hope I make sense.. Teja

Hello, I'm trying to change all upload image files names for the random names. So I put in Pageimage.php this lines: $rand = substr(md5(microtime()),rand(0,26),5); $basename = basename($rand, "." . $this->ext()); // i.e. myfile But as a results I got a lot of random filenames during each page loading. Please advise what do I miss? Thanks, AP

Hello, Is there any way to resize images using processwire and PHP so that a maximum long edge value is respected? For example, I would like it so that landscape images are resized to a maximum width of (say) 900px and portrait images to a maximum height of 900px, and in both cases the second dimension adjusts to maintain the natural aspect ratio. Can this be done with processwire? Many thanks in advance, b

I am stuck. Seven days ago, something changed such that when users try to upload images to my PW site, the images are posted to the page, but they show up as zero bytes. The folder is created in the files folder, the image name is recorded, the type of file is recorded, but the byte size is zero. When I looked into the problem this morning, I received the "This request was aborted because it appears to be forged." message whenever I tried to upload images. Turning off protectCSRF in the config file suppresses the aborted image message and now I just get the zero-byte image bug, but I don't know why. I've checked permissions on the files directory, changed it recursively to 777 and then back to 755 with no change. I checked that I have active sessions, logs, and cache folders. I checked on the permissions of the config.php file. I changed the sessionName, and turned off the challenge and fingerprint functions but nothing is budging. I installed a new PW site yesterday and so I keep thinking something is colliding but it looks like the images have been failing to write to the files directory for the last week. I'm getting the same results in multiple browsers after any number of cache-clears so I don't think it is client-side. This is a look at the PHPinfo for the site. Best wishes, J

Hi all, I want to present a preview of my new Portfolio. Actually I'm unsure with some points and the images aren't the final ones and other pieces aren't finished too. But the look is ready and maybe it would be good to get some feedback from the critics here ;-) The site actually runs on PW 2.3 stable, the used modules are: ImagesManager ImageMinSize Thumbnails FieldtypeTextUnique Minify I have disabled direct access via .htaccess to portfolio-images that resides in the files folder. Thumbnails and images related to infos and news can be accessed directly, all others have to use a proxy page I have build as PW-template. With the ImagesManager I initially have created my six categories (albums) and manage all uploads. Via a hook into ImagesManager on upload I'm able to rename the original images and create 3 variations (600px, 900px, 1200px). Also I stripp all Exif and IPTC data from them but populate them with the minimal needed IPTC data. That way I never have custom related infos in the images, neither in filename nor in metadata. I use serverside mobiledetection and also JS to detect viewport dimensions. This should be used to serve images that fit best to devices and viewport dimensions. But it isn't ready now. The layout / design is done from HTML5 boilerplate. There are no frameworks or thatlike used / needed. But there is heavy use of Javascript (jQuery-Libs: Swipe, Stapel, Flexslider), but the site also runs completly in noscript mode. Also the single-image-view in NoScriptMode lets you loop through the gallery and displays the content scrolled down to the image if needed. (That's one of the advantages of old veterans that have build html-pages during browser war 1995/98 ) All critic, suggestions etc is welcome: http://pw4.nogajski.de/

I decided to rebuild an old image gallery site with PW. I know there's countless image-gallery scripts out there, but for my liking, most of them are too bloated. Also, I thought this was another good opportunity to dive further into PW-world. I'm keeping the old basic gallery structure: 95% of the galleries are in date-folders (monthly), like a blog archive. But I'd like to add some filter / search functionality, because there's just so many pics - when you come to the site and look for a specific subject, there was no way to do that on the old site. Q 1: How can I create a simple "search by image tag"? I want the results to list all images (thumbs) with tag x, and a link to the parent page. Q2: How would I most efficiently grab all tags from all pages, all images, and present it alphabetically (not necessary a fancy tag-cloud, but making sure I list each unique tag only once)? So when the user clicks on one tag link, he sees all image thumbs that have that tag on the results page. $p = $pages->find("images.tags~=$tag") works fine. I can explode("|", $p) to get a page-id array, but where would I go from here? A tag can be any anywhere, in various galleries (pages), and most pics have multiple tags. I'd like to group the results by page, so I guess I need to add 1-2 foreach loops, no? Can somebody help with some example code? I'm a bit stuck right now.

Hi there, is there a way to set a max-width + max-height setting for images on upload and keep the aspect ratio? e.g. a landscape format picture shouldnd't be wider that 450px, as well as not exceed 320px in height and a portrait format image shouldn't be higer than 320px currently image->size(450,320,$options) will always produce an image 450px wide and 320px high even when it's a portrait format image is is this somehow possible? thanks a lot, cheers, j

Hi, sometimes, when I try to upload an image, the thumbnail (and the image itself) appears with the wrong orientation (I have a vertical image but I get a horizontal one..) is there a quick fix? UPDATE: I notice this happens only with images I took with my smartphone. Using a "regular" camera (nikon D5000) works like a charm!

Hi everybody, I'm trying to use a repeater field to list different articles with a title, a description and an image gallery. This is what I want to achieve: <article class="ed2"> <h3>title</h3> <p> very long description </p> <ol class="thumb-grid group"> <li><a href="#"><img src="assets/temp-img.png" alt="thumbnail" /></a></li> <li><a href="#"><img src="assets/temp-img.png" alt="thumbnail" /></a></li> <li><a href="#"><img src="assets/temp-img.png" alt="thumbnail" /></a></li> <li><a href="#"><img src="assets/temp-img.png" alt="thumbnail" /></a></li> </ol> </article> I'm using this code (just testing if images are ready to use): <?php foreach($page->evento as $event){ echo "<article class='ed2'>"; echo "<h3>{$event->titolo_evento}</h3>"; echo "{$event->descrizione_evento}"; echo "<ol class='thumb-grid group'>"; echo "{$event->img_evento}"; echo "</ol>"; echo "</article>"; } ?> my output is this: <ol class='thumb-grid group'>020.jpg|175-0.jpg|ox.jpg</ol> So I Know all the images I uploaded are in place, but how do I loop inside the "img_evento" field to echo different urls?

Hi! Dumb question again here (% I have pages with different count of images. How can I output images with limit=3 for example?

Hello all, today I've got a problem with a form submission, specifically with images uploads. Before strarting this thread I've read and followed this topics: http://processwire.com/talk/topic/126-anybody-did-user-registrationlogin/ http://processwire.com/talk/topic/3105-adding-file-upload-field-to-form-via-api/ And here is my code: https://gist.github.com/anonymous/5517109 The form subscription worked correctly until I've integrated the WireUpload function, that seems to cause me some problems...infact if i comment out this count() check in the code... if(!count($files)) { $u->error("Sorry, but you need to add a photo!"); return false; } ... the form data get recieved (everything but the images..) and the newpage created. So it seems that the image upload never runs. I also tried to override PHP's upload_temp_dir with $config->uploadTmpDir = dirname(__FILE__) . '/assets/uploads/'; in site/config.php and use that folder as my temporary one, but no luck there too... I want to notice that my console didn't recieve any errors when I submit the form, everything seems to work but it's not I'm on a local server (Wamp on Windows) and in my php.ini file file uploads and temporary directory are set like this: ; Whether to allow HTTP file uploads. ; http://php.net/file-uploads file_uploads = On ; Temporary directory for HTTP uploaded files (will use system default if not ; specified). ; http://php.net/upload-tmp-dir upload_tmp_dir = "c:/wamp/tmp" Any advices from you guys? Thanks.

Greetings Everyone, I'm working on a couple of sites that need some imaginative gallery ideas. I started browsing around to see some examples of creativity and discovered a new Lightbox concept from Todd Motto. Just thought I'd post about it here and see what people think. Here's the link: http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/ Thanks, Matthew

This question is for Soma, but I'd appreciate everybody's input equally. Soma, in this thread you talked about how you shouldn't insert images in the wysiwyg, and I totally agree with your point about lack of designer control. You said, "Use repeater to make blocks with images and a option to align or size." I can kind of see what you're describing in my head, but I'm unsure how to go about it. I was wondering if you could elaborate. I am trying to set up a journal where the user would be able to write an article and possibly insert images into the text where appropriate. However, I've always hated how wysiwygs insert images, and I was looking for another way to go about it. The main problem I'm facing is that not all images are attached to the page's images field; the user may want to use an image from another page on the site. I hope that makes sense. Thanks in advance.

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 ) }

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, I'm struggling with the syntax... multiple galleries, created as repeaters, need an ID to export to JS - to call a gallery script. Everything works so far except the repeater Id, which I don't know how to concatenate to form the #galleryId. This is my hopeless attempt: $repeaterId = $pages->get($repeaterPageID); $galleryId = gallery.$repeaterId; echo "<div id='$galleryId'>"; foreach ... ...

Hhm, I don't want use the GD2-lib at some point because it lacks in quality. Also I want to add Metadata (IPTC, XMP, ...) back to resized images. (It's just curious, I'm not aware of any CMS, Blog or even webdriven Photogallery that takes care of this!) I need to know a way how to bypass PW-internal image-sizing. This must not be necessary for a complete PW-site, but possibly could. It is mandatory for images added to a specific Part (Template? / Gallery?) of the site. I want to: - read Metadata - resize image with alternate ImageProcessor - write back Metadata Any ideas or starting points for this? To be more clear: I know how to do the image-processing, but not how to integrate the alternate process into PW.

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'm building my first brand new Processwire site! It's easy and looks really extensible so I'm excited. However, I have a codeigniter app that is going to eventually sit in a directory beneath Processwire and I want to store assets like css, js, and images in a top-level directory that both CI and PW will access. Right now, I've accomplish this by using tags like `<img src="<?php echo $config->urls->templates ?>../../assets/images/russellbits-logo-small.png" alt="Russellbits"/>` Works fine, but it's messy. Is there another way I could do this in PW without making an http call?

Does anyone know if it's possible to configure the images field to require description text? A fallback would be to write an onsubmit handler in javascript for the admin - but if it's possible to enforce at the configuration level, that seems like a much cleaner solution. EDIT: the core image field is already in heavy use. If possible, I'd like to modify existing instances rather than create a custom field.