Példaként a CKEditor ingyenes HTML kód szerkesztőt vizsgáltam meg, de természetesen a TinyMce és más alkalmazások is szóba kerülhetnek, mivel a következő lényeges hiányossággal találkozhatunk. Nincs képfeltöltő, illetve a képek megjelenítése az adminisztrációs oldalon „sántit”. Igényesebb felhasználás esetén jó lenne az images mappa tartalmát áttekinthetőbben látni, esetleg operációs szintű fájlkezelést megvalósítani. Gondolok itt a képek másolására, átnevezésére, áthelyezésére, könyvtárak manipulására, listázásokra és a többi olyan funkcióra, ami egy személyi számítógépen magától értetődik. Az itt leírtak iránymutatásként szolgálnak, azok alkalmazása nem kötelező érvényű. Így tegyen mindenki belátása szerint.

Előzetes javaslatok

1. Személy szerint nem javallom a direkt elérési útvonalak alkalmazását a „raltive path”-t „http://ezazendomanem.hu/images/kep.jpg”, hanem helyette a bevált rövid (abszolút főoldalast) a „/images/kep.jpg” alkalmaznám, mert esetleg könnyen lehet költöztetni az oldalt másik hostingra.

2. Találtam egy kcfinder megoldást. A telepítése során a catalog/usefiles mappára kell hivatkozni a config.php-jában és a képmegjelenítés is kifogástalan lesz a CKEditorban.

Kérdés: de hogyan lehet a /userfiles könyvtárat a számunkra szimpatikusabb /images-re változtatni?

Válasz: a kérdés alkalmazás függő programozást igényel.

3. A képfeltöltéshez javaslom annak, aki jártas már php kódok készítésében, az néhány perc alatt átírhatja az oscommerce v2.3.1 catalog/admin/store_logo.php fájlt egy komoly kis képfeltöltő alkalmazássá, ötvözve a fájl managerrel, illetve használhatunk számtalan ingyenes képfeltöltő php scriptet is.
A képfeltöltés könyvtárát előre a scriptben meg szoktam határozni, így amikor hivatkozom a html editor képlinkjében, akkor csak ennyi a dolgom: „/userfiles/eloremeghatarozott_utvonal/image.jpg”.

4. Szándékosan nem használok ékezetes fáj neveket, bár már átírtam a upload class-t a magyar ékezetek elkerülése érdekében. Ha magyar ékezetes fájlokat töltünk fel, akkor azok nem törölhetők és nem nevezhetőek át egyes linux apache szervereken.

5. Tartsuk szem előtt a képkeresési szokásokat. Ne nevezzük át gyakran képeinket, mivel a webes keresők ezeket is indexelik és olykor hatékonyabban kereshetünk képekkel, mint szöveges tartalommal. Célszerű a fájlneveket a SEO szempontjainak megfelelően kialakítani.

Beállítások

Oscommerce fájlfeltöltés

Az upload class-ban elhelyeztem egy új funkciót:

{code lang:php title:”upload” lines:true hidden:false alias:}function get_file_name() {
return $this–>file[‘name’];
}{/code}

A képfeltöltésben pedig ezt alkalmazom, de persze lehetne más enkódolás is:

{code lang:php title:”funkció” lines:false hidden:true alias:}if ($upload_picture–>parse()) {

$upload_picture–>set_filename(urlencode($upload_picture–>get_file_name())); //preventing linux file handling errors
.
.
.
}{/code}

A userfiles mappa beállítása egyszerűbben kcfindernél

ckeditor config.js

egészítsük ki a fájlt:

{code lang:javascript title:”config” lines:false hidden:true alias:}CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = ‘fr’;
// config.uiColor = ‘#AADC6E’;
config.filebrowserBrowseUrl = ‘ext/kcfinder/browse.php?type=file‘;
config.filebrowserImageBrowseUrl = ‘ext/kcfinder/browse.php?type=image’;
config.filebrowserFlashBrowseUrl = ‘ext/kcfinder/browse.php?type=flash’;
config.filebrowserUploadUrl = ‘ext/kcfinder/upload.php?type=file‘;
config.filebrowserImageUploadUrl = ‘ext/kcfinder/upload.php?type=image’;
config.filebrowserFlashUploadUrl = ‘ext/kcfinder/upload.php?type=flash’;
};{/code}

A beállítási sorokban az „=image” illetve a „=file” a kcfinder config.php-ja szerinti types-t használja. Az útvonalra figyeljünk, ami a telepítésünktől függ.

kcfinder config.php-ban is állítunk.

{code lang:javascript title:”config2″ lines:false hidden:true alias:}// CKEditor & FCKEditor types
‘file‘ => „”,
‘flash’ => „swf”,
‘image’ => „*img”,{/code}

A file lehet files az image lehet images illetve akármi. A hatása a „catalog” mappában létrejövő mappanevekre vonatkozik.

Összefoglalás

A tapasztalatok arra sarkallottak, hogy a userfiles mappa illetve egy teljesen egyedi mapparendszer kihagyása érdekében minél szorosabban kötődjek az oscommerce fájlrendszeréhez. A szabványosítás jobban elősegíti más alkalmazások integrálását és nem okoz jövőben fölösleges fejtörést.

Egyszerűbb megoldás

Telepítsünk már létező bővítményt az oscommerce bővítményei közül. Mire átállítottam az alapjaiban v2.2-re készült alkalmazást v2.3.1-re ráment egy nap, de már működik és teljesen megérte. Az images könyvtár a feltöltés könyvtára lett. Hurrá! És milyen jó mivel abszolút és relatív elérési útvonalakkal is lehet dolgozni. Mivel a PDW File Browser v1.3 beta alkalmazás más módon is használható és nem csak a cKEditor, hanem a TinyMce részére is elérhető itt élőben is kipróbálhatjuk: http://www.neele.name

Kép cache tippek

A böngészés gyorsítása érdekében be szoktuk állítani a html headerben, hogy a képek a böngésző gyorsítótárában mennyi ideig őrződjenek frissítés nélkül. Igen ám de van úgy, hogy egyes képeket, mint pl a captcha kódkép szeretnénk néha frissíteni, de nem a böngészővel, hanem mondjuk egy frissít gombbal. A htaccess fájlban alkalmazott leggyakoribb korlátozást egy kis trükk segítségével tudjuk feloldani.

{code lang:php title:”htaccess1″ lines:false hidden:true alias:}# egy het
<FilesMatch „.(gif|jpe?g|png)$”>
Header set Cache–Control „max–age=604800″
</FilesMatch>{/code}

A fenti kódrészletben a 4 fő kiterjesztést gyorsító tárazzuk (gif,jpeg,jpg és png). Ha figyelembe vesszük, hogy a jpg és a jpeg kiterjesztés fizikailag azonos képtípust tartalmaz, akkor kihasználhatjuk a különbséget. Ha a captcha kódkép jpeg kiterjesztést használ, akkor nem kerül gyorsítótárba. Javaslom minden hasonló frissítés igényű képnél a lenti beállítást.

{code lang:php title:”htaccess2″ lines:false hidden:true alias:}# egy het a jpeg formatum direkt kihagyva a captcha miatt
<FilesMatch „.(gif|jpg|png)$”>
Header set Cache–Control „max–age=604800″
</FilesMatch>{/code}

Remélem az összegyűjtött tapasztalat mások segítségére is szolgál.