Imágenes sin deformar en Oscommerce
Este tutorial trata de un sencillo script para mostrar las imágenes en miniatura con Oscommerce.
El problema se presenta en el módulo de listado, en el de nuevos productos y en el módulo info del producto.
El Script:
1 – Guardo la ruta de la imágen en una variable y defino un ancho máximo para la miniatura (200 pixel).
$imagen = 'luna.jpg';
define('ANCHO_IMAGEN', 200);
Con la función “getimagesize()”, obtengo las propiedades de la imágen:
$propiedades = getimagesize($imagen);
En este ejemplo obtendría lo siguiente:
array ( 0 => 745, 1 => 785, 2 => 2, 3 => 'width="745" height="785"', 'bits' => 8, 'channels' => 3, 'mime' => 'image/jpeg',)
Como vemos, se obtiene un arreglo.
En la posición 0 tengo el ancho original de la imágen, y en la posición 1 obtengo el alto original.
Asignamos estos datos a dos variables:
$anchoOriginal = $propiedades[0]; $altoOriginal = $propiedades[1];
Calculamos el porcentaje que representa el ancho máximo (definido por nosotros) sobre el ancho original de la imágen.
$porcentaje = (ANCHO_IMAGEN * 100) / $anchoOriginal;
Con esto podemos calcular el alto final de la imágen.
$alto = ($altoOriginal * $porcentaje) / 100;
Ya podemos mostrar la imágen.
echo "<a href ='" . $imagen . "' alt = 'Click para agrandar'> <IMG src = '" . $imagen . "' width = '" . ANCHO_IMAGEN . "' height = '" . $alto . "'> </a><br>Click para agrandar";
Trabajamos con el ancho y el alto de la imágen, y vemos que al mostrarla no se deforma.
Ahora en Oscommerce lo pueden utilizar por ejemplo para el listado de productos.
En Oscommerce se puede configurar un alto y un ancho fijo para las imágenes. El problema es justamente eso, que es fijo. Esto produce imágenes en miniaturas deformadas.
El archivo del listado de productos se encuentra en la ruta “catalog/includes/modules/product_listing.php”
Debajo de la siguiente línea agregaríamos nuestro código:
case 'PRODUCT_LIST_IMAGE':
$lc_align = 'center';
if (isset($HTTP_GET_VARS['manufacturers_id'])) {
Código:
$archivoImagen = DIR_WS_IMAGES . $listing['products_image']; $size = getimagesize($archivoImagen); $anchoOriginal = $size[0]; $altoOriginal = $size[1]; $ancho = 170; $porc = ($ancho * 100) / $anchoOriginal; $porc = round($porc); $alto = ($altoOriginal * $porc) / 100;
Y finalmente en la línea siguiente insertamos nuestras variables:
$lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], $ancho, $alto) . '</a>';
Entradas Aleatorias
¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.
Buen aporte Diego, ya tengo algunas preguntas mas para vos sobre OsCommerce, ahora a dormir porque desde mañana a las 7.