iNoize

Split more than 300 images in to pages ?

Recommended Posts

iNoize    30

Hello, 
i have an Photography page based on PW. Now is the Problem that the loading time is to long.

Idea was to split every 20 images in to pages for Ajaxloading. 
I dont know how generate all 20 images a new URLsegment.
I just cant  get it. :) 

Thanks for advice 

Share this post


Link to post
Share on other sites
iNoize    30

I dont know is the better option ? There will be later more than 300 pictures per page i think. 
But its an interesting idea :) 

Share this post


Link to post
Share on other sites
abdus    596

It's certainly better than putting plain <img> tags on the page.

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.

  • Like 3

Share this post


Link to post
Share on other sites
Peter Knight    730
28 minutes ago, abdus said:

It's certainly better than putting plain <img> tags on the page.

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By MilenKo
      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
    • By helmut2509
      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?
    • By Junaid Farooqui
      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
    • By mel47
      Hi,
      I'm quite sure to have read everything, doc and forums, about urlSegment, but I'm still not understanding how to use it. After have set my categories with this excellent post, I'm unable to fix url as I want.
      Page title             |         Template             | actual url                                   |    url I want
      Categ-publi         |         parent_categ      |  categ-publi/article                     | publication/article
         -- Article           |         categories           |
      Publication          |        basic-template    | publication/example1               | publication/article/example1
         -- example1      |        publication          |
       
      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
       
    • By Jason Huck
      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?