Leaderboard

Hi all, we lauched this big website for a festival last week, and pout a lot of work and love into this. Check out: boomfestival.org Hope you like it! and it has been received very well so far.. ( 60 000 visits in less then 1 week) It uses processwire as CMS , and I must say awesome decision to replace Wordpress we used the last editions, processwire is highly superior to wordpress as CMS . I even managed to import a lot of content from Wordpress with the Processwire bootstrap API and JSON and the help of this forum Content is loaded all with Ajax , and still backbutton does work and everything can be deeplinked . Ryan ProCache module has helped very much with Site speed and our high traffic server load If I find the time I might do a case study here...as this ajax approach moight be interesting for other developers

I think you can enable Cross-domain AJAX requests in your .htaccess # ------------------------------------------------------------------------------ # | Cross-domain AJAX requests | # ------------------------------------------------------------------------------ # Enable cross-origin AJAX requests. # http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity # http://enable-cors.org/ <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> found in html5-boilerplates .htaccess

--------------------------------------------------------------------------------------------------------------------------------- when working with PW version 2.6+, please use Pim2, not Pim! read more here on how to change from the older to the newer version in existing sites --------------------------------------------------------------------------------------------------------------------------------- PageImage Manipulator, API for version 1 & 2 The Page Image Manipulator is a module that let you in a first place do ImageManipulations with your PageImages. - And in a second place there is the possibility to let it work on any imagefile that exists in your servers filesystem, regardless if it is a 'known PW-image'. The Page Image Manipulator is a Toolbox for Users and Moduledevelopers. It is written to be as close to the Core ImageSizer as possible. Besides the GD-filterfunctions it contains resize, crop, canvas, rotate, flip, sharpen, unsharpMask and 3 watermark methods. How does it work? You can enter the ImageManipulator by calling the method pim2Load(). After that you can chain together how many actions in what ever order you like. If your manipulation is finished, you call pimSave() to write the memory Image into a diskfile. pimSave() returns the PageImage-Object of the new written file so we are able to further use any known PW-image property or method. This way it integrates best into the ProcessWire flow. The three examples above put out the same visual result: a grayscale image with a width of 240px. Only the filenames will slightly differ. You have to define a name-prefix that you pass with the pimLoad() method. If the file with that prefix already exists, all operations are skipped and only the desired PageImage-Object gets returned by pimSave(). If you want to force recreation of the file, you can pass as second param a boolean true: pim2Load('myPrefix', true). You may also want to get rid of all variations at once? Than you can call $pageimage->pim2Load('myPrefix')->removePimVariations()! A complete list of all methods and actions are at the end of this post. You may also visit the post with tips & examples for users and module developers. How to Install Download the module Place the module files in /site/modules/PageImageManipulator/ In your admin, click Modules > Check for new modules Click "install" for PageImageManipulator Done! There are no configuration settings needed, just install and use it. Download (version 0.2.0) get it from the Modules Directory History of origins http://processwire.com/talk/topic/3278-core-imagemanipulation/ ---------------------------------------------------------------------------------------------------------- Page Image Manipulator - Methods * pimLoad or pim2Load, depends on the version you use! pimLoad($prefix, $param2=optional, $param3=optional) param 1: $prefix - (string) = mandatory! param 2: mixed, $forceRecreation or $options param 3: mixed, $forceRecreation or $options return: pim - (class handle) $options - (array) default is empty, see the next method for a list of valid options! $forceRecreation - (bool) default is false It check if the desired image variation exists, if not or if forceRecreation is set to true, it prepares all settings to get ready for image manipulation ------------------------------------------------------------------- * setOptions setOptions(array $options) param: $options - (array) default is empty return: pim - (class handle) Takes an array with any number valid options / properties and set them by replacing the class-defaults and / or the global config defaults optionally set in the site/config.php under imageSizerOptions or imageManipulatorOptions. valid options are: quality = 1 - 100 (integer) upscaling = true | false (boolean) cropping = true | false (boolean) autoRotation =true | false (boolean) sharpening = 'none' | 'soft' | 'medium' | 'strong' (string) bgcolor = (array) css rgb or css rgba, first three values are integer 0-255 and optional 4 value is float 0-1, - default is array(255,255,255,0) thumbnailColorizeCustom = (array) rgb with values for colorize, integer -255 - 255 (this can be used to set a custom color when working together with Thumbnails-Module) outputFormat = 'gif' | 'jpg' | 'png' (Attention: outputFormat cannot be specified as global option in $config->imageManipulatorOptions!) set {singleOption} ($value) For every valid option there is also a single method that you can call, like setQuality(90), setUpscaling(false), etc. ------------------------------------------------------------------- * pimSave pimSave() return: PageImage-Object If a new image is hold in memory, it saves the current content into a diskfile, according to the settings of filename, imagetype, targetFilename and outputFormat. Returns a PageImage-Object! ------------------------------------------------------------------- * release release() return: void (nothing) if you, for what ever reason, first load image into memory but than do not save it, you should call release() to do the dishes! ? If you use pimSave() to leave the ImageManipulator, release() is called automatically. ------------------------------------------------------------------- * getOptions getOptions() return: associative array with all final option values example: ["autoRotation"] bool(true) ["upscaling"] bool(false) ["cropping"] bool(true) ["quality"] int(90) ["sharpening"] string(6) "medium" ["targetFilename"] string(96) "/htdocs/site/assets/files/1124/pim_prefix_filename.jpg" ["outputFormat"] string(3) "jpg" get {singleOption} () For every valid option there is also a single method that you can call, like getQuality(), getUpscaling(), etc. See method setOptions for a list of valid options! ------------------------------------------------------------------- * getImageInfo getImageInfo() return: associative array with useful informations of source imagefile example: ["type"] string(3) "jpg" ["imageType"] int(2) ["mimetype"] string(10) "image/jpeg" ["width"] int(500) ["height"] int(331) ["landscape"] bool(true) ["ratio"] float(1.5105740181269) ["bits"] int(8) ["channels"] int(3) ["colspace"] string(9) "DeviceRGB" ------------------------------------------------------------------- * getPimVariations getPimVariations() return: array of Pageimages Collect all pimVariations of this Pageimage as a Pageimages array of Pageimage objects. All variations created by the core ImageSizer are not included in the collection. ------------------------------------------------------------------- * removePimVariations removePimVariations() return: pim - (class handle) Removes all image variations that was created using the PIM, all variations that are created by the core ImageSizer are left untouched! ------------------------------------------------------------------- * width width($dst_width, $sharpen_mode=null) param: $dst_width - (integer) param: $auto_sharpen - (boolean) default is true was deleted with version 0.0.8, - sorry for breaking compatibility param: $sharpen_mode - (string) possible: 'none' | 'soft' | 'medium' | 'strong', default is 'soft' return: pim - (class handle) Is a call to resize where you prioritize the width, like with pageimage. Additionally, after resizing, an automatic sharpening can be done with one of the three modes. ------------------------------------------------------------------- * height height($dst_height, $sharpen_mode=null) param: $dst_height - (integer) param: $auto_sharpen - (boolean) default is true was deleted with version 0.0.8, - sorry for breaking compatibility param: $sharpen_mode - (string) possible: 'none' | 'soft' | 'medium' | 'strong', default is 'soft' return: pim - (class handle) Is a call to resize where you prioritize the height, like with pageimage. Additionally, after resizing, an automatic sharpening can be done with one of the three modes. ------------------------------------------------------------------- * resize resize($dst_width=0, $dst_height=0, $sharpen_mode=null) param: $dst_width - (integer) default is 0 param: $dst_height - (integer) default is 0 param: $auto_sharpen - (boolean) default is true was deleted with version 0.0.8, - sorry for breaking compatibility param: $sharpen_mode - (string) possible: 'none' | 'soft' | 'medium' | 'strong', default is 'soft' return: pim - (class handle) Is a call to resize where you have to set width and / or height, like with pageimage size(). Additionally, after resizing, an automatic sharpening can be done with one of the three modes. ------------------------------------------------------------------- * stepResize stepResize($dst_width=0, $dst_height=0) param: $dst_width - (integer) default is 0 param: $dst_height - (integer) default is 0 return: pim - (class handle) this performs a resizing but with multiple little steps, each step followed by a soft sharpening. That way you can get better result of sharpened images. ------------------------------------------------------------------- * sharpen sharpen($mode='soft') param: $mode - (string) possible values 'none' | 'soft'| 'medium'| 'strong' return: pim - (class handle) Applys sharpening to the current memory image. You can call it with one of the three predefined pattern, or you can pass an array with your own pattern. ------------------------------------------------------------------- * unsharpMask unsharpMask($amount, $radius, $threshold) param: $amount - (integer) 0 - 500, default is 100 param: $radius - (float) 0.1 - 50, default is 0.5 param: $threshold - (integer) 0 - 255, default is 3 return: pim - (class handle) Applys sharpening to the current memory image like the equal named filter in photoshop. Credit for the used unsharp mask algorithm goes to Torstein Hønsi who has created the function back in 2003. ------------------------------------------------------------------- * smooth smooth($level=127) param: $level - (integer) 1 - 255, default is 127 return: pim - (class handle) Smooth is the opposite of sharpen. You can define how strong it should be applied, 1 is low and 255 is strong. ------------------------------------------------------------------- * blur blur() return: pim - (class handle) Blur is like smooth, but cannot called with a value. It seems to be similar like a result of smooth with a value greater than 200. ------------------------------------------------------------------- * crop crop($pos_x, $pos_y, $width, $height) param: $pos_x - (integer) start position left param: $pos_y - (integer) start position top param: $width - (integer) horizontal length of desired image part param: $height - (integer) vertical length of desired image part return: pim - (class handle) This method cut out a part of the memory image. ------------------------------------------------------------------- * canvas canvas($width, $height, $bgcolor, $position, $padding) param: $width = mixed, associative array with options or integer, - mandatory! param: $height = integer, - mandatory if $width is integer! param: $bgcolor = array with rgb or rgba, - default is array(255, 255, 255, 0) param: $position = one out of north, northwest, center, etc, - default is center param: $padding = integer as percent of canvas length, - default is 0 return: pim - (class handle) This method creates a canvas according to the given width and height and position the memory image onto it. You can pass an associative options array as the first and only param. With it you have to set width and height and optionally any other valid param. Or you have to set at least width and height as integers. Hint: If you want use transparency with rgba and your sourceImage isn't of type PNG, you have to define 'png' as outputFormat with your initially options array or, for example, like this: $image->pimLoad('prefix')->setOutputFormat('png')->canvas(300, 300, array(210,233,238,0.5), 'c', 5)->pimSave() ------------------------------------------------------------------- * flip flip($vertical=false) param: $vertical - (boolean) default is false return: pim - (class handle) This flips the image horizontal by default. (mirroring) If the boolean param is set to true, it flips the image vertical instead. ------------------------------------------------------------------- * rotate rotate($degree, $backgroundColor=127) param: $degree - (integer) valid is -360 0 360 param: $backgroundColor - (integer) valid is 0 - 255, default is 127 return: pim - (class handle) This rotates the image. Positive values for degree rotates clockwise, negative values counter clockwise. If you use other values than 90, 180, 270, the additional space gets filled with the defined background color. ------------------------------------------------------------------- * brightness brightness($level) param: $level - (integer) -255 0 255 return: pim - (class handle) You can adjust brightness by defining a value between -255 and +255. Zero lets it unchanged, negative values results in darker images and positive values in lighter images. ------------------------------------------------------------------- * contrast contrast($level) param: $level - (integer) -255 0 255 return: pim - (class handle) You can adjust contrast by defining a value between -255 and +255. Zero lets it unchanged, negative values results in lesser contrast and positive values in higher contrast. ------------------------------------------------------------------- * grayscale grayscale() return: pim - (class handle) Turns an image into grayscale. Remove all colors. ------------------------------------------------------------------- * sepia sepia() return: pim - (class handle) Turns the memory image into a colorized grayscale image with a predefined rgb-color that is known as "sepia". ------------------------------------------------------------------- * colorize colorize($anyColor) param: $anyColor - (array) like css rgb or css rgba - but with values for rgb -255 - +255, - value for alpha is float 0 - 1, 0 = transparent 1 = opaque return: pim - (class handle) Here you can adjust each of the RGB colors and optionally the alpha channel. Zero lets the channel unchanged whereas negative values results in lesser / darker parts of that channel and higher values in stronger saturisation of that channel. ------------------------------------------------------------------- * negate negate() return: pim - (class handle) Turns an image into a "negative". ------------------------------------------------------------------- * pixelate pixelate($blockSize=3) param: $blockSize - (integer) 1 - ??, default is 3 return: pim - (class handle) This apply the well known PixelLook to the memory image. It is stronger with higher values for blockSize. ------------------------------------------------------------------- * emboss emboss() return: pim - (class handle) This apply the emboss effect to the memory image. ------------------------------------------------------------------- * edgedetect edgedetect() return: pim - (class handle) This apply the edge-detect effect to the memory image. ------------------------------------------------------------------- * getMemoryImage getMemoryImage() return: memoryimage - (GD-Resource) If you want apply something that isn't available with that class, you simply can check out the current memory image and apply your image - voodoo - stuff ------------------------------------------------------------------- * setMemoryImage setMemoryImage($memoryImage) param: $memoryImage - (GD-Resource) return: pim - (class handle) If you are ready with your own image stuff, you can check in the memory image for further use with the class. ------------------------------------------------------------------- * watermarkLogo watermarkLogo($pngAlphaImage, $position='center', $padding=2) param: $pngAlphaImage - mixed [systemfilepath or PageImageObject] to/from a PNG with transparency param: $position - (string) is one out of: N, E, S, W, C, NE, SE, SW, NW, - or: north, east, south, west, center, northeast, southeast, southwest, northwest default is 'center' param: $padding - (integer) 0 - 25, default is 5, padding to the borders in percent of the images length! return: pim - (class handle) You can pass a transparent image with its filename or as a PageImage to the method. If the watermark is bigger than the destination-image, it gets shrinked to fit into the targetimage. If it is a small watermark image you can define the position of it: NW - N - NE | | | W - C - E | | | SW - S - SE The easiest and best way I have discovered to apply a big transparency watermark to an image is as follows: create a square transparent png image of e.g. 2000 x 2000 px, place your mark into the center with enough (percent) of space to the borders. You can see an example here! The $pngAlphaImage get centered and shrinked to fit into the memory image. No hassle with what width and / or height should I use?, how many space for the borders?, etc. ------------------------------------------------------------------- * watermarkLogoTiled watermarkLogoTiled($pngAlphaImage) param: $pngAlphaImage - mixed [systemfilepath or PageImageObject] to/from a PNG with transparency return: pim - (class handle) Here you have to pass a tile png with transparency (e.g. something between 150-300 px?) to your bigger images. It got repeated all over the memory image starting at the top left corner. ------------------------------------------------------------------- * watermarkText watermarkText($text, $size=10, $position='center', $padding=2, $opacity=50, $trueTypeFont=null) param: $text - (string) the text that you want to display on the image param: $size - (integer) 1 - 100, unit = points, good value seems to be around 10 to 15 param: $position - (string) is one out of: N, E, S, W, C, NE, SE, SW, NW, - or: north, east, south, west, center, northeast, southeast, southwest, northwest default is 'center' param: $padding - (integer) 0 - 25, default is 2, padding to the borders in percent of the images length! param: $opacity- (integer) 1 - 100, default is 50 param: $trueTypeFont - (string) systemfilepath to a TrueTypeFont, default is freesansbold.ttf (is GPL & comes with the module) return: pim - (class handle) Here you can display (dynamic) text with transparency over the memory image. You have to define your text, and optionally size, position, padding, opacity for it. And if you don't like the default font, freesansbold, you have to point to a TrueTypeFont-File of your choice. Please have a look to example output: http://processwire.com/talk/topic/4264-release-page-image-manipulator/page-2#entry41989 ------------------------------------------------------------------- PageImage Manipulator - Example Output

