Allow custom sizing in image shortcode

- Move w-full h-auto into default class parameter instead of hardcoding
- Users can now override sizing with custom class parameter
- Default still applies w-full h-auto if no class specified
- Update SHORTCODES.md documentation with sizing examples
- Add CSS class reference tables for common sizing patterns

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/SHORTCODES.md b/SHORTCODES.md
index e61409f225fbbc9273b4bd4d66e68d05a32d9b03..ea82cdbb1102e5e17936db8ce897d4fe22a0b709 100644 (file)
--- a/SHORTCODES.md
+++ b/SHORTCODES.md
@@ -50,7 +50,7 @@ Display a responsive image with optional caption and automatic lazy-loading. Ima
 | src | Yes | Path or URL to the image file |
 | alt | No | Alt text for accessibility |
 | caption | No | Optional caption displayed below the image |
-| class | No | Custom CSS classes (default: "rounded-lg border border-border/30") |
+| class | No | Custom CSS classes (default: "w-full h-auto rounded-lg border border-border/30"). Overrides all defaults when specified. |
 
 ### Example
 
@@ -64,6 +64,70 @@ With caption:
 {{< image src="/images/mountain.jpg" alt="Mountain landscape" caption="Hiking in the Alps" >}}
 ```
 
+With custom sizing and styling:
+```
+{{< image src="/images/mountain.jpg" alt="Mountain landscape" class="w-2/3 mx-auto rounded-lg shadow-lg border-2 border-accent" >}}
+```
+
+### Common CSS Classes for Image Sizing
+
+Use Tailwind CSS utility classes to customize image appearance:
+
+#### Width & Layout
+| Class | Effect |
+|-------|--------|
+| `w-full` | Full container width (default) |
+| `w-1/2` | 50% width |
+| `w-2/3` | 66% width |
+| `w-3/4` | 75% width |
+| `max-w-lg` | Max 512px width |
+| `max-w-2xl` | Max 672px width |
+| `max-w-3xl` | Max 768px width |
+| `mx-auto` | Center horizontally |
+
+#### Height & Aspect Ratio
+| Class | Effect |
+|-------|--------|
+| `h-auto` | Auto height (maintains aspect ratio) |
+| `aspect-video` | 16:9 aspect ratio |
+| `aspect-square` | 1:1 aspect ratio |
+| `aspect-[3/2]` | 3:2 aspect ratio |
+| `object-cover` | Fill container, crop if needed |
+| `object-contain` | Fit entire image in container |
+
+#### Borders & Shadows
+| Class | Effect |
+|-------|--------|
+| `rounded-lg` | Large rounded corners (default) |
+| `rounded-xl` | Extra large rounded corners |
+| `border-2` | 2px border |
+| `border-accent` | Accent color border |
+| `border-border/50` | Semi-transparent border |
+| `shadow-lg` | Large drop shadow |
+| `shadow-xl` | Extra large drop shadow |
+
+#### Examples
+
+Thumbnail-sized image:
+```
+{{< image src="/images/thumb.jpg" alt="Thumbnail" class="w-48 h-48 object-cover rounded-lg" >}}
+```
+
+Full-width featured image:
+```
+{{< image src="/images/feature.jpg" alt="Featured image" class="w-full aspect-video object-cover rounded-xl shadow-xl" >}}
+```
+
+Centered half-width with border:
+```
+{{< image src="/images/centered.jpg" alt="Centered" class="w-1/2 mx-auto rounded-lg border-2 border-accent" >}}
+```
+
+Small inline image:
+```
+{{< image src="/images/small.jpg" alt="Small" class="w-32 h-32 rounded-full object-cover inline-block" >}}
+```
+
 ## Gallery
 
 Create a responsive image gallery grid with automatic column layout. Gallery content uses markdown image syntax and is automatically styled to create a polished gallery experience.

diff --git a/themes/danix-xyz-hacker/layouts/shortcodes/image.html b/themes/danix-xyz-hacker/layouts/shortcodes/image.html
index 07a698df30d285c99a29a19522ba7ad98aa0e01a..0209b7e6f40bc4f350994c827724d65f1ccb61ba 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/shortcodes/image.html
+++ b/themes/danix-xyz-hacker/layouts/shortcodes/image.html
@@ -1,14 +1,14 @@
 {{- $src := .Get "src" -}}
 {{- $alt := .Get "alt" | default "Image" -}}
 {{- $caption := .Get "caption" -}}
-{{- $class := .Get "class" | default "rounded-lg border border-border/30" -}}
+{{- $class := .Get "class" | default "w-full h-auto rounded-lg border border-border/30" -}}
 
 {{- if $src -}}
   <figure class="my-8">
     <img
       src="{{ $src }}"
       alt="{{ $alt }}"
-      class="{{ $class }} w-full h-auto"
+      class="{{ $class }}"
       loading="lazy"
     />
     {{- if $caption -}}