Lazy load host images #83

New Issue

gordons · 2023-03-03T11:22:21Z

gordons commented

2023-03-03 11:22:21 +00:00

Try to set loading="lazy" to most host images that are "below the fold".

Try to set `loading="lazy"` to most host images that are "below the fold".

rho_n added the

Feature Request

label 2023-03-03 15:54:20 +00:00

rho_n commented

2023-03-03 16:29:13 +00:00

Nice html feature. Don't remember running across it.

Now we need to define "below the fold". I am assuming the page you are referring to is the main index.html page. Although it could also be the images for a particular episode on a small screen.

For the main index page I would say "above the fold" is the current show, and any other in the "Latest Shows" section could be lazy loaded.

Issues I see. We store the show notes in the database as pre-generated html. Would need to figure out the best way to add this attribute to the img tag and change it's value as needed. Adding this attribute to the host avatar's as needed is simplier.

A simple solution would be to add the loading="lazy" attribute to all the img tags in the show descriptions. I don't think it will cause that much issue as the images are often towards the end of the show notes and don't fall within the browser viewport when a page is first opened.

Ref: Browser-level image lazy loading for the web

Nice html feature. Don't remember running across it. Now we need to define "below the fold". I am assuming the page you are referring to is the main index.html page. Although it could also be the images for a particular episode on a small screen. For the main index page I would say "above the fold" is the current show, and any other in the "Latest Shows" section could be lazy loaded. Issues I see. We store the show notes in the database as pre-generated html. Would need to figure out the best way to add this attribute to the img tag and change it's value as needed. Adding this attribute to the host avatar's as needed is simplier. A simple solution would be to add the `loading="lazy"` attribute to all the img tags in the show descriptions. I don't think it will cause that much issue as the images are often towards the end of the show notes and don't fall within the browser viewport when a page is first opened. Ref: [Browser-level image lazy loading for the web](https://web.dev/browser-level-image-lazy-loading/)

gordons commented

2023-03-04 01:09:18 +00:00

Hi,
I'm having trouble starting to experiment with this idea.
There is no CREATE for comments table (maybe more tables missing too) for SQLite. There is no hpr.sql file to create the MySQL database equivalent.
Is there somewhere else I am meant to be looking?

At the moment I am only thinking for the main index (and index full) page point of view where the first host picture would be normal, but all subsiquent ones would have loading=lazy . Next step wpuld be the images in the posts.

This is to help HPR and for me to get a feel of the static generator. I'm a Perl programmer by trade, but I do JavaScript too.

Hi, I'm having trouble *starting* to experiment with this idea. There is no CREATE for **comments** table (maybe more tables missing too) for SQLite. There is no **hpr.sql** file to create the MySQL database equivalent. Is there somewhere else I am meant to be looking? At the moment I am only thinking for the main index (and index full) page point of view where the first host picture would be normal, but all subsiquent ones would have `loading=lazy` . Next step wpuld be the images in the posts. This is to help HPR and for me to get a feel of the static generator. I'm a Perl programmer by trade, but I do JavaScript too.

rho_n commented

2023-03-04 02:06:11 +00:00

Hi,
I'm having trouble starting to experiment with this idea.
There is no CREATE for comments table (maybe more tables missing too) for SQLite. There is no hpr.sql file to create the MySQL database equivalent.
Is there somewhere else I am meant to be looking?

Sorry about that. The instructions for creating the sqlite db file is very out of date. Once Ken started posting the hpr.sql file. I figured out how to convert this into a an SQLite db file.

I haven't commited those scripts to the repository, as no one till recently had been looking at the code. :)

I am in the process of updating my scripts and will be creating a utils directory of the scripts along with updated instructions on creating an sqlite file from the MySQL dump.

I plan on posting them this weekend. If it looks like it will be longer. I will post my less polished scripts with some basic instructions.

The other option is to run a local instance of MySQL and restore the hpr.sql file to it.

At the moment I am only thinking for the main index (and index full) page point of view where the first host picture would be normal, but all subsiquent ones would have loading=lazy . Next step wpuld be the images in the posts.

This is to help HPR and for me to get a feel of the static generator. I'm a Perl programmer by trade, but I do JavaScript too.

Looking forward to your help. Feel free to assign this issue to yourself.

Most of the changes as far as page generation go will be in the template files. These are TemplateToolkit2 (TT2) based files.

> Hi, > I'm having trouble *starting* to experiment with this idea. > There is no CREATE for **comments** table (maybe more tables missing too) for SQLite. There is no **hpr.sql** file to create the MySQL database equivalent. > Is there somewhere else I am meant to be looking? > Sorry about that. The instructions for creating the sqlite db file is very out of date. Once Ken started posting the hpr.sql file. I figured out how to convert this into a an SQLite db file. I haven't commited those scripts to the repository, as no one till recently had been looking at the code. :) I am in the process of updating my scripts and will be creating a utils directory of the scripts along with updated instructions on creating an sqlite file from the MySQL dump. I plan on posting them this weekend. If it looks like it will be longer. I will post my less polished scripts with some basic instructions. The other option is to run a local instance of MySQL and restore the hpr.sql file to it. > At the moment I am only thinking for the main index (and index full) page point of view where the first host picture would be normal, but all subsiquent ones would have `loading=lazy` . Next step wpuld be the images in the posts. > > This is to help HPR and for me to get a feel of the static generator. I'm a Perl programmer by trade, but I do JavaScript too. Looking forward to your help. Feel free to assign this issue to yourself. Most of the changes as far as page generation go will be in the template files. These are TemplateToolkit2 (TT2) based files.

rho_n commented

2023-03-04 02:14:08 +00:00

Hi,
I'm having trouble starting to experiment with this idea.
There is no CREATE for comments table (maybe more tables missing too) for SQLite. There is no hpr.sql file to create the MySQL database equivalent.
Is there somewhere else I am meant to be looking?

I just put the latest version of the hpr.db at URL: https://hpr.horning.us/hpr.db

That should let you get started using the site-generator with SQLite

> Hi, > I'm having trouble *starting* to experiment with this idea. > There is no CREATE for **comments** table (maybe more tables missing too) for SQLite. There is no **hpr.sql** file to create the MySQL database equivalent. > Is there somewhere else I am meant to be looking? > I just put the latest version of the hpr.db at URL: https://hpr.horning.us/hpr.db That should let you get started using the site-generator with SQLite

😆 1

rho_n commented

2023-03-04 22:04:45 +00:00

Merged PR for host images into main

[Merged PR for host images into main](https://repo.anhonesthost.net/rho_n/hpr_generator/commit/0f4fdc2d4601cea3296ca66d60e47bbdae0c8595)

😆 1

rho_n closed this issue

2023-03-05 23:16:55 +00:00

Sign in to join this conversation.