Bilder drehen

cgr-berlin

Hallo @all,
ich bin ZP Neuling und versuche mich mit dem Produkt vertraut zu machen.

Nun schon das erste Problem.

Wie kann ich ein Bild individuell drehen. Also nicht in 90° Schritten

Mir schwebt folgendes vor.

Links Text - rechts daneben ein gedrehtes Bild.

Natürlich könnte ich das Bild mit Photoshop etc. drehen und einfügen, doch beim click soll eine große Ansicht des ungedrehten Bildes angezeit werden.

Aufgrund meiner bisherigen Weberfahrung weiß ich, das folgendes CSS funktioniert.

.rotate img {-moz-transform:rotate(5deg); /* Firefox 3.6 Firefox 4 */-webkit-transform:rotate(5deg); /* Safari */-o-transform:rotate(5deg); /* Opera */-ms-transform:rotate(5deg); /* IE9 */transform:rotate(5deg); /* W3C */}Mir ist es bisher nicht gelungen, einem einzelnen Bild, bzw. im "Text mit Bild"-Widget das zu verwirklichen.

Ferner kann ich beim "Text mit Bild" die Bildgröße nicht beeinflussen.

Es gibt zwei Möglichkeiten

ich habe die STelle zum Einstellen noch nicht gefunden oder
das geht wirklich nicht.

VIelleicht hat ja jemand eine Idee.

Danke im voraus.

Steffen T.

Hallo,

das Widget "Text mit Bild" steht eigentlich hauptsächlich nur noch aus Kompatibilitätsgründen zur Verfügung. Das Widget hat auch keine Option das Bild nach Klick zu vergrößern. Die Bildgröße beim Widget "Text mit Bild" können Sie aber in der Bilderverwaltung (Website | erweitert | Bilder) anpassen (Rechtsklick auf Bild - Größe ändern).

Besser ist es die Widgets "Bild" und "Text" zu verwenden. Siehe http://docs.zeta-producer.com/bilder-einfuegen.html und http://docs.zeta-producer.com/inhalte-einfuegen.html. Die breite des Bildes richtet sich hier automatisch nach der zur Verfügung stehenden Spaltenbreite.

Bez. der Rotation: Da könnten Sie eigenes CSS einfügen. Beispiel:

Code

