[web] Added img shortcode and enabled git-lfs for images in web/

.gitattributes

@@ -2,3 +2,5 @@
 *.h   hooks.style=uncrustify
 *.cpp hooks.style=uncrustify
 *.hpp hooks.style=uncrustify
+web/**/*.jpg filter=lfs diff=lfs merge=lfs -text
+web/**/*.png filter=lfs diff=lfs merge=lfs -text

netlify.toml

@@ -2,4 +2,4 @@
 [build]
   base    = "web"
   publish = "web/public"
-  command = "npm run import && npm run build:release"
+  command = "git lfs fetch && npm run import && npm run build:release"

web/README.md

@@ -32,6 +32,24 @@ Test by locally serving via [Caddy](https://caddyserver.com):
 - [webpack](https://webpack.github.io/) - Packaging JavaScript
 - [gulp](http://gulpjs.com/) - Automation toolkit
 
+## How-Tos
+
+### Images
+
+Use shortcode `img`:
+
+```
+{{< img src="../square_1e2_neumann_gradients.png" >}}
+```
+
+`src` can be absolute (by preceding with `/`) or relative. The relative path starts at your current URL. If your image is in the same directory as your `.md`-file you have to prefix your path with `../` as in the example above.
+
+Optional parameters:
+
+- `title` - Image caption
+- `class` - CSS class
+- `alt` - Alt text
+
 ## Dump
 
 ### Serve converted meshes with S3

web/content/docs/benchmarks/elliptic/groundwater-flow-neumann.md

@@ -6,8 +6,6 @@ title = "Groundwater flow (Neumann)"
 
 ## Equations
 
-{{< vis url="square_1e4_pcs_0_ts_1_t_1.000000.vtu" >}}
-
 We start with simple linear homogeneous elliptic problem:
 $$
 \begin{equation}
@@ -23,8 +21,6 @@ where $h$ could be hydraulic head, the subscripts $D$ and $N$ denote the Dirichl
 
 ## Problem specification and analytical solution
 
-{{< vis url="cow.vtp" height="300" >}}
-
 We solve the Laplace equation on a square domain $[0\times 1]^2$ with $k = 1$ w.r.t. the specific boundary conditions:
 
 $$
@@ -112,13 +108,17 @@ A last major part of the output was produced by the linear equation solver (LIS
 The result, written in the `square_1e2_neumann.vtu`, can be visualized with Paraview, for example.
 
 Loading the `.vtu` file in Paraview will show following image:
-{asset:373:img}
+
+{{< vis url="square_1e4_pcs_0_ts_1_t_1.000000.vtu" >}}
 
 Compared to the analytical solution presented above the results are very good but in a single point:
-{asset:374:img}
+
+{{< vis url="cow.vtp" height="300" >}}
 
 Both Dirichlet boundary conditions are satisfied.
 The values of gradients in x direction along the right side and y directions along the top sides of the domain a shown below:
-{asset:375:img}
+
+{{< img src="../square_1e2_neumann_gradients.png" >}}
+
 The homogeneous Neumann boundary condition on the top side is satisfied (ScalarGradient_Y is close to zero).
 The inhomogeneous Neumann boundary condition on the bottom is satisfied only for $y > 0.3$ (where the ScalarGradient_X is close to one) because of incompatible boundary conditions imposed on the bottom right corner of the domain.

web/layouts/shortcodes/img.html

+<!-- img -->
+<figure class="img-responsive{{ with .Get "class" }} {{.}}{{ end }}">
+    {{ with .Get "link"}}<a href="{{.}}">{{ end }}
+        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
+    {{ if .Get "link"}}</a>{{ end }}
+    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+    <figcaption>{{ if isset .Params "title" }}
+        <h4>{{ .Get "title" }}</h4>{{ end }}
+        {{ if or (.Get "caption") (.Get "attr")}}<p>
+        {{ .Get "caption" }}
+        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
+            {{ .Get "attr" }}
+        {{ if .Get "attrlink"}}</a> {{ end }}
+        </p> {{ end }}
+    </figcaption>
+    {{ end }}
+</figure>
+<!-- img -->