#1

idefix

Forum-Sponsor  (48 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tettricks.de

Absatz Grafik / Bilder generell zu groß

Hallo,

wo kann ich Grafiken generell verkleinern? Die Fotos sind mir generell zu groß.


Danke für Euren Hinweis. :-)

Gruß

Georg


Hab(t) vielen Dank!

Grüße

idefix

 

signet_tettrickslogo_klein.gif

SIQ-Web10 -Win10

#2

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#3

idefix

Forum-Sponsor  (48 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tettricks.de

Hab ich gemacht, aber hab den Eindruck Web9 zieht die Bilder auf groß und dann werden sie unscharf. Wo ist mein Denkfehler? Bzw. gibt es irgendeine Tabelle wieviel px welche Endgröße?


Hab(t) vielen Dank!

Grüße

idefix

 

signet_tettrickslogo_klein.gif

SIQ-Web10 -Win10

#4

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#5

cojo_1008

Ehrenmitglied  (453 Punkte)  ·   weiblich  ·   Deutschland  ·   Nachricht senden
 https://www.it-passform.de

Schau mal im Design in die style_content.css (wenn du ein responsives Design verwendest) in den Absatz <cc:*> Picture </cc:*>. Dort findest du den Abschnitt:

1
2
3
4
5
.sqrfig {
  padding: 0;
  margin: 0;
  width: 100%;
}

 Probiere mal die Breite zu ändern - auf 70% oder weniger...

#6

idefix

Forum-Sponsor  (48 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tettricks.de

Dank Dir Conny (&Volker)!

Genau das war es was ich wollte!


Hab(t) vielen Dank!

Grüße

idefix

 

signet_tettrickslogo_klein.gif

SIQ-Web10 -Win10

#7

cojo_1008

Ehrenmitglied  (453 Punkte)  ·   weiblich  ·   Deutschland  ·   Nachricht senden
 https://www.it-passform.de

Da musst du aber eventuell die Hintergrundfarbe ändern, wenn der Content eine Farbe hat. In den erweiterten Eigenschaften des Projektes bei "Hintergrundfarbe von Kästen und Tabellen" müsstest du dann die Farbe vom Content wählen...

#8

idefix

Forum-Sponsor  (48 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tettricks.de

Merci !


Hab(t) vielen Dank!

Grüße

idefix

 

signet_tettrickslogo_klein.gif

SIQ-Web10 -Win10

#9

Andreas_B

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

Ich habe eine erweiterte Eigenschaft dafür gebaut, falls noch interesse besteht kann ich die ja mal hier rein schreiben

#10

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Ich spreche mal für idefix und vor allem im Namen unserer Community:

Natürlich! Immer her damit ins Forum. ;-) Von sowas leben wir hier und profitieren vom gegenseitigen Erfahrungsaustausch.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#11

Andreas_B

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

Moin zusammen,

erweiterte Eigenschaft zum verkleinern von Bildern:

also das ganze habe ich für das Design Riga unter Web9 erstellt. (möchte vorab noch anmerken, dass ich diese Eigenschaft auch mit Hilfe aus diesem Forum erstellt habe, vielen Dank dafür nochmal an alle)
Hintergrund ist der, dass die Software alle Bilder, meiner Meinung nach, grundsätzlich zu groß darstellt und ich softwareintern keine Möglichkeit gefunden habe dieses Verhalten zu beinflussen. 1

in der config.ccml folgendes ergänzen (ich habe es einfach ganz unten in der Datei hinzugefügt)
<cc:property id="imgresize_vw" caption="img resize in vw" folder="0.1 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">
<cc:property id="imgresize_vh" caption="img resize in vh" folder="0.1 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">

Die  property id ist sozusagen der Name der Eingenschaft, mit welchem wir diese in anderen Dateien aufrufen können. Wir können diesen auch ändern aber dann müssen wir ihn im nachfolgenden Code ebenfalls anpassen.

caption ist der Name, welcher in der Software, also in den erweiterten Eigenschaften, angezeigt wird. Wir sollten der Übersicht halber einen Namen wählen, mit welchem wir die Eigenschaft leicht wiederfinden können.

folder ist der Name des Ordners, unter welchem die Eigenschaft innerhalb der erweiterten Eigenschaften angezeigt wird. Der Name besteht aus einer Zahl, welche für vorhandene oder neue Ordner steht. 0 erscheint zum Beispiel ganz oben in der Liste (@all bitte korrigiert mich, falls ich hier falsch liege) Der zweite Teil des Namens ist der Tatsächliche Name des Ordners.

Der targettype steht für den Absatz, auf welchen diese Eigenschaft abzielt. Es gibt zum Beispiel auch noch den targettype "topic", "site" und bestimmt noch ein paar mehr. (Desweiteren gibt es auch noch einen targetsubtype, welcher zum Beispiel folgende Werte haben kann: "table", "teaser", "text", "picture" und auch hier bestimmt noch mehr. Aber einen subtype benötigen wir für unsere Eigenschaft nicht. Eventuell würde es Sinn machen doch einen targetsubtype "picture" einzufügen aber es funktioniert auch ohne)

Als nächstes haben wir den type. "combo" gibt an, dass wir eine Auswahl an verschieden Werten haben möchten. In der Software wird dies als drop-down menü angezeigt. Die Werte welche ich gewählt habe, können natürlich auch ergänzt werden.
(Es gibt zum Beispiel auch noch den Wert "boolean", welcher 0 oder 1, also Wahr (ja = 1) oder Unwahr (nein = 0) haben kann. Dies wird in der Software mit "ja" oder "nein" dargestellt. Ist aber für dieses Beispiel nicht relevant)

Zum Schluss haben wir noch default. Hier legen wir den Grundwert fest, welchen die Eigenschaft voreingestellt haben soll. Dies muss ein Wert sein, welcher in den comboitems vorkommt.

Nun öffnen wir die paragraph_picture.ccml:

in der paragraph_picture.ccml in diesem Absatz die Zeile 51 mit der 4. Zeile von hier ersetzen
1 <cc:if cond="&para.properties.design.paragraph.picture.panorama.number gt 1">
2 <img width="<cc:print value="&bigpic_1920.width">" height="<cc:print value="&bigpic_1920.height">" src="<cc:printpictureurl obj="bigpic" suffix="_1920">" srcset="<cc:printpictureurl obj="bigpic" suffix="_1920"> 1920w, <cc:printpictureurl obj="bigpic" suffix="_640"> 640w" sizes="100vw" class="sqrfigcontent" alt="<cc:print value="&paragraph.picture.caption">" /> 
3 <cc:else>
4 <img style="width:<cc:print value="&para.properties.imgresize_vw">vw; height=<cc:print value="&para.properties.imgresize_vh">vh" src="<cc:printpictureurl obj="bigpic" suffix="_1038">" srcset="<cc:printpictureurl obj="bigpic" suffix="_1038"> <cc:printpictureurl obj="bigpic" suffix="_640"> class="sqrfigcontent" alt="<cc:print value="&paragraph.picture.caption">" /> 
5 </cc:if>


Wir speichern nun die zuvor bearbeiteten Dateien.

Anschließend starten wir Web9, wählen einen Grafik-Absatz aus, rechtsklick, Absatz Eigenschaften, Reiter "Erweitert" und dort sollten wir folgendes sehen:

 

erweiterte_eigenschaft_1.jpg

erweiterte Eigenschaften

 

Nach einem Doppelklick (auf das blau makierte) sehen wir unsere comboitems:

erweiterte_eigenschaft_2.jpg

erweiterte Eigenschaften - comboitems

 

Diese Werte können wir jetzt für die Höhe (height = vh) und die Breite (width = vw) einstellen (auf die Proportionen achten).

Nun noch zwei mal mit Ok bestätigen und Das wars schon smile_16.png


Wer anstatt vh und vw Größeneinheiten lieber px oder % haben möchte, muss lediglich in der paragraph_picture.ccml in meinem Code, Zeile 4, folgendes ändern:

1 <img style="width:<cc:print value="&para.properties.imgresize_vw">vw; height=<cc:print value="&para.properties.imgresize_vh">vh" src="<cc:printpictureurl obj="bigpic" suffix="_1038">" srcset="<cc:printpictureurl obj="bigpic" suffix="_1038"> <cc:printpictureurl obj="bigpic" suffix="_640"> class="sqrfigcontent" alt="<cc:print value="&paragraph.picture.caption">"/>
2
3 ändern in (für pixel):
4
5 <img style="width:<cc:print value="&para.properties.imgresize_vw">px; height=<cc:print value="&para.properties.imgresize_vh">px" src="<cc:printpictureurl obj="bigpic" suffix="_1038">" srcset="<cc:printpictureurl obj="bigpic" suffix="_1038"> <cc:printpictureurl obj="bigpic" suffix="_640"> class="sqrfigcontent" alt="<cc:print value="&paragraph.picture.caption">" />

 

Ich arbeite noch an einer Lösung zum Positionieren der Bilder, mal schauen, wie man das gut und brauchbar umsetzen kann. Des Weiteren auch noch an einer Eigenschaft um Bilder in Tabellen kleiner darzustellen.

Viel Spaß und Erfolg beim Ausprobieren smile_16.png


Schöne Grüße,
Andreas


ps.: Anmerkungen, Verbesserungen usw. sind natürlich gerne erwünscht

 


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Andreas_B« (21.11.2017, 09:57)
#12

idefix

Forum-Sponsor  (48 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://www.tettricks.de

Ein großes Dankeschön an Andreas! Werde es ausprobieren 🙂 !


Hab(t) vielen Dank!

Grüße

idefix

 

signet_tettrickslogo_klein.gif

SIQ-Web10 -Win10

#13

schneeball

Grünschnabel  (11 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://hp-design-kg.de

Hallo Andreas,

du hast im Kapitel 11 erklärt wie man Bilder über eine erweiterte Eigenschaft verkleinern kann. Geht das auch bei Siquando Web10 auch. Verwende das Design Leonidas, hier gibt es aber keine paragraph_ficture.ccml Datei. Kannst du mir da vielleicht weiterhelfen.

DANKE

.

#14

W2D Fan

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

Selbstverständlich geht das in Siquando Web 10 auch, und natürlich gibt is in Leonidas eine paragraph_picture.ccml.😉

ABER...

responsive Designs verwenden ALLE die Dateien aus common/sqr/. Ich hätte eigentlich erwartet das einen Webdesigner wie du das schon längst herausgefunden hatte. 😉


Gruß,
Marjorie

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

#15

schneeball

Grünschnabel  (11 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://hp-design-kg.de

Danke für die Antwort

Schöne Grüsse

#16

Günter

Forum-Sponsor  (266 Punkte)  ·   männlich  ·   Österreich  ·   Nachricht senden
 https://www.patka.at

Und wie könnte ich es ändern dass das Bild maximal bis zu seiner eigenen grösse vergrössert wird . 

#17

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

1685 Aufrufe | 17 Beiträge