Jump to content

*gelöst* Produktbilder-Anzeige

Mietzshop

By Mietzshop
in Generelle Fragen

 Share

Recommended Posts

Mietzshop Newbie

Mietzshop

Posted
Posted

Huhu :)

meine Produktbilder werden leider Gottes untereinander angezeigt.

 

image.png.d5b77e211550081aee96531d12418fff.png

Ich  nutze Prestashop 1.7.6.1 und ich hab irgendwie in Erinnerung, dass die anfangs so schön nebeneinander waren - habe aber, zumindest nicht bewusst, irgendetwas in dieser Richtung geändert.

Wo/Wie kann ich denn entsprechende Einstellungen vornehmen?

Liebe Grüße
Lena

Link to comment
Share on other sites
JBW Mentor

JBW

Posted
Posted
On 12/18/2020 at 10:42 PM, Mietzshop said:

Ich  nutze Prestashop 1.7.6.1 und ich hab irgendwie in Erinnerung, dass die anfangs so schön nebeneinander waren - habe aber, zumindest nicht bewusst, irgendetwas in dieser Richtung geändert.

Ja beim classic Theme sind die normalerweise nebeneinander. Du kannst dir natürlich mit der Untersuchen Funktion in deinem Browser das CSS anschauen ob da was geändert wurde (z.B. mit einem Demo Shop Vergleichen).

Generell solltest du auf ein Upgrade auf 1.7.6.9 nachdenken (vorher Backup machen!), es wurden diverese Sicherheitslücken beseitigt.

Link to comment
Share on other sites
Mietzshop Newbie

Mietzshop

Posted
  • Author
Posted
On 12/20/2020 at 6:05 AM, JBW said:

Ja beim classic Theme sind die normalerweise nebeneinander. Du kannst dir natürlich mit der Untersuchen Funktion in deinem Browser das CSS anschauen ob da was geändert wurde (z.B. mit einem Demo Shop Vergleichen).

Generell solltest du auf ein Upgrade auf 1.7.6.9 nachdenken (vorher Backup machen!), es wurden diverese Sicherheitslücken beseitigt.

Ich hatte bereits versucht ein Backup zu machen...trotz Backup hat meine Seite danach gar nicht mehr funktioniert, das Backup hat sich nicht mehr draufspielen lassen und das Ende vom Lied war, dass mein Hoster mir alles wieder herstellen musste 🙈

Deswegen bin ich was das angeht, etwas vorsichtig :D Was nicht heißt, dass ich es irgendwann nicht gerne nochmal probieren möchte...

Ich weiß nicht, ob durch dieses manuelle Backup die Bilder erst untereinander angezeigt wurde. Anfangs waren sie ja alle schön nebeneinander 😭

Ich sehe auf den ersten Blick mal keinen Unterschied...

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

Da sollte eigentlich eine CSS-Anweisung zuständig sein, ein Link würde helfen.

Es könnte auch ein Modul für die Anzeige der Bilder eingebunden sein, ggf. deaktiviere mal alle Fremdmodule, evtl. muß das Modul resettet werden um einwandfrei zu funktionieren.

Link to comment
Share on other sites
Mietzshop Newbie

Mietzshop

Posted
  • Author
Posted

Nein kein Kaufteil. 

Wenn ich Änderungen bzgl. des Styles vornehme, dann da (wobei ich auch ganz am Anfang mal Änderungen an der theme.css vorgenommen habe, da waren die Bilder aber auch noch nebeneinander).

Die Datei sieht so aus...letzte Änderung die ich vorgenommen habe, bezieht sich auf die Größe von blockcart-modal. Davor waren die Bilder allerdings auch schon untereinander. 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

#accordion-container {
	font-size: 13px;
	background: #ffffff;
	padding: 5px 10px 10px 10px;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 5px 15px #cccccc;
	-webkit-box-shadow: 0 5px 15px #cccccc;
	box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
	font-size: 16px;
	background: #ffbfcd;
	margin: 5px 0 0 0;
	padding: 5px 20px;
	border: 1px solid #cccccc;
	cursor: pointer;
	color: #424242;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.active-header {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background: url(images/active-header.gif) #ffbfcd;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.active-header:hover {
	background: url(images/active-header.gif) #ffbfcd;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header {
	background: url(images/inactive-header.gif) #ebebeb;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.inactive-header:hover {
	background: url(images/inactive-header.gif) #ffbfcd;
	background-repeat: no-repeat;
	background-position: right 50%;
}

.accordion-content {
	display: none;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-top: 0;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

#blockcart-modal .modal-dialog {
max-width: 1300px;
width: 100%;
}

Umbenennen hat leider keine Änderung gebracht.

Link to comment
Share on other sites
uusk Newbie

uusk

Posted
Posted (edited)

In der .css von Dir kann ich nichts sehen, was das verursachen würde.

Schreib mal in die custom css folgendes rein:

