🚀 go-pugleaf

Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:
> Ich moechte eine Bildanzeige umschalten zwischen skaliert (durch
> Webbrowser) und fullsize.
>
> Beispiel: diese beiden HTML-Seiten(*)
>
> https://fex.rus.uni-stuttgart.de/dox_webgallery_scaled.html
> https://fex.rus.uni-stuttgart.de/dox_webgallery_full.html
>
> moechte ich zu einer Seite zusammenfassen mit Umschalten der Anzeige ueber
> einen Button oder Tastenkommando. Vermutlich geht das mit Javascript, das
> das style Kommando ein/ausblendet? Oder doch ganz anders?

Hab gefunden "Changing the Value of an Attribute"
https://www.w3schools.com/js/js_htmldom_html.asp

Damit hab ich jetzt umgesetzt:

https://fex.rus.uni-stuttgart.de/dox_webgallery.html

mit [f] bekomme ich fullsize
mit [s] bekomme ich scaled

Besser waere aber eine toggle-Funktion, also mit [s] umschalten zwischen
beiden Ansichten. Tipps dazu?


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Marcel Mueller <news.5.maazl@spamgourmet.org> wrote:

>> https://fex.rus.uni-stuttgart.de/dox_webgallery_scaled.html
>> https://fex.rus.uni-stuttgart.de/dox_webgallery_full.html
>>
>> moechte ich zu einer Seite zusammenfassen mit Umschalten der Anzeige ueber
>> einen Button oder Tastenkommando. Vermutlich geht das mit Javascript, das
>> das style Kommando ein/ausblendet? Oder doch ganz anders?
>
> Ja, JS wäre angemessen. Einfach im onclick des Bildes den Style
> desselben ersetzen.

Das waere dann aber nur Einweg. Ich will aber umschalten koennen.


>> Wie man im Sourcecode sieht, hab ich die Skalierung so erzeugt:
>> style="max-width:100vw;max-height:100vh"
>
> Damit zwingst du es ins Browserfenster. Passt aber nicht so ganz, wenn
> darüber noch Navigation und darunter noch Text stehen soll. Da musst du
> erst mal definieren, was dann passieren soll. Mit clac(() könntest Du
> z.B. Freiräume schaffen.

Stimmt, hab ich vergessen.
Also Hoehe 90%?


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Am 22.01.25 um 11:43 schrieb Ulli Horlacher:
> Ich moechte eine Bildanzeige umschalten zwischen skaliert (durch
> Webbrowser) und fullsize.
>
> Beispiel: diese beiden HTML-Seiten(*)
>
> https://fex.rus.uni-stuttgart.de/dox_webgallery_scaled.html
> https://fex.rus.uni-stuttgart.de/dox_webgallery_full.html
>
> moechte ich zu einer Seite zusammenfassen mit Umschalten der Anzeige ueber
> einen Button oder Tastenkommando. Vermutlich geht das mit Javascript, das
> das style Kommando ein/ausblendet? Oder doch ganz anders?

Ja, JS wäre angemessen. Einfach im onclick des Bildes den Style
desselben ersetzen.

> Wie man im Sourcecode sieht, hab ich die Skalierung so erzeugt:
> style="max-width:100vw;max-height:100vh"

Damit zwingst du es ins Browserfenster. Passt aber nicht so ganz, wenn
darüber noch Navigation und darunter noch Text stehen soll. Da musst du
erst mal definieren, was dann passieren soll. Mit clac(() könntest Du
z.B. Freiräume schaffen.

Wenn du es in voller Pracht haben willst, musst du den Style ändern in
width/height mit den physikalischen Abmessungen des Bildes.
Eine Untiefe bleibt allerdings. Die Einheit px ist halt schon lange
nicht mehr Pixel in Bildschirmauflösung. Da können einige
Transformationen dazwischen sein. Das beginnt mit Browser-Zoom und endet
nicht bei High-DPI Transformation des OS.


Marcel

On Wed, 22 Jan 2025 13:57:40 Ulli Horlacher wrote:
> Damit hab ich jetzt umgesetzt:
> https://fex.rus.uni-stuttgart.de/dox_webgallery.html

Side note: Wenigstens mein Chrome hat im User-Stylesheet einen
margin von 8px für den body hinterlegt. Wenn darin Dein Bild mit

#v+
style="max-width: 100vw; max-height: calc(100vh - 4em);"
#v-

angezeigt wird, ergibt das erst recht wieder einen Scrollbalken
wenigstens in der Horizontalen. Sinnvollerweise also entweder auch
dort einen Puffer lassen oder den margin explizit auf 0 setzen.

Servus,
   Stefan

--
http://kontaktinser.at/ - die kostenlose Kontaktboerse fuer Oesterreich
Offizieller Erstbesucher(TM) von mmeike

Ungewöhnliches für gewöhnliche Leute: Stefan - bis es weh tut!
(Sloganizer)

Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:

> https://fex.rus.uni-stuttgart.de/dox_webgallery.html
>
> mit [f] bekomme ich fullsize
> mit [s] bekomme ich scaled
>
> Besser waere aber eine toggle-Funktion, also mit [s] umschalten zwischen
> beiden Ansichten. Tipps dazu?

Habs inzwischen selbst hingekriegt. Unter obiger URL gibts nun:
toggle size: [s]

Vermutlich gehts auch anders/effizienter, ich stuemper mit javascript :-}


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Marcel Mueller <news.5.maazl@spamgourmet.org> wrote:
> Am 22.01.25 um 14:09 schrieb Ulli Horlacher:
>> Marcel Mueller <news.5.maazl@spamgourmet.org> wrote:
>>> Ja, JS wäre angemessen. Einfach im onclick des Bildes den Style
>>> desselben ersetzen.
>>
>> Das waere dann aber nur Einweg. Ich will aber umschalten koennen.
>
> Wieso?
> Was hindert dich daran beim zweiten Klick-Event den alten Zustand wieder
> herzustellen?

Mein Unwissen :-}
Wie mach ich das, bzw woher weiss ich welcher Klickevent das ist?


