Search the Community

Hey, so we all know about SEO and the importance of performance. Basically we do it, because if no one finds the website we just built, it´s frustrating. We all try to write clean markup, css and js code and most might have a webpack/gulp/whatever pipeline to minimize css&js. But when thinking about it, optimizing your pipeline might save you a few (hundreds) of kb, compared to loading an image with 1 mb that´s literally nothing and frankly just ridiculous. Don´t get me wrong, frontend pipelines are great and should be used, but let´s shift your "I will optimize the shit out of that 3 css lines" focus to something different: try to serve images as fast as possible, this is where the performance boost really happens. I´m no pro on processwire so far, but I built a very easy to use picture element, which some of you could find interesting: 1. the picture comes with 3 different sizes: one for mobile (keep in mind the double dpi, therefore width of 828px), one for tablet and one for desktop 2. the picture generates a webp version and the original file extension as a fallback 3. the filesize of each element is rendered within the "data" attribute 4. lazy loading(sooo important!!!) is done via the native 'loading="lazy"' attribute. Please try it out and see the difference ? I posted this so others can easily optimize their images, but I would also like to hear your suggestions in making it better. Maybe you could decrease the rendering time or maybe you have some easy improvements. Please let me know. Greetings from Austria! <picture> <source data="<?php echo($oElement->repeater_image->width(828)->webp->filesize);?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(828)->filesize) ?>" media="(max-width: 414px)" srcset="<?php echo($oElement->repeater_image->width(828)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->width(767)->webp->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->webp->url) ?> 2x" type="image/webp"> <source data="<?php echo($oElement->repeater_image->width(767)->filesize) ?>" media="(min-width: 415) and (max-width: 767px)" srcset="<?php echo($oElement->repeater_image->width(767)->url) ?> 2x" type="image/<?php echo($oElement->repeater_image->ext)?>"> <source data="<?php echo($oElement->repeater_image->webp->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->webp->url) ?>" type="image/webp"> <source data="<?php echo($oElement->repeater_image->filesize) ?>" media="(min-width: 768px)" srcset="<?php echo($oElement->repeater_image->url) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> <img data="<?php echo($oElement->repeater_image->filesize) ?>" class="img-fluid" loading="lazy" src="<?php echo($oElement->repeater_image->url) ?>" alt="<?php echo($oElement->repeater_image->description) ?>" type="image/<?php echo($oElement->repeater_image->ext)?>"> </picture>

Hey, - we made a page as admins - as admins each <img> tag is loaded and images are displayed - we tested the page as a pre-definded test user which is "guest" (Admin Theme: Reno) - as test user each <img> is missing and so no image is displayed I checked this in dev-mode on firefox and chrome. Does anyone have an idea or has had similar issues? Thank you in advance. Marcel

Hi I'm working on my tempate to provide an AMP (Accelerated Mobile Page) template version. But there is a problem with CKEditor. AMP needs width AND height attributes to all images. Then when I instert an image in my body field from CKEditor the source code juste includes width attributes. How can I add automaticaly height width CKEditor ? Or if not possible width CKEditor, how can I dow from URL image to get height image ? Thanks in advance

Hello everyone. The website I'm currently working on, contains a "news-section", where the user/punlisher is able to write articles. In most cases the publisher is gonna add a image to the article. But when he doesn't, a default wallpaper, should be displayed. Now: My problem is that I'm struggling to get the default img, which is in an image folder under templates. if($article->image) { $image = $article->image->width(1000); } else { $image = templates->images->get('default_wallpaper.png'); /* of course it doesn't work like this, but that's what I want to achieve */ } $preview = $image->width(400); $thumb = $preview->url; $img = $image->url; }

Hi, on my test site I have created a field that holds an image. I have called the field "result_pic". I want that image to show up on my search results page. I have looked over this page: https://processwire.com/api/fieldtypes/images/ and some of it makes sense but it's taking me a while to get these php concepts (no php background). Looking over the forum, I found this thread: https://processwire.com/talk/topic/15128-images-not-showing-in-search-results/ where the user had the same problem I was having of not seeing their image. One of the responses was: And this worked for me, the image showed up at a smaller size. So if I didn't learn anything else, I could just leave it at that. But my question is, how do I simplify this? Can I get the image to show up without resizing it, and without putting it in a special if statement? So far I am just typing out combinations, none of which are showing the image...just a series of broken image links. Can I just echo the picture in a simple way, like the $match->title, and $match->summary ? Thanks!

i am using CKEditor and want the design to be like the image below is there a way to get rid auf the <p>-tag around ther inserted image and also keep the <p>-tag around the text? <p>text</p> <p><img></p> <p>text</p> to <p></p> <img> <p></p>