diff --git a/news/changelog-1.5.md b/news/changelog-1.5.md index 50f168dc9e..9e9be66e94 100644 --- a/news/changelog-1.5.md +++ b/news/changelog-1.5.md @@ -80,6 +80,7 @@ All changes included in 1.5: - ([#8715](https://github.com/quarto-dev/quarto-cli/issues/8715)): Listings should respect `image: false` - ([#8860](https://github.com/quarto-dev/quarto-cli/discussions/8860)): Don't show duplicate author names. - ([#9030](https://github.com/quarto-dev/quarto-cli/discussions/9030)): Warn (rather than error) when listing globs produce an empty listing (as this is permissable). +- ([#9447](https://github.com/quarto-dev/quarto-cli/pull/9447)): Add support for the boolean `image-lazy-loading` option to enable lazy loading of images in listings (default: `true`). ## Manuscripts diff --git a/src/project/types/website/listing/website-listing-read.ts b/src/project/types/website/listing/website-listing-read.ts index 467ee5ca68..446e0df039 100644 --- a/src/project/types/website/listing/website-listing-read.ts +++ b/src/project/types/website/listing/website-listing-read.ts @@ -62,6 +62,7 @@ import { kImageAlign, kImageAlt, kImageHeight, + kImageLazyLoading, kImagePlaceholder, kInclude, kListing, @@ -117,6 +118,7 @@ import { isProjectDraft, projectDraftMode, } from "../website-utils.ts"; +import { kFieldImageLazyLoading } from "./website-listing-shared.ts"; // Defaults (a card listing that contains everything // in the source document's directory) @@ -1117,6 +1119,9 @@ async function listItemFromFile( : undefined; const imageAlt = documentMeta?.[kImageAlt] as string | undefined; + const imageLazyLoading = documentMeta?.[kImageLazyLoading] as + | boolean + | undefined; const date = documentMeta?.date ? parsePandocDate(resolveDate(input, documentMeta?.date) as string) @@ -1170,6 +1175,7 @@ async function listItemFromFile( [kFieldCategories]: categories, [kFieldImage]: image, [kFieldImageAlt]: imageAlt, + [kFieldImageLazyLoading]: imageLazyLoading, [kFieldDescription]: description, [kFieldFileName]: filename, [kFieldFileModified]: filemodified, diff --git a/src/project/types/website/listing/website-listing-shared.ts b/src/project/types/website/listing/website-listing-shared.ts index a927919c59..35e9012884 100644 --- a/src/project/types/website/listing/website-listing-shared.ts +++ b/src/project/types/website/listing/website-listing-shared.ts @@ -73,6 +73,9 @@ export const kImageAlign = "image-align"; // Alt text for the item's image export const kImageAlt = "image-alt"; +// Lazy loading for the item's image. If unset, the default is true. +export const kImageLazyLoading = "image-lazy-loading"; + // The placeholder image for the item export const kImagePlaceholder = "image-placeholder"; @@ -101,6 +104,7 @@ export const kFieldFileModified = "file-modified"; export const kFieldDate = "date"; export const kFieldImage = "image"; export const kFieldImageAlt = "image-alt"; +export const kFieldImageLazyLoading = "image-lazy-loading"; export const kFieldDescription = "description"; export const kFieldReadingTime = "reading-time"; export const kFieldWordCount = "word-count"; @@ -211,6 +215,7 @@ export interface ListingItem extends Record { date?: Date; image?: string; [kImageAlt]?: string; + [kImageLazyLoading]?: boolean; path?: string; filename?: string; [kFieldFileModified]?: Date; diff --git a/src/project/types/website/listing/website-listing-template.ts b/src/project/types/website/listing/website-listing-template.ts index e61a1d0b0a..031f09f705 100644 --- a/src/project/types/website/listing/website-listing-template.ts +++ b/src/project/types/website/listing/website-listing-template.ts @@ -95,7 +95,7 @@ export function templateMarkdownHandler( // For file modified specifically, include the time portion const includeTime = field === kFieldFileModified; - const date = typeof (dateRaw) === "string" + const date = typeof dateRaw === "string" ? parsePandocDate(dateRaw as string) : dateRaw as Date; if (date) { @@ -422,6 +422,7 @@ export function reshapeListing( src: string, classes: string, alt?: string, + lazy?: boolean, ) => { const pageSize = listing[kPageSize]; const classAttr = classes ? `class="${classes}"` : ""; @@ -430,8 +431,8 @@ export function reshapeListing( : ""; const altAttr = alt ? `alt="${encodeAttributeValue(alt)}"` : ""; const srcAttr = itemNumber > pageSize ? "data-src" : "src"; - - return ``; + const lazyAttr = lazy === false ? "" : "loading='lazy' "; + return ``; }; utilities.imgPlaceholder = ( itemNumber: number, diff --git a/src/resources/editor/tools/vs-code.mjs b/src/resources/editor/tools/vs-code.mjs index 0b8951e296..774fac05a7 100644 --- a/src/resources/editor/tools/vs-code.mjs +++ b/src/resources/editor/tools/vs-code.mjs @@ -10597,6 +10597,12 @@ var require_yaml_intelligence_resources = __commonJS({ description: "The default image to use if an item in the listing doesn't have an image." } }, + "image-lazy-loading": { + boolean: { + description: "If false, images in the listing will be loaded immediately. If true, images will be loaded as they come into view.", + default: true + } + }, "image-align": { enum: [ "left", @@ -18472,6 +18478,20 @@ var require_yaml_intelligence_resources = __commonJS({ ] }, description: "The alt text for preview image on this page." + }, + { + name: "image-lazy-loading", + schema: "boolean", + tags: { + formats: [ + "$html-doc" + ] + }, + description: { + short: "If true, the preview image will only load when it comes into view.", + long: 'Enables lazy loading for the preview image. If true, the preview image element \nwill have `loading="lazy"`, and will only load when it comes into view.\n\nIf false, the preview image will load immediately.\n' + }, + default: true } ], "schema/extension.yml": [ @@ -21151,6 +21171,7 @@ var require_yaml_intelligence_resources = __commonJS({ "The name to display in the UI.", "The name of the language the kernel implements.", "The name of the kernel.", + "Configures the Julia engine.", "Arguments to pass to the Julia worker process.", "Environment variables to pass to the Julia worker process.", "Set Knitr options.", @@ -22744,7 +22765,11 @@ var require_yaml_intelligence_resources = __commonJS({ }, "Disambiguating year suffix in author-date styles (e.g. \u201Ca\u201D in \u201CDoe,\n1999a\u201D).", "Manuscript configuration", - "internal-schema-hack" + "internal-schema-hack", + { + short: "If true, the preview image will only load when it comes into\nview.", + long: 'Enables lazy loading for the preview image. If true, the preview\nimage element will have loading="lazy", and will only load\nwhen it comes into view.\nIf false, the preview image will load immediately.' + } ], "schema/external-schemas.yml": [ { @@ -22973,12 +22998,12 @@ var require_yaml_intelligence_resources = __commonJS({ mermaid: "%%" }, "handlers/mermaid/schema.yml": { - _internalId: 183687, + _internalId: 186197, type: "object", description: "be an object", properties: { "mermaid-format": { - _internalId: 183679, + _internalId: 186189, type: "enum", enum: [ "png", @@ -22994,7 +23019,7 @@ var require_yaml_intelligence_resources = __commonJS({ exhaustiveCompletions: true }, theme: { - _internalId: 183686, + _internalId: 186196, type: "anyOf", anyOf: [ { diff --git a/src/resources/editor/tools/yaml/web-worker.js b/src/resources/editor/tools/yaml/web-worker.js index cb31d424af..79ebd1a102 100644 --- a/src/resources/editor/tools/yaml/web-worker.js +++ b/src/resources/editor/tools/yaml/web-worker.js @@ -10598,6 +10598,12 @@ try { description: "The default image to use if an item in the listing doesn't have an image." } }, + "image-lazy-loading": { + boolean: { + description: "If false, images in the listing will be loaded immediately. If true, images will be loaded as they come into view.", + default: true + } + }, "image-align": { enum: [ "left", @@ -18473,6 +18479,20 @@ try { ] }, description: "The alt text for preview image on this page." + }, + { + name: "image-lazy-loading", + schema: "boolean", + tags: { + formats: [ + "$html-doc" + ] + }, + description: { + short: "If true, the preview image will only load when it comes into view.", + long: 'Enables lazy loading for the preview image. If true, the preview image element \nwill have `loading="lazy"`, and will only load when it comes into view.\n\nIf false, the preview image will load immediately.\n' + }, + default: true } ], "schema/extension.yml": [ @@ -21152,6 +21172,7 @@ try { "The name to display in the UI.", "The name of the language the kernel implements.", "The name of the kernel.", + "Configures the Julia engine.", "Arguments to pass to the Julia worker process.", "Environment variables to pass to the Julia worker process.", "Set Knitr options.", @@ -22745,7 +22766,11 @@ try { }, "Disambiguating year suffix in author-date styles (e.g. \u201Ca\u201D in \u201CDoe,\n1999a\u201D).", "Manuscript configuration", - "internal-schema-hack" + "internal-schema-hack", + { + short: "If true, the preview image will only load when it comes into\nview.", + long: 'Enables lazy loading for the preview image. If true, the preview\nimage element will have loading="lazy", and will only load\nwhen it comes into view.\nIf false, the preview image will load immediately.' + } ], "schema/external-schemas.yml": [ { @@ -22974,12 +22999,12 @@ try { mermaid: "%%" }, "handlers/mermaid/schema.yml": { - _internalId: 183687, + _internalId: 186197, type: "object", description: "be an object", properties: { "mermaid-format": { - _internalId: 183679, + _internalId: 186189, type: "enum", enum: [ "png", @@ -22995,7 +23020,7 @@ try { exhaustiveCompletions: true }, theme: { - _internalId: 183686, + _internalId: 186196, type: "anyOf", anyOf: [ { diff --git a/src/resources/editor/tools/yaml/yaml-intelligence-resources.json b/src/resources/editor/tools/yaml/yaml-intelligence-resources.json index 93065a18ed..e4becf76b7 100644 --- a/src/resources/editor/tools/yaml/yaml-intelligence-resources.json +++ b/src/resources/editor/tools/yaml/yaml-intelligence-resources.json @@ -3569,6 +3569,12 @@ "description": "The default image to use if an item in the listing doesn't have an image." } }, + "image-lazy-loading": { + "boolean": { + "description": "If false, images in the listing will be loaded immediately. If true, images will be loaded as they come into view.", + "default": true + } + }, "image-align": { "enum": [ "left", @@ -11444,6 +11450,20 @@ ] }, "description": "The alt text for preview image on this page." + }, + { + "name": "image-lazy-loading", + "schema": "boolean", + "tags": { + "formats": [ + "$html-doc" + ] + }, + "description": { + "short": "If true, the preview image will only load when it comes into view.", + "long": "Enables lazy loading for the preview image. If true, the preview image element \nwill have `loading=\"lazy\"`, and will only load when it comes into view.\n\nIf false, the preview image will load immediately.\n" + }, + "default": true } ], "schema/extension.yml": [ @@ -14123,6 +14143,7 @@ "The name to display in the UI.", "The name of the language the kernel implements.", "The name of the kernel.", + "Configures the Julia engine.", "Arguments to pass to the Julia worker process.", "Environment variables to pass to the Julia worker process.", "Set Knitr options.", @@ -15716,7 +15737,11 @@ }, "Disambiguating year suffix in author-date styles (e.g. “a” in “Doe,\n1999a”).", "Manuscript configuration", - "internal-schema-hack" + "internal-schema-hack", + { + "short": "If true, the preview image will only load when it comes into\nview.", + "long": "Enables lazy loading for the preview image. If true, the preview\nimage element will have loading=\"lazy\", and will only load\nwhen it comes into view.\nIf false, the preview image will load immediately." + } ], "schema/external-schemas.yml": [ { @@ -15945,12 +15970,12 @@ "mermaid": "%%" }, "handlers/mermaid/schema.yml": { - "_internalId": 183687, + "_internalId": 186197, "type": "object", "description": "be an object", "properties": { "mermaid-format": { - "_internalId": 183679, + "_internalId": 186189, "type": "enum", "enum": [ "png", @@ -15966,7 +15991,7 @@ "exhaustiveCompletions": true }, "theme": { - "_internalId": 183686, + "_internalId": 186196, "type": "anyOf", "anyOf": [ { diff --git a/src/resources/projects/website/listing/item-default.ejs.md b/src/resources/projects/website/listing/item-default.ejs.md index e3875e07b8..80a428f941 100644 --- a/src/resources/projects/website/listing/item-default.ejs.md +++ b/src/resources/projects/website/listing/item-default.ejs.md @@ -41,7 +41,7 @@ print(`
${listing.utilities.outputLi
<% if (item.image) { %> -<%= listing.utilities.img(itemNumber, item.image, "thumbnail-image", item['image-alt']) %> +<%= listing.utilities.img(itemNumber, item.image, "thumbnail-image", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %> <% } else { %> <%= listing.utilities.imgPlaceholder(itemNumber, item.outputHref) %> <% } %> diff --git a/src/resources/projects/website/listing/item-grid.ejs.md b/src/resources/projects/website/listing/item-grid.ejs.md index b4a3ae04e1..98cc8b7a3f 100644 --- a/src/resources/projects/website/listing/item-grid.ejs.md +++ b/src/resources/projects/website/listing/item-grid.ejs.md @@ -46,7 +46,7 @@ return !["title", "image", "image-alt", "date", "author", "subtitle", "descripti <% if (item.image) { %>

-<%= listing.utilities.img(itemNumber, item.image, "thumbnail-image card-img", item['image-alt']) %> +<%= listing.utilities.img(itemNumber, item.image, "thumbnail-image card-img", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']) %>

<% } else { %> <%= listing.utilities.imgPlaceholder(itemNumber, item.outputHref) %> diff --git a/src/resources/projects/website/listing/listing-table.ejs.md b/src/resources/projects/website/listing/listing-table.ejs.md index bedd43c93f..241d915a07 100644 --- a/src/resources/projects/website/listing/listing-table.ejs.md +++ b/src/resources/projects/website/listing/listing-table.ejs.md @@ -55,7 +55,7 @@ let value = readField(item, field); if (field === "image") { if (item.image) { -value = listing.utilities.img(itemNumber, item[field], "", item['image-alt']); +value = listing.utilities.img(itemNumber, item[field], "", item['image-alt'], item['image-lazy-loading'] ?? listing['image-lazy-loading']); } else { value = listing.utilities.imgPlaceholder(itemNumber, item.outputHref); } diff --git a/src/resources/schema/definitions.yml b/src/resources/schema/definitions.yml index fd5ce4a29f..79cf1536e5 100644 --- a/src/resources/schema/definitions.yml +++ b/src/resources/schema/definitions.yml @@ -1579,6 +1579,10 @@ image-placeholder: string: description: "The default image to use if an item in the listing doesn't have an image." + image-lazy-loading: + boolean: + description: "If false, images in the listing will be loaded immediately. If true, images will be loaded as they come into view." + default: true image-align: enum: [left, right] description: In `default` type listings, whether to place the image on the right or left side of the post content (`left` or `right`). diff --git a/src/resources/schema/document-website.yml b/src/resources/schema/document-website.yml index c5e24af7d8..bd09e6223a 100644 --- a/src/resources/schema/document-website.yml +++ b/src/resources/schema/document-website.yml @@ -62,3 +62,16 @@ tags: formats: [$html-doc] description: The alt text for preview image on this page. + +- name: image-lazy-loading + schema: boolean + tags: + formats: [$html-doc] + description: + short: If true, the preview image will only load when it comes into view. + long: | + Enables lazy loading for the preview image. If true, the preview image element + will have `loading="lazy"`, and will only load when it comes into view. + + If false, the preview image will load immediately. + default: true diff --git a/src/resources/types/schema-types.ts b/src/resources/types/schema-types.ts index dead035230..095e4293e5 100644 --- a/src/resources/types/schema-types.ts +++ b/src/resources/types/schema-types.ts @@ -797,6 +797,8 @@ Learn more about supported date formatting values [here](https://deno.land/std@0 Defaults to 175. */; "image-placeholder"?: string /* The default image to use if an item in the listing doesn't have an image. */; + "image-lazy-loading"?: + boolean /* If false, images in the listing will be loaded immediately. If true, images will be loaded as they come into view. */; "image-align"?: | "left" | "right" /* In `default` type listings, whether to place the image on the right or left side of the post content (`left` or `right`). */; diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/.gitignore b/tests/docs/smoke-all/listings/image-lazy-loading/.gitignore new file mode 100644 index 0000000000..075b2542af --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/.gitignore @@ -0,0 +1 @@ +/.quarto/ diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/_quarto.yml b/tests/docs/smoke-all/listings/image-lazy-loading/_quarto.yml new file mode 100644 index 0000000000..f4d3fd7c9f --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/_quarto.yml @@ -0,0 +1,17 @@ +project: + type: website + output-dir: "." + +website: + title: "Lazy-image-test" + navbar: + left: + - href: index.qmd + text: Home + - about.qmd + +format: + html: + theme: cosmo + css: styles.css + toc: true diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/about.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/about.qmd new file mode 100644 index 0000000000..07c5e7f9d1 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/about.qmd @@ -0,0 +1,5 @@ +--- +title: "About" +--- + +About this site diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-default-eager.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-default-eager.qmd new file mode 100644 index 0000000000..5cc4b4c6db --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-default-eager.qmd @@ -0,0 +1,21 @@ +--- +listing: + type: default + contents: post-*.qmd + fields: + - title + - image + image-lazy-loading: false +_quarto: + html: + ensureHtmlElements: + - + - "img[src='https://placeholder.co/100/100.png']" + - "img[src='https://placeholder.co/200/200.png']" + - "img[loading='lazy'][src='https://placeholder.co/300/300.png']" + - + - "img[loading='lazy'][src='https://placeholder.co/100/100.png']" + - "img[loading='lazy'][src='https://placeholder.co/200/200.png']" +--- + +## Hello, here's some listings with `image-lazy-loading: false` \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-default.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-default.qmd new file mode 100644 index 0000000000..ee27fb7c52 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-default.qmd @@ -0,0 +1,20 @@ +--- +listing: + type: default + contents: post-*.qmd + fields: + - title + - image +_quarto: + tests: + html: + ensureHtmlElements: + - + - "img[loading='lazy'][src='https://placeholder.co/100/100.png']" + - "img[src='https://placeholder.co/200/200.png']" + - "img[loading='lazy'][src='https://placeholder.co/300/300.png']" + - + - "img[loading='lazy'][src='https://placeholder.co/200/200.png']" +--- + +## Hello, here's some listings \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-grid-eager.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-grid-eager.qmd new file mode 100644 index 0000000000..d1ea4c15d4 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-grid-eager.qmd @@ -0,0 +1,21 @@ +--- +listing: + type: grid + contents: post-*.qmd + fields: + - title + - image + image-lazy-loading: false +_quarto: + html: + ensureHtmlElements: + - + - "img[src='https://placeholder.co/100/100.png']" + - "img[src='https://placeholder.co/200/200.png']" + - "img[loading='lazy'][src='https://placeholder.co/300/300.png']" + - + - "img[loading='lazy'][src='https://placeholder.co/100/100.png']" + - "img[loading='lazy'][src='https://placeholder.co/200/200.png']" +--- + +## Hello, here's some listings with `image-lazy-loading: false` \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-grid.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-grid.qmd new file mode 100644 index 0000000000..f569e99da1 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-grid.qmd @@ -0,0 +1,20 @@ +--- +listing: + type: grid + contents: post-*.qmd + fields: + - title + - image +_quarto: + tests: + html: + ensureHtmlElements: + - + - "img[loading='lazy'][src='https://placeholder.co/100/100.png']" + - "img[src='https://placeholder.co/200/200.png']" + - "img[loading='lazy'][src='https://placeholder.co/300/300.png']" + - + - "img[loading='lazy'][src='https://placeholder.co/200/200.png']" +--- + +## Hello, here's some listings \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-table-eager.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-table-eager.qmd new file mode 100644 index 0000000000..c41648c2d5 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-table-eager.qmd @@ -0,0 +1,21 @@ +--- +listing: + type: table + contents: post-*.qmd + fields: + - title + - image + image-lazy-loading: false +_quarto: + html: + ensureHtmlElements: + - + - "img[src='https://placeholder.co/100/100.png']" + - "img[src='https://placeholder.co/200/200.png']" + - "img[loading='lazy'][src='https://placeholder.co/300/300.png']" + - + - "img[loading='lazy'][src='https://placeholder.co/100/100.png']" + - "img[loading='lazy'][src='https://placeholder.co/200/200.png']" +--- + +## Hello, here's some listings with `image-lazy-loading: false` \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-table.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-table.qmd new file mode 100644 index 0000000000..1c5e8d9883 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/index-table.qmd @@ -0,0 +1,20 @@ +--- +listing: + type: table + contents: post-*.qmd + fields: + - title + - image +_quarto: + tests: + html: + ensureHtmlElements: + - + - "img[loading='lazy'][src='https://placeholder.co/100/100.png']" + - "img[src='https://placeholder.co/200/200.png']" + - "img[loading='lazy'][src='https://placeholder.co/300/300.png']" + - + - "img[loading='lazy'][src='https://placeholder.co/200/200.png']" +--- + +## Hello, here's some listings \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-1.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-1.qmd new file mode 100644 index 0000000000..5f42f37d65 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-1.qmd @@ -0,0 +1,6 @@ +--- +title: Post 1 +image: https://placeholder.co/100/100.png +--- + +This is 1. \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-2.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-2.qmd new file mode 100644 index 0000000000..08c4c4cada --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-2.qmd @@ -0,0 +1,7 @@ +--- +title: Post 2 +image: https://placeholder.co/200/200.png +image-lazy-loading: false +--- + +This is 2. \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-3.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-3.qmd new file mode 100644 index 0000000000..7b91aa78b0 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/blog/post-3.qmd @@ -0,0 +1,7 @@ +--- +title: Post 3 +image: https://placeholder.co/300/300.png +image-lazy-loading: true +--- + +This is 3. \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/index.qmd b/tests/docs/smoke-all/listings/image-lazy-loading/index.qmd new file mode 100644 index 0000000000..b7572f2737 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/index.qmd @@ -0,0 +1,7 @@ +--- +title: "Lazy-image-test" +--- + +This is a Quarto website. + +To learn more about Quarto websites visit . diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/listings.json b/tests/docs/smoke-all/listings/image-lazy-loading/listings.json new file mode 100644 index 0000000000..6dc84bf4c9 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/listings.json @@ -0,0 +1,18 @@ +[ + { + "listing": "/blog/index.html", + "items": [ + "/blog/post-1.html", + "/blog/post-2.html", + "/blog/post-3.html" + ] + }, + { + "listing": "/blog/index-eager.html", + "items": [ + "/blog/post-1.html", + "/blog/post-2.html", + "/blog/post-3.html" + ] + } +] \ No newline at end of file diff --git a/tests/docs/smoke-all/listings/image-lazy-loading/styles.css b/tests/docs/smoke-all/listings/image-lazy-loading/styles.css new file mode 100644 index 0000000000..2ddf50c7b4 --- /dev/null +++ b/tests/docs/smoke-all/listings/image-lazy-loading/styles.css @@ -0,0 +1 @@ +/* css styles */