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


There are no results to display.

Found 131 results

  1. 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?
  2. 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?
  3. 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?
  4. 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. 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.
  6. 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!
  7. 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 ?
  8. 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.
  9. 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.
  10. 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
  11. 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?
  12. 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
  13. 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!
  14. 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
  15. 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.
  16. 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.
  17. 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
  18. Hi PW Community, I have a problem where a page is loading up fine on my local dev machine + 1 of the test sites, but not on another test site. They have identical PW (2.8.35?) and codebase installed. The 2 sites are hosted on the same hosting provider, as well as our other sites. 1) Error Logs. There is nothing particularly strange logged on the PW Error log for all the sites. I am getting a "You must assign a template to the page before setting custom field values (title__data) [pageClass=Page, template=] (WireLog)" error, but I'm getting this error on working pages as well. However, there are some errors in our Hosting Provider's log. The error seems to point at some sort of permissioning issue regarding reading the image files? 1.a) File / Dir permissions of Images - I've checked file permissions on the normal and problematic sites. They are all identical 2) .htaccess - I've tried running the .htaccess file from the working site on the problematic site - No Luck 3) codebase - I've done 3 comparisons. They are identical on all sites. 4) wire directory - See above 5) Behaviour - So the problematic site loads up most of its page as expected without problems. It's just a couple that it has issues with. Problematic URL Example : Working URL : I've also attached the KIS Error Logs. Has anyone come across behaviour like this before and what would be the way forward to fix this? KIS.Error.Logs
  19. We had an outside vendor help develop our website. The vendor has closed their business. I'm trying to modify 1 of the images near the bottom of our website but can't figure out how. We're new to processwire. I see how I can modify the individual pages but can't seem to figure out where to go to change this image n near the bottom I attached the image that I need to change. Thanks in advance for any of your help!
  20. I am currently working on a website in process wire. I created an image field and added svg as a valid file extension and could upload a png image and a jpg image but when I try to upload a svg image it is stuck loading at 100%. I figured out that the image field does not take the extension svg even if I add it as an extension. and I was wondering if their is any way to upload a svg image to an image field in processwire? I am working with processwire version 3.0.61
  21. I have been scratching my head on this one for a while, so I thought maybe someone could shed some light on this issue. I am using a grid layout (that I have created over the years) with a class for responsive images (very similar to bootstrap, but very stripped down). Using this, I created a gallery using a foreach loop, and included a "print button" to print each image. I got the classes and everything worked out, but I ran into a small problem with the print functionality. My images (which are around 2400px wide to fill the space) are just fine in the grid and on resize, but when I print, they "run off" the page. I understand that they are just too big to be printed in portrait mode, which led to me think that I could use $image->size(); to print a scaled down version of the image (which adds a bit more load time as now the site needs to load the image large scale and the scaled down version). However, I can't seem to wrap my head around serving just the scaled down version for print only (obviously display:none; doesn't do the trick). Has anyone tackled this before, or does anyone know of a more elegant solution to the conundrum that I have found myself in? The Foreachloop: $printclass = 1; foreach($page->galleries as $gallery) { $printclass++; $printimage = $gallery->gallery_image->width(600)->url; $out = ""; $out .= "<div class=\"row\">"; $out .= "<div class=\"grid-12\">"; $out .= "<img src=\"{$gallery->gallery_image->url}\" class=\"reimage\"/>"; $out .= "</div>"; $out .= "</div>"; $out .= "<div class=\"row\">"; $out .= "<div class=\"grid-12\">"; $out .= "<a href=\"#\" onClick=\"printCoupon('printable{$printclass}');\">Print</a>"; $out .= "</div> "; $out .= "</div> "; $out .="<div id=\"printable{$printclass}\"><img src=\"{$printimage}\"/></div>"; echo $out; }
  22. Hi, here is a very useful tool that check your images in websites against responsiveness:
  23. Hey Everyone, I have a question that seems like it would have an obvious answer, but I cannot wrap my mind around it: If I have <img src="<?= $page->featuredImage->size(800,500)->url ?>"/> in an article template, does my server run a resizing script every time someone requests the page? Or, is it resized only the first time it is requested? Or when the page is saved? The reason I would like to know is because I have created two image processing functions my client requires, but one of them is a paid subscription service to compress the images. I don't want to call the paid API every time a page is loaded or something. Thanks for fielding my ignorance
  24. Hi all, I've not been able to upload SVGs into a regular image field, with SVG added in the Valid File Extensions field. The error I'm getting is: Error: Call to undefined function ProcessWire\simplexml_load_string() (line 234 of /var/www/hosts/our_website/Develop/Source/wire/core/Pageimage.php) I tried the ImageRasterizer module, but that didn't fix it. Is there a workaround for folks that don't have the simplexml module installed?
  25. Had a couple of older PW 2.7 sites slow to the point of failure this week. A bit of digging revealed that the external image compression service used by ProcessImageMinimize is no longer available. Development on the module ceased some time ago. Quick fix was to uninstall the module and edit the output code to use native PW image options. All affected sites operational again. Next step is to update them to PW3.0+ ...