Search the Community

Inspired by the "max megapixels" option for the client-side image resizer, I made a simple module that adds target megapixel resizing for Pageimages. Image Megapixels A module for ProcessWire CMS/CMF. Adds methods to Pageimage objects useful for resizing to a target megapixel value. Example use You are creating a lightbox gallery of images with different aspect ratios. For the enlargements, rather than setting a fixed maximum width or height you want all the enlargements have the same size in terms of area, allowing a panoramic image to be wider than a square image, for instance. Another use case is sizing a gallery of sponsor logos. The supplied logos are different aspect ratios but you need to ensure the logos are sized so each has equal prominence on the page. The effect of resizing three different aspect ratios by the same megapixel target value can be seen in the screenshot below: Installation Install the Image Megapixels module. API // basic usage $pageimage = $pageimage->megapixels(float $megapixels); // usage with all arguments $pageimage = $pageimage->megapixels(float $megapixels, array $options = []); Example: foreach($page->images as $image) { echo "<img src='$image->megapixels(0.8)->url' alt='$image->description'>" } If needed you can supply an array of options for Pageimage::size() as a second argument. Getting dimensions If you just want to get the height and width dimensions needed to size an image to the given number of megapixels you can use the Pageimage::megapixelsDimensions() method that this module also adds. It returns an array with width and height as keys. Example of how this could be used to output a gallery of logos: foreach($page->logos as $logo) { $dimensions = $logo->megapixelsDimensions(0.01); $width = $dimensions['width']; $height = $dimensions['height']; $width2x = $width * 2; $height2x = $height * 2; echo "<img src='{$logo->size($width, $height)->url}' srcset='{$logo->size($width, $height)->url} 1x, {$logo->size($width2x, $height2x)->url} 2x' alt='Logo' width='$width' height='$height'>"; } https://github.com/Toutouwai/ImageMegapixels https://processwire.com/modules/image-megapixels/

Hi PW fanatics In this post I share two of my addHookMethods for those interested. As you surely already know (if not, time to take a look at it) the Wire::addHookMethod() and the Wire::addHookProperty() API methods can be used to "breath some extra OOP" into your projects. Using addHookMethods and addHookProperty are alternatives to "Using custom page types in ProcessWire". The methods I want to share: basically the idea here is to get the URL pointing to images uploaded in the admin without writing much code in the template files. With methods like these below, it does not matter what Formatted value is set to the images, because some predefined defaults are used in all circumstances. #1 Example template file code: <?php $img_src = $latest_article->siteFeaturedImage(); ?> <img src="<?= $img_src ?>" alt="<?= $page->title ?>"> addHookMethod goes into /site/init.php <?php /* Returns URL of the original Pageimage of Article. * Image field's value can be either null (default missing image), Pageimage or Pageimages. * * @return string */ $wire->addHookMethod('Page::siteFeaturedImage', function($event) { $page = $event->object; if ($page->template != "article") { throw new WireException("Page::siteFeaturedImage() only works on 'Pages of article template', Page ID=$page is not such!"); } $article_featured = $page->getUnformatted('article_featured'); //always a Pageimages array if (count($article_featured)) { $img_url = $article_featured->first()->url; } else { $img_url = urls()->templates . "assets/img/missing-article_image.jpg"; //we show this when image is not available } $event->return = $img_url; }); ?> #2 Example template file code: <?php $img600_src = $page->siteProductImageMaxSize(600, 600, ['rotate' => 180]); ?> <img src="<?= $img600_src ?>" alt="<?= $page->title ?>"> addHookMethod goes into /site/init.php <?php /* Generates image variations for Product images. Returns URL of Pageimage. * Image field's value can be either null (default missing image), Pageimage or Pageimages. * * @param int arguments[0] Max allowed width * @param int arguments[1] Max allowed height * @param array arguments[2] See `Pageimage::size()` method for options * @return string */ $wire->addHookMethod('Page::siteProductImageMaxSize', function($event) { $page = $event->object; if ($page->template != "product") { throw new WireException("Page::siteProductImageMaxSize() only works on 'Pages of product template', Page ID=$page is not such!"); } $width = isset($event->arguments[0]) ? $event->arguments[0] : 48; //default width $height = isset($event->arguments[1]) ? $event->arguments[1] : 48; //default height $options = isset($event->arguments[2]) ? $event->arguments[2] : $options = array(); //default empty options $product_image = $page->getUnformatted('product_image'); //always a Pageimages array if (count($product_image)) { $img_url = $product_image->first()->maxSize($width, $height, $options)->url; } else { $img_url = urls()->templates . "assets/img/product-missing-image.jpg"; //we show this when image is not available } $event->return = $img_url; }); ?> BTW, you can find more examples here: How can I add a new method via a hook? Working with custom utility hooks Adding array_chunk support to WireArray addHookProperty() versus addHookMethod() Have a nice weekend!

