Search the Community

Showing results for tags 'Image'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to ProcessWire
    • News & Announcements
    • Showcase
    • Wishlist & Roadmap
  • Community Support
    • Getting Started
    • Tutorials
    • FAQs
    • General Support
    • API & Templates
    • Modules/Plugins
    • Themes and Profiles
    • Multi-Language Support
    • Security
    • Jobs
  • Off Topic
    • Pub
    • Dev Talk

Product Groups

  • ProDrafts
  • ListerPro
  • ProFields
  • ProCache
  • Form Builder
  • Likes
  • ProDevTools
  • Custom Development


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 137 results

  1. Markus Breitinger

    I want to use Particle.js as background of my page. What modules do i need and where must i put the code? The usage of particle.js in plain HTML is in the attached files. index.css index.html
  2. I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that. Worked fine in the previous version of PW
  3. Noel Boss

    Hi, I'm stuck since hours and don't know what to do. Here is my Problem: I try to generate Previews of PDF using imagick. I have 4 PDF, I generate a preview of the first page of the pdf, save it to a temporary file and want to import it using the api into an image field. It works for the later 3 pdf but not the first. I add it to the image field and save it. Inside the function that saves it, the image is stored in 'data' as well as in 'itemsAdded' but as soon as i leave the function, its nowhere to be found. Process: 1. create previewimage using imagick and create Pageimage > works 2. add image to filed 'filepreviews', returns Pageimages array with image added > okay 3. save page > returns true 4. Outside renderPreview method, image is not anymore in 'filepreviews' // mymodule // … // foreach($files as $file){ $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); // if there is no preview image… if (!$preview instanceof Pageimage) { $this->renderPreview($file) // we create one using $this->renderPreview > should return true on successful save dump(wire('page')->filepreviews); // my Image is nowhere to be found $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); } // end for each // render a preview of an otherwhise not supported file format // return true if sucessfull save private function renderPreview($file) { $page = wire('page'); // get path to temporary image $tempFile = $path.$file->basename(false).'-preview.jpg'; // … some imagick code // … and save it: $imagick->writeImage($tempFile); $img = new Pageimage($page->filepreviews, $tempFile); $img->description = $file->basename(false); // destroy temp image unlink($tempFile); // this is my Pageimage, all good… dump($img); // save image, my Pageimage can be found in data and itemsAdded – all good dump($page->filepreviews->add($img)); $page->of(false); $success = $page->save(); // sucess = true dump($success); return $success; } Second question: Would there a generally better approach? Like using pageFiles somehow. Goal is to be able to use the image api like scale etc – I don't generally need the images to be stored in an image field.
  4. theo

    Here is my first processwire module (beta). A lot of "first times". First time Github, Markdown and of course PW Modules. So be gentle please. I hope it works.
  5. I want to use the API to duplicate an image from one field to another (on the same page). The duplicated image should be a new file so both fields should not point to the same physical file. The field that holds the image that I want to duplicate is called 'image_front' and the duplicated image should go to a field called 'image_thumb'. Any image that is already attached to image_thumb should be removed because it should hold only one file. The same goes for image_front, it should have only one image. Here's what I have so far: $original = $page->image_front; $file = $original->getFile($original); $new = $original->clone($file); $page->save(); $page->image_thumb = $new; $page->save('image_thumb'); This works in the sense that the image is successfully cloned but it is attached to both fields so both fields end up have their original image plus the cloned image. 'Image_thumb' should only have the cloned image and 'image_front' should only have the original image. What would be the best way to remove those images and am I even approaching this correctly?
  6. Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup. In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again?
  7. Hello, I noticed today some strange behaviour in connection with the multi-language plugin. I wanted to create a multi-language page and to display the languages in the frontend. To make it more fancy I wanted to add a flag icon to every language. So I used an image field I already had (image_small) and added it to the language-template. So far so good. Then I uploaded two icons and tried to fetch them in the frontend. I have the languages default (English/Englisch) and de (German/Deutsch) and the following code: <?php echo 'active|'.$user->language->image_small->url; foreach($languages as $language) { echo $language->title.'|'.$language->image_small->url; } ?> Result on an english page: active |/site/assets/files/1021/united-states.png English |/site/assets/files/1021/united-states.png Deutsch|/site/assets/files/1081/ Result on a german page: active|/site/assets/files/1081/ English|/site/assets/files/1021/ Deutsch|/site/assets/files/1081/ Somehow he can't get the German flag image at all and only the English page the English flag. But if I'm fetching the images from the $languages variable, it works. So I use this temporary as a workaround: <?php echo 'active|'.$languages->get($user->language->name)->image_small->url; foreach($languages as $language) { echo $language->title.'|'.$languages->get($language->name)->image_small->url; } ?> Result English: active|/site/assets/files/1021/united-states.png English|/site/assets/files/1021/united-states.png Deutsch|/site/assets/files/1081/german.png Result German: active|/site/assets/files/1081/german.png English|/site/assets/files/1021/united-states.png Deutsch|/site/assets/files/1081/german.png Everything is fine with this workaround. But why isn't working with the first code? Thanks for any help. Environment: PHP 5 ProcessWire 2.7.2
  8. I want to split my output of an image array, see my code here: <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> <div class="row"> <?php foreach($page->umf_imgs as $image) {echo "<div class='one-fourth column refs'><img src='$image->url'></div>";} ?> </div> The number of images is 11, but I only want to add four in a row. Is it possible to grab them, e.g. image 1-4, image 5-8, image 9-12?
  9. Hi all, I'm really new to ProcessWire, maybe I missed the solution in the documentation. I'm working on a site which involves a lot of image upload fields, and I'm always getting many timeout errors. I'm pretty sure it's because I generate too many variations on a single page load (around 20 images with 7 different sizes, for them to be responsive). I can't use ImageSizerEngineIMagick to help (my host doesn't support it). I was wondering if there was a way to hook to the process of client-side image resizing ( to generate the different variations (as it seems really faster). If not, is there a way to generate the different variations on upload and not on page load ? Any ideas and suggestions are welcome!
  10. Robin S

    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 Adds a method for Pageimages that resizes 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. 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.
  11. Hi everybody, i am looking for a way to "mark" only one image in a imagesfield with multiple images, so i can request it on the homepage. I am making a collection of pages with images and on the home page i want to display one image out of every childpage (not the first image of every child) "I have been thinking on a switch next to the images so that i can "mark" the image, only one image in the imagesfield can be "marked" Any ideas how to archive this ?
  12. It would be great if 'choose file' in the image field would be able to handle other input sources than only the client's OS file manager; Amazon S3/cloud storage, Dropbox, an image folder on an intranet, another folder on the same server where PW is installed, whatever. It would be super convenient if you could just upload images to a folder/directory in the templates folder or root, without any processing, and be able to access that as a source option in the image field. Any way to make that happen? I had started a thread about this here. BitPoet posted a very helpful partial solution specifically for Zenphoto, but it would be great if there was a more source agnostic solution built into Processwire. Letting Processwire download images from any external media gallery/repository would be a good alternative to having a full centralized Media Manager. Or am I missing something that would make this impossible/a bad idea? Edit: Robin S has a module that adds one alternative input option.
  13. I have a "strange" issue with my dev set up, that I just noticed today. I set up an image field named "dev_gallery" and checked the "use tags" option when setting it up. I went to add a couple image to the field, and noticed that the tags option is not displaying at all for the image. Currently, the description field is the only current field on image edit. Have I missed a basic setting to enable this? I am currently using PW 3.0.62 as well.
  14. Hello dear community I have a problem with a front edit possibility inside a OWL gallery. The thing is, normally you do a double click to edit something directly on a page. In my case a single click opens up a picture inside a gallery, so I can't "hit" the editing. <div class="demo-gallery"> <ul id="lightgallery2" class="list-unstyled row"> <li class="img-md-12 mb-12 mb-sm-12 mb-md-12 mb-lg-12 mb-xl-12 col-12 col-md-12 img-fluid full-height" data-responsive="" data-src="<? echo $page->page_home_owl_00_img->url; ?>" data-sub-html="<h4><? echo $page->page_home_owl_00_h4; ?></h4><p><? echo $page->page_home_owl_00_p; ?></p>"> <a href=""> <img class="img-responsive" src="<? echo $page->page_home_owl_00_img->url; ?>"> </a> </li> <? foreach($page->children('template=9dk-owl-home') as $item): ?> <li class="img-md-6 mb-3 mb-sm-3 mb-md-3 mb-lg-3 mb-xl-3 col-12 col-md-6 img-fluid" data-responsive="" data-src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>" data-sub-html="<h4><? echo $item->page_home_owl_01_h4; ?></h4><p><? echo $item->page_home_owl_01_p; ?></p>"> <a href=""> <img class="img-responsive" src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>"> </a> </li> <? endforeach; ?> </ul> </div> I tried any variants of options C and D from this page: Are there any hints for me, what I can do? Any help is highly appreciated! Best from Munich in Germany
  15. horst

    Metadata Exif Version 0.9.0 (currently a WIP) for PW 2.8.+ / 3.0+ This is a new attempt to add easy EXIF reading support to ProcessWire. It should be an easy and less error prone API task. Thats why the module internally uses lowercase key names for all EXIF keys and all of your requested key names. But you are not forced to use lowercase key names, you can use any mixed chars for it as you like. You will get back an array or object with keynames / properties named the same (casesensitive) way as you have passed them in with your request. API The module adds one hook to the Pageimage: getExif($options = null) Without any $options passed to the method, it returns all EXIF data in a RAW multidim array. Passing a simple list with requested key names as array to it returns an array with only the values of those requested keynames. If you want change the output from array to object, you can use the a boolean "toObject" set to true. Additionally to this and / or any other option, you need to put your requested keynames list to the option "keys". $rawArray = $image->getExif(); $options = array('Whitebalance', 'Flash', 'ISOSpeedRatings', 'FNumber', 'UserComment'); $array = $image->getExif($options); $options = array('toObject' => true, 'keys' => array('whitebalance', 'flash', 'isospeedratings', 'fnumber', 'usercomment')); $object = $image->getExif($options); Possible options are A working example $options = array( 'keys' => array('ISOSpeedRatings', 'FNumber', 'Flash') ); echo "<table><tr>"; foreach($options['keys'] as $key) echo "<th>{$key}</th>"; echo "</tr>"; foreach($page->images as $image) { $exif = $image->getExif($options); echo "<tr>"; foreach($exif as $value) echo "<td>$value</td>"; echo "</tr>"; } echo "</table>"; This will output something like: With the boolean option "unformatted" passed as true, the output would look like: For some keys, that only store something like integer values, what are not very meaningful to most of us, the module contain xyzFormatted methods. This way, it is easy to enhance and maintain the module in the future. Help wanted It would be nice if some of you test the module and report back if the intended API suites your needs. And you are very welcome to post suggestions for which keys you want to have a ...Formatted method. Thank you!
  16. Please see attached screenshot. The image on the left is the original image that was uploaded. The image on the right is what it looks like after it was resized to fit into a template by ProcessWire using <img src="<?php echo $featured_image->size(854,0)->url ?>" /> This is a significant loss of color for these images. Is there a way to prevent this from happening — other than forcing client to crop the images to the exact dimensions ahead of time, and not resizing with PW?
  17. chuckymendoza

    Hello together, I have a problem with the image field and in my case it seems that there is a limit of how much images can be in such field. The following case: I have around 20 pages. Each has a usual image field, where I can upload an unlimited number of images (array). Most of the pages got 50-200 images but one page got 411 images (I know, it’s much ) Now, when I change the order of one image (let’s say I drag & Drop the first image after the third) or delete one image by clicking on the trashcan, everything runs fine. BUT when I click SAVE the image won’t be deleted or moved to it’s new place. You can change anything else on the page - I have a text field there - and save it, no problem. Interestingly I can add (upload) new images but I’m not able to delete or move them. - The file size of the images are between 200kb and 1.7MB, RGB, JPGs. - When I duplicate the page and try to delete/move I got the same problem. - I also created a whole new page and got the same problem - Also tried a different server (virtual and online): same problem - ProcessWire 3.0.62 So, is there a limited to the images field? Any clues except limiting the image files to max. +-200 images? Thanks so much in advance and have a great weekend. Thomas
  18. I am new to PW, and am trying to get an image to display, from a field in my template. Here's the code I'm using: <?php $image = $page->home_header_image; echo "<img src='{$image->url}' alt='{$image->description}' />"; ?> I'm following the tutorial on this here. When I save the template and reload the page, the path to the image is incomplete. If just echoes: <img src="/site/assets/files/1/" alt=""> It omits the name of the image, at the end of the path. Here's the site I'm working on: A couple caveats: I'm using ProcessWire 2.3.0 (tried updating the site and everything went berserk because of some plugin dependencies; point being: I can't update to the latest PW). I tried using the ->size thing and it gave me an error, saying it couldn't use 'size' in this context. Which I also thought was weird. Any ideas? Thanks!
  19. Hi, I can't seem to be able to crop an image in the backend. I'm using PW 3.0.29 in Chrome without Image plugins. When I click apply, the button stays on "Saving..." forever. I get the following JavaScript Errors: An invalid form control with name='width' is not focusable. ?id=1024&file=1024,cfaf-2013-poster.jpg&rte=0&field=poster&modal=1:1 An invalid form control with name='height' is not focusable. ?id=1024&file=1024,cfaf-2013-poster.jpg&rte=0&field=poster&modal=1:1 Is this a bug?
  20. rst

    Hello, I have repeater field with an image field as one of its fields. It works correctly on all but one templates. I added an image, it shows the image uploading, but then the image just disappears and it doesn't save. What could it be ? Thanks
  21. Hi, I have a big image in my image field and want to resize it to 2280px before showing it to the user. Most images are fine and showing as expected, but with one I have the following error; Error: Out of memory (allocated 159383552) (tried to allocate 12288 bytes) (line 243 of /htdocs/process/wire/core/ImageSizerEngineGD.php) Why is this with one image and not with the other ones, and how to solve this? Greetz.
  22. I have a problem realizing a picture gallery with albums using repeater fields. Here is what I have: - The repeater field 'repeater_gallery' for all the albums - A text field 'album_name' in the repeater for the album name - An image field 'album_images' in the repeater for all the album images Now I'd like to pick a small selection of images (say 4) of ALL albums randomly and present them with their associated album name. How can this be done with the described repeater setup? Or is there a better way to realize such a gallery without repeaters? Thanks in advance for a little help.
  23. Dennis Spohr

    Hi all, in the backend of ProcessWire it's possible to define a maximum width and height for images. If you upload an image, it will be resized automatically. I find this feature very handy to safe space. Very often users upload images which are much bigger than needed. On my application users can upload their images via the frontend. But if you upload images using the API, images won't be resized automatically. Is there any way to do this? Currently that's my code: if ($_FILES['thumbnail']['name']) { $upload = new WireUpload('thumbnail'); $upload->setMaxFiles(1); $upload->setOverwrite(true); $upload->setDestinationPath($lesson->video_image->path()); $upload->setValidExtensions(array('jpg', 'jpeg', 'png')); $lesson->video_image->removeAll(); foreach ($upload->execute() as $file) $lesson->video_image->add($file); } Thanks very much! Dennis
  24. Hello everyone, I've been fiddling around a lot lately with docker containers for my local development on a linux machine. Tried many different options, also readily available processwire images and tutorials from the forum. But never got it right. Mainly because of permission issues with docker volumes. That is a tricky part on linux machines whereas on OSX it doesn't seem to be an issue. Then I discovered And the setup with nginx as a proxy that routes requests to separate containers with the actual site install appealed to me. The whole thing sits on top of alpine linux containers which are really lightweight. So I decided to give it a try. And, first time since experimenting with docker, I got a running PW install. Rewriting was not working until I adjusted the nginx config. Now I have a fairly complex PW site running in a container. Everything is working, image upload/editing etc. So I'm really exited, especially since the dev site is now blazing fast compared to my old vagrant virtualbox vm setup. Honestly, I don't really understand everything that is happening behind the scene. But I managed to adjust the original files and build a new image that works with PW and doesn't have all the WP stuff. The nginx config I took from Not sure if it covers everything for PW3 as well. I would very much appreciate if someone who is more in the know than me could take a look. All files for building the docker image are here A working image here: Documentation is kind of lacking. I took over quite a lot from the original project. But following the github README and the original documentation should get people started who have a little experience with docker already. If someone needs a more in depth step by step tutorial for setting things up, let me know and I'll put something together.
  25. Peter Knight

    I have a page that's throwing an error because some of the pages in the for each loop don't have an image The docs say it's wise to check that an image has content and only then try to output something. I thought the following would work with the if($image) below. $products = $page->children(); foreach ($products as $prod){ $image = $prod->images->first(); echo" <div > <div class='prod-ov-wrapper'>"; if($image) echo " <a href='$prod->url'> <img src='{$image->height(160)->url}' class='prod-preview'> </a>"; echo" <div class='prod-ov-text'> <strong>Part No:</strong>{$prod->title} <br/> {$prod->prod_summary} <a href='$prod->url' class='uk-icon-button' uk-icon='icon: chevron-right'></a> </div> </div> </div> ";} What am I overlooking here? Thanks