Solución imágenes Front Office Prestashop 1.5.x en Internet Explorer

Muchos de vosotros estáis teniendo ciertos problemas con la última versión de Prestashop 1.5.3.1 e Internet Explorer 9.

No se pueden ver las imágenes en el Front Office de Prestashop, aunque si las veamos correctamente en el Back Office.

El problema está en una variable de Prestashop que llega vacía, y cada navegador la interpreta de una forma.

En este caso, Internet Explorer 9,  interpreta el tamaño vacío como 0px o 1px, de tal forma que no podemos ver la imagen correctamente.

Buscando por foros, no existe ninguna solución al respecto, por lo que nosotros hemos modificado manualmente los archivos implicados en este error.

——————————————————————————————————————————————————-

Primero vamos a modificar el fichero /modules/homefeatured/homefeatured.tpl

Reemplazamos en la linea 41 este código:

height=”{$homeSize.height}” width=”{$homeSize.width}”

Por este otro código:

{if isset($homeSize.width) && ($homeSize.height)}width=”{$homeSize.width}” height=”{$homeSize.height}”{/if}

——————————————————————————————————————————————————-

Seguimos modificando más ficheros, ahora /modules/blockbestsellers/blockbestsellers.tpl

Reemplazamos en la linea 37 este código:

height=”{$smallSize.height}” width=”{$smallSize.width}”

Por este otro código:

{if isset($smallSize.width) && ($smallSize.height)}width=”{$smallSize.width}” height=”{$smallSize.height}”{/if}

——————————————————————————————————————————————————-

Seguimos modificando más ficheros, ahora /modules/blocknewproducts/blocknewproducts.tpl

Reemplazamos en la linea 34 este código:

height=”{$mediumSize.height}” width=”{$mediumSize.width}”

Por este otro código:

{if isset($mediumSize.width) && ($mediumSize.height)}width=”{$mediumSize.width}” height=”{$mediumSize.height}”{/if}

——————————————————————————————————————————————————-

Seguimos modificando más ficheros, ahora /themes/default/product.tpl

Reemplazamos en la linea 179 este código:

width=”{$largeSize.width}” height=”{$largeSize.height}”

Por este otro código:

{if isset($largeSize.width) && ($largeSize.height)}width=”{$largeSize.width}” height=”{$largeSize.height}”{/if}

———————————————–

Reemplazamos en la linea 184 este código:

width=”{$largeSize.width}” height=”{$largeSize.height}”

Por este otro código:

{if isset($largeSize.width) && ($largeSize.height)}width=”{$largeSize.width}” height=”{$largeSize.height}”{/if}

———————————————–

Reemplazamos en la linea 200 este código:

height=”{$mediumSize.height}” width=”{$mediumSize.width}”

Por este otro código:

{if isset($mediumSize.width) && ($mediumSize.height)}width=”{$mediumSize.width}” height=”{$mediumSize.height}”{/if}

——————————————————————————————————————————————————-

Seguimos modificando más ficheros, ahora /themes/default/product-list.tpl

Reemplazamos en la linea 42 este código:

{if isset($homeSize)} width=”{$homeSize.width}” height=”{$homeSize.height}”{/if}

Por este otro código:

{if isset($homeSize.width) && ($homeSize.height)}width=”{$homeSize.width}” height=”{$homeSize.height}”{/if}

——————————————————————————————————————————————————-

De esta forma, si existe la variable $height o $width, añadiremos el parámetro height y width a la imagen.

Si no existe, todos los navegadores interpretan correctamente el tamaño de la imagen.

6 comentarios en “Solución imágenes Front Office Prestashop 1.5.x en Internet Explorer

  1. Modificando en tema por defecto de prestashop como base para crear uno nuevo, me encontre con el mismo problema que describes, y es que no se asignan los tamaños de imagen.

    Buscando por mucho rato información en la web, llege al mismo punto que tu, y es que no hay información al respecto sobre este problema. Tras descartar la busqueda de información como una opción me sumergi yo mismo en codigo para averigurar que ocurria.

    Tras mucho indagar llege a donde se genera el array de con las variables de smarty concretamente dentro del modulo homefeactured.php encontre esto:

    $this->smarty->assign(array(
    ‘products’ => $products,
    ‘add_prod_display’ => Configuration::get(‘PS_ATTRIBUTE_CATEGORY_DISPLAY’),
    ‘homeSize’ => Image::getSize(ImageType::getFormatedName(‘home’)),
    ));

    Sin duda la parte que llamo mi atención fue la que define ‘homeSize’ y me puse mano a la obra para buscar la funciones y he aqui que me acerque a la solución la cual tiene que ver con esta función

    getFormatedName(‘home’)

    que su codigo es el siguiente (dentro de /classes/ImageType.php):

    public static function getFormatedName($name)
    {
    $theme_name = Context::getContext()->shop->theme_name;
    $name_without_theme_name = str_replace(array(‘_’.$theme_name, $theme_name.’_’), ”, $name);
    //check if the theme name is already in $name if yes only return $name
    if (strstr($name, $theme_name) && self::getByNameNType($name))
    return $name;
    else if (self::getByNameNType($name_without_theme_name.’_’.$theme_name))
    return $name_without_theme_name.’_’.$theme_name;
    else
    return $theme_name.’_’.$name_without_theme_name;
    }

    No hay mas que mirar el codigo para darse cuenta de lo que hace, que no es más que formatear la cadena indicada con el subfijo del tema, es decir, si mi thema se llama “webdinamic” la variable que busca en la base de datos es “home_webdinamic”.

    Si nos dirigimos al backoffice de prestashop y entramos al modulo de tamaño de imagenes (Preferencias->Imágenes) nos podemos percatar que las medidas que estan indicadas son entre otras “home_default” … ¿quiere decir que esta es la medida por defecto? ROTUNDAMENTE NO, quiere decir, que es la medida de “home”, para el tema “default” que es el basico que trae prestashop instalado.

    La solución esta absurdamente simple que ofende. Lo unico que tenemos que hacer es llamar a estas variables desde backoffice con el sufijo del tema que estamos usando quedando por tanto “home_webdinamic” y ahora efectivamente se cargaran las medidas que indiquemos

    Con esta “solución”, no es necesario cambiar ninguna linea de codigo y podemos seguir gestionando los tamaños desde el backoffice de prestashop (ya que si cambiamos el code se quedara fijado de por vida).

    Espero que haya sido de utilidad mi experiencia para todos lo que lo lea.

  2. He probado lo que dices y funciona de maravilla, gracias por tu aportación. Casi que mejor que modificar el código, incluso si tienes varios temas puedes crear varios tamaños de imagen en función del tema elegido.

  3. Vaya tela, le he dado tantas vueltas que al final ya no se ni que archivos he tocado y ahora le noto que va mas lento. Pero por supuesto, esa era la solución. Ahora a arreglar la lentitud.
    Muchas gracias!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada.