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: traumweh
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 svgWidth = this.width;
let svgHeight = this.height; let svgHeight = this.height;
if (this.width > 1000) { if (this.height > 1000) {
svgWidth = 1000; svgHeight = 1000;
svgHeight = 1000 * this.height / this.width; svgWidth = 1000 * this.width / this.height;
} }
svg.setAttribute("height", svgHeight); svg.setAttribute("height", svgHeight);

30
styleguide/testpage.html
View file

@ -85,26 +85,26 @@ int *positives(int *numbers, int *size) {
<section> <section>
<h2>Section With Image</h2> <h2>Section With Image</h2>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et When including images in your content, you can opt into applying an SVG filter that adds visual glitches to
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet the image. This shouldn't be used on images with text or important details, because the glitches will most
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, likely reduce readability. Let's use the following plain image:
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.
</p> </p>
<figure> <figure>
<img src="assets/image/cat.png" <img src="assets/image/example_cat.jpg"
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."/> alt="TODO"/>
<figcaption>Example image with some visual distortion applied.</figcaption> <figcaption>Example image without any distortion applied.</figcaption>
</figure> </figure>
<p> <p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et Now, in HTML you could simply specify <code>class="glitch"</code> on the image tag to add the SVG filter
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet dynamically. But we also made <a href="generator/">a simple web-tool to apply the filter</a> to an image
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 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
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, to ensure that the filter looks similar across all images.
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.
</p> </p>
<figure>
<img class="glitch" src="assets/image/example_cat.jpg"
alt="TODO"/>
<figcaption>Example image with visual glitches applied.</figcaption>
</figure>
</section> </section>
<section> <section>