Képek ALT címkéje vs zoom funkció

[dienesdavid]

Sziasztok!

 

A mi Prestashop verziónkban (1.4.7.3) a product oldalakon a fotók ALT tag-jében a nagykép URL-je szerepel. Ha jól látom, akkor a zoom funkció érdekében van így.

 

Ez keresőoptimalizáció szempontjából nem szerencsés, hiszen a keresők szeretik, ha az ALT cimkében pár szavas leírás szerepel a képről (illetve a termékről).

 

Kérdés, hogy hogyan lehet ezt úgy átalakítani, hogy az ALT-ban a admin oldalon (product/iamges) meghatározott szöveg látszódjön, de közben a zoom (és klikk) funkció továbbra is működjön?

 

Úgy látom, hogy a kiskép és nagykép URL között csak egy string különbség van ("large” vs „thickbox"), tehát elvileg a zoom és klikk funkciók egy string cserével a SRC-beli URL-t is felhasználhatnák...

 

Pl. http://www.decoregalo.com/87-cesta-de-mimbre.html

 

img src="http://www.decoregalo.com/87-146-large/cesta-de-mimbre.jpg" class="jqzoom" alt="http://www.decoregalo.com/87-146-thickbox/cesta-de-mimbre.jpg" id="bigpic" width="300" height="300"

 

Köszönöm,

Dávid

[pattila01]

themes/tetemad/product.tpl, ~150. sor:

<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}"
{if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else}...

 

Természetesen az alt tagot kell megváltoztatni ahogyan Te is mondtad mondjuk a termék nevére:

alt="{$product->name|escape:'htmlall':'UTF-8'}"

 

Ettől még a kinagyítás működni fog, de próbáld ki, Te nem az alap témát használod.

Tudom, hogy nem a termék nevét szántad ide, de pontosan leírod hogy mit is szerettél volna? Egy példán keresztül mutasd be kérlek mit is akarsz az alt-on látni.

Edited May 29, 2013 by pattila01 (see edit history)

[dienesdavid]

Szia Attila!

 

Úgy gondolom, hogy ennek a szövegnek kéne megjelennie az ALT-ban: http://www.dienes.hu/download/1.jpg

 

Szerinted mit kéne írnom az alt="..." helyére a tpl-ben?

 

Köszi,

Dávid

[pattila01]

ezt:

alt="{$image.legend|htmlspecialchars}"

a 150. sor blokkjában kétszer is szerepel az alt tag (else után is van egy) mindkettőnél módosítsd le, majd (force compile legyen bekapcsolva) nézzük meg működik-e.

Edited May 29, 2013 by pattila01 (see edit history)

[dienesdavid]

Módosítottam, de nem világos, hogy honnan veszi szöveget.

 

img src="http://www.decoregalo.com/87-146-large/cesta-de-mimbre.jpg" class="jqzoom" alt="cesta de mimbre" id="bigpic" width="300" height="300"

 

"cesta de mimbre" - ilyen szöveg nincs megadva az admin felületen. Hanem ilyen van: "Cesta de mimbre SP" (angolhoz is írtam a próba kedvéért "Cesta de mimbre EN"). Ugyanez az ismeretlen szöveg jelenik meg a felugró kép alatt klikk után.

 

 

A zoom funkció viszont elromlott, gondolom az ALT-ban keresi a nagyképet. Talán valamelyik js fájlban is módosítani kéne? (pl. \témám\product.js, \js\jquery\jquery.jqzoom.js)

 

 

Köszi

[dienesdavid]

Az ismeretlen felirat megvan. Rájöttem, hogy alul kell klikkelni, hogy előjöjjön, és módosítani tudjam.

http://kepfeltoltes.hu/view/130529/32370142123_www.kepfeltoltes.hu_.jpg

 

Akkor már csak a zoom funkció szorul javításra...

[dienesdavid]

Úgy tűnik a zoom funkciót is sikerült javítanom. A js/jquery/jquery.jqzoom.js -ben kell az alábbi módosítás:

 