.product-images > li.thumb-container {
    display: inline;

Und überprüfe, ob die Klassen in der Datei product-cover-thumbnails.tpl noch so vorhanden sind, mittels Inspector.

Das ist zwar der Originl-Code, der in der classic theme.css steht, aber vielleicht ist da ja irgendwo was bei Dir passiert.

Und nochwas: Ich arbeite nie direkt auf meinem gehosteten Schop, immer local. Wenns dann funktioniert, stelle ich Änderungen online. Ich kopier mit auch immer die Originaldateien vor Änderungen.

 

 

Edited by uusk (see edit history)
Link to comment
Share on other sites
Mietzshop Newbie

Mietzshop

Posted
  • Author
Posted (edited)

Das mit mittels Inspector verstehe ich nicht so ganz 🙈

Die product-cover-thumbnails.tpl sieht so aus: 

{**
 * 2007-2019 PrestaShop and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
<div class="images-container">
  {block name='product_cover'}
    <div class="product-cover">
      {if $product.cover}
        <img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
        <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
          <i class="material-icons zoom-in">&#xE8FF;</i>
        </div>
      {else}
        <img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
      {/if}
    </div>
  {/block}

  {block name='product_images'}
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
        {foreach from=$product.images item=image}
          <li class="thumb-container">
            <img
              class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_default.url}"
              data-image-large-src="{$image.bySize.large_default.url}"
              src="{$image.bySize.home_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="100"
              itemprop="image"
            >
          </li>
        {/foreach}
      </ul>
    </div>
  {/block}
</div>
{hook h='displayAfterProductThumbs'}

Habe in die custom.css genau das reingeschrieben, was auch in der theme.css drin steht: 

.product-images>li.thumb-container{display:inline}.

Damit sind die Bilder auch wieder nebeneinander. Aber theoretisch müsste sich das doch aus theme.css gezogen werden oder?
Müsste jetzt sonst noch einiges in die custom.css reinschreiben, damit das mit den Bildern ansehnlich ist (Pfeile neben den Bildern, Bildbeschreibung wenn der Cursor drüber fährt usw.).

Wäre an sich nicht das Problem aber irgendwie ist das ja auch nicht Sinn der Sache...

Edited by Mietzshop (see edit history)
Link to comment
Share on other sites
uusk Newbie

uusk

Posted
Posted (edited)

Das mit mittels Inspector verstehe ich nicht so ganz.

F12, auf den gewünschten Quellcde gehen, dann siehst Du Deine Styles --> google weiss alles 😁

"Aber theoretisch müsste sich das doch aus theme.css gezogen werden oder?"

Ja, normalerweise. Ich weiss aber nicht, was Du alles in der Theme.css so rumgewurstelt hast.

Wäre an sich nicht das Problem aber irgendwie ist das ja auch nicht Sinn der Sache...

Genau - ist nicht Sinn der Sache. Muss man normalereise auch nicht machen.

Und nochmal!!!

Wenn Du eine Datei ausserhalb des Child änderst, kopier Dir diese Datei mit der entsprechenden Verzeichnisstruktur ins Child.

Arbeite dann auch wenn möglich mit extends append/prepend.

 

Edited by uusk (see edit history)
Link to comment
Share on other sites
Mietzshop Newbie

Mietzshop

Posted
  • Author
Posted

In der theme.css habe ich nur die Farbe geändert. Das war ziemlich das erste was ich damals gemacht hatte :D

1 minute ago, uusk said:

Wenn Du eine Datei ausserhalb des Child änderst, kopier Dir diese Datei mit der entsprechenden Verzeichnisstruktur ins Child.

Arbeite dann mit extends append/prepend.

 

Verstehe ich ehrlich gesagt nicht so...Außerhalb des Childs? Ich habe eine child.zip abliegen?! /html/Mietzshop/themes/child_classic.zip

extends append/prepend?

Der Shop ist an sich ja noch nicht "online" - ich habe alles komplett kopiert bzw. mache regelmäßig eine Sicherung.
Bevor ich eine Änderung an einer Datei mache, sichere ich diese immer zuerst. Falls ich mir was zerschieße ist das nicht allzu schlimm und ich kann mir den Ursprungszustand wieder herstellen.

Wäre es sinnvoll, eine jungfräuliche theme.css hochzuladen? Ich müsste zwar dann die Farben wieder ändern aber das mit den Bildern sollte dann ja wieder klappen oder?

Link to comment
Share on other sites
Mietzshop Newbie

Mietzshop

Posted
  • Author
Posted

Mit dem ersten Teil deiner Antwort kann ich nach wie vor nichts anfangen - weder mit dem Link, noch mit dem Child-Verzeichnis. Sorry 🙈🤷‍♀️

Mit der theme-Datei neu hochladen hat wunderbar funktioniert. Die Bilder werden wieder so angezeigt, wie sie es sollen :)

Link to comment
Share on other sites
  • Mietzshop changed the title to *gelöst* Produktbilder-Anzeige
uusk Newbie

uusk

Posted
Posted

Tipp von mir:

beschäftige Dich mal mit: https://devdocs.prestashop.com/

extends append/prepend sind in smarty beschrieben. Hier gehts in diesem Fall darum, dass man bei Anderungen von .tpl Dateien nicht den gesamten Code im Cild mitschleppen muss, sondern geziehlt nur sequentiell ändert, betrifft zum beispiel Blöcke.

Muss man nicht in der Tiefe alles wissen, je nach dem was für einen Anspruch man hat, man sollte aber schon wissen, wie PS aufgebaut ist und wie man Änderungen, und vor allem wo, durchführt, nämlich vorzugsweise im Child. Hier ist man updatesicher, und wenn nach einem update was nicht funktioniert, kann man geziehlt im Child suchen. Besonders erleichternd mit extends append/prepend. Auch bei CSS ist es sinnvoll zu wissen, was man tut.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...