Search the Community

How can I globally limit the max. dpi image size in ProcessWire? I have set max width and height for uploaded images and I also added a description with additional information. The image field is cropped and scaled in various sizes. However the image dpi remains untouched. Some users still managed to upload large 300dpi images, which causes massive server CPU spikes on every page reload. I tried to teach those users, but they simply don't care. 300dpi images should not be uploaded to PW in the first place. What is the best option to prevent users from uploading 300dpi images? What is your recommendation?

Hi! I have a image field with echo image->size(300,300)->url; here: http://nicegrp.co.uk/dev/mpa/ which when a gif is added the animation works fine. however on another page: http://nicegrp.co.uk/dev/mpa/illustrators/melvin-galapon/ im using: echo image->size(300,0)->url; the animation is not retained, cant see any other differences.

How might I programmatically output images from an Image field from another template in descending order? I want to reverse the order of images on the front-end page (see code below). I want to keep the order in ProcessWire Admin. The Image field accepts multiple images. Code: foreach ($page->children() as $p) { if( isset($p->foo->id) && $pages->get($p->foo->id)->images->count>0 ) { foreach ($pages->get($p->foo->id)->images as $img) { echo "<img data-src=\"{$img->width(140)->url}\" width=\"\" height=\"\" alt=\"{$p->foo->title}\" class=\"uk-align-right uk-visible@m\" uk-img>"; } } } Things I tried (that didn't have an effect): $pages->get($p->foo->id)->images->sort("sort=-sort") $pages->get("id={$p->foo->id},sort=-sort")->images I also wanted to try a for() loop but didn't know how to.. # Failed attempts: $pages->get($p->foo->id)->images[0]; $pages->get($p->foo->id)->images->1; # This works - but only for first and last (not a third image) and I would need to check if each image existed. $pages->get($p->foo->id)->images->first; $pages->get($p->foo->id)->images->last; I am aware that ProcessWire isn't specifically designed for working with child pages this way - it's probably even a bad practice - it's just that it almost always works very, very well. ? PS: Would you normally set the width and height attributes, or leave them out?

This short script loops through some images from an XML feed and pushes new ones to an image field. It all works perfectly, except for some reason the last image (only) in the loop each time doesn't receive the image description... can everyone spot why? TIA! ? foreach ($propertyImages as $img) { $fileName = trim($img[0]); if ( !empty($fileName) ) { $imgPath = '../property_data/'.$fileName; if(file_exists($imgPath) && !in_array(strtolower($fileName),$currentImages)) { $p->property_images->add($imgPath); $p->save(); $newImg = $p->property_images->last(); $newImg->description = $img[1]; $p->save(); } } }

Hello everyone! I have a markup and image field question: I have a markup in which a gallery preview should be displayed on home page. This gallery have a special markup, 3 of 4 images have special image ratio. The gallery looks like this. The html markup is like this: <div class="uk-section-muted" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-top-small; delay: 200;"> <div data-src="./assets/images/arrahof/home-restaurant-bg.svg" class="uk-background-norepeat uk-background-contain uk-background-top-center uk-section uk-section-large" uk-img> <div class="uk-container uk-container-small"> <div class="uk-margin-large" uk-grid> <div class="uk-width-1-1@m"> <h2 class="uk-text-center" uk-scrollspy-class>Das Angebot im ArraHof</h2> </div> </div> <div class="uk-grid-small uk-grid-margin-small" uk-grid> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-padding-large uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">Lorem Ipsum</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </a> </div> </div> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x604" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="604" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </a> </div> </div> </div> <div class="uk-grid-small uk-grid-margin-small" uk-grid uk-height-match="target: .uk-card; row: false"> <div class="uk-width-2-3@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x400" data-width="610" data-height="400" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </div> </a> </div> <div class="uk-width-expand@s"> <div class="uk-margin-remove-vertical uk-text-center" uk-scrollspy-class> <a class="el-container uk-inline-clip uk-transition-toggle uk-link-reset" href="#"> <img class="el-image" data-src="https://via.placeholder.com/610x820" data-sizes="(min-width: 610px) 610px" data-width="610" data-height="820" alt="Placeholder Image" uk-img> <div class="uk-overlay-default uk-transition-fade uk-position-cover"></div> <div class="uk-position-center uk-position-small"> <div class="uk-overlay uk-transition-fade uk-margin-remove-first-child"> <h3 class="el-title uk-h4 uk-heading-divider uk-transition-slide-top-small uk-margin-top uk-margin-remove-bottom">The Williams family</h3> <div class="el-content uk-panel uk-transition-slide-bottom-small uk-margin-top">Comfort Food</div> </div> </div> </div> </a> </div> </div> </div> <div class="uk-margin-large" uk-grid> <div class="uk-width-1-1@m"> <div class="uk-text-lead uk-width-xxlarge uk-margin-auto uk-text-center" uk-scrollspy-class>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</div> <div class="uk-margin-medium uk-text-center" uk-scrollspy-class> <a class="el-content uk-button uk-button-default uk-button-large" href="#">Unterkunft</a> </div> </div> </div> </div> </div> How can I achieve when I have an image field to add the custom markup within the image field? I have no clue to get this done. Thank you!

I'm wondering if it is possible to add a label to the description input in image fields (in the admin). I'm using the module Image Extra, which has labels for each input, but I'd like to add a label to the default 'description' input too. The image below illustrates this: If there is no way (no hook?) then, I suppose I could just not use the default description and add a new description input with the Image Extra module. But I thought I'd ask in case I (or others) ever want to do this without using the module (i.e. just the one input required). I'm using PW 3.0.98 Thanks. --- FYI: yes, that is a cat and not a quilt -- this is on my local dev server and I don't have the actual photos yet! She is on a quilt, so it counts... technically.

Is there a way to change the input options for the images field? I am trying to figure out if it would make sense to use an external script like Zenphoto as a central media library/manager. How could I connect that with Processwire? 'Choose File' in the images field would have to be able to open that 3rd party media library or a directory on the server or some cloud service instead of (only) the client file manager. Could justb3a's field type module Image Extra be part of the solution? I will try that and report back. Other field types/modules? I know there is a pro module Media Manager that does look very slick, but would prefer to make this work with a mature, tested 3rd party script if a central media gallery is never going to be a core Processwire feature.

So I'm new to this. But i'm trying to set up a site, and I want to have a different background image for every page. My plan was to put an image field on on every page in the template and then pass that image url to the background-image style for that page. Maybe there is an easier way to do it, but it seemed like a good place to start. Anyone have any advice on how to do what I'm saying or to do something similar. Thanks

Hello, A friend posted a question about how obtain the markdown code for a image when you are using the markdown editor. Here I created a module just for that. You can download it here. https://github.com/NinjasCL/InputfieldImageMarkdownCodeAdditionalFields cheers.

Maybe I have messed up somewhere here (As it is working on my local server), but an image used as the header on the live branch has just suddenly "disappeared". I imported all of my fields from my local branch (which included the pageHeader image field), and loaded in my content just fine. Yesterday I was just going through a few of the demo pages and the header image is no longer displaying on site. I looked at the page itself on the backend and the image is displaying there, just not in the front end. Is it possible for the data to corrupt over a few weeks? If you look at the screenshot, it looks like the code isnt even pulling in the image to the src.

$blocks = ''; foreach($page->home_blox as $block) { $bgimg = ''; if($block->pg->images->getTag('blockbg')) $bgimg = "<img src='{$block->pg->images->getTag('blockbg')->url}'/>"; $filters = ''; foreach($block->home_filters as $filter) { $filters .= " --{$filter->value}"; } $body = $block->pg->get('summary|body'); $output = <<<EOT <div class="unit-{$block->home_blockwidth}0 element-item{$filters}"> <div class="background">{$bgimg}</div> <div class="overlay"> <header><h2 class="title"><i class="fa fa-clock-o"></i> {$block->pg->title}</h2></header> <div class="inner"> {$body} </div> </div> </div> EOT; $blocks .= $output; } echo $blocks; I have tags enabled on the image field, so why am I getting this error?

So I'm outputting an image field array, I believe this is known as WireArray (bare with me, I only started developing for ProcessWire Yesterday). The cheatsheet has to be one of the best things ever! Not only does it show how simple ProcessWire is and how well crafted the API is, kudos to whoever came up with the cheatsheet. One thing I would like to see is example usages when you click more because at the moment, more doesn't really tell you anything more. I can tell it's inspired by jQuery's API documentation so I have no doubt this will be coming. So, moving on to the problem I'm having, looking at the cheatsheet $a->shift() will remove the first item for the array and then return it. So I have $gallery = $page->gallery; // A multi-upload image field $featured = $gallery->first()->size(800,550)->url; // Works fine $slider = $gallery->shift() // Doesn't work $slider = $gallery->pop() // Doesn't work $footer = $gallery->last()->size(800,1100)->url; // Works fine So my page layout goes like this: ___________ |__________ | <-- $featured // First Image | | | $slider // Image Gallery --> | | | <-- $page->content // Body Content Field |_____|____ | |__________| <-- $footer // Footer Image I have no idea if that example helps, but for usability that's how I want the gallery to work, so the user can just drag all their images in at once, move the featured to the front and the footer to the back. However $gallery->shift() returns nothing and $gallery->pop() returns nothing. $gallery->slice(1) get's rid of the first one in that array but I want to get rid of the first and last. Thanks, Tom

Hello everybody, I'd like to use the images field as an upload UI. One image field would hold 1000+ images and I am wondering how this would perform in the backend. I would only need the upload functionality. No need for thumbnail display, ordering etc. Has anyone experience in using an image or file field with very large quantities of images? Or is there an alternative upload UI for PW that stores all images to a single folder? EDIT: I don't need to upload 1000+ images in one go.

I only now discovered that it's possible to declare individual input-field widths. Excellent feature! However, image-fields are not supported. Well, the fields are resized, but it seems to be still "display: block" i.e. each image-input field is displayed one below the other. With image-heavy pages, it would be cool to say e.g. "image input field: width: 33%" and being able to show more images per row. This would make sorting much easier. Right now I have to resize the browser content (CTRL -) so I can see more images per screen real estate. Even then, I have to often move an image up or down several times to reorder them. I guess all it would take is changing / adding a CSS property somewhere? e.g. from "display: block" to "display: inline" or similar.

Hello, Is there a way I can add more data fields than description field attached to image? Simply multiple description fields would already help a lot. I often find myself wanting to couple more data with an image. I know I could use a repeater field, but then I loose multiple upload, a killer feature for the editors. j