Wie Breite und Höhe fürs Logo anpassen?

Theostat · May 8, 2017, 1:34am

Ich verwende das Theme Flow.
Mein eigenes Logo konnte ich leicht einbinden.
Dieses soll jedoch ein paar Pixel breiter und höher sein.
Die beschriebene Datei _header.tpl kann ich nirgendwo finden.
Stattdessen jedoch die Datei header .tpl.
Ich nehme an das die folgenden Zeilen für das Logo zuständig sind:

                    [{block name="layout_header_logo"}]
                        [{assign var="slogoImg" value=$oViewConf-&gt;getViewThemeParam('sLogoFile')}]
                        [{assign var="sLogoWidth" value=$oViewConf-&gt;getViewThemeParam('sLogoWidth')}]
                        [{assign var="sLogoHeight" value=$oViewConf-&gt;getViewThemeParam('sLogoHeight')}]
                        &lt;a href="[{$oViewConf-&gt;getHomeLink()}]" title="[{$oxcmp_shop-&gt;oxshops__oxtitleprefix-&gt;value}]"&gt;
                            &lt;img src="[{$oViewConf-&gt;getImageUrl($slogoImg)}]" alt="[{$oxcmp_shop-&gt;oxshops__oxtitleprefix-&gt;value}]" style="[{if $sLogoWidth}]width:auto;max-width:[{$sLogoWidth}]px;[{/if}][{if $sLogoHeight}]height:auto;max-height:[{$sLogoHeight}]px;[{/if}]"&gt;
                        &lt;/a&gt;
                    [{/block}]

Das Logo wird auf 161 x 38 Pixel herunterskaliert.
Wo kann ich diese beiden Werte verändern?
Vorab vielen Dank für die Hilfe.

vanilla_thunder · May 8, 2017, 1:51am

Admin -> Erweiterungen -> Themes -> Flow -> Einstellungen -> Logo

Theostat · May 8, 2017, 9:37am

Vielen Dank für die Information.
Ne! Was hatte ich da doch ein Brett vor dem Kopf gehabt, wie habe ich mich da verlaufen.

vanilla_thunder · May 8, 2017, 10:02am

OXID Backend ist nicht gerade übersichtlich, was die Unterbringung diverser Einstellungen angeht (gibts auch eher selten, ist ein relativ frisches Feature)
Allerdings kann man an diesem Code erkennen, dass es so eine Einstellung geben sollte:

$oViewConf->getViewThemeParam('irgendwas')

Funktion getViewThemeParam ruft eine Theme Einstellung ab.

Kristinius · January 9, 2020, 9:49pm

Hallo, ich habe ein Frage zum Logo. Das Logo soll breiter als bsp. 200 Pixel sein. Bsp 600 Pixel, da das Logo einfach etwas größer ist.
Im Tablet und am Laptop wird das Logo in der 600 Pixel Breite komplett dargestellt.
Auf nem Smartphone sehe ich nur einen Teil des Logos, da diese eigentlich zu groß ist. Ich muss dann zur Seite wischen um den Rest zu sehen. Das ist unschön.
Gibt es eine einfache Möglichkeit das Logo wie bsp. das Banner an die Breite des Bildschirms anzupassen? So dass das Logo beim Smartphone automatisch von den 600 Pixel auf bsp. die 200 Pixel skaliert wird?

Seelauer · January 10, 2020, 10:02am

Bootstrap, in diesem Fall Vers 3 ?, könnte Dein Freund werden:
https://getbootstrap.com/docs/3.4/css/#images-responsive

rubbercut · January 10, 2020, 10:10am

Wir reden über Flow im Original?
Was passiert denn, wenn Du das Bild im Laptop auf Handygröße verkleinerst? Wenn das dann auch so aussieht, hast vielleicht nen zusätzlichen Media Query im CSS, der für die kleinen Breiten etwas anderes vorsieht als 100%. Etwas in der Form im Zusammenhang mit #header & logo

