Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add srcset for post image #125

Merged
merged 1 commit into from
Oct 31, 2023
Merged

Conversation

rise-erpelding
Copy link
Contributor

@rise-erpelding rise-erpelding commented Oct 27, 2023

Description

Implements responsive images on posts using srcset. src/php/views/partials/content-single.twig still exclusively uses the thumbnail (150x150) image.

Addresses #111

To Validate

  1. Make sure all PR Checks have passed
  2. Pull down this branch
  3. Run npm start
  4. Add a post with a featured image and navigate to it.
  5. Open the Network tab in the inspector with a smaller screen width (around 300-400px), and reload the page. Note the name/size of the featured image that loads (it may be 300px wide/medium or 768px wide/medium_large), and slowly increase the size of the page, depending on your browser, you should see it load at least one other image size (1024px wide/large) before the browser window gets to 1000px wide. Different browsers seem to load different sized images and different widths as far as I could tell, but generally speaking smaller images are loaded for smaller screen widths.

@rise-erpelding rise-erpelding marked this pull request as ready for review October 27, 2023 22:57
refactor: use picture element for responsive images
@jonoliver jonoliver force-pushed the 111-responsive-featured-images branch from 9943e98 to 41163d6 Compare October 31, 2023 19:59
@jonoliver jonoliver merged commit 41163d6 into main Oct 31, 2023
@jonoliver jonoliver deleted the 111-responsive-featured-images branch October 31, 2023 20:02
@jonoliver jonoliver mentioned this pull request Nov 2, 2023
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants