Hallo,

ich nutze Version 3.25.17 und hätte folgende Frage:
Ist es möglich, dass fünf Bilder als Antwortmöglichkeiten am Desktop nebeneinander und in der mobilen Ansicht unereinander dargestellt werden?
Konnte nicht wirklich herausfinden, wie das funktioniert.

Viele Grüße

Hallo,
wie hast Du es denn versucht?
Dazu dient normalerweise die Fragenvorlage "image-select"

 

Joffm

Hallo Joffm,

ich hab es über "Liste (Optionsfelder)" und dann "Image select" probiert:
 

Jedoch schaut das ganze zurzeit so aus:
 

Das heißt, die Bilder werden nicht angezeigt, seit ich image select ausgewählt habe und werden immer in einer Reihe nach unten angezeigt.

Viele Grüße

Hier noch mal die Bilder:

So, wie ich es sehe, zwei Versäumnisse.
1. Die Antwortoptionen enthalten NUR den Pfad zum Bild - nicht diesen <img src="..." /> Kram.
 

2. Du hast wahrscheinlich nicht die Anzahl Spalten auf "5" gesetzt.

Weiterhin:
In "Display" solltest Du auch die nötigen Einstellungen machen.
Und Du kannst den Rahmen um die Bilder hiermit anpassen. Einfach in den Fragetext (Quellcode-Modus)
Die Farbe ist in der hsla-Syntax, damit im letzten Parameter eine Transparenz eingestellt werden kann
hsla??
[url] www.w3schools.com/htmL/html_colors_hsl.asp [/url]

Joffm


Joffm

Also ein Teil funktioniert schon mal:
1. die Bilder werden jetzt angezeigt
2. der Rahmen hat sich geändert

Jedoch sind jetzt zwei neue Probleme aufgetaucht:
1. In voller Desktop-Anzeige sind die Bilder verzogen, obwohl ich nur die Höhe in den Displayeinstellungen angegeben habe und angegeben habe, dass die Seitenverhältnisse beibehalten werden sollen. Bei der mobilen Ansicht bzw. ab einer gewissen Fensterbreite werden die Bilder in den richtigen Seitenverhältnissen angezeigt.
2. Das Bild, bei dem ich das script eingefügt habe, wird nicht angezeigt.

 
 



jobrauna

a. Du solltest keine fixed Werte setzen. Die ganze Sache beruht doch auf dem responsiven Layout von bootstrap.
Daher solltest Du sehen, dass beim langsamen Verkleinern des Bildschirms die Bilder zunächst etwas kleiner werden, bevor dann der Umschlag zur vertikalen Darstellung erfolgt.
Und bei "fixed height" wird es dann eben nicht weniger hoch.
Also nuir "keep aspect ratio"

b. Das ist ja auch kein script.
Stand auch nirgendwo. Das ist ein <style>.

Joffm
 

Hallo Joffm,

ich hatte den Style auch am Falschen Ort (bei den Antworten im Quelltext) mit dem Script drumherum hatte es da interessanter Weise dann geklappt. Nur bei dem Bild nicht, wo das Skript stand.
Jetzt habe ich es aber als Style in der Frage richtig eingefügt und jetzt klappt auch fast alles.

Ein Problem habe ich jetzt jedoch noch:
Sobald die Bilder in einer horizontalen Reihe angezeigt werden, sind die jedoch sehr klein und werden dann zwar ein bisschen größer, aber nie so groß, dass man genug erkennen kann oder der Bildschirm komplett genutzt wird.
Ich habe zwar gefunden, wie ich die Größe einstellen kann, die die Bilder maximal bekommen dürfen, wenn sie in einer vertikalen Reihe sind. Jedoch nicht, wie man die Größe einstellt für die horizontale Reihe.





Viele Grüße
jobrauna

Hab es jetzt einfach gelöst, indem ich nur zwei Spalten gemacht habe.

Kann man den Abstand zwischen den Spalten und Zeilen irgendwo definieren, sodass beide Abstände immer im gleichmäßig sind?
So schaut es nämlich zurzeit bei Vollbild aus:
 

und so wird es, wenn man das Fenster verkleinert (so hätte ich es gerne immer, um keine "Paare" zu haben):
 

jobrauna

Hallo,
dass die Bilder recht klein und fitzelig werden, wenn Du fünf nebeneinander stellen willst, ist klar, da sie ja im Original recht groß sind.

Und dass rechts immer noch ein bisschen Platz bleibt, liegt am Grid-System von bootstrap
Jede Zeile wird dabei in 12 Blöcke eingeteilt, (von denen jeder einzelne wiederum in 12 Blöcke eingeteilt werden kann, usw,)
Man hat 12 genommen, da diese Zahl die meisten Teiler hat.
Das heißt dann in unserem Fall:
1 Bild wird in einem 12-er Block dargestellt
2 Bilder werden in zwei 6-er Blöcken dargestellt
3 Bilder werden in drei 4-er Blöcken dargestellt
4 Bilder werden in vier 3-er Blöcken dargestellt
​​​​​​​5 Bilder werden ... tja und 12 ist nicht ganzzahlig durch 5 teilbar, also werden sechs 2-er Blöcke genommen, der rechte bleibt frei
​​​​​​​Bei Interesse:
[url] getbootstrap.com/docs/3.4/css/#grid [/url]


Gut, ich habe nur eine Lösung gefunden, dass der horizontale und vertikale Abstand immer gleich sind:
Mach die Bilder noch größer, 
Dann geht es nämlich schon bei einer Bildschrimbreite größer als 1024px.
Nur, dann sind sie so groß, dass man nicht alle auf einmal sieht.

Aber da Du ja sicher die Anordnung der Bilder randomisieren wirst, sollte dieses kleine Layout-Manko keine Rolle spielen.

Joffm

PS.
Ein Zusatz für mich als "modischem Krüppel":
Worin unterscheiden sich diese vier Bilder überhaupt?
Überall sehe ich etwas kurzärmel, -hosiges, etwas Kletterei, etwas Hochalpines, usw..

​​​​​​​Und: Hast Du die Frage selbst einmal gelesen?
"Welcher Stil passt zu Deinem Stil?"
Geht das nicht besser?