>> Also Hoehe 90%?
>
> Das ist in 90% der Fälle ein Fehler, denn der Rest ist ja auch nicht
> 10%, sondern hängt z.B. von der Schriftgröße ab. Deshalb der Hinweis auf
> die calc-Funktion. Damit kann man so Dinge wie calc( 100vh - 30px )
> machen. die 30px müssen dann natürlich zu dem anderen Element passen,
> für das man Platz machen will.

Ist mir danach auch aufgefallen, ich nehm inzwischen
max-height:calc(100vh - 4em)

--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Stefan Froehlich <Stefan+Usenet@froehlich.priv.at> wrote:
> On Wed, 22 Jan 2025 13:57:40 Ulli Horlacher wrote:
>> Damit hab ich jetzt umgesetzt:
>> https://fex.rus.uni-stuttgart.de/dox_webgallery.html
>
> Side note: Wenigstens mein Chrome hat im User-Stylesheet einen
> margin von 8px für den body hinterlegt. Wenn darin Dein Bild mit
>
> #v+
> style="max-width: 100vw; max-height: calc(100vh - 4em);"
> #v-
>
> angezeigt wird, ergibt das erst recht wieder einen Scrollbalken
> wenigstens in der Horizontalen. Sinnvollerweise also entweder auch
> dort einen Puffer lassen oder den margin explizit auf 0 setzen.

Klingt sinnvoll.
Wie mach ich letzteres?
So:

style="margin:0; max-width:100vw; max-height:calc(100vh - 4em)"

?

--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Am 22.01.25 um 14:09 schrieb Ulli Horlacher:
> Marcel Mueller <news.5.maazl@spamgourmet.org> wrote:
>> Ja, JS wäre angemessen. Einfach im onclick des Bildes den Style
>> desselben ersetzen.
>
> Das waere dann aber nur Einweg. Ich will aber umschalten koennen.

Wieso?
Was hindert dich daran beim zweiten Klick-Event den alten Zustand wieder
herzustellen?

>>> Wie man im Sourcecode sieht, hab ich die Skalierung so erzeugt:
>>> style="max-width:100vw;max-height:100vh"
>>
>> Damit zwingst du es ins Browserfenster. Passt aber nicht so ganz, wenn
>> darüber noch Navigation und darunter noch Text stehen soll. Da musst du
>> erst mal definieren, was dann passieren soll. Mit clac(() könntest Du
>> z.B. Freiräume schaffen.
>
> Stimmt, hab ich vergessen.
> Also Hoehe 90%?

Das ist in 90% der Fälle ein Fehler, denn der Rest ist ja auch nicht
10%, sondern hängt z.B. von der Schriftgröße ab. Deshalb der Hinweis auf
die calc-Funktion. Damit kann man so Dinge wie calc( 100vh - 30px )
machen. die 30px müssen dann natürlich zu dem anderen Element passen,
für das man Platz machen will.


Marcel

Am 22.01.25 um 15:59 schrieb Ulli Horlacher:
> Marcel Mueller <news.5.maazl@spamgourmet.org> wrote:
>> Am 22.01.25 um 14:09 schrieb Ulli Horlacher:
>>> Das waere dann aber nur Einweg. Ich will aber umschalten koennen.
>>
>> Wieso?
>> Was hindert dich daran beim zweiten Klick-Event den alten Zustand wieder
>> herzustellen?
>
> Mein Unwissen :-}
> Wie mach ich das, bzw woher weiss ich welcher Klickevent das ist?

