Implement most of the images processing methods

assets/main/scss/_anchor.scss

@@ -1,4 +1,4 @@
-:target::before {
+:target:not(sup)::before {
   content: '';
   display: block;
 }

assets/main/scss/_carousel.scss

@@ -18,7 +18,11 @@
 
     img {
         width: 100%;
-        height: 420px;
+        height: 450px;
+
+        @include media-breakpoint-down(lg) {
+            height: 270px;
+        }
 
         @include media-breakpoint-down(sm) {
             height: 180px;

assets/main/scss/post/index.scss

@@ -131,6 +131,5 @@
 }
 
 .post-featured-img {
-  max-height: 480px;
   object-fit: contain;
 }

exampleSite/config/_default/config.toml

@@ -27,6 +27,8 @@ enableEmoji = true
 
 pygmentsUseClasses = true
 
+timeout = "120s"
+
 [blackfriday]
   hrefTargetBlank = true
 

exampleSite/content/docs/image-processing/index.md

@@ -13,7 +13,25 @@ categories = [
 ]
 tags = [
   "Image",
-  "Caption"
+  "Caption",
+  "Resize",
+  "Crop",
+  "Fill",
+  "Fit",
+  "Brightness",
+  "ColorBalance",
+  "Colorize",
+  "Contrast",
+  "Gamma",
+  "GaussianBlur",
+  "Grayscale",
+  "Hue",
+  "Invert",
+  "Pixelate",
+  "Saturation",
+  "Sepia",
+  "Sigmoid",
+  "UnsharpMask",
 ]
 series = [
   "Docs"
@@ -101,4 +119,192 @@ post:
 ![Image Caption](/featured-sample.png "Use Image Title as Caption")
 ```
 
-![Image Caption](/featured-sample.png "Use Image Title as Caption")
+![Image Caption](/featured-sample.png?fit=300x200 "Use Image Title as Caption")
+
+## Crop Images
+
+Crop an image to match the given dimensions without resizing. You must provide both width and height. Use the anchor[^1] option to change the crop box anchor point.
+
+```markdown
+![Crop Image](/featured-sample.png?crop=[width]x[height],[anchor])
+```
+
+- The size `[width]x[height]` is required.
+- `[anchor]` is optional, the `,` is used to separate the size and anchor.
+
+[^1]: When using the `Crop` or `Fill` method, the anchor determines the placement of the crop box. You may specify `TopLeft`, `Top`, `TopRight`, `Left`, `Center`, `Right`, `BottomLeft`, `Bottom`, `BottomRight`, or `Smart`. The default value is `Smart`.
+
+| Examples | | |
+|:-:|:-:|:-:|
+| ![Crop Image](/featured-sample.png?crop=200x200,TopLeft "crop=200x200,TopLeft") | ![Crop Image](/featured-sample.png?crop=200x200,Top "crop=200x200,Top") | ![Crop Image](/featured-sample.png?crop=200x200,TopRight "crop=200x200,TopRight") |
+| ![Crop Image](/featured-sample.png?crop=200x200,Left "crop=200x200,Left") | ![Crop Image](/featured-sample.png?crop=200x200,Center "crop=200x200,Center") | ![Crop Image](/featured-sample.png?crop=200x200,Right "crop=200x200,Right") |
+| ![Crop Image](/featured-sample.png?crop=200x200,BottomLeft "crop=200x200,BottomLeft") | ![Crop Image](/featured-sample.png?crop=200x200,Bottom "crop=200x200,Bottom") | ![Crop Image](/featured-sample.png?crop=200x200,BottomRight "crop=200x200,BottomRight") |
+
+## Fill Images
+
+Crop and resize an image to match the given dimensions. You must provide both width and height. Use the anchor[^1] option to change the crop box anchor point.
+
+```markdown
+![Fill Image](/featured-sample.png?fill=[width]x[height],[anchor])
+```
+
+- The size `[width]x[height]` is required.
+- `[anchor]` is optional, the `,` is used to separate the size and anchor.
+
+| Examples | | |
+|:-:|:-:|:-:|
+| ![Fill Image](/featured-sample.png?fill=150x200,TopLeft "fill=150x200,TopLeft") | ![Fill Image](/featured-sample.png?fill=150x200,Top "fill=150x200,Top") | ![Fill Image](/featured-sample.png?fill=150x200,TopRight "fill=150x200,TopRight") |
+| ![Fill Image](/featured-sample.png?fill=150x200,Left "fill=150x200,Left") | ![Fill Image](/featured-sample.png?fill=150x200,Center "fill=150x200,Center") | ![Fill Image](/featured-sample.png?fill=150x200,Right "fill=150x200,Right") |
+| ![Fill Image](/featured-sample.png?fill=150x200,BottomLeft "fill=150x200,BottomLeft") | ![Fill Image](/featured-sample.png?fill=150x200,Bottom "fill=150x200,Bottom") | ![Fill Image](/featured-sample.png?fill=150x200,BottomRight "fill=150x200,BottomRight") |
+
+## Fit Images
+
+Downscale an image to fit the given dimensions while maintaining aspect ratio. You must provide both width and height.
+
+```markdown
+![Fit Image](/featured-sample.png?fit=[width]x[height])
+```
+
+![Fit Image](/featured-sample.png?fit=200x100)
+
+## Filters
+
+### Brightness
+
+The `brightness` must be in range `(-100, 100)`.
+
+```markdown
+![Image Brightness](/featured-sample.png?brightness=-30)
+```
+
+![Image Brightness](/featured-sample.png?fit=200x200&brightness=-30)
+
+### ColorBalance
+
+ColorBalance creates a filter that changes the color balance of an image. The percentage parameters for each color channel (red, green, blue) must be in range `(-100, 500)`.
+
+```markdown
+![Image ColorBalance](/featured-sample.png?colorBalance=-50,50,150)
+```
+
+![Image ColorBalance](/featured-sample.png?fit=200x200&colorBalance=-50,50,150)
+
+### Colorize
+
+Colorize creates a filter that produces a colorized version of an image. The hue parameter is the angle on the color wheel, typically in range `(0, 360)`. The saturation parameter must be in range `(0, 100)`. The percentage parameter specifies the strength of the effect, it must be in range `(0, 100)`.
+
+```markdown
+![Image Colorize](/featured-sample.png?colorize=-100,50,150)
+```
+
+![Image Colorize](/featured-sample.png?fit=200x200&colorize=100,50,150)
+
+### Contrast
+
+The `contrast` must be in range `(-100, 100)`.
+
+```markdown
+![Image Contrast](/featured-sample.png?contrast=50)
+```
+
+![Image Contrast](/featured-sample.png?fit=200x200&contrast=50)
+
+### Gamma
+
+Gamma creates a filter that performs a gamma correction on an image. The gamma parameter must be positive. Gamma = 1 gives the original image. Gamma less than 1 darkens the image and gamma greater than 1 lightens it.
+
+```markdown
+![Image Gamma](/featured-sample.png?gamma=2)
+```
+
+![Image Gamma](/featured-sample.png?fit=200x200&gamma=2)
+
+### GaussianBlur
+
+Applies a gaussian blur to an image.
+
+```markdown
+![Image GaussianBlur](/featured-sample.png?gaussianBlur=2)
+```
+
+![Image GaussianBlur](/featured-sample.png?fit=200x200&gaussianBlur=2)
+
+### Grayscale
+
+Grayscale creates a filter that produces a grayscale version of an image.
+
+```markdown
+![Image Grayscale](/featured-sample.png?grayscale)
+```
+
+![Image Grayscale](/featured-sample.png?fit=200x200&grayscale)
+
+### Hue
+
+Hue creates a filter that rotates the hue of an image. The hue angle shift is typically in range `-180` to `180`.
+
+```markdown
+![Image Hue](/featured-sample.png?hue=90)
+```
+
+![Image Hue](/featured-sample.png?fit=200x200&hue=90)
+
+### Invert
+
+Invert creates a filter that negates the colors of an image.
+
+```markdown
+![Image Invert](/featured-sample.png?invert)
+```
+
+![Image Invert](/featured-sample.png?fit=200x200&invert)
+
+### Pixelate
+
+Pixelate creates a filter that applies a pixelation effect to an image.
+
+```markdown
+![Image Pixelate](/featured-sample.png?pixelate=8)
+```
+
+![Image Pixelate](/featured-sample.png?fit=200x200&pixelate=8)
+
+### Saturation
+
+Saturation creates a filter that changes the saturation of an image.
+
+```markdown
+![Image Saturation](/featured-sample.png?saturation=100)
+```
+
+![Image Saturation](/featured-sample.png?fit=200x200&saturation=100)
+
+### Sepia
+
+Sepia creates a filter that produces a sepia-toned version of an image.
+
+```markdown
+![Image Sepia](/featured-sample.png?sepia=200)
+```
+
+![Image Sepia](/featured-sample.png?fit=200x200&sepia=200)
+
+### Sigmoid
+
+Sigmoid creates a filter that changes the contrast of an image using a sigmoidal function and returns the adjusted image. It’s a non-linear contrast change useful for photo adjustments as it preserves highlight and shadow detail.
+
+```markdown
+![Image Sigmoid](/featured-sample.png?sigmoid=2,5)
+```
+
+![Image Sigmoid](/featured-sample.png?fit=200x200&sigmoid=2,5)
+
+### UnsharpMask
+
+UnsharpMask creates a filter that sharpens an image. The sigma parameter is used in a gaussian function and affects the radius of effect. Sigma must be positive. Sharpen radius roughly equals 3 * sigma. The amount parameter controls how much darker and how much lighter the edge borders become. Typically between `0.5` and `1.5`. The threshold parameter controls the minimum brightness change that will be sharpened. Typically between `0` and `0.05`.
+
+```markdown
+![Image UnsharpMask](/featured-sample.png?unsharpMask=10,1,0.05)
+```
+
+![Image UnsharpMask](/featured-sample.png?fit=400x300&unsharpMask=10,1,0.05)