Jump to content

Split more than 300 images in to pages ?


iNoize
 Share

Recommended Posts

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 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
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
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By pwFoo
      How to enable urlSegments runtime instead of persistent in template settings? And where to be loaded before the current page returns a 404 error?
      https://processwire.com/docs/front-end/how-to-use-url-segments/#how-do-you-enable-url-segments
       
    • 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
       
×
×
  • Create New...