Frag doch einfach den aktuellen Style ab.


Marcel

Ulli Horlacher, 2025-01-22 11:43:

> Ich moechte eine Bildanzeige umschalten zwischen skaliert (durch
> Webbrowser) und fullsize.
>
> Beispiel: diese beiden HTML-Seiten(*)
>
> https://fex.rus.uni-stuttgart.de/dox_webgallery_scaled.html
> https://fex.rus.uni-stuttgart.de/dox_webgallery_full.html
>
> moechte ich zu einer Seite zusammenfassen mit Umschalten der Anzeige ueber
> einen Button oder Tastenkommando. Vermutlich geht das mit Javascript, das
> das style Kommando ein/ausblendet? Oder doch ganz anders?

Ich würde PhotoSwipe dafür verwenden:

<https://photoswipe.com>

Ja, braucht JavaScript. Aber das bietet dafür sehr viel Komfort mit Zoom
Scrollen etc. pe pe.

Ich bin u.A. Maintainer des WordPress-Plugins dazu und die
Fahrradzukunft nutzt ebenfalls eine noch ältere Version davon, deren
Integration ebenfalls von mir ist:

<https://wordpress.org/plugins/lightbox-photoswipe/>

Praktische Demos:

<https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/>

<<https://fahrradzukunft.de/39/hydraulische-bremsschalthebel-mit-mtb-komponenten-verbinden>

Die Bildunterschriften sind natürlich optional und überhaupt kann man
das Ding sehr flexibel anpassen. Es braucht auch keine Bibliotheken, wie
jQuery o.Ä. sondern ist "pures" JavaScript.

Bei der Integration in F*EX kann ich gerne helfen.

--
Arno Welzel
https://arnowelzel.de

On Wed, 22 Jan 2025 16:04:30 Ulli Horlacher wrote:
> Stefan Froehlich <Stefan+Usenet@froehlich.priv.at> wrote:
>> On Wed, 22 Jan 2025 13:57:40 Ulli Horlacher wrote:
>>> Damit hab ich jetzt umgesetzt:
>>> https://fex.rus.uni-stuttgart.de/dox_webgallery.html

>> Side note: Wenigstens mein Chrome hat im User-Stylesheet einen
>> margin von 8px für den body hinterlegt. Wenn darin Dein Bild mit
>>
>> #v+
>> style="max-width: 100vw; max-height: calc(100vh - 4em);"
>> #v-
>>
>> angezeigt wird, ergibt das erst recht wieder einen Scrollbalken
>> wenigstens in der Horizontalen. Sinnvollerweise also entweder auch
>> dort einen Puffer lassen oder den margin explizit auf 0 setzen.
>
> Klingt sinnvoll.
> Wie mach ich letzteres?
> So:
>
> style="margin:0; max-width:100vw; max-height:calc(100vh - 4em)"
>
> ?

Nein, es geht nicht um den style von <img>, sondern um den vom Body.
Ich würde den direkt im Stylesheet setzen, da Du vermutlich nicht
möchtest, dass er sich bei jedem Umschalten ändert.

(Und falls Du aus stilistischen Gründen einen Rand haben möchtest,
müsstest Du ihn halt bei max-width berücksichtigen)

Servus,
   Stefan

--
http://kontaktinser.at/ - die kostenlose Kontaktboerse fuer Oesterreich
Offizieller Erstbesucher(TM) von mmeike

Duftig bleibt duftig: Stefan für alle Fälle!
(Sloganizer)

Stefan Froehlich <Stefan+Usenet@froehlich.priv.at> wrote:

>>> angezeigt wird, ergibt das erst recht wieder einen Scrollbalken
>>> wenigstens in der Horizontalen. Sinnvollerweise also entweder auch
>>> dort einen Puffer lassen oder den margin explizit auf 0 setzen.
>>
>> Klingt sinnvoll.
>> Wie mach ich letzteres?
>> So:
>>
>> style="margin:0; max-width:100vw; max-height:calc(100vh - 4em)"

