Bilder Option

Hallo alle Gambio user,

Nun ich probiere schon länger meine Bilder zu vergrössern. Habe auch schon alle Forenbeiträge ausprobiert es hat aber nichts geplappt.

Meine Bilder die Hochgeladen wurde haben eine Grösse von : Höhe 2000 / Breite 1333

doch wenn ich im Style editor die höhe ändere vergrössert sich nur der weisse hinergrund vom Bild und nicht das Artikel Bild selber.

Ein 2. Problem sind die grössen auf meiner Startseite die Bilder sind zu klein.


wie bekomme ich das in den griff?

 

Zum einen musst du in den Bildoptionen einstellen wie groß die Bilder sein sollen die Berechnet werden.
Zum anderen die Ausgabe der Bilder. Hier kommt es auf mehr an - Zum einen wo und welches Bild. GGf. muss man da das CSS anpassen für diesen Bereich. Den die Ausgabe und Darstellung der Vorhandenen Bilder wird vom Platz für das Bild bestimmt. Daher muss man ggf. den Bereich anpassen.
Dafür muss man aber genau wiossen WO und WIE du es haben willst, ebenso den Link zu der betreffenden Seite, da man dein html und CSS dafür betrachten muss. Allgemein is das nur halb zu beantworten.
Was du vorhast also die Darstellung real zu vergrößern ist leider nicht mit klick klick fertig getan. Das schon Design am Template.

 

Ok vielen dank für die rasche Antwort.

Ok das heisst die Anzeigebilder auf der startseite lasse ich vorerst mal so.

doch möchte ich wenn mann dan auf den Artikel klickt das ArtikelBild vergrössern ich meine aber nicht die zoom funktion. das bild grösser anzeigen

ist dies auf einem einfacheren Weg möglich? Da ich mich mit dem css nicht wirklich auskenne.

nette grüsse

 

Ja, link zu deiner seite dann schauen wir was man schnell machen kann

 

http://aaproducts.de/

 

Es gibt 2 Möglichkeiten für das größere Bild:
als PopUp oder als Lightbox
Einstellmöglichkeit unter Darstellung -> Template Einstellungen -> Artikeldetailseite
"Bildergalerie als Lightbox einbinden"
Ist die Einstellung aus, hast Du das PopUp, stellst Du es ein, werden die original-bilder an den Bildschirm angepasst dargestellt.

die Größe der PopUps richtet sich zum einen nach der Einstellung unter bildoptionen für PopUps, zum anderen wird die Höhe
im Style Editor unter "Produkte -> Artikelbild -> Höhe Lightbox" eingestellt.

 

Ok das heisst ich muss nur die lightbox einstellungen ändern damit meine bilder grösser werden.

aber wie kann ich dan wenn ich auf das Produkt klicke Bild dort verändern?

 

Ih verstehe nicht warum gambio das so kompliziert löst das man nicht einfach die bilder grösser anzeigen lassen.

denke mit gambio habe ich zu viele probleme werde das system ändern. css programieren um produktbilder grösser anzeigen zu lassen.

hat leider nicht funktioniert habe es aktiviert und deaktiviert artikelbilder grösse verändert doch keine veränderung sichtbar nur das das artikelbild sich verschiebt.

ich werde auch bezahlen wenn mir das jemand ändert.

 

Du musst beim Designen bedenken, es muss für alle Monitore passen. Das nicht mehr so wie früher mal eben schnell Bildchen vergrößert. Templates sind umfangreicher geworden auch aufgrund der Funktionen. Damit sind auch anpassungen nicht mehr ganz so einfach machbar - ABER wende dich doch einfach an nettdex Stravos hilft dir beim Template gerne und teuer sind die auch nicht. Dann bekommst es professionell nach deinen Wünschen umgesetzt.

 

Hast Du auch ganz unten auf "Speichern" geklickt, nach dem Einschalten?
und danach die Cache geleert?
Mal zum Vergleich:
Shop mit PopUp:
(Link nur für registrierte Nutzer sichtbar.)
Testshop mit Lightbox:
(Link nur für registrierte Nutzer sichtbar.)

 

Ungetestet, aber dieser Schnippsel in eigenen CSS Bereich im Styleedit müsste passen. Im Beispiel für 900 Pixel maximale Höhe:

Code:

.product-info .product-info-stage {
    height: 900px;
}

.product-info-image, .product-info-layer-image {
    height: 900px;
}

.product-info-image .product-info-image-inside .swiper-slide .swiper-slide-inside {
    height: 900px;
}

 

Hallo,

ich weiß nicht ob das thematisch jetzt hier exakt rein passt, aber ich wollte keinen neuen Thread eröffnen.
Folgendes:

Ich habe auf meiner Startseite wie auf dem Bild zu sehen ist ein Bild. Dieses Bild soll zu einer weiteren Seite weiterleiten, wenn man draufklickt, wie man das macht habe ich auch verstanden. Allerdings hätte ich es jetzt gerne so, dass wenn man mit dem Mauszeiger auf das Bild geht, das Bild größer wird. Ungefähr so, wie wenn man auf einen Artikel mit dem Mauszeiger drauffahren würde.