hey, a quick question about importing images from an external URL: I know that this is possible in general (at least that's what a forum search told me). My use case is slighty different and I am just curious if there's a way to achieve the following: I am currently writing a module which shows external news from Facebook which could contain an image. The news are simply cached in the database - there is no page created from it. What I want to make use of are the handy image functions to crop and resize images coming from FB - *without* having a page. Is this even possible? If yes: awesome. If not, I guess the most promising workaround would be having a hidden page somewhere acting as image container for such posts as usual: happy to hear your thoughts on that one ?

I'm trying to get the rendered output of a page in a custom module. In my custom Process module, I have the following: public function ___execute() { $page = $this->pages->get(1); $page->of(true); $op = $page->render(); return "Hello World"; } An exception is thrown: The srcset functionality is used liberally to generate the desired output of a page. Any suggestions on what I can do to avoid the srcset error? Edit 1: using MarkupSrcSet module: https://processwire.com/modules/markup-src-set/ - which adds the srcset method in it's ready() function. Is it possible to boostrap this prior to calling the render() function? Edit 2: bypassed the issue specific to the srcset above, it further appears that rendering output is problematic when using MarkupRegions. Title updated and tagged accordingly. Can anyone provide insight into how to retrieve the output of a page using markup regions in the template layer?

Hello Gentlemen and Ladies. I have not posted for a while but now i need your help figuring out some things. The Documentation has come a long way and i love it. Though on the page: https://processwire.com/api/ref/pageimages/ I am trying to figure out if when i want to add an image to an existing image field with multiple images alldready in it and using the method $page->images->add() <?PHP /* get the images object array for the Page */ $myPageImg = $page->images; /* define the image to add */ $newImg = 'http://www.somesite.com/image.jpg'; /* Thanks Autofahrn, forgot about the output formating */ $page->of(false); /* create a new Pageimage object with the given URL and add to the Pageimages array */ $myPageImg->add($newImg); /* save the page */ $page->save(); ?> I am pretty sure i missed a few steps in the code above? Is that string suppose to be an URL like "http://www.somesite.com/image.jpg" and the method will automaticly download the image and create an Pageimage Object and add it to Pageimages array or does it have to exist on the host first and i supply a file path to that image? I guess im confused about that, hope you guys could clarify that for me. And if it needs to be allready downloaded to my host before adding the image, what would be the best API methods for that task? Just point me in the right direction and i will figure it out. Sorry for the bad explaination but i could not figure out a better way of asking. Thanks in advance. /EyeDentify

Hi all, Just wondering if someone with a bit more PW knowledge than me could give a run down of what this method actually does and how its achieved. I get that it rebuilds image variations but based on what settings? If I wanted to rebuild all the websites image variations but at say a reduced image quality can this be set somewhere globally that this method would take into account? For some context I have built a fairly simple module to delete all the image variations connected to any FieldtypeImage which is being used on the website, for the most part this works quite well. As I was quite happy with how that turned out I figured I would give the module another option to rebuild the images also. So there would be a 'Remove' and 'Rebuild' button on the modules config page. The idea being that I could use this tool to delete all the image variations, update some global settings then regenerate them all but currently it doesn't appear to do that. I assume this is either because my codes borked or im misunderstanding something fundamental about how rebuildVariations() works.

Good Day! I am a beginer of processwire project. Thanks developers for your great work. this CMS is very Good! I have a question: how get Pageimage object of PageArray from "Page" (PageArray) field type? I have too tamplates: affiliates and their teachers. The template of affiliates have a field "teachers_list" wich is "Page" (PageArray) type. When I vaffiliate teachers in a cycle, I can not access the teacher photo object and change its size. I get an error returning: " Fatal error: Call to a member function maxWidth() on null ". When i trying get URL attribute : $teacherItem->teacher_photo->url, i receive message: " Trying to get property of non-object ". But this code works: $teacherItem->teacher_photo["url"]. The print_r function outputs the following information: "ProcessWire \ Pageimage Object ([changes] => Array ([0] => formatted) [hooks] => Array ([Pageimage :: pim2Load] => PageImageManipulator02-> getPageImageManipulator02 () in PageImageManipulator02.module ) [Data] => Array ([basename] => p16.jpg [description] => .... - ..... [tags] => [formatted] => 1 [modified] => 1487079115 [created ] => 1487079115))". my PHP code: foreach ($page->teacher_list as $teacherItem): $out .= " <tr> <td class=\"alignTop\"> /* !!! my truble */ <img src=\"{$teacherItem->teacher_photo->maxWidth(250)->url}\" /> /* !!! my truble */ </td> <td class=\"alignTop\"> <div class=\"teach_style12\"> <strong>$teacherItem->fio</strong><br/> $teacherItem->degree<br/> $teacherItem->headline_detail </div> <div class=\"teach_style9\"> $teacherItem->body </div> </td> </tr>"; endforeach; Please, help me. Where is my error?

Hi, I have experimented with naming of images. For people who want try out different settings with images, the current naming scheme isn't of good usage. I have added some code to the Pageimage::size method, Pageimage::isVariation, and to the Imagesizer to make it work like here: http://images.pw.nogajski.de/new-naming-convention/ It is open for discussion --- Additional to that I like to implement a new temporary option on a per image base to force recreation of the requested image also if a cached version is available. I don't like to use all the time $image->removeVariations(). What is a useful option name for that? forcenew recreate forcecreate forcerecreate ...? $options = array( 'cropping' => true, 'quality' => 80, 'forcenew' => true ); $img = $image->size(120, 160, $options); --- And for the naming convention I am unsure if a short custom appendix should be enabled too, or if this would be to much? $customappendix: a-z0-9 strlen max 10 ?

When working with Pageimages and one don't want to use the default options the coding possibilities should be enhanced. For example, if you are working with the default settings from site/config.php, the setting for cropping is true! If you want to limit the maxlength of mixed images (landscape and portrait) for now you have to do it like this: $img = $page->images->first(); $options = array('cropping'=>false); echo "<img src='{$img->size(500,500,$options)->url}' alt='' />"; We have to use an options array. - But I think it is more straight forward if we could call it like this: $img = $page->images->first(); echo "<img src='{$img->setCropping(false)->size(500,500)->url}' alt='' />"; If we can use these setters like they are available in ImageSizer (setCropping, setUpscaling, setQuality, setSharpening, setAutoRotation) together with Pageimages, the coding-flow feels better and also readability is better What do you think? ------ If this is found to be useful theres not much to do to achieve that. The pageimage class only needs some wrapper methods to store the individualOptions. These get merged together with the default-, config- and direct passed options. Thats all. I have tested this and here are the code snippets I use: And the complete file is here:

I am trying to extend InputfieldImage & FieldtypeImage. I want something like this: $page->image->action('param'); When I call method action() i want read settings saved with my ExtendedInputImageField field. Then i want perform action based on that settings. I have first part. I can save EntendedInputImageField settings when I configure new field. In this way I save the settings: public function ___getConfigInputfields() { $inputfields = parent::___getConfigInputfields(); //[...] $field = $this->modules->get("InputfieldTextarea"); $field->attr('name', 'advSetting'); $field->attr('value', $this->advSetting? (string) $this->advSetting : ''); $field->label = $this->_("Advenced Settings"); $field->description =''; $fieldset->add($field); //[...] $inputfields->add($fieldset); return $inputfields; } <?php Pageimage::action Hook class FieldtypeExtendedImage extends FieldtypeImage { // [...] public function init() { $this->addHook('Pageimage::action', $this, 'action'); } public function action(HookEvent $event) { // How can I read 'advSetting' settings here? } //[...] }