> Nein, es geht nicht um den style von <img>, sondern um den vom Body.
> Ich würde den direkt im Stylesheet setzen, da Du vermutlich nicht
> möchtest, dass er sich bei jedem Umschalten ändert.

Bleibt die Frage: wie geht das, wo setz ich das?


> (Und falls Du aus stilistischen Gründen einen Rand haben möchtest,

Nicht noetig.

--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Arno Welzel <usenet@arnowelzel.de> wrote:
> Ulli Horlacher, 2025-01-22 11:43:
>
>> Ich moechte eine Bildanzeige umschalten zwischen skaliert (durch
>> Webbrowser) und fullsize.
>>
>> Beispiel: diese beiden HTML-Seiten(*)
>>
>> https://fex.rus.uni-stuttgart.de/dox_webgallery_scaled.html
>> https://fex.rus.uni-stuttgart.de/dox_webgallery_full.html
>>
>> moechte ich zu einer Seite zusammenfassen mit Umschalten der Anzeige ueber
>> einen Button oder Tastenkommando. Vermutlich geht das mit Javascript, das
>> das style Kommando ein/ausblendet? Oder doch ganz anders?
>
> Ich würde PhotoSwipe dafür verwenden:
>
> <https://photoswipe.com>
>
> Ja, braucht JavaScript. Aber das bietet dafür sehr viel Komfort mit Zoom
> Scrollen etc. pe pe.
>
> Ich bin u.A. Maintainer des WordPress-Plugins dazu und die
> Fahrradzukunft nutzt ebenfalls eine noch ältere Version davon, deren
> Integration ebenfalls von mir ist:
>
> <https://wordpress.org/plugins/lightbox-photoswipe/>
>
> Praktische Demos:
>
> <https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/>

Urks, das uebersteigt mein minimales Javascript-Knowhow bei weitem.
Das ist mir doch viel zu komplex.


> Bei der Integration in F*EX kann ich gerne helfen.

Nettes Angebot, danke, aber ich moechte es doch einfacher haben, so dass
ich noch verstehe, was ich da mache :-}

Ich bin jetzt mit https://fex.rus.uni-stuttgart.de/dox_webgallery.html so
weit, dass es fast alles macht, was ich haben will.



--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Stefan Froehlich:

> On Wed, 22 Jan 2025 16:04:30 Ulli Horlacher wrote:

>> style="margin:0; max-width:100vw; max-height:calc(100vh - 4em)"
>>
>> ?
>
> Nein, es geht nicht um den style von <img>, sondern um den vom Body.
> Ich würde den direkt im Stylesheet setzen, da Du vermutlich nicht
> möchtest, dass er sich bei jedem Umschalten ändert.
>
> (Und falls Du aus stilistischen Gründen einen Rand haben möchtest,
> müsstest Du ihn halt bei max-width berücksichtigen)

Im Detail:

Wenn Du, Ulli, möchtest, dass eine CSS-Regel sich nur auf die Seiten
mit den Einzelbildern auswirkt, ist es praktisch, ein Attribut class
in body zu setzen.

1
<body class="gallery single-img">

2
body.gallery.single-img { margin: 0 }

3
Wenn Du Abstände für body und später einen vertikalen Scrollbalken
vermeiden möchtest:
body.gallery.single-img { padding: 1em }

4
Das HTML-Element center ist veraltet.

Der Gestaltwunsch Zentrierung ist z.B. so lösbar:

body.gallery.single-img {
  display: flex;
  flex-direction: column;
  justify-content: center; /*horizontale Zentrierung*/
  align-items: center; /*vertikale Zentrierung*/
}

5
<br> ist überflüssig. Damit soll ja der Gestaltungswunsch "Umbruch
nach Bild" gelöst werden. Geht eleganter nur mit CSS. Siehe 4.

6
Bei der Höhenberechnung muss ein Innenabstand bei body bei der
Bildhöhe berücksichtigt werden, wie Stefan schon schrieb.

Aber schon die 4em für die Bildunterschrift und "toggle" ist geraten
und daher unsicher.

Eine lange Bildunterschrift kann ja in mehr als 3 Zeilen umbrechen,
z.B. auf einem schmaleren Display.

Ich habe das so gelöst:
https://codepen.io/fermion/pen/emOPeoR

Die wesentliche Eigenschaft kennst Du schon aus der Vorschaugalerie:

object-fit: contain;

