Search the Community

I am trying to add images to a page from the basic $images default field. I have followed the instructions here: https://processwire.com/docs/tutorials-old/quick-start/images/ And the code of my template looks like this: <?php // assignment_studentwork_example.php template file $assignment_w_heading = "<h1><strong>Assignment:</strong> <a href='{$page->parent->url}'>" . $page->parent->title . "</a></h1>" ; $semester = "<p><strong>Semester:</strong> <a href='{$page->parent->url}'>" . $page->parent("template=challenge") . "</a></p>" ; if (count($page->images)) { foreach($page->images as $image) { $image = $image->size(800); echo "<img src='{$image->url}' />"; } } // If the page has children, then render navigation to them under the body. // See the _func.php for the renderNav example function. if($page->hasChildren) $content .= renderNav($page->children, 0, 'summary'); // if the rootParent (section) page has more than 1 child, then render // section navigation in the sidebar if($page->rootParent->hasChildren > 1) { $sidebar = renderNav($page->rootParent, 3) . $page->sidebar; } // Primary content goes here $content = $assignment_w_heading . $semester . $image . $page->body; This code successfully loaded the images, but they load at the top of my site, above all content, like this: The generated html positions the images immediately after the body tag, instead of between $semester and $page->body: I think this is because of the kind of php structure I've written my templates in (object oriented?). I remember I have had to use workarounds instead of 'echo' in the past in my templates, but I don't remember why. I only have basic php coding skills. I have tried to reposition the images by adding a class and styling it with css, but no luck. I think this is because of where the images are positioned within the generated html, as I want the images to be positioned in css 'relative' to the elements above them in my php code, but the generated html positions the images out of order. My questions are: 1. is there an alternative way to call images that removes the need to use 'echo'? 2. can anyone see a way to fix my code so that the images will appear where the text 'business-card-putney-daniel2.800x0.png' appears, instead of at the top of the page? It would also be good to remove the text 'business-card-putney-daniel2.800x0.png' at some point - I don't see what is generating it, but right now it serves as a handy placeholder for where the images should go. Thanks for reading, and I hope you can help!

