Jump to content

Search the Community

Showing results for tags 'images'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

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

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 179 results

  1. One of PW 3.010's major novelty was the introduction of Horst's new image resizing engine that uses ImageMagick. Now I understand that ImageMagick can convert images to Webp, the image format that Google says can reduce image size up to 34% compared to JPEG. Mozilla is apparently adding support to Firefox, and even the Safari team is playing with it, so it looks like Webp is soon going to be available in most major browsers. If Horst's module can be extended to add Webp conversion, that would be a great addition to PW's already very powerful image manipulation arsenal. I'm currently using the free ImageEngine Lite to serve Webp images to supporting browsers, and the results are impressive. I routinely get images that are between 25 and 60% smaller compared to JPEG, with the same visual quality. I would love to eliminate the need to rely on a third-party service though.
  2. Hi, I am sure this question may been asked but I couldn’t find it in the forum. I am new to using Processwire CMS/CMF. I read great reviews on CMS blog about Processwire. So I decided to give It a try. I am trying to figure out what is the best way to structure a simple gallery. I will also need to be able to catalog the photos. Thank you,
  3. Hi there! I am quite new to processwire and am just finishing my first PW project. I think the whole framework is awesome and could profit a lot from all the tutorials available. One thing that I somehow can't seem to get my head around is working with images and their resizing. I have following scenario: A 'gallery-index' page with its 'gallery' children. Those children have an 'images' field where the user uploads his (often too big) images. I am working with twig. On the gallery page frontend I have a slider, a displayed collection of all the images and a hidden one where I get the source to the original image in a popup. So in total the images will be outputted 3 times in different sizes. First: <div id="slick"> {% for img in page.images %} <img src="{{ img.height(400).url }}" alt=""> {% endfor %} </div> Second: <div class="gallery"> {% for img in page.images %} <img src="{{ img.width(300).url }}" alt=""> {% endfor %} </div> Third: <div class="hidden"> {% for img in page.images %} <a href="{{ img.maxWidth(1024).url }}" data-original="{{ img.url }}"></a> {% endfor %} </div> Now, the loops basically work, and some images are displayed the right way. But not all of there are displayed at all, despite them being there in the DOM. The urls all look right but some will be displayed and some url just go to a small black box image. How comes that PW manages to have different results in displaying the images in different formats? URL of gallery: http://2019.hclaupersdorf.ch/fotos/hc-laupersdorf-vs-ruschlikon-chiefs/ (there are more in the DOM than displayed) URL of 'not working' image: http://2019.hclaupersdorf.ch/site/assets/files/2361/20180616-rueschlikon-21_42049612175_o.300x0.jpg Furthermore, whenever this error occurs (which usually is at every page request on the gallery page), the DOM doesn't fully load. My JS for init the slider or the popup won't be loaded and the page is basically displayed half-loaded. Any ideas or suggestions on how to work around it, best practice when handling images & galleries? Thanks!
  4. Hi! After temporarily using Module Image Extra, which I completely removed, I had some troubles with my imagefield (unused table columns). So I just imported a previous version of this column via PHPmyAdmin, which worked pretty well. Anyways, in Processwire Backend all image tags are gone, although they are OK in the database. Other image related things work (thumbnail, title etc are OK). Is there any way to recreate all the images or something? Or may this be an cache-related issue? Thanks in advance
  5. Hi, There's something happening in ProcessWire that doesn't compute abd it has to do with images. Situation: On the homepage template there's a repeater that takes two images to build a slider: slide_image: A wide image for desktops slide_image_mobile: A more "verticalized" image for small screens Now I have this code: foreach($page->home_slides as $slide) { // Create desktop slide if(isset($slide->slide_image)) { // Create desktop slide $slide_image = $slide->slide_image->size(1170,400); // Create mobile slide if(isset($slide->slide_image_mobile)) { $slide_image_mobile = $slide->slide_image_mobile->size(1048,800); } else { $slide_image_mobile = $slide->slide_image->size(1048,800); } ?> <div class="slide-content"> <a href="<?php echo $slide->link; ?>" class="slide"> <img src="<?php echo $slide_image->url; ?>" class="img-fluid d-none d-md-block" title="<?php echo $slide->slide_title; ?>" alt="<?php echo $slide->slide_title; ?>" /> <img src="<?php echo $slide_image_mobile->url; ?>" class="img-fluid d-block d-md-none" title="<?php echo $slide->slide_title; ?>" alt="<?php echo $slide->slide_title; ?>" /> </a> </div> <?php } } On my dev server, the small image is detected and placed in content, however in my production server this doesn't happen. I've double checked fields names and the fields contain images. I've even imported the database into the Dev Server. I don't have any clue why it works locally and not in server. Can anyone shed som light? Thank you!
  6. I have 2 repeater types working with the Repeater Matrix. To keep things simple, I have image gallery a downloads gallery. I can't quite figure out how to echo the contents from within a product_gallery. I can get the code below to display the text 'An image gallery' but not the bunch of images within this. I'm not sure though if it's my variable trail or my nested echo statement. <?php foreach($page->components as $item) { if($item->type == 'product_gallery') { echo " An image gallery..."; foreach($product_gallery->images as $photo) { echo " An image <image src='{$photo->url}'> "; } } else if($item->type == 'downloads') { echo " A download gallery... "; } } ?> Thanks P
  7. I created this module a while ago and never got around to publicising it, but it has been outed in the latest PW Weekly so here goes the support thread... Unique Image Variations Ensures that all ImageSizer options and focus settings affect image variation filenames. Background When using methods that produce image variations such as Pageimage::size(), ProcessWire includes some of the ImageSizer settings (height, width, cropping location, etc) in the variation filename. This is useful so that if you change these settings in your size() call a new variation is generated and you see this variation on the front-end. However, ProcessWire does not include several of the other ImageSizer settings in the variation filename: upscaling cropping, when set to false or a blank string interlace sharpening quality hidpi quality focus (whether any saved focus area for an image should affect cropping) focus data (the top/left/zoom data for the focus area) This means that if you change any of these settings, either in $config->imageSizerOptions or in an $options array passed to a method like size(), and you already have variations at the requested size/crop, then ProcessWire will not create new variations and will continue to serve the old variations. In other words you won't see the effect of your changed ImageSizer options on the front-end until you delete the old variations. Features The Unique Image Variations module ensures that any changes to ImageSizer options and any changes to the focus area made in Page Edit are reflected in the variation filename, so new variations will always be generated and displayed on the front-end. Installation Install the Unique Image Variations module. In the module config, set the ImageSizer options that you want to include in image variation filenames. Warnings Installing the module (and keeping one or more of the options selected in the module config) will cause all existing image variations to be regenerated the next time they are requested. If you have an existing website with a large number of images you may not want the performance impact of that. The module is perhaps best suited to new sites where image variations have not yet been generated. Similarly, if you change the module config settings on an existing site then all image variations will be regenerated the next time they are requested. If you think you might want to change an ImageSizer option in the future (I'm thinking here primarily of options such as interlace that are typically set in $config->imageSizerOptions) and would not want that change to cause existing image variations to be regenerated then best to not include that option in the module config after you first install the module. https://github.com/Toutouwai/UniqueImageVariations https://modules.processwire.com/modules/unique-image-variations/
  8. Is there a way to make JPGs progressive by default via the API? I've added the following to my site/config.php file but user-uploaded images are often displayed as non progressive. $config->imageSizerOptions = array( 'upscaling' => true, // upscale if necessary to reach target size? 'cropping' => true, // crop if necessary to reach target size? 'autoRotation' => true, // automatically correct orientation? 'interlace' => true, // use interlaced JPEGs by default? (recommended) 'sharpening' => 'soft', // sharpening: none | soft | medium | strong 'quality' => 95, // quality: 1-100 where higher is better but bigger 'hidpiQuality' => 60, // Same as above quality setting, but specific to hidpi images 'defaultGamma' => 0.5, // defaultGamma: 0.5 to 4.0 or -1 to disable gamma correction (default=2.0) ); Thanks
  9. 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.
  10. Hi everyone, Yesterday I began working on a module to create a filesystem abstraction for files and images using the Flysytem library (http://flysystem.thephpleague.com), out of the necessity of having the images copied (and probably linked) on Amazon S3 and other places like Dropbox. There two reasons why I decided to tackle this: 1 - When I work on the project in my machine, I need a way to automatically sync the images from the server and/or the external storage. When an image is added on the server and the database is imported on my local env, PW shows a blank thumbnail of it. The idea for the module if to check if the page image has a width == 0 and if it exists on the server, add it to the local filesystem. 2 - In the past, I had to move a large website to a different server in a hurry and a lot of images were left behind (it was a mess). So I'm planning for a possible future worst-case scenario of the server exploding The code I quickly wrote is below (please bear with me that it's pretty raw at the moment). One thing I had to figure it out is why PW fires the Pageimage::size hook wherever a page is loaded in the admin, even though the thumbnails are already created. I was planning to save the image variations on S3 as well. Can someone clarify? I know that @LostKobrakai was working on a similar project, and so I would like to ask him and everyone else if you think I (and who may help) should evolve this idea into a full-featured module where the user can select which server (adapter) to use (AWS, Digital Ocean spaces, Dropbox etc.) <?php namespace ProcessWire; use Aws\S3\S3Client; use League\Flysystem\AwsS3v3\AwsS3Adapter; use League\Flysystem\Filesystem; use League\Flysystem\Adapter\Local; use Spatie\Dropbox\Client; use Spatie\FlysystemDropbox\DropboxAdapter; class ProcessFly extends WireData implements Module, ConfigurableModule { public static function getModuleInfo() { return array( 'title' => 'ProcessWire Flysystem Integration', 'version' => 001, 'summary' => 'Synchronize all the page assets uploaded through PW to a specified bucket in Amazon S3 and...', 'author' => 'Sérgio Jardim', 'singular' => true, 'autoload' => true, 'icon' => 'image' ); } public function init() { $this->client = S3Client::factory([ 'credentials' => [ 'key' => '', 'secret' => '', ], 'region' => 'sa-east-1', 'version' => 'latest', ]); $this->bucket_name = ""; $this->dir_name = "images"; $this->s3_adapter = new AwsS3Adapter($this->client, $this->bucket_name, $this->dir_name); $this->s3_filesystem = new Filesystem($this->s3_adapter); // DROPBOX $this->authorizationToken = ""; $this->dropbox_client = new Client($this->authorizationToken); $this->adapter_dropbox = new DropboxAdapter($this->dropbox_client); $this->dropbox_filesystem = new Filesystem($this->adapter_dropbox); $this->addHookAfter('Pages::saved', $this, 'checkImageS3'); // Download images that are not in local filesystem for whatever reason but are available in the remove one. $this->addHookAfter('InputfieldFile::fileAdded', $this, 'uploadImageS3'); // Fired when a file/image is added to a page in the admin // $this->addHookAfter('Pageimage::size', $this, 'uploadImageS3'); // Fired when a file is resized via API. Note: this hook is also called when the page is loaded in Admin. Need to know why. $this->addHookAfter('Pageimage::url', $this, 'redirectImageURL'); //Replace image URL for the S3 path } public function redirectImageURL($event){ if($event->page->template == 'admin') return; else $event->return = "https://s3-sa-east-1.amazonaws.com/[bucket name]/images/" . $event->object->page . "/" . $event->object->name; } // UPLOAD public function uploadImageS3($event){ if(count($event->return)) { //if it is a image resize event get image variation data $file = $event->return; } else { $file = $event->arguments(0); } $filename = $file->name; $filename_original = $file->url; $pathToFile = $file->page . "/" . $filename; $system_path = $file->filename(); try{ $file_on_s3 = $this->s3_filesystem->has($pathToFile); //check if file exists on AWS if(!$file_on_s3) { $contents = file_get_contents($system_path); $this->s3_filesystem->put($pathToFile, $contents, array( 'visibility' => 'public', )); //upload file with the same folder structure as in assets/files: page_id/file_name //Also add a copy to Dropbox (OPTIONAL) $this->dropbox_filesystem->put($pathToFile, $contents); } } catch (Exception $e){ throw new WireException("Error: Image not Added to S3: {$e->getMessage()}"); } } public function checkImageS3($event){ $page = $event->arguments(0); if(count($page->images)) { foreach($page->images as $file) { if($file->width == 0) { return $this->downloadImageS3($page, $file); }; } } } public function downloadImageS3($page, $file){ $pathToFile = $page->id . "/" . $file->name; $file_on_s3 = $this->s3_filesystem->has($pathToFile); //check if file exists on AWS if($file_on_s3) { $image = "https://s3-sa-east-1.amazonaws.com/[bucket name]/images/" . $pathToFile; // $page->images->remove($image); $page->images->add($image); $page->save(); } else { throw new WireException("Error: Image not found on S3: {$file->name}"); } } }
  11. Hi My first use of repeaters. They seem very useful, but I'm having a strange problem with the descriptions of the images field. I can't change them after deploying from my local dev server to the live server. I have defined a repeater with one images field and one textarea (multi language) field. This works as expected when added to a template and on the page I add an image and text in 3 languages. I usually populate the image description fields with a caption text in 3 languages so that I can output a caption if required under the image. Now this all works a treat on my test localhost server, but when deployed to the live site the captions cannot be changed on these repeater image fields. If I login to the live site and change the image text in there - as soon as I hit save the text goes back to what it was before! I am logged in as superuser so can't work out what the problem is. I had a search through the forums but couldn't find a similar problem. Any ideas where to look for some clues to what the problem may be? I'm using ProcessWire 3.0.96 Many thanks - Paul
  12. Hi all I have a problem here. I created a gallery with 240 pictures. Created an images field with no maximum amount (0). Unfortunately, only 98 of the 240 images show on the website. Any idea what I possibly could have done wrong? Thanks for your help! <?php foreach ($page->images as $image) { $options = array( 'quality' => 90, 'upscaling' => false ); $thumb = $image->size(250, 250, $options); ?> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 foto"> <a href="<?= $image->url ?>" data-lightbox="lightbox" > <img src="<?= $thumb->url ?>" alt="" > </a> </div> <?php } ?>
  13. Hi there, I migrated my site from dev to live server. Copied all files in the new location, transferred MySQL db from dev to live. The site works properly, but the images not. Even the processwire logo in control panel is not visible: is it something related with files permissions? Is there an easy way to solve this issue? EDIT: if I update a page via control panel, adding a new image, the thumbnail is blank...
  14. Hi guys, I'm trying to resize images which I query through getRandom(). I can't seem to get it right though. What I have so far is: $randomImage = $pages->get($targetPageId)->images->getRandom() Which returns an image, albeit in original resolution. I assumed I should be able to call resize() on the image like so: $randomImage = $pages->get($targetPageId)->images->getRandom()->width(400) Which unfortunately gives me an exception. I assume this is because getRandom() might not return an image but something else(?). So how would I do this correctly? Greetings derelektrischemoench
  15. Ill be honest, I am a bit unsure how accomplish this. I have a repeater (dev_repeater) that contains an image field set to 1 image. Nested within this repeater, is another repeater (dev_child_repeater) that allows a user to add in some urls. However, there is also a hidden field that I am trying to pass the parent repeater's image path. I know I can output all the data by using: <?php foreach($page->dev_repeater as $repeater) { foreach($repeater as $url) { # do some stuff } } ?> For the life of me, I can not figure out how to obtain the image url in my php to pass to a variable inside the nested foreach loop. Hopefully this made some sense.
  16. Hi, I have a template that it's working fine in development, however I can't get it to work on production! It shows every information inside repeater fields except the images. Here's the template: These are the circuit_day_image settings: This is the code: <?php foreach($page->circuit_days as $circuit_day) { if($circuit_day->circuit_day_image) { $day_image = $circuit_day->circuit_day_image->size(300, 300)->url; echo '<img src="' . $day_image . '" />'; } else { echo 'No image! :('; } echo '<h2>' . $circuit_day->title . '</h2>'; echo $circuit_day->body; } ?> I always get "No image! :(" I think I'm doing everything right! Anyone else with a similar problem? Update After uploading the production database into my server, the images stopped working. It can be one of two problems: 1. Bad field configuration; 2. Something wrong with the Database. I can't find the problem. Any suggestion is welcome, thanks, Update 2 I forgot to upload the images. It's working on dev and not on production. Still no clue! Clue 1 When I insert <pre><?php print_r($circuit_day); ?></pre> On development I get a clean list for each repetition: However, on production, the command gets on a weird recursive loop that takes forever (it even slows the browser to a halt): What might be going on?
  17. 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.
  18. Hi, I'm sort of an intermediate beginner but already quite familiar with PW for a year or so. Now I'm trying to modify the new blog site profile which I find great and quite intuitive (thanks alot Ryan and crew!). I am seeking help for this problem: I want is to display a thumbnail image for every item of the description list navigation which is part of the basic page template, seen at the bottom of the about-page in the live demo here. The regarding function in _uikit.php is ukDescriptionListPages on Line 588 which is called with ukDescriptionListPages(page()->children) by the basic page template. here, in Line 612 in ukDescriptionListPages I inserted this (in red): $dt = "<a href='$item->url'><img src='$item->thumbnail->url'></a>"."<a href='$item->url'>$dt</a>"; (where "thumbnail" is the name of my new thumbnail field in the basic page template. I limited my thumbnail field to one single image). But this only gives me back the name of my thumbnail image file, followed by the string "->url" - but not the path to the image. How do I get the full path / url? Whats wrong with my code? I admit I do not fully understand all of the details in ukDescriptionListPages-function and the also involved ukMergeOptions. I suspect I would somehow have to iterate through the images of my thumbnail field since it potentially could contain more than one image (or at least use thumbnail->first->url which doesn't work in the above setting either), but how and where? Or do I have to add some argument when calling ukDescriptionListPages? It would be great to have a built-in "show thumbnail - yes or no"-option in ukDescriptionListPages in the future. Thanks in advance for any help! Markus
  19. I have a template that includes an image field that supports multiple images. The images uploaded to this field include a description field. If one of these images is embedded into a textarea field (i.e. Body), should the image description will be inserted into the image's alt attribute when embedding the image? I always assumed that it would, but there is a separate option to add an alt attribute when inserting the image. Is the purpose of the description field purely for use with the API and unnecessary for images that are intended to be embedded within a textarea field? I guess I need clarification as to how this works. Either something changed, or I never understood the differences between the image description and the alt attribute as it is used in ProcessWire. I'm currently using ProcessWire 3.0.15.
  20. Hello, I am currently playing around to build my first module. It will be a simple module for the ImageOptim web service, but I am a little bit stuck on which right hook to use. Currently I use following hook: $this->pages->addHookAfter('saveFieldReady', $this, 'imageOptimSave'); I would like to pass images and its variations to the web service after adding them to the image field. But if I use the saveFieldReady hook only the original image will be optimized, not the API generated image variations, because they will be generated after viewing the page for the first time. Can anybody please help me how to hook into the image variations? I already tried to use my own method, but this one used in the template would be called on every page render. Regards, Andreas
  21. Hello! Can I deactivate the renaming feature of images and the editing (croping, rotating etc) in the processwire admin panel?
  22. I have a file I want to access with ajax: The purpose of this file is to iterate through a repeater, and get the image from each entry. The number of images in the image field is set to 1, and just for good measure, to return a single image. And my code: // site/ajax/processImage.ajax.php?group=1206 require_once($_SERVER['DOCUMENT_ROOT'].'/index.php'); $resourceGroup = (int) $_REQUEST['group']; // get the Repeater field $resources = $pages->get($resourceGroup)->resources; foreach ($resources as $resource) { echo $resource->title; // Works as expected echo $resource->image->url; // /site/assets/files/1259/ echo $resource->image; // filename.jpg echo $resource->image->description; // nothing } See comments above for what is output, why isn't URL giving me a full URL, and no description is available? If I try to access $image->size() I get the following fatal error: Error: Uncaught exception 'ProcessWire\WireException' with message 'Method Pageimages::size does not exist or is not callable in this context' in F:\sites\<sitename>\wire\core\Wire.php:519
  23. Hi, I'm having problems to insert images on a Ckeditor body field. The images are uploaded to a image field and the page is saved. When I do clic in Ckeditor Image button I get: Failed to init module: ProcessPageEditImageSelect - No page specified The requested process does not exist The process returned no content. I'm using the superuser account. Processwire version: 3.0.79 This is the first time I get an error in Processwire... Thank you.
  24. An experimental module for adding images to a field via pasting one or more URLs. Add Image URLs Allows images to be added to an images field by pasting URLs. Usage Install the Add Image URLs module. A "Paste URLs" button will be added to all image fields. Use the button to show a textarea where image URLs may be pasted, one per line. Images are added when the page is saved. https://github.com/Toutouwai/AddImageUrls
  25. Hi all, I am working on a site which involves a lot of image upload fields, 99% of the time it works perfectly but I have noticed that every so often image variations will be missing. Like the original uploaded image is fine but maybe 1 or 2 out of the variations is just blank. The variation files will appear within the assets folder but they will be just in name only without any actual image content. Since its quite a random thing I am finding it rather difficult to figure out why this happens? Any ideas?
×
×
  • Create New...