Gibt es dafür eine Lösung?

Besten Dank, Hinrichsen

 

Schau mal ab hier:
(Link nur für registrierte Nutzer sichtbar.)

 

Kenne mich mit Programmieren leider nicht so gut aus. Wie ich den Code in mein eigenes CSS einfügen kann weiß ich allerdings weiß ich nicht wie ich das Bild spezifisch ansteuern soll, was ja notwendig ist, damit der Code weiß an wen er den Befehl geben muss oder?
Wo kann ich das herausfinden?

Besten Dank, Hinrichsen

Habe diesen Code verwendet:

.home-teaser:hover > img {
width: calc(100% + 16px);
height: calc(100% + 16px);
left: -8px;
top: -8px;
}



Edit: Habe jetzt glaube ich herausgefunden wie das Bild im Webseiten Code heißt. Welchen Teil davon muss ich jetzt mit dem Code verbinden ?


<img alt="" src="images/Logo.png" style="width: 462px; height: 308px;">

 

Du musst noch einen Code dahin schreiben, wo Du dein bild mit Link eingefügt hat.
Da Du nur ein Bild hast, könnte das so gehen:

HTML:

<div class="row home-teaser-row space-0">
    <div class="col-xs-12 col-md-6 row-xs-2 row-md-2">
        <a class="home-teaser" href="DEIN-LINK"><img alt="" class="img-responsive" src="DER-PFAD-ZU-DEINEM-BILD.jpg" /></a>
    </div>
</div>

Damit Du das richtig einfügen kannst, musst Du im Content-Manager am Textfeld auf Quellcode, oder auf html umstellen.
DEIN-LINK und DER-PFAD-ZU-DEINEM-BILD.jpg muss mit den Daten aus Deinem bestehenden Code ersetzt werden.

Wenn Du dir nciht sicher bist, wie das geht, poste Deinen Code hier in einer Code-Box (das kleine + - Symbol in der Leiste)

 

Wollte eigentlich später noch mehr Bilder in der Weise hinzufügen

Den Code den ich beim Umstellen auf HTML gefunden ist:

Code:

<img alt="" src="images/Logo.png" style="width: 462px; height: 308px;" />

Ist der Code, den Du gesendet hast auch der, der final dann über Style EDit in das CSS kommt? Das sah dort ein wenig anders aus.

Um das komplette Vorhaben noch einmal darzustellen, habe ich noch ein weiteres Bild angehängt, wei es dann möglicherweise aussehen soll.

 

Da fehlt jetzt der Link.
man sollte Bilder nicht mit festen Größenangaben speichern, sondern mit einem img: respponsive, damit sihc sich den einzelnen Bildschirmgrößen anpassen.

Der Code kommt nicht ins css, sondern in den Content-Manager, statt Deinem Bild / Link - Code.

HTML:

<div class="row home-teaser-row space-0">
    <div class="col-xs-12 col-md-6 row-xs-2 row-md-2">
        <a class="home-teaser" href="DEIN-LINK"><img alt="" class="img-responsive" src="images/Logo.png" /></a>
    </div>

    <div class="col-xs-12 col-md-6 row-xs-2 row-md-2">
        <a class="home-teaser" href="DEIN-2-LINKl"><img alt="" class="img-responsive" src="images/DEIN-2-BILD.jpg" /></a>
    </div>
</div>

 

Alles klar, Danke. Ich setze mich morgen dran und probiere das aus. Ist mit "meinem" Link der Link gemeint, auf welches das Bild verweisen soll, wenn man draufklickt, oder der wo das Bild auf der Startseite angezeigt wird?

 

Damit ist der Link gemeint auf den das Bild verweisen soll.
Bei Dir steht da vermutlich ein <a href="...
das was da zwischen den "" steht ist die Linkadresse

 

Code:

 
<hr /><br />
<a href="https://www.yedega.eu/de/Testkategorie/"><img alt="" src="images/xx1_9954.jpg" style="width: 452px; height: 301px;" /></a>&nbsp;&nbsp;&nbsp; <a href="https://www.yedega.eu/de/info/bildergalerie.html"><img alt="" src="images/Logo.png" style="width: 448px; height: 299px;" /></a>

So das ist der Code, wenn ich die Links eingefügt habe.

Demzufolge müsste der kombinierte Code ja sein:

Code:

<div class="row home-teaser-row space-0">
    <div class="col-xs-12 col-md-6 row-xs-2 row-md-2">
        <a class="home-teaser" href="https://www.yedega.eu/de/Testkategorie/"><img alt="" class="img-responsive" src="images/Logo.png" /></a>
    </div>

    <div class="col-xs-12 col-md-6 row-xs-2 row-md-2">
        <a class="home-teaser" href="https://www.yedega.eu/de/info/bildergalerie.html"><img alt="" class="img-responsive" src="images/xx1_9954.jpg" /></a>
    </div>
</div>

Und das kommt dann wieder anstelle des ersten Codes in den Content Manager?