> @media (max-width:

Kristinius · January 10, 2020, 7:33pm

Moin,
Ja, shopversion 6.1.5 mit dem flow Template und der Child-Flow Version von eComStyle mit Bootstrap 3

Im Backend unter Erweiterungen Themes FLOW / Einstellungen kann ich die Pixel Größe des Logos einstellen.

Im Code unter Application/views/flow/tpl/layout in der header.tpl steht folgendes:
Das Logo taucht hier auf.

[{if $oViewConf->getTopActionClassName() != ‘clearcookies’ && $oViewConf->getTopActionClassName() != ‘mallstart’}]
[{oxid_include_widget cl=“oxwCookieNote” _parent=$oView->getClassName() nocookie=1}]
[{/if}]
[{block name=“header_main”}]
[{assign var=“blFullwidth” value=$oViewConf->getViewThemeParam(‘blFullwidthLayout’)}]

<header id="header">

    <div class="[{if $blFullwidth}]container[{else}]container-fluid[{/if}]">

        <div class="header-box">

            <div class="row">
                <div class="col-xs-5 col-sm-6 col-md-4 logo-col">
                    [{block name="layout_header_logo"}]
                        [{assign var="slogoImg" value=$oViewConf->getViewThemeParam('sLogoFile')}]
                        [{assign var="sLogoWidth" value=$oViewConf->getViewThemeParam('sLogoWidth')}]
                        [{assign var="sLogoHeight" value=$oViewConf->getViewThemeParam('sLogoHeight')}]
                        <a href="[{$oViewConf->getHomeLink()}]" title="[{$oxcmp_shop->oxshops__oxtitleprefix->value}]">
                            <img src="[{$oViewConf->getImageUrl($slogoImg)}]" alt="[{$oxcmp_shop->oxshops__oxtitleprefix->value}]" style="[{if $sLogoWidth}]width:auto;max-width:[{$sLogoWidth}]px;[{/if}][{if $sLogoHeight}]height:auto;max-height:[{$sLogoHeight}]px;[{/if}]">
                        </a>
                    [{/block}]
                </div>

Ich hoffe, ich habe die richtige Stelle gefunden. Ich bin Anfänger.
Am liebsten wäre mir, dass auf nem Tablet oder Laptop das Logo 260 pixel hoch und 600 pixel breit ist. Und im Smart Phone dann die maximale Bildschirmbreite nutzt.Sonst sieht das Logo auf dem Tablet/Laptop so mickrig aus.

Kann mir jemand sagen wie der Code dann aussehen müßte?

Meliphagidae · November 29, 2020, 8:55pm

Hallo, ich antworte bewußt auf diesen schon etwas älteren Thread, weil er nach der Suche am ehesten ein verwandtes Thema betrifft wie meines:
In 6.2.2 mit Wave-Theme und einem Logo, welches 642px breit und 116 pc hoch ist, paßt es auf dem PC gut, aber es “schrumpft” nicht bei kleineren Bildschirmen wie Smartphones. Es entseht entweder ein verschobenes oder - schlimmer - ein zuckendes Bild.
Der Code in …\source\Application\views\wave3R\tpl\layout (ja, Child von Wave, aber an dieser Stelle noch identisch mit wave) ist:

[{block name="header_main"}]
    [{assign var="blFullwidth" value=$oViewConf->getViewThemeParam('blFullwidthLayout')}]
<div class="[{if $blFullwidth}]container-fluid[{else}]container[{/if}]">
    <header id="header" class="header">
            <div class="header-box">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-4 order-lg-0 logo-col">
                            [{block name="layout_header_logo"}]
								[{assign var="slogoImg" value=$oViewConf->getViewThemeParam('sLogoFile')}]
                                [{assign var="sLogoWidth" value=$oViewConf->getViewThemeParam('sLogoWidth')}]
                                [{assign var="sLogoHeight" value=$oViewConf->getViewThemeParam('sLogoHeight')}]
							    <a href="[{$oViewConf->getHomeLink()}]" title="[{$oxcmp_shop->oxshops__oxtitleprefix->value}]" class="logo-link">
                                    <img src="[{$oViewConf->getImageUrl($slogoImg)}]" alt="[{$oxcmp_shop->oxshops__oxtitleprefix->value}]" style="[{if $sLogoWidth}]width:auto;max-width:[{$sLogoWidth}]px;[{/if}][{if $sLogoHeight}]height:auto;max-height:[{$sLogoHeight}]px;[{/if}]" class="logo-img">
                                </a>
                            [{/block}]
                        </div>
                        <div class="col-12 col-md-6 col-lg-4 order-lg-3 menus-col">
                            [{block name="layout_header_top"}]

Als Verdacht habe ich , dass die korrekte verfügbare Breite nicht ermittelt wird. Ob es was mit einem Ausnahmefehler in /out/wave3R/src/js/script.min.js zu tun haben kann? Bei Zeile 1715 der ausgelieferten Startseite kommt folgender Fehler :
“TypeError: $(…).oxFlyOutBox is not a function”.
Der Code an dieser Stelle lautet:
<script type="text/javascript" src="https://shop.com/out/wave3R/src/js/script.min.js?1596961674"></script><script type='text/javascript'>$( '#languageTrigger' ).oxFlyOutBox();</script>

Weil da languageTrigger erwähnt wird, ein Hinweis: es ist nur eine Sprache im Shop aktiv.
Ab da verstehe ich nichts mehr!! An welcher Stelle könnte ich als völlliges Newbie für Oxid, PHP, Javascript eine Lösung für beide - oder eines? - Probleme suchen??
Sachdienliche Hinweis erwünscht! Danke.

rubbercut · November 30, 2020, 11:07am

Den Fehler kann ich nicht nachstellen. Im Übrigen gehört oxFlyOutBox zu Azure und nicht zu Wave. Wird da ein altes Template umgebaut?

Meliphagidae · November 30, 2020, 5:35pm

Wie gesagft, ein Child von Wave. Die script.min.js im Child Verzeichis ist identisch mit der in Wave. In Chrome im formatierten Script steht ab Zeile 1294:

        <script>
        var oWave = oWave || [];
        oWave.i18n = {
            DD_FORM_VALIDATION_VALIDEMAIL: "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
            DD_FORM_VALIDATION_PASSWORDAGAIN: "Die Passwörter stimmen nicht überein.",
            DD_FORM_VALIDATION_NUMBER: "Bitte geben Sie eine Zahl ein.",
            DD_FORM_VALIDATION_INTEGER: "Es sind keine Nachkommastellen erlaubt.",
            DD_FORM_VALIDATION_POSITIVENUMBER: "Bitte geben Sie eine positive Zahl ein.",
            DD_FORM_VALIDATION_NEGATIVENUMBER: "Bitte geben Sie eine negative Zahl ein.",
            DD_FORM_VALIDATION_REQUIRED: "Bitte Wert angeben.",
            DD_FORM_VALIDATION_CHECKONE: "Bitte wählen Sie mindestens eine Option.",
            NAV_MORE: "Mehr"
        };
    </script>
    <script type="text/javascript" src="https://shop......com/out/wave3R/src/js/script.min.js?1596961674"></script>
    <script type='text/javascript'>
        $('#languageTrigger').oxFlyOutBox();
    </script>
    <script type="text/javascript">

Da sieht man am Anfang mehrere Hinweise auf Wave und ziemlich am Ende des Code-Ausschnitts einen auf oxFlyOutBox(). Ich habe es dort nicht hingeschrieben.

Vielleicht ein Bug?

rubbercut · November 30, 2020, 6:04pm

Was im Chrome-Quelltext steht, is irrelevant. Es gehört nicht dahin und wird sicher auch nicht angezeigt, wenn ihr den Shop auf das original Wave-Template umstellt.
Ergo: Fehler in eurem Childtemplate. Also Inhalte vergleichen und alles, was nicht dorthin gehört (Bsp: currencies.tpl, languages.tpl, servicebox.tpl) rausschmeißen.

Meliphagidae · November 30, 2020, 11:13pm

        <script>
        var oWave = oWave || [];
        oWave.i18n = {
            DD_FORM_VALIDATION_VALIDEMAIL: "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
            DD_FORM_VALIDATION_PASSWORDAGAIN: "Die Passwörter stimmen nicht überein.",
            DD_FORM_VALIDATION_NUMBER: "Bitte geben Sie eine Zahl ein.",
            DD_FORM_VALIDATION_INTEGER: "Es sind keine Nachkommastellen erlaubt.",
            DD_FORM_VALIDATION_POSITIVENUMBER: "Bitte geben Sie eine positive Zahl ein.",
            DD_FORM_VALIDATION_NEGATIVENUMBER: "Bitte geben Sie eine negative Zahl ein.",
            DD_FORM_VALIDATION_REQUIRED: "Bitte Wert angeben.",
            DD_FORM_VALIDATION_CHECKONE: "Bitte wählen Sie mindestens eine Option.",
            NAV_MORE: "Mehr"
        };
    </script>
    <script type="text/javascript" src="https://shop.....com/out/wave/src/js/script.min.js?1597179494"></script>
    <script type="text/javascript">
        var sBaseUrl = 'https://shop....com/index.php?';
        var sActCl = 'start';
    </script>

Aber dann nochmals zurück zum Wave-Child, tmp geleert und nochmals geschaut. Code ist wieder wie vorher, also mit oxFlyOutBox.
Dein Tip mit ausmisten beim Child war hilfreich , wie im echten Leben
Am Ende der Suchen, Vergleichen und Abwägungen blieb die \source\Application\views\wave3R\tpl\widget\header\language.tpl übrig. Da hattte ich tatsächlich mal auf Basis des Originals aus Azure meine Anpassungen gemacht. Tja, man lernt nie aus…
Leider ist nun zwar der oxFlyOutBox-Fehler weg, dafür aber andere da:
DOMException: Failed to execute 'querySelectorAll' on 'Element': '*,:x' is not a valid selector.
Und mein ursprüngliches Problem mit dem nicht schrumpfenden Logo auf Smartphones zeigt sich von all dem unbeeindruckt und stur. Leider. (Andermal geht’s weiter).

rubbercut · December 1, 2020, 12:58am

Nur Erfahrungswerte

Dann hast noch irgendwo nen Fehler, wo es um input-Felder geht (wahrscheinlich selectbox.tpl o.ä.). Es gibt doch genügend Vergleichsprogramme zur Kontrolle.

Kristinius · December 29, 2021, 5:25pm

Hallo, ist dieses Problem mit dem gewünscht schrumpfenden Logo auf dem Smartphone eigentlich gelöst worden? Ich habe mir zwar bisher alle Kommentare angeschaut, bin aber noch nicht so recht weiter gekommen.

Meliphagidae · December 30, 2021, 3:23pm

Hallo Kristinius,
ja, aber sorry, das WIE weiß ich nicht mit Sicherheit. Aber inzwischen ist das gewählte jpg-Logo 240x183 und nicht mehr wie im Thread erwähnt 642x116. Damit scheint es zu funktionieren und es war für mich vermutlich der einfachste Weg, das Problem zu umschiffen. Was anderes finde ich auch in meinen Notizen nicht.
Guten Rutsch!