Hi guys, i finally finished my personal website. PW and jQuery as always and Bootstrap as css framework. English version coming soon... http://complementaryart.com

Adrian added support for FieldtypeCropImage. Big thanks !

Fixed a bug where ImageInterceptor failed to recognize images in some circumstances. When images are not in the first imagefield found in the page template, it fails to load. This is fixed with the latest update. also pushed version number.

In the end was an angularjs problem, two steps to solve it First: adding that piece of code to my .js angular.module('myApp') .config(function($httpProvider){ $httpProvider.defaults.useXDomain=true; delete $httpProvider.defaults.headers .common['X-Requested-With']; }); Second: adding what interrobang says to .htaccess # ------------------------------------------------------------------------------# | Cross-domain AJAX requests |# ------------------------------------------------------------------------------ # Enable cross-origin AJAX requests.# http://code.google.com/p/html5security/wiki/CrossOriginRequestSecurity# http://enable-cors.org/ <IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule> Thanks to everybody.

you also should check apache / htaccess, especially: <IfModule dir_module> DirectoryIndex index.php index.html index.htm </IfModule>

Hey guys, The company I'm working for has launched two new pw's recently built with my Spex module, and there are more coming! http://www.deluca.ca/ http://alpine-animal.net/

hey guys, I just found this plugin. Great work. It saved some time to code some sitemaps on my own! I'm currently developing my site on a windows platform. After installing the plugin I got a weird error message: Error: Exception: Unknown Selector operator: '' -- was your selector value properly escaped? After some debugging I found out that this seems to be an issue with directory seperators on windows machines. I just added 3 lines of code to fix this problem for me. I don't know if anyone else suffers from this windows... ehh... bug, so here's what I added (in Line 42, after setting $startpage): if(DIRECTORY_SEPARATOR == '\\' && $startpage == '\\') { $startpage = '/'; } Perhaps this will help someone else with same problems Cheerio & thanks!

Indeed it was quite simple ( once I figured out the history API) You need to use pushState() to change URL ... and on popstate event (triiggered by back / forward buttons or javascript:history.back() ) .. just do the same the user would do ( check URL document.location.href and load the content) .. the gotcha is if never pushState if you come to the URL via popstate event.... this broke it at first https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Nice work! I really like the deluca.ca site. I will definitely try the Spex on my next project. There seems to be more and more high quality agencies finding PW and using as their preferred CMS. I think we should have official or unofficial listing of all agencies and/or freelancer somewhere!?

$config->styles->remove("/path-of/other/styles/you/dont/want/file.css"); or : $config->styles->removeAll();

Macrura has a good suggestion. You could something like this: <?php $fieldtype = "FieldtypeText"; $ts = array("home", "basic-page"); $fields = "test1, Test 1, This is a first test creation test2, Test 2, This is a second test creation"; foreach(explode("\n", $fields) as $field){ $f = new Field(); $components = explode(",",trim($field)); $f->name = $components[0]; $f->type = $fieldtype; $f->label = $components[1]; $f->description = $components[2]; $f->save(); foreach($ts as $t){ $template = $templates->get($t); $template->fields->add($f); $template->fields->save(); } } You can place this is a template file, or to make life easier, you can simply paste it into the Code Tester module or the Hanna code module (using the code test functionality), which makes it super quick and easy to run the code whenever you want. All you need to do is worry about the editing the $fieldtype, $ts (templates) and $fields variables - you should leave the rest untouched. Each line in the $fields string is a new field with the components being: name, label, description This will create all the defined fields and automatically add them to all the templates you specify in the $ts array. Hope that helps - let us know if you need any help with it.