//noalt = $(this).attr("alt");

noalt = $(this).attr("src").replace('large','thickbox');

 

Gondolom nem szerencsés a gyári js-ben turkálni...

[pattila01]

Bocsi, kicsit kihagytam.

Akkor most minden megy? Minden működik ami kell?

[dienesdavid]

Igen, látszólag jó, de ami nem értek: a Chrome jobb klikk/Elem megtekintése funkció még mindig a linket látja az ALT-ban, holott az oldal forrásában már a megnevezés olvasható. Kép itt: http://kepfeltoltes.hu/130531/chrome_www.kepfeltoltes.hu_.jpg

 

A javascript tréfál velünk?

 

Köszi

[pattila01]

Érdekes. Cashe-t ürítettél böngészőben? Valamint a force compile be van kapcsolva? CCC/KTC beállítás alaphelyzetben vannak?

[dienesdavid]

Ürítettem böngészőben, töröltem a smarty cache fileokat, force compile is be volt kapcsolva egy ideig:

 

http://kepfeltoltes.hu/130531/33344_www.kepfeltoltes.hu_.jpg (ezek a beállítások rendben vannak?)

 

A lényeg ami az oldal forrásában van, gondolom a keresők is ezt látják... szóval nem annyira égető, hanem inkább csak furcsa.

[pattila01]

A CCC-nél mindent állítsd default-ra.

Tehát a legelső: Smart cashe for css => kapcsold az alsóra (keep css as original) és tedd ezt a többivel is ami alatta van.

Ha elmentetted nézd meg újból.

[dienesdavid]

Átállítottam mindent az alsóra de ettől nem láttam változást. Maradjon a default-okon, mi a célszerűbb?

 

A jquery.jqzoom.js -ben kommenteltem ki még két dolgot (lásd zöld részek). Itt módosítgatta az ALT értékét ahogy a kép fölé vittem az egeret. Most már nem piszkálja az ALT-ot többé...

 

(function($) {

$.fn.jqueryzoom = function(options) {

var settings = {

xzoom: 200, //zoomed width default width

yzoom: 200, //zoomed div default width

offset: 10, //zoomed div default offset

position: "right" //zoomed div default position,offset position is to the right of the image

};

if(options)

$.extend(settings, options);

var noalt ='';

$(this).hover(function() {

var imageLeft = $(this).get(0).offsetLeft;

var imageTop = $(this).get(0).offsetTop;

var imageWidth = $(this).get(0).offsetWidth;

var imageHeight = $(this).get(0).offsetHeight;

//Dávid módosítás:

//noalt = $(this).attr("alt");

noalt = $(this).attr("src").replace('large','thickbox');

 

var bigimage = noalt;

//Dávid komment:

//$(this).attr("alt", '');

if($("div.zoomdiv").get().length == 0)

$(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");

if(settings.position == "right")

leftpos = imageLeft + imageWidth + settings.offset;

else

leftpos = imageLeft - settings.xzoom - settings.offset;

$("div.zoomdiv").css({top: imageTop,left: leftpos});

$("div.zoomdiv").width(settings.xzoom);

$("div.zoomdiv").height(settings.yzoom);

$("div.zoomdiv").show();

$(document.body).mousemove(function(e) {

var bigwidth = $(".bigimg").get(0).offsetWidth;

var bigheight = $(".bigimg").get(0).offsetHeight;

var scaley ='x';

var scalex= 'y';

if(isNaN(scalex)|isNaN(scaley)) {

var scalex = Math.round(bigwidth/imageWidth) ;

var scaley = Math.round(bigheight/imageHeight);

}

mouse = new MouseEvent(e);

scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;

$("div.zoomdiv").get(0).scrollTop = scrolly * scaley ;

scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;

$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;

});

}, function() {

//Dávid komment:

//$(this).attr("alt", noalt);

$("div.zoomdiv").hide();

$(document.body).unbind("mousemove");

$(".lenszoom").remove();

$("div.zoomdiv").remove();

});

}

})(jQuery);