Hello again, while I evaluated possabilities around reusing the image dialog outside of CKE (https://processwire.com/talk/topic/10009-image-field-select-image-from-another-page/) I did a introspektion of CKE's pwimage plugin (indeed I reused a lot of the given logic). Because I don't like the way, the plugin grabs its image information in a big bulk of code, I started to refactor the code and ended in something like this (excerpt): [..] this.config = { uri : ProcessWire.config.urls.admin + 'page/image/' , selectors : { image : '#selected_image' , captionWrapper : '#wrap_caption' , cbLink : '#selected_image_link' , cbHiDpi : '#selected_image_hidpi' , cbCaption : '#selected_image_caption' , inDescription : '#selected_image_description' , inRotation : '#selected_image_rotate' , inPageId : '#page_id' } [..] }; [..] , getImageProperties : function (jImage , jIframeContent) { var that = this; var jImage = jQuery (that.config.selectors.image , jIframeContent); var jCheckboxLinkToLarger = jQuery (that.config.selectors.cbLink , jIframeContent); var jCheckboxHiDpi = jQuery (that.config.selectors.cbHiDpi , jIframeContent); var jCheckboxCaption = jQuery (that.config.selectors.cbCaption , jIframeContent); var jInputDescription = jQuery (that.config.selectors.inDescription , jIframeContent); var jInputRotation = jQuery (that.config.selectors.inRotation , jIframeContent); var jInputPageId = jQuery (that.config.selectors.inPageId , jIframeContent); var flipHorizontal = jImage.hasClass ('flip_horizontal'); var flipVertical = jImage.hasClass ('flip_vertical'); var src = jImage.attr ('src'); var cls = jImage .removeClass ('ui-resizable No Alignment resizable_setup') .removeClass ('rotate90 rotate180 rotate270 rotate-90 rotate-180 rotate-270') .removeClass ('flip_vertical flip_horizontal') .attr ('class') ; var imageProperties = { 'identifier' : jImage.data ('idname') , 'pageId' : jInputPageId.val () , 'src' : src , 'file' : src.substring (src.lastIndexOf ('/') + 1) , 'origin' : jCheckboxLinkToLarger.val () , 'width' : jImage.attr ('width') , 'height' : jImage.attr ('height') , 'widthAuto' : jImage.attr ('width') == 0 , 'linkOrigin' : jCheckboxLinkToLarger.is (":checked") , 'alt' : jInputDescription.val () , 'caption' : jCheckboxCaption.is (":checked") , 'hidpi' : jCheckboxHiDpi.is (":checked") , 'editing' : { 'rotate' : parseInt (jInputRotation.val ()) , 'flip-h' : flipHorizontal , 'flip-v' : flipVertical , 'crop-x' : 0 , 'crop-y' : 0 } , 'class' : cls }; if (! imageProperties.width) { imageProperties.width = jImage.width (); } if (! imageProperties.height) { imageProperties.height = jImage.height (); } return imageProperties; } As you can see, I started to put selectors into configurations und tried to build a literal of the significant image data (which was the goal). I thought it would be nice, if the Image modal page itself could implement an interface like this. So that every derived operation (including CKE) could simply ask for image properties instead of scratching data from markup and input element status all by itself. In result there would exist a future proof approach for times when UI elements, possible image modifications etc. change.

Hi guys Trying to output a series of image tags in surrounded by an <li> a I've been partially successful in that the tags are displaying BUT they're repeating. IE the following code ... will output Sitting-Room Kitchen Kitchen Home-Office Gym Basement Bedroom Gym Basement There's repetition in there. I only need a tag listed once. There's also a case where an image has 3 tags IE Bedroom Gym Basementis actually 3 separate tags. That's the first 2 parts of my problem

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.

Hi, I have been googling around like crazy to find a suitable very light-weight javascript library for showing a simple image gallery with one bigger main picture (just on the page, not in a lightbox), with clickable thumbnails that will show the selected image in a bigger version in the main image area when clicked. See the attached screenshot for an example! Most libraries out there seem to focus on fancy transitions, lightbox style image viewing, or don't include the thumbnail feature (just showing these dots, for selecting pictures) ... and so I haven't so far found what I'm looking for. Any hints? (Again, preferrably something super-lightweight, that is super-easy to integrate with pw).

On my dev (localhost) my gallery appears to be working just fine. It is set to "Automatic", and if I drop in 8 images all of them upload in the order I selected and all save out. However on my production server, the images upload all out of order and then it deletes 4 of them. Has anyone else had this issue or know how to solve it?

Hello, since the new Reno Theme for PW 2.7, where can I find the image variations (rendered sizes by API or other modules)? If so and it won't come back: How can I remove all variations of an image with a single click? Thanks!

I don't have screengrabs right now but I was uploading several staff photos this evening. Has anyone experienced an issue whereby uploaded (drag and drop) images become desaturated slightly? It's quite subtle but noticeable enough when viewed side by side with original image.

I need to extend the search capability to image descriptions through the default search template in 2.5.3. $matches = $pages->find("title|body|sidebar|thumb_one|thumb_two|thumb_three|thumb_four|gallery_img%=$q, limit=50"); I've added additional field selectors, but with inconsistent results. Is there a better way to achieve this?

Within CKEditor's default image properties dialog, you can set a percentage width on inline images and leave the height blank, which works better with responsive layouts. Within processwire's image manager (for CKEditor), it looks like you are limited to entering fixed pixel dimensions. Is there a config setting or module to change this behavior? It can be fixed manually by switching to source code view, but that's not very user-friendly. It can be overridden in CSS, but that's not as flexible. Thanks!

I'm creating a general function for batch import, for a site migration, and while looping through fields (field names) to be imported for a page, I need to check whether the field is an image (or other file type), so that it can be imported after the first pave save. What would be the recommended way to check this, with PHP code?

Hi, I'm using the on the fly image resizing in Processwire to create suitable image sizes for different viewports (using Foundation's Image Interchange). All seemed to be working fine but I'm having real trouble with the quality of the outputted image. This is the orginal image: This is an example of a resized image: It looks like it's losing colour information in the process of being resized. I've tried setting the default quality to 100% (in the wire/core/ImageSizer.php) but to no avail. Could anyone share any light on what might be happening here?

Why is upscaling false being ignored with the following template? foreach($page->images as $image) : $options = array( 'quality' => 85, 'upscaling' => false ); $large_img = $image->width(800,$options); $thumb_img = $image->size(100,100,$options); $img .= '<a href="'.$large_img->url.'"><img src="' . $thumb_img->url .'"></a>'; endforeach; The page I'm testing has images that are smaller than 800 but the linked versions are all 800px wide (and pixellated because they've been stretched).

Hi, Having ploblems with this search page code. I'm trying to get all images with tagged with the search query, which works currently. Then get a url and add <a> wrapping the image to a page that references that image in its image_select field - doesnt work. if($input->get->q) { $q = $sanitizer->selectorValue($input->get->q); $input->whitelist('q', $q); } $matches = $pages->find("imageTags.title%=$q, limit=20"); if(count($matches)) { $out .= "<ul class='grid-list'>"; foreach($matches as $m){ // $name = $m->image->name; // $out = $name; // $mWork = $pages->find("image_select=$name, limit=1"); // var_dump($mWork); $out .= "<li>"; // $out .= "<a class='' href='{$mWork->url}'>"; $image = $m->image; $image = $image->width(450); if($image) $out .= "<img src='$image->url'>"; // echo "</a>"; echo "</li>"; } $out .= "</ul>"; }

following the tutorial on youtube by Philipp Reiner On the part on putting image I copied the code <?php foreach($page->children as $c): ?> <div class="row"> <br><br> <div class="col-lg-6 centered"> <img src="<?= $c->image->url; ?>" alt="<?= $c->image->description; ?>"> </div><!-- col-lg-6 --> <div class="col-lg-6"> <h4><?php echo $c->title; ?></h4> <?php echo $c->body; ?> </div> </div><!-- row --> <br><br> <hr> <br><br> <?php endforeach; ?> But it doesn't show.. see attached

Like others here, I build sites that require reuse of images. In my case, the images must always be accompanied by correct credits and descriptions, and must be replaced sitewide when our contract with the photographer ends. So centralized image storage is a must, and one page per image works fine. The challenge is selecting image pages from other pages in an easy, visual way. Soma's images module is a great move in that direction, but for my needs, users should work only with thumbs, never with HTML. The default pages field seems like it's allllmost there. I'd just like one of the field label choices to be the image field, and to choose a page by thumbnail. Ideally, the thumb will be shown on the page after selection, as it is with the images field. Even more ideally, the page picker will include search. Even even more ideally, I'd have the time and php chops to build this module myself.

