Share this post

Link to post

Share on other sites

How many images you have on the page doesnt really matter. Images either have a 1x1px transparent GIF or a low quality placeholder. As visitor scrolls down the page JS swaps placeholders with a real/HQ image and browser starts loading the high quality version. If user doesnt scroll down to an image, it doesnt load. Pages load much quicker and you get save bandwidth in the process.

How many images you have on the page doesnt really matter. Images either have a 1x1px transparent or a low quality placeholder. As visitor scrolls down the page JS swaps placeholders to a real/hq url and browser starts loading high quality version. If user doesnt scroll down to an image it doesnt load. Pages load much quicker and you get to save bandwidth.

I started using LazySizes recently and really like it for large image heavy pages.

If you start with the basic lazy loading and get comfortable with it you can then look at the srcset feature which loads different sized images based on the user device.

Recently Browsing
0 members

Similar Content

Hello my friends. Today I started working on my recipe website again and it was the turn to show recipes (pages) that has a specific category assigned in a field.
In my NowKnow project for categories I used a parent page where inside of it I had the children and everything seemed to be super easy. This time, however, I decided to change the approach so I created a parent page Recipe categories and assigned to it my 'category' template. Inside the parent I added a few categories that I want to be able to select via PageReferrence field 'recipe_category'.
The parent template would show all the categories represented by a title and an image - that part is done and works fine.
Now what I am trying to achieve is to have a few recipes having the 'recipe_category' field equal to Bakery for example, and then when I point to the category URL to get only the recipes that have Breakfast selected in. From what I know the perfect approach to achieve that would be to use $input->urlSegment as to select the name of the category from the URL and then filter the pages adding to selectors: recipe_category=$category. Following Ryans earlier instructions about the urlSegment and an example found here in the forum, I got this code to fit my fields names:
<?php if($input->urlSegment1 == 'category' && $input->urlSegment2) {
$name = $sanitizer->pageName($input->urlSegment2);
$category = $pages->get("template=categories-list, title=$name");
if($category->id) {
$q = $pages->find("template=recipes-inner, recipe_category=$category");
}
} ?>
After adding the code, I enabled the URL segments for both: 'category' and 'category-list' templates. Browsing the URL for the Bakery category:
http://food.pw/category/bakery/ (the domain name is not a typo, but PW is on my local server) I was supposed to get the $category to get the value of 'bakery'. However instead of that I am getting nothing.
What am I missing in the big picture as I am sure it is again something silly but I spent almost the whole day trying to figure it out and still got no progress?
P.S. trying to change the urlSegment number to 3 did not help either

Hi,
I have a template to which I have assigned an Alternate Template filename.
To the respective url I added two urlSegments '../edit/123' .
In the url segment list I added : "edit" and "new", config->maxUrlSegments = 2.
As long as I only add *one* url segment (edit), it works fine, but when I add two segments (.../edit/123)
a blank page appears, without error message.
The alternate template file is not even being evoked.
what' s wrong here?

Hi guys,
i was trying to implement SEO URL structure on my another processwire website. SEO team requested us to put .html on every pages. e.g http://www.mydomain.com/products.html and if click any product then it will like http://www.mydomain.com/products/product-one.html so after little bit research i find out it can be done with URLsegment option in template options. i checked on Allow URL Segment, said No to "Should page url end with slash" and said No to "Should URL segments end with a trailing slash? " but after all this setting we try to access the it is showing 404 page. i don't know why.
Any help will be highly appreciate
Thanks
J

For which template I should activated urlSegment and in which template file I should add some code, probably something like this (which didn't work obviously)?
if($input->urlSegment1 == 'publication') {
echo $pages->get('/publication/$categ/')->render();
return;
} else if($input->urlSegment1) {
// throw a 404
throw new Wire404Exception();
}
Thanks so much.
Melanie

I have a project that uses a variant of the "main.inc" template strategy. All templates are set to use a single "main.php" file. That file uses output buffering to include page-specific views and insert them into a "base" template. Generally, this works great and allows me to structure my files exactly the way I want. However, I've found that if I want to manually throw a Wire404Exception, it just bubbles up uncaught rather than being handled.
The 404 handler works fine in instances where I'm not calling it manually, but fails otherwise, specifically when I'm dealing with urlSegments. I'm not that familiar with PHP's exception handling in general nor ProcessWire's exception handling in particular, so I'm not sure how to further troubleshoot.
Some abbreviated pseudo-code to illustrate:
main.php:
ob_start();
include('./views/'.$view.'/'.$view.'.inc');
$layout = ob_get_clean();
ob_start();
include('./views/base/base.inc');
$template = ob_get_clean();
echo $template;
With this setup, if I try to throw a Wire404Exception within any "view", the exception isn't handled, so logged in admins see the error trace, and regular users get an ISE. e.g.,
view.inc:
if($input->urlSegment1){
// look for stuff...
if(!$match){
throw new Wire404Exception();
}
}
Any thoughts?