moziloCMS Supportforum

moziloCMS => Ich wünsche mir... => Thema gestartet von: Thorstn am 03. August 2016, 00:13:41

Titel: searchicon PNG
Beitrag von: Thorstn am 03. August 2016, 00:13:41
Standardmäßig ist für das Searchicon (Symbol) die GIF-Datei (searchicon.gif) in moziloCMS vorgesehen. Für grafisch anspruchsvollere Symbole würde die (zusätzliche) Definition PNG als Format sehr viel Sinn machen.

Bisher behelfe ich mir mit einem Eingriff in das CMS-System, was dauerhaft (bei Updates) mühselig ist.

Kurz und gut: ist es möglich, .PNG Grafiken - als Alternative zur .GIF Grafik - im Layout-Ordner als das Standard-Symbol zu packen und dass es vom moziloCMS verarbeitet wird?

Gruß,
Thorsten
Titel: Re: searchicon PNG
Beitrag von: djr am 03. August 2016, 18:17:07
@Thorstn: Hilf Dir doch per CSS.


/* Skizze */
#searchfieldset {
    position: relative;
    overflow: hidden;
}
input.searchbutton {
    position: absolute;
    padding-left: 999px;
    background-image: url("/pfad/zur/grafik.png");
    background-repeat: no-repeat;
}


Warum auch immer mozilo hier ein <input type="image" ... benutzt?!?
Titel: Re: searchicon PNG
Beitrag von: Aggi am 05. August 2016, 16:56:07
Hei,

öffne die SearchClass.php bei Zeile 264 searchicon.gif auf .png ändern und bei Zeile 288 auch ändern.
Titel: Re: searchicon PNG
Beitrag von: djr am 05. August 2016, 17:06:11
Zitat von: Aggi am 05. August 2016, 16:56:07
Hei,

öffne die SearchClass.php bei Zeile 264 searchicon.gif auf .png ändern und bei Zeile 288 auch ändern.
Zitat von: Thorstn am 03. August 2016, 00:13:41
Bisher behelfe ich mir mit einem Eingriff in das CMS-System, was dauerhaft (bei Updates) mühselig ist.
Titel: Re: searchicon PNG
Beitrag von: Thorstn am 09. August 2016, 22:51:25
Danke für den Tipp, Aggi, aber wie djr bereits richtig zitiert hat, behelfe ich mir mit genau dieser Maßnahme (Eingriff in die SearchClass.php)  ;)

Dauerhaft wäre es besser, wenn das CMS sowohl .gif als auch .png von Hause aus berücksichtigen würde. Eine Lösung könnte sein, dass das CMS (zwar) nach beiden Formaten "sucht", aber nur das nimmt, welches im /grafik Ordner des Layouts hinterlegt ist. Der/die Layouter werden sich dann (zukünftig) an ein einziges Format halten, schätzungsweise der .png Datei. Oder anders ausgedrückt: es darf nur ein einziges searchicon Symbol im Layouts-Ordner vorhanden sein, .gif oder .png

Wäre super, wenn das (dauerhaft) möglich wäre  :)
Titel: Re: searchicon PNG
Beitrag von: djr am 12. August 2016, 21:47:29
Zitat von: Thorstn am 09. August 2016, 22:51:25
Dauerhaft wäre es besser, wenn das CMS sowohl .gif als auch .png von Hause aus berücksichtigen würde.
... und .jpg und .svg und font-icons. ;)

Der Fehler ist, dass hier von mozilo ein <input type="image"...> statt eines button gesetzt wird.
Ein type="image" hat an dieser Stelle keine direkte Funktion (d.h. die übergebenen x-y-Koordinaten werden nicht genutzt).
Und für die Gestaltung ist CSS und nicht HTML zuständig.

@Thorstn: probier' es mit CSS.

Wichtig hierbei ist:

Bei Fragen: fragen.
Titel: Re: searchicon PNG
Beitrag von: Thorstn am 14. August 2016, 20:53:48
Danke @ djr, ich probiere das mal aus mit CSS  ;)
Titel: Antw:searchicon PNG
Beitrag von: marusti am 18. Februar 2023, 21:32:05
Ist zwar schon etwas länger her aber falls es noch aktuell ist, könnte man sowas in der Art machen und in die nächste Version als Standard einbauen. Vielleicht kann man auch noch etwas mehr machen, zb. wenn kein Icon vorhanden den HTML Tag ändern und auf Button könnte man vielleicht auch gleich umstellen.
SearchClass.php ab Zeile 259 ersetzen
function getSearchForm() {
        global $language, $LAYOUT_DIR, $LAYOUT_DIR_URL, $CatPage, $SEARCH_REQUEST;
        $search_icon= glob($LAYOUT_DIR.'/grafiken/searchicon.*');
        $draft = '';
        if(DRAFT)
            $draft = '<input type="hidden" name="draft" value="true" />';
        $query = str_replace(array('"',"'","[","]","{","}"),array("&quot;","&apos;","&#091;","&#093;","&#123;","&#125;"),trim(rawurldecode($SEARCH_REQUEST)));
        return '<form accept-charset="'.CHARSET.'" method="get" action="'.$CatPage->get_Href(false,false).'" class="searchform">'
                .'<fieldset id="searchfieldset">'
                .$draft
                .'<input type="hidden" name="action" value="search" />'
                .'<input type="text" name="search" value="'.$query.'" class="searchtextfield" />'
                .'<input type="image" src="'.$search_icon[0].'" alt="'.$language->getLanguageHtml("message_search_0").'" class="searchbutton" />'
                .'</fieldset>'
                .'</form>';
    }
Funktioniert mit folgenden Einschränkungen: Icon muss als Bilddatei vorhanden sein (keine Webfonts) und wenn mehrere mit dem Namen "searchicon" vorhanden sind, wird das erste genommen (Alpabetisch der Dateiendung nach(
Titel: Antw:searchicon PNG
Beitrag von: marusti am 19. Februar 2023, 11:18:00
oder ganz anders um es optisch noch ein bisschen aufzuwerten
    function getSearchForm() {
        global $language, $CatPage, $SEARCH_REQUEST;
        $draft = '';
        if(DRAFT)
            $draft = '<input type="hidden" name="draft" value="true" />';
        $query = str_replace(array('"',"'","[","]","{","}"),array("&quot;","&apos;","&#091;","&#093;","&#123;","&#125;"),trim(rawurldecode($SEARCH_REQUEST)));
        return '<form accept-charset="'.CHARSET.'" method="get" action="'.$CatPage->get_Href(false,false).'" class="searchform">'
                .$draft
                .'<input type="hidden" name="action" value="search" />'
                .'<input class="searchtextfield" type="text" name="search" value="">'
                .'</form>';
    }
und dann CSS als Beispiel
.searchtextfield{
border: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23838D99' d='M13.22 14.63a8 8 0 1 1 1.41-1.41l4.29 4.29a1 1 0 1 1-1.41 1.41l-4.29-4.29zm-.66-2.07a6 6 0 1 0-8.49-8.49 6 6 0 0 0 8.49 8.49z'></path></svg>");
background-repeat: no-repeat;
background-position: 10px 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
border-radius: 5px;
padding: .5em 1em .5em 2.5em
}
Das Icon kann dann innerhalb der CSS geändert werden über "background-image" (kann auch eine normale Bilddatei sein) und auch die Position über "background-position".
Titel: Antw:searchicon PNG
Beitrag von: hheigl am 23. Februar 2023, 09:25:56
Gute Idee!  Ich würde vorschlagen, dies in die nächste Rev. einzubauen!