Hi, Recently i came across a strange behaviour of core image cropping function. My Core version is Dev 2.6.17, OpenServer (Apache 2.4, PHP 5.4 and PHP 5.6) I have an image like that: And when i try to crop it with that code: for($i=0;$i<=9;$i++) { $img = wire('pages')->get(1850)->page_header_images->eq(1)->crop(0, $i*80, 1280, 80); // crop($x, $y, $w, $h) echo "<img src=\"{$img->url}\"><br/><br/>"; } I get always get the same peaces of picture though it has different $y I also have a problem when i use resize/crop interface in modal window in page editor. I wanted to post n issue to github, but would like to ask you to check if you can reproduce this behavior

Hi folks, I know how to get ONLY the first image from an Image field, but how to you exclude the first image? <?php foreach ($page->project_images->not()->first() as $image) : ?> Any thoughts? Sorry... just noticed slice in the cheatsheet... <?php foreach ($page->project_images->slice(1) as $image) : ?>

I have an image and video carousel that I want to use on a page and have it be editable via processwire. The problem is that the code for images and video is completely different. What is the best way to go about making one repeater field where you can pick either a video or image? I thought about having nested repeaters but not sure if that would work. I want it to be possible to order the slides so having them as separate repeaters wouldn't work either. I am a bit stumped. Any help would be great. Images: <div class="rsContent"> <img class="rsImg" src="abc.jpg" alt=""> <div class="infoBlock infoBlockLeftBlack"> <h1>...</h1> <h3>...</h3> <h4>...</h4> <p>....</p> etc etc </div> </div> and for video is this: <div class="rsContent"> <a class="rsImg" href="abc.jpg" data-rsVideo="https://www.youtube.com/"></a> </div> Thanks you

Short version Can we make the Page fieldtype as the tagging engine for images? Long version / real example I started using image tags for the first time after reading making efficient use of fields in PW. There's a part titled Use multi-file fields to replace several single-file fields where Ryan mentions tagging. As I was building a site for an interior designer, I needed an almost identical setup and to tag images with a gallery with "basement", "living room", "garden" and "kitchen" tags. At one stage, my client wanted "basement" changed to "basement and garden" and I had to manually edit about 15 images. No big deal really but it doesn't seem very scalable. Having used the Page fieldtype for tagging blog posts and news and experienced how easy it is to make global tag names changes etc, I wondered if the Page fieldtype could be put on the roadmap as the tagging engine for images or at least as an option.

I'm doing some updates on a site that only just launched last week and during development everything was fine. But now I've exported the db from the production site, imported it back into my local and get Call to a member function size() on a non-object. My template looks like: foreach($products as $product) : $img_src = $product->images->first(); echo $img_src; // this works echo $img_src->url; // so does this echo $img_src->size(300,300)->url; // this gives me the error endforeach; What would be causing this to error now when it was working fine before and I can get values for the image and its source, just not the resized version?

Hi All, I have an images field for multiple images set to always return an array. My images field holds 5 images. I'm trying to get the first image of the array and then remove that to get an array that holds images 2-5. Here's my testing code so far $images = $page->images; $firstimage = $images->eq(0); //also tried $images->first() with same result $restimages = $images->remove($firstimage); echo count($images) . " images<br>"; foreach ($images as $img) { echo $img->basename . "<br>"; } echo "firstimage<br>"; echo $firstimage->basename . "<br>"; echo "restimages<br>"; foreach ($restimages as $img) { echo $img->basename . "<br>"; } And here's the output: 4 images mario_florenz_1.jpg mario_florenz_3.jpg mario_florenz_2.jpg mario_florenz_5-1.jpg firstimage mario_florenz_4.jpg restimages mario_florenz_1.jpg mario_florenz_3.jpg mario_florenz_2.jpg mario_florenz_5-1.jpg A few things that buffle me: -count($images) returns 4 where it should be 5 -foreach through $images returns only 4 images where it should be 5 -$images->eq(0) returns the first image but this one is not returned when I loop through all images -$images and $images->remove($firstimage) return the same I really don't understand what is happening here. Reading through the API docs on images and WireArray manipulation it seems my code should work. Any help would be much appreciated.

We have an internal company site that we use to document specifications for software development. Currently, we use Adrian's ProtectedMode module to restrict the site to logged-in users, but one of the engineers just noted that uploaded files are (naturally, given the scope of the module) visible without authentication. While this isn't a huge risk (you have to know the URL to view an uploaded file), it is technically a security issue since we have lots of proprietary things attached to pages on the site. Any ideas on how I could lock down these files so you have to be logged in to view them?

Hello! I often have to change image sizes in templates using the ->width() or size functions and on a image heavy site this a cause timeout errors or massie lag before all the images are resized when changing to the new template. I was wondering if there was a good way of creating these images without having to hit each page on the site for the template to be called and images updated? Basically to avoid the errors? Thanks

Do field dependencies work on Image fields? I tried this selector, to show a field if there's an image: image_field.count > 0 ...and it didn't work. Any ideas? Thanks! -evan