Hanacode is cool, I used it in combination of tags. (image tags) [[images tags="cars bikes boats"]] Now you could render albums instead of images when there are more then 6 photo's groups or something. There are two annoying things about HannaCode 01. after save it returns to the list of hana codes. 02. I can't use tabs. --- ps, Maybe we need a repository of good Hanna Codes.

One other immediate solution is to use Ryan's Hanna Code. I adapted the module to Hanna code, and it seems to be working pretty well, although the tags are a bit different: {fieldname:2} and [[images f="fieldname" n=2]] It looks a bit more complicated at first, but it's not really. Here is a resumed explanation: defaults: [[images p="0" f="0" n="0"]] where p is the page number, f is the field name and n is the image position on that field. The above is equivalent to simply: [[images]] And it will get all the images from the first field of the "image" type on the same page of this Hanna Code field. Because: if $p="0"; // $p will hold the $page object if $f="0"; // $f will hold the first images field found on $p if $n="0"; // $n will echo all the images from $f From here you can have any combination: [[images n="4"]] // echoes the image on the forth position of the first image field of this page [[images p="1" f="myimages"]] // echoes all the images of the field "myimages" in the homepage That's it. Here is the string to import this Hanna Code: !HannaCode:images:eyJuYW1lIjoiaW1hZ2VzIiwidHlwZSI6IjIiLCJjb2RlIjoiXC8qaGNfYXR0clxucD1cIjBcIlxuZj1cIjBcIlxubj1cIjBcIlxuaGNfYXR0cipcL1xuJG15UGFnZSA9ICRwID8gJHBhZ2VzLT5nZXQoJHApIDogJHBhZ2U7XHJcbiRmaWVsZE5hbWUgPSAkbXlQYWdlLT5maWVsZHMtPmdldCgndHlwZT1GaWVsZHR5cGVJbWFnZScpO1xyXG4kbXlGaWVsZCA9ICRmID8gJG15UGFnZS0+JGYgOiAkbXlQYWdlLT4kZmllbGROYW1lO1xyXG5cclxuJGluZGV4ID0gJG4tMTtcclxuXHJcbmlmKCRteUZpZWxkIGluc3RhbmNlb2YgUGFnZWltYWdlcyl7XHJcbiAgICBpZigkbil7XHJcbiAgICAgICAgJGltYWdlID0gJG15RmllbGQtPmVxKCRpbmRleCk7XHJcbiAgICAgICAgJGltYWdlID0gXCI8aW1nIGNsYXNzPSdJbWFnZVRhZ3MnIHNyYz0nJGltYWdlLT51cmwnIGFsdD0nJGltYWdlLT5kZXNjcmlwdGlvbic+XCI7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICAgICRpbWFnZSA9IFwiXCI7XHJcbiAgICAgICAgZm9yZWFjaCgkbXlGaWVsZCBhcyAkaW1nKXtcclxuICAgICAgICAgICAgJGltYWdlIC49IFwiPGltZyBjbGFzcz0nSW1hZ2VUYWdzJyBzcmM9JyRpbWctPnVybCcgYWx0PSckaW1nLT5kZXNjcmlwdGlvbic+XCI7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG4gICAgXHJcbn0gZWxzZSBpZigkbXlGaWVsZCBpbnN0YW5jZW9mIFBhZ2VpbWFnZSl7XHJcbiAgICAkaW1hZ2UgPSBcIjxpbWcgY2xhc3M9J0ltYWdlVGFncycgc3JjPSckZmllbGQtPnVybCcgYWx0PSckZmllbGQtPmRlc2NyaXB0aW9uJz5cIjtcclxufSBlbHNlIHtcclxuICAgICRpbWFnZSA9IFwiXCI7XHJcbn1cclxuXHJcbmVjaG8gJGltYWdlOyJ9/!HannaCode