#1

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

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="&para.properties.design.ws.imageresize">
<div class="imageresizepara<cc:if cond="&para.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="&para.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="&para.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="&para.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="&para.properties.design.paragraph.bottom + 40">px"</cc:if>>
 
<cc:else>
 
<div class="sqrpara<cc:if cond="&para.rendermode='mobilefullwidth'"> sqrparamobilefw</cc:if><cc:if cond="&para.rendermode='alwaysfullwidth'"> sqrparafw</cc:if><cc:if cond="&para.properties.design.paragraph.picture.panorama.number gt 1"> sqrparafw</cc:if>"<cc:if cond="&para.properties.design.paragraph.bottom = 0" not="1"> style="margin-bottom:<cc:print value="&para.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:

.imageresizepara img {
  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 &Uuml;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 smile_16.png
Andreas


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Andreas_B« (12.05.2017, 10:24)
#2

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

In Waltis Beitrag geht es um ein BLOG und du redest von einer Tabelle. Das sind zwei unterschiedliche Sachen ;-)


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#3

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

ich weiß dass es da um einen Blog ging aber ich dachte, dass man das auch auf andere Dinge übertragen kann. Oder dachte ich da falsch?

Naja, von Tabellen und normalen Bildabsätzen, mein Beispiel oben bezieht sich auf einen solchen Bildabsatz.


Der entsprechende code in der page.ccml schien mir 'allgemein" zu sein und nicht nur auf blogs bezogen. So wie ich das verstanden hatte erstellt man damit ja lediglich eine Ausnahme für die Klasse sqrpara.

Oder geht es darum, dass in dem code oft "paragraph" steht und sich das deswegen nur auf blogabsätze anwenden lässt?


Ich danke dir zwar für deine Antwort, Marjorie aber sie wirft für mich mehr fragen auf, als dass sie welche beantwortet smile_confused_16.png

#4

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Du spielst definitiv im falschen Sandkasten...   ;-)

Ich kann Dich nur immer wieder auf die Tutorials im Files-Bereich aufmerksam machen, denn dort steht schon im Teil 1 auf Seite1 welche Dateien für welchen Absatztyp zuständig sind...


Gruss

Walti

#5

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

[offtopic]
Vielleicht sind meine Spielgefährten hier im Sandkasten auch einfach gemein? smile_confused_16.png

Möchte das einfach mal loswerden, ohne irgendjemanden anzugreifen oder ähnliches.
Ich treibe mich schon seit vielen Jahren in diversen Foren rum, zu ganz unterschiedlichen Themen. Aber noch nirgends war es so schwierig Unterstützung oder eine klare Antwort zu bekommen wie hier.

Ich habe oft das Gefühl, dass es hier so ist als wenn man sein Auto in eine Werkstatt bringt und der Mechaniker nur sagt: "oh haha ihr Auto ist kaputt. Ja blöd, dass sie nicht wissen wie man das repariert. Ich weiß das aber ich sagen es Ihnen nicht. Hier haben sie Mechaniker-Ausbildungsunerlagen und das Handbuch zu Ihrem Auto. Wie? Sie wissen immer noch nicht, was und wo sie zu tun haben? Sie scheinen ziemlich doof zu sein, gehen sie mal lieber weg und nerven mich nicht"

Selbstverständlich erwarte ich keine vorgekauten copy&paste Lösungen und selbstverständlich danke ich auch jedem hier für die Zeit und Mühen, die jeder einzelne hier rein investiert.

Aber manchmal würde ich mir einfach etwas zielführendere Antworten wünschen.
Ich gebe mir hier wirklich Mühe aber ich empfinde es so, als ob ich von euch immer nur das Gefühl vermittelt bekomme, dass ich doof und dumm bin, nichts kann und euch nerve
[/offtopic]

#6

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Ja, sicher...  nicht "wir", sondern allerhöchstens ich bin gemein, denn ich hatte Dir geschrieben... ;-) alle anderen können da nix für...!

Vor gerade mal einer Woche hattest Du Dich mit Tabellen beschäftigt... und somit weisst Du ja eigentlich wo der Tabellen-Sandkasten ist... und wenn Du also ein Tabellenbild beackern willst, dann wird das wohl oder übel im Tabellen-Sandkasten sein...

Sorry, vielleicht bin ich auch mit falschen Vorstellungen hier, denn eigentlich glaube ich an "Lernfähigkeit" und dass jemand innerhalb einer Woche die Tabelle wieder findet... ;-)

Von Autos verstehe ich nichts und ich käme auch nie auf die Idee ein Auto tunen zu wollen, eben weil ich nix davon versteh'...  ;-)


Gruss

Walti

#7

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

ich befürchte, ich habe deine Antwort böser aufgefasst, als Du es vermutlich gemeint hast smile_confused_16.png

Klar erinnere ich mich auch noch an die Tabellen und wie und wo ich die bearbeitet habe, das hat ja am Ende auch geklappt.
Ich habe aber den Zusammenhang zwischen Tabellen bearbeiten und Größe der Bilder nicht gesehen.

Nein, ich vermute eher, dass ich mit falschen/überzogenen Vorstellungen hier bin. Vermutlich weil ich es anders kenne/gewöhnt bin bzw. es auch selber anders handhabe.

Ich verstehe von Autos auch nichts und mag getunte Autos auch nicht aber wenn ich es doch mal versuchen wollen würde, würde ich mich über Hilfe und Unterstützung freuen und hoffen, nicht nur Antworten wie RTFM zu bekommen.
Ich weiß, RTFM ist immer gut und hilfreich aber eben auch nur in einem gewissen Rahmen. Ich habe das Tuturial nun schon mindestens drei mal gelesen aber mir fällt es noch immer schwer, alle Zusammenhänge zu sehen

 

Trotzdem hoffe, ich dass Du weisst, dass ich dir für jede Antwort dankbar bin?
Meine momentane Situation hier bei meiner Arbeit ist leider recht frustrierend im Moment für mich und ich versuche das alle so ich kann zu schaffen... smile_sleeping_16.png

#8

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Zitat von: Andreas_B

Meine momentane Situation hier bei meiner Arbeit ist leider recht frustrierend im Moment für mich und ich versuche das alle so ich kann zu schaffen... smile_sleeping_16.png

Das verstehen wir wohl. Aber du oder deinem Chef kann(st) oder darf(st) nicht von dir erwarten dass du dich in etwa 6 Wochen so mit dem Programm auskennst wofür wir Jahre gebraucht haben.

Somit kann ich mir nur Walti's Tipp in diesem Beitrag anschließen. Lasse das Design von zB Thomas nach euren Wünsche anpassen, dann könnt ihr euch danach bequem befassen mit das erstellen der Webseite. Und auch wenn das ein paar hundert Euro kosten sollte (aber nur Thomas kann euch den richtigen Preis geben), ist das -wie ich annehme- immer noch billiger als was es bis jetzt an dein Lohn gekostet hat.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#9

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Na, wenn Du Deinen Tabellen-Sandkasten, also die paragraph_table.ccml wieder gefunden hast, dann kann's ja nicht mehr schwer sein...

Dort siehst Du unter der Konditionierung (also wenn Bild) wie und wo das Bild erstellt wird...

1
2
 
            <img src="<cc:printpictureurl obj="tablepic" suffix="_640">" alt="" width="<cc:print value="&tablepic_640.width">" height="<cc:print value="&tablepic_640.height">" />

...und dieses Bild musst Du nun nach Deinen Vorstellungen und Ideen ansprechen...


Gruss

Walti

#10

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

lieb von dir, Marjorie, danke.
Ja, ich habe da mit meinem chef auch schon drüber gesprochen aber er sagte, ich schaff das schon und kann ja nicht so schwer sein...
Auf jeden Fall wäre das mit Thomas günstiger und einfacher.
Und ich denke auch, dass ich zu viel von mir erwarte, ich komme mir dann einfach nur immer so dumm vor. Wie in diesem Beitrag auch, ich habe ein Problem, suche ein vermeintliche Lösung, probiere damit rum und merke gar nicht, dass ich den völlig falschen Ansatz habe.


Walti, vielen Dank. Weiß oft gar nicht, wie ich dir danken kann oder wie ich dir zeigen, kann dass mir deine Antworten viel bedeuten aber das tun sie. Also, danke smile_16.png

Ich werde das gleich mal versuchen

#11

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Hallo zusammen,

jetzt bin ich soweit, dass ich mich den Bildern nochmal zuwenden möchte.

Auf meiner Testseite unter Testseite2 und Testseite4 habe ich ein paar Beispielbilder eingebaut.


Meine theoretische Überlegung ist folgende:

 

  • in der paragraph_table.ccml die Bildgröße wie folgt zu beschreiben:
     width: auto;
     max-width: x %;
     max-height: x vh;
     
     margin: 0.4rem auto;
    [evtl.: dieses dann für verschiene Werte wiederholen (z.b. x=10, x=20 usw)]
  • in der config.ccml eine erweitere Eigenschaft schreiben, mit welcher man die vorher definierten Werte dann im entsprechenden Absatz (Tabelle- und Bildabsatz) in Web9 auswählen kann
  • innerhalb der paragraph_table.ccml eine Schleife (bzw. mehrere) erstellen welche den Wert aus der erweiterten Eigenschaft abfragen und diesen dann in den max-width max-height code schreiben

Ich frage mich dabei, ob es möglich ist, dass ich dann bei verschiedenen Absätzen verschiedene Werte einstellen kann oder ob es besser ist eine if condition für alle max-width/height Werte zu schreiben und dann lediglich den Wert aus den erweiterten Eigenschaften abfragen und das entsprechende if dann zu wählen?

Etwas verwirrend, hoffe, ich konnte eingermaßen klar machen, was ich vorhabe.

Und ist das theoretisch überhaupt alles so möglich? Oder gibt es evtl. einen viel einfacheren Weg?