Es ist egal in wieviele Zeilen die Bildunterschrift umbricht.
Ihr könnt es im Codepen ausprobieren und einfach ein br in der
Bildunterschrift p entfernen oder hinzufügen.

7
Für Bildunterschriften gibt es ein passendes HTML Element:

<figure>
<img ...>
<figcaption>Eine tolle Bildunterschrift</figcaption>
</figure>


Andreas
--
http://fahrradzukunft.de

On 2025-01-22 15:04, Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:
> Wie mach ich letzteres?
> So:
>
> style="margin:0; max-width:100vw; max-height:calc(100vh - 4em)"

Bitte, bitte, bitte,
gewöhn Dir an, Stylesheets zu schreiben und nicht style-Attribute an
einzelne Elemente zu klatschen.

        hp

Arno Welzel:

> <https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/>

Wenn ich es richtig sehe, setzt du die Technik

srcset

nicht ein.

Würde das potentiell zu weniger transportiertem Volumen führen, weil
immer nur die minimal nötige Auflösung übertragen würde?



Andreas
--
http://fahrradzukunft.de

Andreas Borutta <borumat@gmx.de> wrote:

> Wenn Du, Ulli, möchtest, dass eine CSS-Regel sich nur auf die Seiten
> mit den Einzelbildern auswirkt, ist es praktisch, ein Attribut class
> in body zu setzen.
>
> 1
> <body class="gallery single-img">
>
> 2
> body.gallery.single-img { margin: 0 }

Prima, das hab ich jetzt eingebaut, siehe:

https://fex.rus.uni-stuttgart.de/dox/framstag@rus.uni-stuttgart.de/public/gallery/Weihnachtsradeln_2024?ACTION=browseitfull:20


> Wenn Du Abstände für body und später einen vertikalen Scrollbalken
> vermeiden möchtest:
> body.gallery.single-img { padding: 1em }

Das hab ich leider nicht verstanden: welche Abstaende wann und wo?


> Das HTML-Element center ist veraltet.
>
> Der Gestaltwunsch Zentrierung ist z.B. so lösbar:
>
> body.gallery.single-img {
>   display: flex;
>   flex-direction: column;
>   justify-content: center; /*horizontale Zentrierung*/
>   align-items: center; /*vertikale Zentrierung*/
> }

Ist mir zuviel Code ;-}
<center> ist kuerzer, funktioniert und macht genau das, was ich will.


> Bei der Höhenberechnung muss ein Innenabstand bei body bei der
> Bildhöhe berücksichtigt werden, wie Stefan schon schrieb.
>
> Aber schon die 4em für die Bildunterschrift und "toggle" ist geraten
> und daher unsicher.

Ich bevorzuge 90% Loesungen, die ich verstehe gegenueber 100% Loesungen,
die fuer mich nicht wartbar sind.


> Eine lange Bildunterschrift kann ja in mehr als 3 Zeilen umbrechen,
> z.B. auf einem schmaleren Display.
>
> Ich habe das so gelöst:
> https://codepen.io/fermion/pen/emOPeoR

Wenn ich mal (zu)viel Zeit habe, versuche ich das zu verstehen :-}


> 7
> Für Bildunterschriften gibt es ein passendes HTML Element:
>
> <figure>
> <img ...>
> <figcaption>Eine tolle Bildunterschrift</figcaption>
> </figure>

Was macht das (anders)?


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:

>> 1
>> <body class="gallery single-img">
>>
>> 2
>> body.gallery.single-img { margin: 0 }
>
> Prima, das hab ich jetzt eingebaut, siehe:
>
> https://fex.rus.uni-stuttgart.de/dox/framstag@rus.uni-stuttgart.de/public/gallery/Weihnachtsradeln_2024?ACTION=browseitfull:20
>
>
>> Wenn Du Abstände für body und später einen vertikalen Scrollbalken
>> vermeiden möchtest:
>> body.gallery.single-img { padding: 1em }

Leider habe ich nun im firefox keine scrollbars mehr wenn das Bild in
voller Aufloesung angezeigt wird:

https://fex.rus.uni-stuttgart.de/fop/3qWGChXf/X-20250123092633.jpg

Erst wenn ich an den rechten bzw unteren Browserfensterrand fahre, werden
die scrollbars angezeigt. Das ist bloed.

chrome dagegen zeigt die scrollbars immer an:

https://fex.rus.uni-stuttgart.de/fop/nEwdEcsv/X-20250123092841.jpg


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

