Moin zusammen,
ich habe mich damit beschäftigt, ob es möglich ist, Bildern in Tabellen und in Bildabsätzen eine feste Größe zu geben.
Hier im Forum hatte ich irgendwo gelesen, dass die responsiven designs die Bildgröße immer automatisch, so auswählen, wie die Software es für optimal hält.
Das führt bei mir insbesondere bei Tabellen zu schwierigkeiten. Ich hatte versucht eine Produktübersicht zu erstellen aber alle Bilder wurden viel zu groß angezeigt.
Also hatte ich noch weiter gelesen und folgendes versucht:
(habe mich dabei an einem Beispiel von Walti orientiert)
in der config.ccml:
<cc:property id="design.ws.imageresize" caption="bilder 50%" folder="0.1 imageresize" targettype="paragraph" type="boolean" default="0">
dann in der page.ccml:
<cc:if cond="¶.properties.design.ws.imageresize"> <div class="imageresizepara<cc:if cond="¶.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="¶.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="¶.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="¶.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="¶.properties.design.paragraph.bottom + 40">px"</cc:if>> <cc:else> <div class="sqrpara<cc:if cond="¶.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="¶.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="¶.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="¶.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="¶.properties.design.paragraph.bottom + 40">px"</cc:if>> </cc:if>
und im style_content.css der Klasse .sqrpara die neue Klasse mit ", .imageresizepara" hinzugefügt
anschließend noch:
padding: 0; margin: 0; width: 30%; height: 30%; } @media screen and (max-width: 767px) { .imageresizepara img { padding: 0; margin: 0; width: 80%; height: 80%; } }
Das Ergebnis war, dass ich die erweiterte Eigenschaft in der Software hatte und um erstellten quellcode (von einem Bildabsatz) stand folgendes:
div class="imageresizepara sqrparamobilefw"> <figure class="sqrfig"> <img width="337" height="191" src="../../images/724817a76a07b0623_1038.jpg" srcset="../../images/724817a76a07b0623_1038.jpg 1038w, ../../images/724817a76a07b0623_640.jpg 640w" sizes="100vw" class="sqrfigcontent" alt="Produktpalette" /> <figcaption> <b>Produktpalette</b> eine Übersicht der verschiedenen Typen</figcaption> </figure></div> </div>
Also die neue Klasse imageresizepara wird ja meineserachtens auch an der richtigen Stelle angezeigt. Aber die angezeigte Bildgröße blieb unverändert und ich konnte bisher nicht rausfinden, was ich da falsch gemacht habe.
Hat vielleicht jemand einen Tipp woran das liegen könnte?
Vielen Dank und schöne Grüße
Andreas