Sign in

High resolution images for Featured Images on front page

  • This topic has 8 replies, 2 voices, and was last updated 2 weeks, 2 days ago by .
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #6164
    GoFaster

    I am trying to get high resolution photos to display on the front page of my website using Featured Images;

    https://www.lightspell.pro/

    Reference Theme – Custom Settings – Layout – Post Listings – When Frontpage layout is set to 1 column the photos are low resolution.

    How can the photographs be displayed at full resolution?

    I have spent a lot of time reading and testing advice from the “How images work in Publii” guide. I can’t get it to work. It’s ignorance on my side.

    To get high resolution photos to display on the Home Page is there a setting I have missed, or is editing the frontpage-post.hbs template and config.json the correct approach? If it is, I would appreciate some guidance on getting the handlebars code right with the .json file. Many thanks.

    PS I have recently regenerated the thumbnails.

    #6168
    Bob

    You can change the quality of the photos via Site Settings -> Website Speed, where you can set image compression or completely disable the creation of responsive images which will display the original (pure) photos.

    However, if you still want to use the responsive images you can add more thumbnail sizes by modifying the config.json file ‎⁨(Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME) in the “files” section (https://getpublii.com/dev/how-images-work-in-publii/#advanced)

     

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6169
    GoFaster

    Thanks for your reply. I have resisted turning off responsive images. It might cause a nasty spike in bandwidth for someone with limited cellular data.

    I modified the .hbs and .json files to include more thumbnail sizes but it didn’t work as I expected. For example, I added a Group variable but the processor balked. Would a max-width of 6000px be the cause of a problem?

    To compound the issue I am unclear on the logic. Take the code snippets below:

    "sizes": {
    "hero": "(max-width: 1600px) 100vw, 1600px",

     

    "xl": {
    "width": 1360,
    "height": "auto",
    "group": "hero"
    }

     
    Where a viewport of greater than or equal to 1360px is detected, does the code/server provide an image greater or equal to 1360px width, and always less than 1600px?

    How does the code supply high resolution image files to high resolution displays?

    If one creates an entry for xxl with a width of 1600, and xxxl for widths greater than 1600px, does the code create the scaled-down images and detect the device display to serve the relevant image? I appreciate any advice you can provide.

    #6170
    Bob

    I recommended read the following articles: https://ericportis.com/posts/2014/srcset-sizes/ or https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6171
    GoFaster

    Thanks. I’ve read both articles and others to fill in the gaps. That clears up responsive images.

    The question remains, how to implement high resolution using “featuredImages” in Publii?

    When Frontpage layout is set to 1 column the photos are low resolution. If you view the website, you’ll see there’s a low resolution issue when set to 2 columns. 1 col results are worse when viewed on a desktop monitor.

    You say, “if you still want to use the responsive images you can add more thumbnail sizes by modifying the config.json file.”

    Yet my reading of the page, “How images work in Publii,” provides examples of necessary modifications to the Handlebars markup;

    {{#featuredImage}} 
    {{#if url}} 
    <img 
    src="{{url}}" 
    {{responsiveImageAttributes 'featuredImage' srcset.hero sizes.hero}}
    height="{{height}}" 
    width="{{width}}" 
    alt="{{alt}}"> 
    {{/if}} 
    {{/featuredImage}}

    If one adds a group variable to the json file, one uses it in the Handlebars file.

    For example one might add “newgroup” to the .json file, and “srcset.newgroup sizes.newgroup” to the markup.

    To return to the original question, to force the Frontpage layout to display high resolution photographs in the 1 column setting, should one only add more thumbnails sizes to the json file, or is creating a new group and editing both the json and the markup files the correct approach?

    I have to say, I have tried both approaches without success so far. I would be grateful if you could provide a brief example based on those in “How images work in Publii,” to illustrate a correct json/Handlebars configuration for one high resolution at, say, 6000px?

    #6175
    Bob

    Share the config.json file with us, or especially the “files” section.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #6181
    GoFaster
    "files": {
    "ignoreAssets": [
    "scss",
    ".DS_Store"
    ],
    "assetsPath": "assets",
    "partialsPath": "partials",
    "responsiveImages": {
    "contentImages": {
    "sizes": "(max-width: 1024px) 100vw, 1024px",
    "dimensions": {
    "xs": {
    "width": 300,
    "height": "auto"
    },
    "sm": {
    "width": 480,
    "height": "auto"
    },
    "md": {
    "width": 768,
    "height": "auto"
    },
    "lg": {
    "width": 1024,
    "height": "auto"
    }
    }
    },
    "featuredImages": {
    "sizes": {
    "cards": "(min-width: 75em) 25vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",
    "post": "(max-width: 1600px) 200vw, 3000px",
    "amp": "(max-width: 768px) 100vw, 768px"
    },
    "dimensions": {
    "xs": {
    "width": 300,
    "height": "auto",
    "group": "post,cards,amp"
    },
    "sm": {
    "width": 480,
    "height": "auto",
    "group": "post,cards,amp"
    },
    "md": {
    "width": 768,
    "height": "auto",
    "group": "post,cards,amp"
    },
    "lg": {
    "width": 1024,
    "height": "auto",
    "group": "post,cards"
    },
    "xl": {
    "width": 1360,
    "height": "auto",
    "group": "post,cards"
    },
    "2xl": {
    "width": 1600,
    "height": "auto",
    "group": "post,cards"
    },
    "3xl": {
    "width": 2000,
    "height": "auto",
    "group": "post,cards"
    },
    "4xl": {
    "width": 3000,
    "height": "auto",
    "group": "post,cards"
    },
    "sm2": {
    "width": 375,
    "height": "auto",
    "group": "post,cards"
    }
    }
    },
    "tagImages": {
    "sizes": "(min-width: 75em) 25vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",
    "dimensions": {
    "xs": {
    "width": 300,
    "height": 255,
    "crop": true
    },
    "sm": {
    "width": 480,
    "height": "auto"
    },
    "md": {
    "width": 768,
    "height": "auto"
    },
    "lg": {
    "width": 1024,
    "height": "auto"
    },
    "xl": {
    "width": 1360,
    "height": "auto"
    },
    "2xl": {
    "width": 3000,
    "height": "auto"
    }
    }
    },
    "optionImages": {
    "sizes": "(max-width: 1600px) 100vw, 1600px",
    "dimensions": {
    "xs": {
    "width": 300,
    "height": 255,
    "crop": true
    },
    "sm": {
    "width": 480,
    "height": "auto"
    },
    "md": {
    "width": 768,
    "height": "auto"
    },
    "lg": {
    "width": 1024,
    "height": "auto"
    },
    "xl": {
    "width": 1360,
    "height": "auto"
    },
    "2xl": {
    "width": 3000,
    "height": "auto"
    }
    }
    },
    "galleryImages": {
    "sizes": "",
    "dimensions": {
    "thumbnail": {
    "width": 3000,
    "height": "auto"
    }
    }
    }
    }
    },

     

    #6238
    GoFaster

    Bob, would you mind taking a look at the files section of the config.json? I wasn’t able to resolve the issue. Thanks.

     

    #6239
    Bob

    Your “featuredImages” section in the config.json does not contain a hero group. It should look like this:

    "featuredImages": {
    "sizes": {
    "cards": "(min-width: 75em) 25vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",
    "post": "(max-width: 1600px) 200vw, 3000px",
    "amp": "(max-width: 768px) 100vw, 768px",
    "hero": "(max-width: 1600px) 100vw, 1600px"
    },
    "dimensions": {
    "xs": {
    "width": 300,
    "height": "auto",
    "group": "post,cards,amp,hero"
    },
    "sm": {
    "width": 480,
    "height": "auto",
    "group": "post,cards,amp,hero"
    },
    "md": {
    "width": 768,
    "height": "auto",
    "group": "post,cards,amp,hero"
    },
    "lg": {
    "width": 1024,
    "height": "auto",
    "group": "post,cards,hero"
    },
    "xl": {
    "width": 1360,
    "height": "auto",
    "group": "post,cards,hero"
    },
    "2xl": {
    "width": 1600,
    "height": "auto",
    "group": "post,cards,hero"
    },
    "3xl": {
    "width": 2000,
    "height": "auto",
    "group": "post,cards"
    },
    "4xl": {
    "width": 3000,
    "height": "auto",
    "group": "post,cards"
    },
    "sm2": {
    "width": 375,
    "height": "auto",
    "group": "post,cards"
    }
    }
    }
    

     

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.