Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: ANLEITUNG: Artikelbilder mit Bildunterschriften / Bildbeschreibungen

    jeanluc

    • Fördermitglied
    • Beiträge: 23
    Hallo zusammen,

    ich hätte gerne eine Erweiterung zu den Artikelbildern.

    Da ich zu den Artikeln im Shop oft nicht nur eine Abbildung sondern mehrere Bilder habe, die dann meist irgendein Detail bzw. eine Variante des Artikels zeigen, wäre es sinnvoll zu jedem Bild eine eigene Bildunterschrift (also einen beschreibenden Text zu jedem Bild) hinzuzufügen.

    Gibt es hierzu schon Module, bzw. kann mir evtl. jemand mit einem Lösungsansatz zu diesem Problem weiterhelfen?

    Schonmal Danke für eure Antworten

    [EDIT Tomcraft 08.10.2010: Hier geht es direkt zur Anleitung von jeanluc.]



    Linkback: https://www.modified-shop.org/forum/index.php?topic=8492.0

    jeanluc

    • Fördermitglied
    • Beiträge: 23
    So...

    als erstes möchte ich mich entschuldigen, dass ich hier mit meiner Fragestellung einfach "rein geplatzt" bin. Das ist mein erster Post hier im Forum und ich werde eine Vorstellung meiner Person und meines Shops an gegebener Stelle noch nachholen.

    Ich lese schon eine Weile hier im Forum mit und muss an dieser Stelle meinen Dank an alle Forenmitglieder aussprechen. Das modified eCommerce Shopsoftware Team leistet hervorragende Arbeit und mit Hilfe dieses Forums konnte ich schon einige Modifikationen an meinem Shop umsetzen.

    Ich habe zu den Beschreibungstexten zu den Artikelbildern jetzt eine erste Teillösung. Im Wesentlichen bin ich nach dem Tutorial für zusätzliche Datenfelder aus dem Wiki vorgegangen. Hier der Link: Tutorial: Zusätzliche Datenfelder Artikel

    Schritt 1: Datenbank erweitern
    In der Datenbanktabelle "products" ein neues Feld anlegen: "products_image_description"

    Schritt 2: Zusätzliches Feld in der Artikeleingabeseite im Backend anlegen
    dazu jeweils im Ordner "/lang/german/admin/" und im Ordner "/lang/english/admin/" in der Datei "categories.php" eine neue Sprachvariable definieren:

    Code: PHP  [Auswählen]
    define('TEXT_PRODUCTS_IMAGE_DESCRIPTION', 'Bildunterschrift')

    bzw.

    Code: PHP  [Auswählen]
    define('TEXT_PRODUCTS_IMAGE_DESCRIPTION', 'Image Description')

    und in der Datei "/admin/includes/modules/products_images.php" unter der Zeile

    Code: PHP  [Auswählen]
    echo '<td class="main">'.TEXT_PRODUCTS_IMAGE.'<br />'.xtc_draw_file_field('products_image').'<br />'.xtc_draw_separator('pixel_trans.gif', '24', '15').' '.$pInfo->products_image.xtc_draw_hidden_field('products_previous_image_0', $pInfo->products_image);

    folgendes hinzufügen:

    Code: PHP  [Auswählen]
    // display image description field - selbst reingefummelt
    echo '</td><td class="main">'.TEXT_PRODUCTS_IMAGE_DESCRIPTION.'<br />'.xtc_draw_input_field('products_image_description', $pInfo->products_image_description).'<br />'.xtc_draw_separator('pixel_trans.gif', '24', '15');

    Jetzt haben wir schonmal ein neues Textfeld für die Eingabe im Backend. Sieht bei mir so aus:

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Schritt 3: Text in Datenbank ablegen
    Dazu in der Datei "/admin/includes/classes/categories.php" ungefähr in Zeile 513 bei

    Code: PHP  [Auswählen]
    $sql_data_array = array (...

    folgendes hinzufügen:

    Code: PHP  [Auswählen]
    'products_image_description' => xtc_db_prepare_input($products_data['products_image_description'])

    und damit das Duplizieren der Artikel auch klapp weiter unten ungefähr in Zeile 785

    Code: PHP  [Auswählen]
    $sql_data_array=array('products_image_description'=>$product['products_image_description'], ...

    Schritt 4: Smarty Variablen anlegen
    in der Datei "/includes/modules/product_info.php" ungefähr in Zeile 109 die Smarty-Variable hinzufügen:

    Code: PHP  [Auswählen]
    $info_smarty->assign('PRODUCTS_IMAGE_DESCRIPTION', $product->data['products_image_description']);

    Schritt 5: und die Bildunterschrift im Template ausgeben
    hierzu im Templateordner in der "product_info_v1.html" an gewünschter Stelle den Platzhalter einfügen

    Code: PHP  [Auswählen]
    {$PRODUCTS_IMAGE_DESCRIPTION}

    Sieht bei mir ungefähr so aus wie im angehängten Screenshot.

    Jetzt kann man so aber erstmal nur für das erste Artikelbild einen beschreibenden Text hinterlegen. Für die weiteren Artikelbilder werden die Anpassungen wohl etwas komplizierter. Ich werd mich da jetzt aber mal dran machen. Wenn ich weitergekommen bin, werde ich die Lösung wieder hier posten.

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    [EDIT Tomcraft 08.10.2010: Eine Erweiterung der Anleitung für die weiteren Bilder ist hier zu finden, Danke an jeanluc.]
    [EDIT Tomcraft 24.01.2011: Eine Erweiterung der Anleitung für eine Aktualisierung der Bildunterschriften ohne den Zwang eines erneuten Bilduploads hier zu finden, Danke an Arhu.]

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Vielen Dank für deine bereitgestellte Anleitung! :thx:

    Grüße

    Torsten

    jeanluc

    • Fördermitglied
    • Beiträge: 23
    Ich möchte hier noch anmerken, dass ich diese Anpassung bisher nur testweise lokal implementiert habe und noch nicht im Shop einsetze. Also soweit erstmal ohne Gewähr. Wenn jemand diese Erweiterung testen möchte, würde ich mich natürlich über Feedback freuen.

    Wäre auch gut, wenn jemand von den erfahrenen Programmierern hier mal auf den Code schauen könnte. Das ist mein erster Versuch am XTC Core herumzuschrauben.

    Hier nun noch die Fortsetzung der Anleitung für Bildunterschriften, damit es auch für die zusätzlichen Artikelbilder funktioniert:

    Anmerkung vorweg: bisher wird der Text für die Bildbeschreibungen nur gespeichert, wenn gleichzeitig ein Bild hoch geladen wird. Das Ändern der Bildunterschriften funktioniert noch nicht. Hierzu weiter unten mehr. Hilfe bei der Codeoptimierung ist natürlich sehr willkommen!

    Schritt 1: Datenbank erweitern
    in der Tabelle "products_images" ein neues Feld "image_description" anlegen

    Schritt 2: Die Zusätzlichen Textfelder im Backend anlegen
    hierzu in der Datei admin/includes/modules/products_images.php in der MO PICS Scleife hinter

    Code: PHP  [Auswählen]
    echo '<td class="main">'.TEXT_PRODUCTS_IMAGE.' '. ($i +1).'<br />'.xtc_draw_file_field('mo_pics_'.$i).'<br />'.xtc_draw_separator('pixel_trans.gif', '24', '15').' '.$mo_images[$i]["image_name"].xtc_draw_hidden_field('products_previous_image_'. ($i +1), $mo_images[$i]["image_name"]);
    folgendes Einfügen:

    Code: PHP  [Auswählen]
    echo '</td><td class="main">'.TEXT_PRODUCTS_IMAGE_DESCRIPTION.' '. ($i +1).'<br />'.xtc_draw_input_field('products_image_description'.$i, $mo_images[$i]["image_description"]).'<br />'.xtc_draw_separator('pixel_trans.gif', '24', '15');
    Damit im Array $mo_images[$i]["image_description"] auch etwas drinsteht muss zudem noch die funktion xtc_get_products_mo_images() erweitert werden.
    Hierzu in der Datei inc/xtc_get_products_mo_images.inc.php die Variable $mo_query so erweitern, dass auch unser Feld image_description aus der Tabelle products_images geholt wird. Sieht dann so aus:

    Code: PHP  [Auswählen]
    $mo_query = "select image_id, image_nr, image_name, image_description from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . $products_id ."' ORDER BY image_nr";
    Damit haben wir jetzt neue Felder für Bildunterschriften im Backend angelegt:

    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Schritt 3: Bildunterschriften in der products_images Tabelle abspeichern
    In der Datei admin/includes/classes/categories.php finden wir ungefähr bei Zeile 580 die MO PICS Schleife:

    Code: PHP  [Auswählen]
    //MO_PICS
    for ($img = 0; $img <MO_PICS; $img ++) {...
    in der Schleife wird ein Array $mo_img angelegt (ungef. Zeile 595) und dieses Erweitern wir jetzt um unsere 'image_description':

    Code: PHP  [Auswählen]
    //get data & write to table
    $mo_img = array ('products_id' => xtc_db_prepare_input($products_id), 'image_nr' => xtc_db_prepare_input($img +1), 'image_name' => xtc_db_prepare_input($products_image_name), 'image_description' => xtc_db_prepare_input($products_data['products_image_description'.$img]));
    nun werden die Texte für die Bildbeschreibungen auch abgespeichert. Allerdings nur, wenn auch gleichzeitig ein Bild hochgeladen wird. Nachträglich lassen sich die Bildunterschriften bis jetzt also noch nicht ändern. Wer eine Lösung zu dem Problem hat, bekommt ein Sternchen ins Muttiheft  ;)

    Wenn beim Duplizieren des Artikels auch die Bildunterschriften kopiert werden sollen  muss weiter unten in der categories.php noch eine Änderung vorgenommen werden (ca. Zeile 882)

    Code: PHP  [Auswählen]
    xtc_db_query("INSERT INTO ".TABLE_PRODUCTS_IMAGES." ...
    hier fügen wir noch hinter

    Code: PHP  [Auswählen]
    image_nr    = '".$mo_img['image_nr']."',
    folgendes ein:

    Code: PHP  [Auswählen]
    image_description    = '".$mo_img['image_description']."',
    Schritt 4: Smarty-Variablen anlegen
    in der Datei includes/modules/product_info.php ungefähr bei Zeile 160 finden wir eine Schleife

    Code: PHP  [Auswählen]
    foreach ($mo_images as $img) { ...
    die sieht bei mir nach anlegen der 'PRODUCTS_IMAGE_DESCRIPTION' smarties so aus:

    Code: PHP  [Auswählen]
    foreach ($mo_images as $img) {
            $more_images_data[] = array ('PRODUCTS_IMAGE' => DIR_WS_INFO_IMAGES.$img['image_name'],
                                         'PRODUCTS_POPUP_LINK' => 'javascript:popupWindow(\''.xtc_href_link(FILENAME_POPUP_IMAGE, 'pID='.$product->data['products_id'].$connector.'imgID='.$img['image_nr']).'\')',
                                         'PRODUCTS_IMAGE_DESCRIPTION' => $img['image_description']
                                                                                             );
            // BOF - Tomcraft - 2009-09-12 - needed for non modified templates
            $mo_img = DIR_WS_INFO_IMAGES.$img['image_name'];
            $info_smarty->assign('PRODUCTS_IMAGE_'.$img['image_nr'], $mo_img);
            $info_smarty->assign('PRODUCTS_POPUP_LINK_'.$img['image_nr'], 'javascript:popupWindow(\''.xtc_href_link(FILENAME_POPUP_IMAGE, 'pID='.$product->data['products_id'].$connector.'imgID='.$img['image_nr']).'\')');
            $info_smarty->assign('PRODUCTS_IMAGE_DESCRIPTION'.$img['image_nr'], $img['image_description']);
            // EOF - Tomcraft - 2009-09-12 - needed for non modified templates
    }
     
    Schritt 5: Bildunterschriften im Frontend ausgeben
    in meiner product_info_v1.html sieht das jetzt ungefähr so aus:

    Code: PHP  [Auswählen]
    {foreach item=more_images_data from=$more_images}
            <div>{$more_images_data.PRODUCTS_IMAGE_DESCRIPTION}</div>
            <a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"original_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
    {/foreach}
    Hier ein Screenshot vom Frontend:
    [ Für Gäste sind keine Dateianhänge sichtbar ]

    So.. die Anleitung ist jetzt glaub ich noch etwas unübersichtlich. Sobald das Ändern des Bildunterschrift-Textes noch funktioniert und ich ausgiebig getestet habe, schreibe ich nochmal eine schön übersichtliche und ausführlichere Anleitung.

    jeanluc

    • Fördermitglied
    • Beiträge: 23
    Hallo Torsten,

    Danke fürs Aufarbeiten und verschieben.

    Die erste Anleitung ist übrigens nicht unbedingt veraltet. Mit der ersten Anleitung kann man für das erste Artikelbild Bildunterschriften hinzufügen und mit der zweiten Anleitung das Selbe dann für die weiteren Artikelbilder.

    Man muss/sollte also beide Anleitungen abarbeiten. Aber ich werde wie gesagt wenn alles funktioniert nochmal eine zusammengefasste Anleitung bringen.

    Grüße
    Stefan

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Ich habe die "EDITs" nochmal editiert. ;-)

    Grüße

    Torsten

    Papi.Sanchez

    • Frisch an Board
    • Beiträge: 90
    Hallo zusammen,

    @ jeanluc: Hast du breits Zeit gehabt, die Anleitung zusammenzufassen?
    Ich bekomme das so nicht hin...
    Aber es ist genau die Funktion die mehr fehlt. Das wäre wirklich klasse.
    Das sollte bei mir dann in der product_info_tabs_v1.html laufen.

    @ all: Ich bitte um Unterstützung. Kann mir vielleicht jemand die fertigen Dateien (original modified eCommerce Shopsoftware-1.05 inkl. veränderter Code) hochladen?

    Danke.

    Papi.Sanchez

    • Frisch an Board
    • Beiträge: 90
    Ich noch mal ;-)
    Der Mod für zusätzliche Produktbilder funktioniert.
    Alerdings wird die Ausgabe der Texte nicht über oder unter dem dazugehörigen Bild angezeigt.
    Die Texte sind ganz rechts zu sehen.
    Woran könnte das liegen?

    Code: PHP  [Auswählen]
    {if $more_images|@count> 0}
    <!-- More Pictures -->
    <div class="morepics">
    {foreach item=more_images_data from=$more_images}
            <a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"original_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
    {/foreach}
    </div>
    <div style="clear:both;"></div>
    {/if}
     
    [ Für Gäste sind keine Dateianhänge sichtbar ]

    Tomcraft

    • modified Team
    • Gravatar
    • Beiträge: 46.369
    • Geschlecht:
    Da müsstest du das Element mal mit Firebug untersuchen und schauen, wie es formatiert ist: FAQ: Liste wichtiger Freeware- & OpenSource-Programme für die Shop-Erstellung

    Oder du gibst uns einen Link zum Shop. :hust: :whistle:

    Grüße

    Torsten

    Papi.Sanchez

    • Frisch an Board
    • Beiträge: 90
    Würde ich ja gerne - läuft aber nur unter XAMPP localhost.

    Wenn ich es in Tabellen füge, erhalte ich zwar die gewünschte Platzierung. Leider wird aber immer nur ein Bild pro Zeile angezeigt. Ich hätte je nach Platz gerne alle nebeneinander.

    Code: PHP  [Auswählen]
    <!-- More Pictures -->
    <div class="morepics">
    {foreach item=more_images_data from=$more_images}
    <table>
            <tr>
                    <td align="center">{$more_images_data.PRODUCTS_IMAGE_DESCRIPTION}</td>
            </tr>
            <tr>
                    <td><a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"original_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a></td>
            </tr>
    </table>
    {/foreach}
    </div>
    <div style="clear:both;"></div>
    {/if}
     
    [ Für Gäste sind keine Dateianhänge sichtbar ]

    jeanluc

    • Fördermitglied
    • Beiträge: 23
    ANLEITUNG: Artikelbilder mit Bildunterschriften / Bildbeschreibungen
    Antwort #10 am: 20. November 2010, 21:34:05
    Hallo Papi.Sanchez!

    Ich freue mich sehr, dass du die Erweiterung hilfreich findest. Nochmal der Hinweis: So wie ich das eingebaut hab, kann man die Bildunterschrift nur eingeben, wenn gleichzeitig das Bild hochgeladen wird. Das Ändern der Bildunterschrift im Backend geht dann also nur, wenn man gleichzeitig nochmal das Bild hochlädt.

    Leider hatte ich bisher noch nicht die Zeit mich mit der Funktion weiter zu beschäftigen und deshalb noch keine aktualisierte Anleitung geschrieben. Aber wie es aussieht konntest du es ja soweit schonmal implementieren.

    Ich hau mich jetzt erstmal aufs Ohr und helfe dir aber gerne morgen weiter mit deinem Formatierungsproblem. Das Frontend sollte kein großes Problem darstellen. Das bekommen wir schon auch noch hin! ;)

    Also bis morgen!
    Stefan

    Papi.Sanchez

    • Frisch an Board
    • Beiträge: 90
    ANLEITUNG: Artikelbilder mit Bildunterschriften / Bildbeschreibungen
    Antwort #11 am: 21. November 2010, 02:16:51
    Das wäre ja klasse. Das ist derzeit noch der letzte Grund, warum ich nicht auf modified eCommerce Shopsoftware wechseln kann. Die Farben bei den zusätzlichen Bildern eines Produktes sind für meine Kunden essentiell und müssen sofort sichtbar sein.
    Ich freue mich auf "gute Nachrichten" von dir. ;-)

    Papi.Sanchez

    • Frisch an Board
    • Beiträge: 90
    ANLEITUNG: Artikelbilder mit Bildunterschriften / Bildbeschreibungen
    Antwort #12 am: 21. November 2010, 17:46:24
    ... Das Frontend sollte kein großes Problem darstellen. Das bekommen wir schon auch noch hin! ;)

    Also bis morgen!
    Stefan

    Hey jeanluc, hast du wegen der Formatierung noch etwas herausbekommen?

    jeanluc

    • Fördermitglied
    • Beiträge: 23
    ANLEITUNG: Artikelbilder mit Bildunterschriften / Bildbeschreibungen
    Antwort #13 am: 21. November 2010, 22:15:38
    Hi!

    Ich habs jetzt nicht ausprobiert aber probier mal so:

    Code: PHP  [Auswählen]
    <!-- More Pictures -->
    <div class="morepics">
    {foreach item=more_images_data from=$more_images}
    <div class="Bild_und_Bildunterschrift">
        <p>{$more_images_data.PRODUCTS_IMAGE_DESCRIPTION}</p>
        <a class="thickbox" rel="{$PRODUCTS_ID}" title="{$PRODUCTS_NAME}" href="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"popup_images"}"><img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>
    </div>
    {/foreach}
    </div>
    <div style="clear:both;"></div>
    {/if}
    Die css-Klasse "Bild_und_Bildunterschrift" kannst du natürlich anders nennen und dann gibst du in der css-Datei für diese Klasse die Eigenschaft float:left an. Damit sollten dann alle Bilder nebeneinander ausgegeben werden.

    Dein Problem ist ja kein funktionelles, sondern ein reines Formatierungsproblem, insofern schaffen wir das bestimmt es zu beheben, ansonsten solltest du mal jemanden draufschauen lassen, der Ahnung von Weblayout mit CSS hat. Der macht das im Handumdrehen.

    Papi.Sanchez

    • Frisch an Board
    • Beiträge: 90
    ANLEITUNG: Artikelbilder mit Bildunterschriften / Bildbeschreibungen
    Antwort #14 am: 22. November 2010, 09:52:30
    Hallo,

    arbeite ich ohne Tabellen, werden alle Bilder auch ohne CSS Anpassung nebeneinander ausgegeben. Nur der Text erscheint ganz rechts (siehe mein erstes Bild).
    Verwende ich Tabellen, wird der Text gezwungener Weise über dad Bild dargestellt (siehe mein zweites Bild).
    Verwende ich deine CSS-Anpassung (ohne Tabellen), erscheint der Text wieder rechts (wie erstes Bild).

    Hmm...

    Kann mir bitte jemand helfen, der sich in Sachen CSS oder Formatierung meines Problems auskennt?
    Ich habe keine Idee mehr, wie ich alle Bilder nebeneinander und den Text aber über (oder unter) dem jeweiligen Bild ausgeben kann.

    Danke sehr.

    0 Antworten
    2290 Aufrufe
    19. Oktober 2013, 13:52:41 von jeff1980
    26 Antworten
    14804 Aufrufe
    24. Januar 2016, 22:24:58 von JPW
               
    anything