Druckbare Version
Hallo,
ich verwende aktuell Contao 4.9. und das Mate Theme.
Wenn ich in einem Artikel eine Tabelle einbinde, dann wird das auf der Desktop Ansicht soweit auch korrekt angezeigt. Wenn ich nun die Seite über Smartphone aufrufe, dann wird die Tabelle rechts abgeschnitten. Es ist auch nicht möglich weiter nach rechts zu schieben.
Gibt es eine eleganter Lösung zu den Tabellen?
Link zur Seite?
Gibt es noch nicht, ist noch nicht live. Momentan noch lokal.Zitat:
Zitat von derRenner
OK, dann wird's wohl schwer dir zu helfen ;) denn ohne den Inhalt zu kennen kann jetzt wohl nur mal geraten werden.
- zu breiter Inhalt in einer Tabelle
- fixe Breiten in der Tabelle
- Leerzeichen in der Tabelle
- "falsche" breakpoints in den media queries
- ...
Ok, klar macht sinn.
In meinem Fall handelt es sich um eine "einfache" Tabelle, die über Contao Tabellenfunktion eingebunden wird.
3 Spalten, 6 Zeilen ohne Überschriften.
In jeder Zelle ist ein Foto mit einem Namen darunter, mehr eig. nicht.
Im Smartphone werden dann 2 Zellen und ca. 1/3 der dritte angezeigt. Wenn ich im editor auf source Code umschalte, dann habe ich den folgenden Code:
Daher meine Frage, ob es eine alternative zu den Tabellen gibt und dennoch gleichmäßig ausgerichtet. So dass man die Tabelle ganz entfernen kann.HTML-Code:<table style="width: 0%; border-collapse: collapse; border-style: hidden; height: 210px;" border="0">
<tbody>
<tr style="height: 78px;">
<td style="width: 33.3333%; text-align: center; height: 78px;">
<figure><img src="files/image%20%2811%29.jpg" alt="" width="250" /></figure>
<div id="cc-m-13325507389" class="j-module n j-text ">
<p><strong>Thomas </strong></p>
</div>
</td>
<td style="width: 33.3333%; text-align: center; height: 78px;">
<figure><img src="files/image%20%2815%29.jpg" alt="" width="250" /></figure>
<div id="cc-m-13325507589" class="j-module n j-text ">
<p><strong>Dominik </strong></p>
</div>
</td>
<td style="width: 33.3333%; text-align: center; height: 78px;">
<div id="cc-m-13325507689" class="j-module n j-imageSubtitle ">
<figure><img src="files/image%20%2819%29.jpg" alt="" width="250" /></figure>
</div>
<div id="cc-m-13325507789" class="j-module n j-text ">
<p><strong>Christopher</strong></p>
</div>
</td>
</tr>
<tr style="height: 78px;">
<td style="width: 33.3333%; text-align: center; height: 78px;">
<div id="cc-m-13325508789" class="j-module n j-imageSubtitle ">
<figure><img src="files/image%20%2813%29.jpg" alt="" width="250" /></figure>
</div>
<div id="cc-m-13325508889" class="j-module n j-text ">
<p><strong>Pascal </strong></p>
</div>
</td>
<td style="width: 33.3333%; text-align: center; height: 78px;">
<div id="cc-m-13325509489" class="j-module n j-imageSubtitle ">
<figure><img src="files/image%20%2812%29.jpg" alt="" width="250" /></figure>
<div class="cc-clear"><strong style="font-size: 0.875rem;">Daniel</strong></div>
</div>
</td>
<td style="width: 33.3333%; text-align: center; height: 78px;">
<div id="cc-m-13435914189" class="j-module n j-imageSubtitle ">
<figure><img src="files/image%20%2816%29.jpg" alt="" width="250" /></figure>
</div>
<div id="cc-m-13325509989" class="j-module n j-text ">
<p>Lisa</p>
</div>
</td>
</tr>
</tbody>
</table>
... trotz HTML ... ohne link ist's nur ein Ratespiel ...
Mag sein, dass sich deine Bilder jeweils die 250px Breite wünschen und sich nicht an die verfügbare Breite anpassen » damit hast du schon mal 750px Breite ...
Kann aber natürlich auch an etwas anderem liegen » link zum Projekt ;)
Alternative zur Tabelle: JA - verwende Spalten/columns
Ohne das Mate-theme zu kennen, würde ich sagen, dass auch dort im Layout ein 3-Spalten-Set möglich ist
Wie gesagt, dass geht aktuell noch nicht.Zitat:
Zitat von derRenner
Das Theme ist das hier: https://contao-themes.net/theme-detail/mate.html
Ginge das mit dem Grid von Contao, bin beim googeln darüber gestolpert
Also wenn es sich nur um eine Tabelle mit Bilder und je einem Wort unter dem Bild handelt, ich würde das nicht mit einer Tabelle umsetzen. Da halte ich eine Galerie mit Bildunterschrift, responsiver und einfacher in der umsetzung.
Generell, ja.
Aber dann sind alle Bilder untereinander und nicht jeweils 3 nebeneinander
Bei der Galerie läßt sich einstellen, wie viel Bilder in der Reihe sein soll, ebenso der Abstand zwischen den Bildern, usw. usf.
Aber in der Galerie mit Bildbeschriftung für jedes Bild?
Woher bezieht die Galerie die Bildbeschriftungen?
In der Dateiverwaltung das Bild Bearbeiten, dort läßt sich Titel, Alternativer Text und Bildunterschrift eintragen, auf Wunsch auch mehrsprachig.
Es gibt inzwischen sehr viele Möglichkeiten auch tabellarische Inhalte responsive zu gestalten, aber bei Dir scheint es ja nur um Bilder mit einer Bildunterschrift zu gehen.
Da ist die Tabelle m.E. einfach das falsche "Werkzeug".
Dafür sollte man wie schon von den Vorgängern geschrieben die Galerie (Core-Element) nutzen.
Außerdem würde ich auch für die Bildunterschrift die dafür vorgesehenen Elemente verwenden
Das kannst Du dadurch erreichen, dass Du die Bildunterschrift in der Dateiverwaltung verwendest.Code:<figure> ... <figcaption>... </figcaption></figure>
Die Gestaltung würde ich persönlich mit CSS-Grid machen (zumindestens dann wenn man nicht auf den IE11 Rücksicht nehmen muss).
Den html Code hat Contao generiert, ich habe das vorhin lediglich kopiert.
Ich hatte Grid vorhin versucht, aber nicht 3 Bilder nebeneinander bekommen. Immer nur Untereinander-
Ich habe es jetzt über Contao Themes gelöst, 3 Spalten Links Mitte und Rechts.
Vermutlich ist das eines der besten Möglichkeiten.
Habe mir mal das Mate-Theme installiert und kann dein Nicht-Verhalten der Galerie nicht bestätigen, sofern du die Standard-Galerie verwendest ... 6 Bilder mit Bildunterschrift und einer Einstellung von 3 Bildern pro Reihe, ergibt 2 Reihen a 3 Bilder mit Bildunterschrift.
Ich habe gesehen, dass hier Bootstrap mit installiert wird. Wenn du also die Bootstrap-Galerie anwenden möchtest, dann, so sehe ich, wird tatsächlich jedes Bild untereinander angezeigt. Hier musst du dich aber mit dem Bootstrap-Grid beschäftigen, sodass dir die Bilder dann auch wieder wie gewünscht in Reihe angezeigt werden.
Also mein Fazit: Mate theme kann deinen Wunsch umsetzen ... du musst dich aber mit dem Grid und dem theme selbst ein wenig auseinandersetzen. Vielleicht installierst du dir noch die Demo mit dazu und versuchst die Demodaten nachzustellen.
Die Galerie in 3 Spalten aufzuteilen war nichts das Problem. Nur das die über den Dateiupload angelegten Bild Meta Daten nicht angezeigt werden. Ich habe da einiges herumgespielt, aber die werden bei keiner Einstellung im Frontend angezeigt.
Ich denke es liegt daran, dass die in der Galerie noch nicht eingebunden sind.
In der Datei Templates › templates/gallery_default.html5
Ich habe hier versuchtPHP-Code:<ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
<?php foreach ($this->body as $class => $row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<li class="<?= $class ?> <?= $col->class ?>">
<figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
<?php if ($col->href): ?>
<a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
<?php else: ?>
<?php $this->insert('picture_default', $col->picture); ?>
<?php endif; ?>
<?php if ($col->caption): ?>
<figcaption class="caption"><?= $col->caption ?></figcaption>
<?php endif; ?>
</figure>
</li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
mit anzugeben, aber leider wird hiermit kein Titel angezeigt.HTML-Code:<?= $col->linkTitle ?>
Was müsste ich einfügen, um die Metadaten Titel und alternativen Text anzeigen zu lassen?
Wo werden die Eingetragen?
Ich habe die Metadaten über den Filamanger eingetragen. Also das Bild herausgesucht und auf bearbeiten gegangen.Zitat:
Zitat von Birden
Wenn ich mit der Maus über das Bild gehe, dann wird der Titel angezeigt, allerdings eben nicht unter dem Bild
wie oben erwähnt, funktionieren auch die Bildunterschriften in der Galerie.Zitat:
Zitat von Jinroo
Dateiverwaltung - Bild bearbeiten - Bildunterschrift
Ja, da habe ich die Meta Daten angegeben.Zitat:
Zitat von derRenner
Im Artikel habe ich als Elementtyp Galerie ausgewählt.
Allerdings wird so nichts im Frontend angezeigt, oder geht das ausschließlich für die Bildunterschrift? Also Titel geht nicht?
Alternativen Text habe ich gefunden
welche Varibale ist für den Bild Titel? Der hier zeigt leider ncihts anHTML-Code:<figcaption class="caption"><?= $col->alt ?></figcaption>
HTML-Code:<figcaption class="caption"><?= $col->linkTitle ?></figcaption>
Wenn Du bei der Bildunterschrift nichts einträgst, geht es freilich nicht.
ja, nur mit BildunterschriftZitat:
Zitat von Jinroo
Wenn du das mit dem title machen möchtest, musst du das template anpassen
Ich möchte alle 3, also Titel alternativer Text und Bildunterschrift. Nur den Titel finde ich nicht, welche Variable ich da nehmen mussZitat:
Zitat von derRenner
Code:<a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
geht eben nicht, das hatte ich bereits versucht. Siehr oben im BeitragHTML-Code:<?= $col->linkTitle ?>
Falls irgendwann jemand sucht, es ist
HTML-Code:<?= $col->imageTitle ?>
... klappt doch ;)Code:<ul class="cols_<?= $this->perRow ?>" itemscope itemtype="http://schema.org/ImageGallery">
<?php foreach ($this->body as $class => $row): ?>
<?php foreach ($row as $col): ?>
<?php if ($col->addImage): ?>
<li class="<?= $class ?> <?= $col->class ?>">
<figure class="image_container"<?php if ($col->margin): ?> style="<?= $col->margin ?>"<?php endif; ?>>
<?php if ($col->href): ?>
<a href="<?= $col->href ?>"<?= $col->attributes ?><?php if ($col->linkTitle): ?> title="<?= $col->linkTitle ?>"<?php endif; ?>><?php $this->insert('picture_default', $col->picture); ?></a>
<?php else: ?>
<?php $this->insert('picture_default', $col->picture); ?>
<?php endif; ?>
<?php if ($col->caption): ?>
<figcaption class="caption"><?= $col->caption ?> <?= $col->linkTitle ?></figcaption>
<?php endif; ?>
</figure>
</li>
<?php endif; ?>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
hattest du vielleicht irgendwo falsch eingebunden? probier obige Anpassung mal und du wirst das passende Ergebnis vor dir haben.
linkTitel geht bei mir eben nicht, habe etwas hin und her probiert und am ende bin ich bei imageTitel gelandet. Damit geht es.
Allerdings habe ich nochmal eine doofe Frage zur Galerie.
Das Originalbild ist 2674x3428, in der Galerie gebe ich unter Bildgrösse Proportional 450x270 an. Und im Frontend ist das Bild 279.73x359.66.
Das verwirrt mich etwas, was sind das für Angaben in der Galerie?