Image sizing problem in feed (#115)

* Create docker configuration for local development

* Fix WP 6.7 chrome problem with lazy loading

Author: petrkucerak

README.md

@@ -8,6 +8,12 @@ Wordpress theme of the STC blog [studuj.digital](https://studuj.digital/).
 ## About project
 Based on [STCblog template](https://github.com/andreondra/stcblog).
 
+## Local development
+
+```sh
+docker-compose -p stcblog up --build # Build and run dev version in docker image
+```
+
 ## Features
 ### Responsive
 ![responsivity showcase](docs/img/readme1.gif)

docker-compose.yml

@@ -0,0 +1,28 @@
+version: '3.8'
+services:
+  wordpress:
+    image: wordpress:6.7.1
+    container_name: wordpress-dev
+    ports:
+      - "8080:80"
+    environment:
+      WORDPRESS_DB_HOST: db
+      WORDPRESS_DB_USER: exampleuser
+      WORDPRESS_DB_PASSWORD: examplepass
+      WORDPRESS_DB_NAME: exampledb
+    volumes:
+      - ./:/var/www/html/wp-content/themes/current-theme
+
+  db:
+    image: mysql:8.0
+    container_name: wordpress-db
+    environment:
+      MYSQL_DATABASE: exampledb
+      MYSQL_USER: exampleuser
+      MYSQL_PASSWORD: examplepass
+      MYSQL_RANDOM_ROOT_PASSWORD: '1'
+    volumes:
+      - db:/var/lib/mysql
+
+volumes:
+  db:

functions.php

@@ -393,4 +393,24 @@ function disable_emojis() {
 }
 add_action('init', 'disable_emojis');
 
+
+/**
+ * Disable Chromium feature that applies `contain-intrinsic-size` to images with 
+ * `sizes="auto"` attribute. This prevents unexpected layout shifts caused by 
+ * missing `width` and `height` attributes.
+ *
+ * WordPress 6.7 introduced a feature that automatically adds `loading="lazy"`
+ * to images without validating the presence of these attributes. This behavior
+ * can cause rendering issues, especially in Chromium-based browsers, due to 
+ * their CSS adjustments for such images. 
+ * 
+ * Applying this filter disables the `auto-sizes` feature in WordPress until 
+ * a permanent patch is released (scheduled for version 6.7.1).
+ *
+ * @link https://core.trac.wordpress.org/ticket/62413
+ * @link https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/
+ * @author Petr Kucera
+ */
+add_filter('wp_img_tag_add_auto_sizes', '__return_false');
+
 ?>