<style>
img.singleImage {
	-moz-transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	transform: rotate(7deg);
</style>

cgr-berlin

Hallo Herr T.,

danke für die Info.

Werde das heute abend ausprobieren.

Wie ordne ich aber das CSS nur einem bestimmten Bild auf der Seite mit
mehreren Bildern zu?

Aus meinem bisherigen Programm kenne ich das so, dass ich einem Absatz (Text, Bild etc.) einen CSS Selector zurodnen kann. Geht das hier nur über
den Quelltext?

Vielen Dank im voraus,

Steffen T.

Hallo,

die einzelnen eingefügten Bilder sind immer innerhalb einer eindeutigen ID. Diese können Sie im Quelltext bzw. im Brower mit Hilfe der Developer-Tools herausfinden. Das CSS sieht dann beispielsweise so aus:

Code

<style>
#igal1358 img.singleImage {
	-moz-transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	transform: rotate(7deg);
</style>

cgr-berlin

Hallo Herr T.,

so, ich bin nun dazu gekommen das mal zu probieren.

Grundsätzlich lässt sich das Bild ansprechen und drehen. Doch es werden Bildteile abgeschnitten. Ich denke, das kommt durch die "Spalten/Grid" die nicht überlagert werden.

Durch das einfügen von margin wurde es etwas besser, doch 100%-ig leider nicht.

Ich habe mal entsprechende Hardcopy's in die beigefügte PDF eingefügt.

Haben Sie noch einen Trick?

Vielen Dank

Steffen T.

Hallo,

das liegt wohl an ein paar overflow:hidden angaben. Da kannst Du mal folgendes CSS noch hinzufügen (ohne Gewähr)

CSS

.zpColumnItem,
.zpImageGallery,
.zpImageGallery a.fancybox {
	overflow: inherit !important;
}

cgr-berlin

Hallo,

das hat geklappt.

Vieelen Dank.

cgr-berlin

Hallo Herr T.,
wie schon am 09.07.2015 geschrieben hat das alles funktioniert.

Sie haben weiter oben erwähnt:

Zitat von sT.

Besser ist es die Widgets "Bild" und "Text" zu verwenden. Siehe docs.zeta-producer.com/bilder-einfuegen.html und docs.zeta-producer.com/inhalte-einfuegen.html. Die breite des Bildes richtet sich hier automatisch nach der zur Verfügung stehenden Spaltenbreite.

Das mit der automatischen Breite des Bildes finde ich ungünstig. Wenn ich gleich ein kleineres Bild einfüge, wird trotzdem die gleiche Breite reserviert als wenn durch ZETA das Bild maximiert eingefügt wird.

Kann man das ändern ? Sprich die "Spaltenbreite" für diesen Artikel ändern oder kommt das erst mit der 12er GRid-Lösung?

Somit bleibt doch momentan eigentlich nur die Lösung das Widget "Text mit Bild" zu nutzen, obwohl es nach Ihrer Aussage nur noch aus Kompatibilitätsgründen zur Verfügung steht.

Jochen

Hallo,

wenn du nur ein Spalte (Artikel) drin hast, dann wird der ganze zur verfügende Platz dafür in Anspruch genommen, das ist richtig soweit.
Wenn du aber daneben, einen weiteren Artikel einfügst, wird die Spaltenbreite auch kleiner.
Momentan geht dies (Layoutabhängig) mit bis zu 4 Spalten oder auch Artikel.

Notfalls kann man auch einen "Leerartikel" einfügen, wenn einem das dann besser gefällt.

Vielleicht verstehe ich dich aber auch falsch?
Wenn ja, dann beschreibe mal, wie für die die Ideallösung aussehen sollte/könnte.
Bzw. was genau hast du vor?

cgr-berlin

Hallo Jochen,
mein "Problem" ist, dass wenn ich ein Bild und daneben ein Text einfüge, das Bild gleich breit ist wie der Text. Das Bild erschlägt aufgrund seiner Größe den Text.

Nehme ich Bild, das kleiner ist als die "Spalte" habe ich einen großen Abstand zwischen Bild und Text. Auch nicht schön.

Durch eine "Leerspalte" rechts wird das Bild kleiner, der Abstand zum Text auch, aber der Text geht dann nicht über die gesamte Breite. Ist ja auch klar, denn es ist ja ein Aufbau mit 3 Spalten.

Eigentlich ist das Widget "Text mit Bild" ideal, doch da steht die folgende Aussage vom ZETA Team im Raum.

Zitat von sT.

das Widget "Text mit Bild" steht eigentlich hauptsächlich nur noch aus Kompatibilitätsgründen zur Verfügung.

Hoffe du kannst meinen Ausführungen folgen.

Jochen

Hallo Christian,

wenn es kein Bild sein muss, das sich mit Klick vergrößern lässt, könntest du das auch evtl. mit einem normalen Textartikel, in dem du auch ein Bild einfügen kannst, hinbekommen.
Vielleicht wäre das ja eine Möglichkeit für dich.

Eine Antwort von Zeta bzgl. dem Widget "Text mit Bild", wirst du vermutlich erst nächste Woche bekommen, da der Support diese Woche noch im Urlaub ist.

Stefan S

Hallo,

hier geht es um individuelles, erweitertes HTML um vom Programm nicht unterstützte Darstellungsweisen tu erreichen. Da können wir nur bedingt helfen. Wenn eine Bild und Textspalte unterschiedlich breit sein sollen, müssen Sie das Bild im normalen "Text"-Artikel platzieren und sich per HTML/CSS selbst um die Darstellung kümmern. Zu erklären, wie das geht kann sehr zeitaufwendig sein und kann von uns daher hier nur bedingt angeboten werden.

Kleiner Trost: In Version 13 wird es Möglichkeiten geben, Spalten mit unterschiedlichen Breiten zu erstellen.

Bilder drehen

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?