On Thu, 23 Jan 2025 01:25:39 Andreas Borutta wrote:
> object-fit: contain;

Ah, danke. Wenn man nicht ständig dahinter ist, übersieht man die
Hälfte an Neuentwicklungen. Wie praktisch, das hätte ich schon vor
Jahrzehnten brauchen können!

Servus,
   Stefan

--
http://kontaktinser.at/ - die kostenlose Kontaktboerse fuer Oesterreich
Offizieller Erstbesucher(TM) von mmeike

Der Grund, den man braucht, oder warum Stefan so lau aalt!
(Sloganizer)

Ulli Horlacher:

> Andreas Borutta <borumat@gmx.de> wrote:

>> Wenn Du Abstände für body und später einen vertikalen Scrollbalken
>> vermeiden möchtest:
>> body.gallery.single-img { padding: 1em }
>
> Das hab ich leider nicht verstanden: welche Abstaende wann und wo?

Die Regel bedeutet:
Innenabstand oben unten rechts links von body (mit den attributen
gallery UND single-img): 1em

Du kannst das im Codepen von weiter unten auch gut sehen.

>> Bei der Höhenberechnung muss ein Innenabstand bei body bei der
>> Bildhöhe berücksichtigt werden, wie Stefan schon schrieb.
>>
>> Aber schon die 4em für die Bildunterschrift und "toggle" ist geraten
>> und daher unsicher.
>
> Ich bevorzuge 90% Loesungen, die ich verstehe gegenueber 100% Loesungen,
> die fuer mich nicht wartbar sind.

Du kennst den Code schon aus der Vorschaugalerie.
Die wesentliche Eigenschaft ist
object-fit: contain;

Sie erleichtert die Wartung enorm.

calc() kann komplett entfallen.

Auch wenn du z.B. weitere Abstände hinzufügen würdest, oder vorhandene
änderst.

https://codepen.io/fermion/pen/emOPeoR

>> 7
>> Für Bildunterschriften gibt es ein passendes HTML Element:
>>
>> <figure>
>> <img ...>
>> <figcaption>Eine tolle Bildunterschrift</figcaption>
>> </figure>
>
> Was macht das (anders)?

Es ist gute Praxis bei HTML das semantisch passende Element zu
verwenden.
Auch die Lesbarkeit und somit die Wartbarkeit des HTML verbessert
sich.

Ein konkreter Vorteile:

Die Wartung des CSS ist einfacher, weil man spezifische Selektoren
bilden kann und das CSS gut lesbar ist.

Und man möchte, dass p nicht über img hinausläuft, hat man gleich den
passenden Container figure.




Andreas
--
http://fahrradzukunft.de

Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:

> Leider habe ich nun im firefox keine scrollbars mehr wenn das Bild in
> voller Aufloesung angezeigt wird:
>
> https://fex.rus.uni-stuttgart.de/fop/3qWGChXf/X-20250123092633.jpg

Auf einem anderen System mit derselben firefox Version zeigt dieser aber
normal scrollbars an. Ein verkorkstes firefox profile?



--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Stefan Froehlich:

>> object-fit: contain;
>
> Ah, danke. Wenn man nicht ständig dahinter ist, übersieht man die
> Hälfte an Neuentwicklungen. Wie praktisch, das hätte ich schon vor
> Jahrzehnten brauchen können!

Freut mich : )

Mir geht es mit den vielen Neuerungen aber genauso: da kann man einige
Zeit reinstecken, bis man wieder halbwegs auf dem Stand ist.



Andreas
--
http://fahrradzukunft.de

Peter J. Holzer <hjp-usenet4@hjp.at> wrote:
> On 2025-01-22 15:04, Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:
>> Wie mach ich letzteres?
>> So:
>>
>> style="margin:0; max-width:100vw; max-height:calc(100vh - 4em)"
>
> Bitte, bitte, bitte,
> gewöhn Dir an, Stylesheets zu schreiben und nicht style-Attribute an
> einzelne Elemente zu klatschen.

Ich will aber Umschalten koennen zwischen skalierter und vollformat
Anzeige.

Das hab ich geloest, indem ich das style Attribute umschreibe mit:

    function toggle_view() {
      var style = document.getElementById("img").getAttribute("style");
      if (style)
        document.getElementById("img").style = "";
      else
        document.getElementById("img").style = "$style";
    }'




--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Am 23.01.25 schrieb Ulli Horlacher:

> Ich will aber Umschalten koennen zwischen skalierter und vollformat
> Anzeige.
>
> Das hab ich geloest, indem ich das style Attribute umschreibe mit:
>
>     function toggle_view() {
>       var style = document.getElementById("img").getAttribute("style");
>       if (style)
>         document.getElementById("img").style = "";
>       else
>         document.getElementById("img").style = "$style";
>     }'

Hm, das funktioniert doch aber nur in die eine Richtung, oder?
Sobald Du den style per JS beim ersten Aufruf gelöscht hast, ist $style ja
immer leer.


--
Gruß Thomas

Move Along - Nothing to see here...

Am 24.01.25 schrieb Thomas 'Ingrid' Schwarzer:

> Am 23.01.25 schrieb Ulli Horlacher:
>
>> Ich will aber Umschalten koennen zwischen skalierter und vollformat
>> Anzeige.
>>
>> Das hab ich geloest, indem ich das style Attribute umschreibe mit:
>>
>>     function toggle_view() {
>>       var style = document.getElementById("img").getAttribute("style");
>>       if (style)
>>         document.getElementById("img").style = "";
>>       else
>>         document.getElementById("img").style = "$style";
>>     }'
>
> Hm, das funktioniert doch aber nur in die eine Richtung, oder?
> Sobald Du den style per JS beim ersten Aufruf gelöscht hast, ist $style ja
> immer leer.

Ok, nach dem zweiten Kaffee sehe ich auch, dass das keine gültige JS
Variable ist, also meintest Du das vermutlich als Platzhalter für den
Style, den Du auf das img setzen möchtest.

--
Gruß Thomas

Move Along - Nothing to see here...

On Thu, 23 Jan 2025 23:59:26 Ulli Horlacher wrote:
> Peter J. Holzer <hjp-usenet4@hjp.at> wrote:
>> gewöhn Dir an, Stylesheets zu schreiben und nicht style-Attribute
>> an einzelne Elemente zu klatschen.

> Ich will aber Umschalten koennen zwischen skalierter und
> vollformat Anzeige.

> Das hab ich geloest, indem ich das style Attribute umschreibe mit:
> [....]

Das ist eine Option.

Die andere Option wäre, durch JavaScript nur den Inhalt von class zu
ändern und in einem (idealerweise externen) Stylesheet die
Ausgestaltung der beiden Klassen vorzunehmen.

Das skaliert dann auch besser, wenn Du ähnliches an anderen Stellen
verwenden möchtest.

Servus,
   Stefan

--
http://kontaktinser.at/ - die kostenlose Kontaktboerse fuer Oesterreich
Offizieller Erstbesucher(TM) von mmeike

Stefan - der hydriertste Knaller des Jahrtausends.
(Sloganizer)

Andreas Borutta, 2025-01-23 01:31:

> Arno Welzel:
>
>> <https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5-overlay-caption/>
>
> Wenn ich es richtig sehe, setzt du die Technik
>
> srcset
>
> nicht ein.

Nicht ich, sondern die Bildergalerie tut das nicht. Ich habe an dem
HTML-Inhalt exakt gar nichts selber gebaut.

> Würde das potentiell zu weniger transportiertem Volumen führen, weil
> immer nur die minimal nötige Auflösung übertragen würde?

Ja. Spielt aber für mich in diesem Fall keine Rolle. Es geht ja nur um
eine Demonstration.

WordPress selbst kann das durchaus, wenn man das Bild direkt einbindet
und nicht über eine Galeriefunktion:

<https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-caption-sources/>



--
Arno Welzel
https://arnowelzel.de

Thomas Schwarzer <thomas@schwarzer.top> wrote:

>>>     function toggle_view() {
>>>       var style = document.getElementById("img").getAttribute("style");
>>>       if (style)
>>>         document.getElementById("img").style = "";
>>>       else
>>>         document.getElementById("img").style = "$style";
>>>     }'
>
> Ok, nach dem zweiten Kaffee sehe ich auch, dass das keine gültige JS
> Variable ist, also meintest Du das vermutlich als Platzhalter für den
> Style, den Du auf das img setzen möchtest.

Der Code stammt aus dem Perl-Programm dox, das das Javascript ausgibt.
$style ist eine Perl-Variable, die zuvor gesetzt wird:

  $style = 'max-width:calc(100vw); max-height:calc(100vh - 4em)';

Ausgegeben wird das Bild dann so:

  <a href="" $title>
  <img id="img" style="$style" src="$uri/$ufile">
  </a>

Fuerdiediealleswissenwollen ;-)


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

Stefan Froehlich <Stefan+Usenet@froehlich.priv.at> wrote:

>> Das hab ich geloest, indem ich das style Attribute umschreibe mit:
>> [....]
>
> Die andere Option wäre, durch JavaScript nur den Inhalt von class zu
> ändern und in einem (idealerweise externen) Stylesheet die
> Ausgestaltung der beiden Klassen vorzunehmen.

Verbesserungsvorschlaege nehm ich immer gerne an!
Wie mach ich das, wiewo?

Also wohlinnerhalb von <style> aber wie aendere ich dessen Inhalt zur
Laufzeit?


--
Ullrich Horlacher              Server und Virtualisierung
Rechenzentrum TIK
Universitaet Stuttgart         E-Mail: horlacher@tik.uni-stuttgart.de
Allmandring 30a                Tel:    ++49-711-68565868
70569 Stuttgart (Germany)      WWW:    https://www.tik.uni-stuttgart.de/

On 2025-01-25 10:36, Ulli Horlacher <framstag@rus.uni-stuttgart.de> wrote:
> Stefan Froehlich <Stefan+Usenet@froehlich.priv.at> wrote:
>>> Das hab ich geloest, indem ich das style Attribute umschreibe mit:
>>> [....]
>>
>> Die andere Option wäre, durch JavaScript nur den Inhalt von class zu
>> ändern und in einem (idealerweise externen) Stylesheet die
>> Ausgestaltung der beiden Klassen vorzunehmen.
>
> Verbesserungsvorschlaege nehm ich immer gerne an!
> Wie mach ich das, wiewo?
>
> Also wohlinnerhalb von <style> aber wie aendere ich dessen Inhalt zur
> Laufzeit?

Das innerhalb style (oder in einem separaten CSS-File) änderst Du nicht.
Da steht z.B.

    .fullsize {
        /* no size restriction */
    }

    .fillscreen {
        max-width: 90vw;
        max-height: 90vh;
    }

    .thumbnail {
        max-width: 200px;
        max-height: 200px;
    }

Und in Deinem JavaScript-Code setzt Du am entsprechenden Element
class="fullsize" oder class="fillscreen" oder class="thumbnail".
(Die Property in JavaScript heißt className (bzw. classList), weil
class ein Keyword ist.)

Je nachdem, wie die Größe angegeben ist, sind da auch transitions
möglich. Moderne Chromium-Versionen können da etwas mehr als andere
Browser.

        hp

"Peter J. Holzer" <hjp-usenet4@hjp.at> schrieb oder zitierte:
>Und in Deinem JavaScript-Code setzt Du am entsprechenden Element
>class="fullsize" oder class="fillscreen" oder class="thumbnail".

  Solche Zugriffe auf Klassen behandle ich auch in meinem
  JavaScript-Kurs.

  /Eingeführt/ werden die Techniken in diesen Lektionen:

https://www.purl.org/stefan_ram/pub/klassenzugriffe_javascript

https://www.purl.org/stefan_ram/pub/klassenlisten_javascript

  . Hier findet man dann ein /Beispiel/ mit "remove" und "add":

https://www.purl.org/stefan_ram/pub/tabellenzeilen_einfaerben_javascript

  . Hier gibt es gegen Ende der Lektion eine /Übungsfrage/ zum Thema
  "toggle":

https://www.purl.org/stefan_ram/pub/getelementsbytagname_javascript

  . Allgemeine Zugriffe auf /Attribute/ in

https://www.purl.org/stefan_ram/pub/wirkfunktionen_dom_javascript

  . Hier gibt es "Alarm-Blinken", eine Übungsaufgabe zu "toggle":

https://www.purl.org/stefan_ram/pub/wirkfunktionen_dom_javascript

  . Und hier "Seitenwechsel" ein Beispiel zu "toggle":

https://www.purl.org/stefan_ram/pub/bedingte_browser_javascript

  . Es ist jedoch wichtig zu verstehen, daß all diese Lektionen
  keine ohne Vorkenntnisse lesbaren Artikel sind, sondern
  eigentlich im Kontext und in der Reihenfolge des gesamten
  JavaScript-Kurses gelesen werden müssen.

  Dort werden Klassenlisten im Kapitel 12 "Stilistische Verbesserungen"
  eingeführt. Es handelt sich um "B"-Lektionen, also um Lektionen,
  in denen JavaScript im /B/rowser behandelt wird.

  Der gesamte JavaScript-Kurs ist hier zu finden:

https://www.purl.org/stefan_ram/pub/javascript-kurs

  .