Skip to content

Conversation

@CySSoO
Copy link
Contributor

@CySSoO CySSoO commented Jan 31, 2026

Motivation

  • Reduce cumulative layout shift (CLS) by ensuring images render with explicit width and height attributes.
  • The page cover (hero) and Instagram carousel thumbnails previously lacked dimensions, causing layout shifts that hurt Core Web Vitals and SEO.

Description

  • Use EverblockPage::getCoverImageData in controllers/front/page.php and expose everblock_page_image_data (URL, width, height, alt) to templates.
  • Render the page cover <img> with width and height in views/templates/front/page.tpl using {$everblock_page_image_data.width} and {$everblock_page_image_data.height}.
  • When fetching Instagram posts in src/Service/EverblockTools.php, compute image dimensions with getimagesize() (with a fallback size) and include width/height in each cached item.
  • Output width and height attributes for Instagram thumbnails in views/templates/hook/instagram.tpl to stabilize the carousel layout.

Testing

  • No automated tests were executed for this change in the current environment.

Codex Task

@CySSoO CySSoO merged commit 6b4bd00 into master Jan 31, 2026
2 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants