Visitas: 186  
Tiempo total: 3 días con 22:45:27 hrs  

OJS tiene el problema de no redimensionar las imágenes de portada de cada revista científica, esto resulta como una mala presentación (algo que es incorrecto). A continuación la solución más simple utilizando Javascript y la plantilla de diseño seleccionada.

Problema

Recientemente estuve trabajando en el ingreso de todos los volúmenes de una revista científica, pero me encontré con el inconveniente de que, cada nuevo volumen al cual le adjuntaba la imagen de portada, OJS lo mostraba en su tamaño original, es decir que no lo redimensionaba al tamaño correcto (en mi caso la imagen es bastante grande).

Este es un problema se puede solucionar utilizando un editor de imágenes, simplemente se debe de cortar al tamaño correcto (alrededor de 400 pixeles de ancho), pero esto (aunque no lo creas, resulta ser una tarea bastante compleja o molesta para los usuarios comunes), entonces a continuación mi propuesta para dar solución a este problema.

Redimencionar la imagen

Por ser un sistema de administración de revistas, es necesario hacer todo de la manera correcta, por esto es que no podemos editar el código fuente de la instalación de OJS (los archivos Php), lo correcto en este caso, es editor los archivos que pertenecen a la plantilla de diseño que estamos utilizando.

Esto sería una tarea bastante sencilla si OJS fuera un sistema accesible, pero no lo es: es un sistema anticuado! Entonces, la solución más simple en este caso es utilizar Javascript.

$(document).ready(function () {
try{
portada();
}catch(err){}
});

function portada(){
var ow = $('#main #content #issueCoverImage').width()/3;
var im = '#main #content #issueCoverImage img';
var iw = $(im).attr('width');
var ih = $(im).attr('height');
var p = ow / iw;
var ph = ih * p;
$(‘#main #content #issueCoverImage img').attr('height', ow);
$(‘#main #content #issueCoverImage img').attr('width', ph);
}

La función portada(), lo que hace es redimensionar el ancho de la imagen a un tercio del ancho del contenedor HML, una vez esto, obtiene el alto correcto a partir del ancho. A esto se le llama mantener la escala de la imagen.

Donde coloco el código JS?

Entender cómo funciona OJS es complicado, así que lo primero será buscar la plantilla que está utilizando OJS, estas plantillas pueden ser:

• Para la pagina que contiene todas las revistas.
• O para la pagina que contiene cada revistas.

Entonces, tenemos que buscar la plantilla de diseño que tiene cada revista, está ubicada en la siguiente dirección:

/plugins/themes/Miplantilla

Una vez esto, podemos observar en el archivo index.php como la instrucción require_once llama a otro archivo Php dentro de la misma carpeta, en este caso es:

MiplantillaThemePlugin.inc.php

En este archivo observamos varias instrucciones, más que todo es información acerca de la plantilla y lo necesario para cargar archivos CSS. Ok, ahora agregamos el código necesario para cargar archivos JS es el siguiente:

function getJavascriptFilename(){
return 'Miplantilla.js';
}

function getJqueryFilename() {
return 'jquery-1.11.0.min.js';
}

Ambos archivos Javascript, los colocamos en esta misma carpeta, la de nuestra plantilla de diseño.

Funcion Javascript generalizada

Una función que utilizo bastante, es la siguiente función:

function resize_image(id, final_w, final_h){
var h = $(id).attr('height');
var w = $(id).attr('width');
var n_h=final_h;
var n_w=final_w;
var t_w = n_w / w;
var t_h = h * t_w;
if(t_h<n_h){
t_h = n_h / h;
t_w = w * t_h;
t_h = n_h;
}else{
t_w = n_w;
}
$(id).attr('height', t_h);
$(id).attr('width', t_w);
}

Esta función, permite enviar los parámetros (ancho y alto) exacto para hacer encajar una imagen en una determinada área, pero si el ancho y el alto de la imagen no coincide, la función decidirá que redimensionar (si el alto o el ancho) para hacer que la imagen, o tenga el ancho o el alto indicado.