EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Explain image style in testpage

Browse source
This commit is contained in:
lilith 2025-02-14 01:13:19 +01:00
commit 2bda1f3e78
Signed by: lilith
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
2 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

6
styleguide/generator/generator.js
View file

@ -30,9 +30,9 @@ function loadImage(base64Image) {
let svgWidth = this.width;
let svgHeight = this.height;
if (this.width > 1000) {
svgWidth = 1000;
svgHeight = 1000 * this.height / this.width;
if (this.height > 1000) {
svgHeight = 1000;
svgWidth = 1000 * this.width / this.height;
}
svg.setAttribute("height", svgHeight);

32
styleguide/testpage.html
View file

@ -85,26 +85,26 @@ int *positives(int *numbers, int *size) {
<section>
<h2>Section With Image</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
When including images in your content, you can opt into applying an SVG filter that adds visual glitches to
the image. This shouldn't be used on images with text or important details, because the glitches will most
likely reduce readability. Let's use the following plain image:
</p>
<figure>
<img src="assets/image/cat.png"
alt="Close-up of a young cat's face that is distorted through horizontally moving rows of pixels slightly to the left or right and shifting some pixels' color into pink or blue hues."/>
<figcaption>Example image with some visual distortion applied.</figcaption>
<img src="assets/image/example_cat.jpg"
alt="TODO"/>
<figcaption>Example image without any distortion applied.</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG filter
dynamically. But we also made <a href="generator/">a simple web-tool to apply the filter</a> to an image
and export it as a PNG. The tool also scales the image down if its vertical size is larger than 1000 pixels. This is done
to ensure that the filter looks similar across all images.
</p>
<figure>
<img class="glitch" src="assets/image/example_cat.jpg"
alt="TODO"/>
<figcaption>Example image with visual glitches applied.</figcaption>
</figure>
</section>
<section>
@ -154,4 +154,4 @@ int *positives(int *numbers, int *size) {
</main>
</body>
</html>
</html>