Bilder Option

Thema wurde von alexander_katz, 5. August 2017 erstellt.

  1. alexander_katz
    alexander_katz Erfahrener Benutzer
    Registriert seit:
    29. April 2017
    Beiträge:
    50
    Danke erhalten:
    1
    Danke vergeben:
    7
    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?
     
  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    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.
     
  3. alexander_katz
    alexander_katz Erfahrener Benutzer
    Registriert seit:
    29. April 2017
    Beiträge:
    50
    Danke erhalten:
    1
    Danke vergeben:
    7
    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
     
  4. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Ja, link zu deiner seite dann schauen wir was man schnell machen kann
     
  5. alexander_katz
    alexander_katz Erfahrener Benutzer
    Registriert seit:
    29. April 2017
    Beiträge:
    50
    Danke erhalten:
    1
    Danke vergeben:
    7
  6. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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.
     
  7. alexander_katz
    alexander_katz Erfahrener Benutzer
    Registriert seit:
    29. April 2017
    Beiträge:
    50
    Danke erhalten:
    1
    Danke vergeben:
    7
    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?
     
  8. alexander_katz
    alexander_katz Erfahrener Benutzer
    Registriert seit:
    29. April 2017
    Beiträge:
    50
    Danke erhalten:
    1
    Danke vergeben:
    7
    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.
     
  9. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.303
    Danke erhalten:
    6.268
    Danke vergeben:
    1.118
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    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.
     
  10. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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.)
     
  11. Wilken (Gambio)
    Wilken (Gambio) Erfahrener Benutzer
    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.311
    Danke vergeben:
    2.208
    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;
    }
     
  12. juergen_hinrichsen
    juergen_hinrichsen Aktives Mitglied
    Registriert seit:
    14. August 2018
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    4
    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
     

    Anhänge:

  13. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    Schau mal ab hier:
    (Link nur für registrierte Nutzer sichtbar.)
     
  14. juergen_hinrichsen
    juergen_hinrichsen Aktives Mitglied
    Registriert seit:
    14. August 2018
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    4
    #14 juergen_hinrichsen, 4. September 2018
    Zuletzt bearbeitet: 4. September 2018
    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;">
     
  15. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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)
     
  16. juergen_hinrichsen
    juergen_hinrichsen Aktives Mitglied
    Registriert seit:
    14. August 2018
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    4
    #16 juergen_hinrichsen, 4. September 2018
    Zuletzt bearbeitet: 4. September 2018
    Wollte eigentlich später noch mehr Bilder in der Weise hinzufügen :rolleyes:

    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.
     

    Anhänge:

    • 1a2.PNG
      1a2.PNG
      Dateigröße:
      1,5 MB
      Aufrufe:
      13
  17. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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>
     
  18. juergen_hinrichsen
    juergen_hinrichsen Aktives Mitglied
    Registriert seit:
    14. August 2018
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    4
    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?
     
  19. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    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
     
  20. juergen_hinrichsen
    juergen_hinrichsen Aktives Mitglied
    Registriert seit:
    14. August 2018
    Beiträge:
    28
    Danke erhalten:
    0
    Danke vergeben:
    4
    Code:
    &nbsp;
    <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?