Aber im Grunde muss/möchte ich für jedes Bild, egal ob nun Bild- oder Tabellenabsatz, die größe, zumindest Schrittweise, bestimmen können. Also zum Beispiel in 5% bzw 5vh schritten.


Bin für jeden Gedanken dazu dankbar smile_16.png


Schöne Grüße
Andreas

 

#12

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Und was spricht dagegen dein Vorhaben einfach mal zu versuchen? Von "Versuch und Fehler" kann man bekanntlich nur lernen.

Wenn du scheiterst kannst du immer noch fragen mit Angabe von wo es hackt ;-)


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#13

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Hallo Marjorie,

da spricht im Grunde nichts gegen. Meine intention im Voraus zu fragen war, dass ich vermeiden wollte, mir Mühe zu geben und nachher heißt es dann "das geht ja so eh nicht" oder "ganz falscher" Ansatz oder sowas smile_waiting_16.png

Aber ich werde das heute und morgen versuchen und dann berichten smile_16.png


[edit]
und mein post sollte ein bisschen zum Gedankenaustausch zu diesem Thema anregen smile_16.png
[/edit]


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Andreas_B« (23.05.2017, 12:27)
#14

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Zitat von: Andreas_B

Aber im Grunde muss/möchte ich für jedes Bild, egal ob nun Bild- oder Tabellenabsatz, die größe, zumindest Schrittweise, bestimmen können. Also zum Beispiel in 5% bzw 5vh schritten.

In Bildabsätzen sollte das kein Problem sein, in Tabellen hingegen könntest du lediglich für alle enthaltenen Bilder eine Eigenschaft werden. Oder aber man legt mehrere Kopien eines Bildes an und greift auf die erweiterte Eigenschaft des Bildes zurück. Das allerdings würde das Projekt enorm aufblustern.

Welche Vorteile siehst du in der Verwendung der Einheit vh bei der Angabe von Bildhöhen?


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#15

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Hallo Thomas,

vielen Dank für die Info bezüglich der Tabellen. Ich denke, dass wird ausreichend sein, wenn ich pro Tabelle eine Bildgröße festlegen kann.

Reine Bildabsätze werden wohl eh nicht so viele Vorhanden sein aber ich bin mal gespannt ob ich das hinkriege.


Bezüglich vh, ich hatte mir Gedanken gemacht, wie ich trotz "fester größen" für Bilder mir die responsivität erhalten kann. Und dann fiel mir ein, dass ich die größe ja auch über den viewport bestimmen kann (und so, nach meinen Gedankengängen) das Bild, auf unterschiedlich großen Bildschirm, entsprechend angezeigt werden kann.
Meine Sorge war, wenn ich dem Bild in der paragraph_table.ccml eine feste px größe gebe, wie verhält sich das dann bei kleineren Bildschirmen bei smartphones zum Beispiel.

hier nochmal meine Gedanken dazu:
img {  
  width: auto; /* auto damit sich die Breite des Bildes an der Höhe orientiert, damit es seine Proportionen beibehält */
  height: x vh /* Höhe des Bildes abhängig vom viewport */
  max-width: x %; /* max-width in % damit das Bild nicht die Breite des parent elements übersteigt */
  max-height: x vh; /* max-height damit das Bild nicht die viewport Höhe übersteigt */
 
  margin: 0.4rem auto; 
}

 Allerdings würde es ohne die 'max-' Angabe auch funktionieren, vielleicht sogar besser, das werde ich ausprobieren.

Ich hoffe, meine Gedanken sind nicht purer Blödsinn smile_waiting_16.png

 

nochmal ein paar Gedanken dazu:

- die erweiterte Eigenschaft in der config.ccml gibt den height Wert vor:

<cc:property id="imgresize" caption="img resize in vh" folder="0.4 imgresize" targettype="paragraph" type="combo" comboitems="5|10|15|20|25|30|35|40|45|50|55|60|65|70|75|80|85|90|95|100" default="100">

Da bin ich mir nicht sicher, ob der targettype wirklich der passende ist. Aber diese Zeile gibt mir in Web9 zumindest die erweiterte Eigenschaft korrekt aus.

- dann diesen Wert mit Hilfe der id (also imgresize) mit if Abfragen? in der paragraph_table.ccml abfragen

Allerdings bin ich mir nicht sicher, wie es dann weiter geht. Ich mein, theoretisch, "wenn Wert = Wert von id=imageresize, dann schreibe Wert hinter height: "
Aber wie ich das mit CCML umsetzen soll... Aber ich werde es versuchen

test
<cc:if cond="&paragraph.properties.imgresize"><cc:print value="&???"> obj="imgresize"></cc:if>

 

#16

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

1
.... style="<cc:print value="&para.properties.imgresize">vh" ....

Gebe dem Bild doch einfach einen inline-style mit. Das sollte theoretisch in der Praxis funktionieren ;-)


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#17

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Moin Thomas,

das klingt wesentlich einfacher, werde ich versuchen.

Vielen Dank für den Tipp smile_16.png


Schöne Grüße und eine tolle, neue Woche
Andreas

715 Aufrufe | 17 Beiträge