add image shortcode and update doc

README.md

@@ -84,8 +84,16 @@ Make sure to fill all the fields carefully as they are important for SEO and use
 After creating the file, you can start writing your blog post.\
 You can see your blog post in `http://localhost:1313/blog/your-post-slug`
 
-### Images and static assets
-For adding images and other static assets, you can use the `assets` directory.
+### Images
+For adding images, you can use the `assets/images` directory.
+
+### Image optmization
+For optimizing images in markdown files use image shortcode: \
+`{{< image  url="/images/image.png" optimize="1000x webp q50">}}`
+
+
+### Static assets
+For adding static assets, you can use the `static` directory.
 
 ### Translations in markdowon
 For using translation in markdown files, you can use the `{{<translate "dict.download.welcome">}}` shortcode. translations are in [i18n](./i18n/) directory.

layouts/shortcodes/image.html

@@ -0,0 +1,3 @@
+{{ $image := resources.Get (.Get "url") }}
+{{ $resized := $image.Resize (.Get "optimize") }}
+{{ $resized.RelPermalink }}

static/css/main.css

@@ -3718,6 +3718,9 @@ html:has(.drawer-toggle:checked) {
 .h-5 {
   height: 1.25rem;
 }
+.h-56 {
+  height: 14rem;
+}
 .h-\[23px\] {
   height: 23px;
 }
@@ -3733,9 +3736,6 @@ html:has(.drawer-toggle:checked) {
 .h-full {
   height: 100%;
 }
-.h-56 {
-  height: 14rem;
-}
 .max-h-full {
   max-height: 100%;
 }