{"id":2229,"date":"2010-08-25T09:30:13","date_gmt":"2010-08-25T07:30:13","guid":{"rendered":"http:\/\/bitacora.eniac2000.com\/?p=2229"},"modified":"2010-08-25T09:30:13","modified_gmt":"2010-08-25T07:30:13","slug":"correccion-de-error-en-mostrado-panoramicas-con-wordpress-y-gallery2","status":"publish","type":"post","link":"https:\/\/bitacora.eniac2000.com\/?p=2229","title":{"rendered":"Correcci\u00f3n de error en mostrado panor\u00e1micas con WordPress y Gallery2"},"content":{"rendered":"

El sistema que utilizo para publicar este sitio web es el siguiente: se utiliza como base el gestor de contenidos WordPress<\/a>, complementado con algunas soluciones perif\u00e9ricas. La principal de ellas es la integraci\u00f3n con el sistema de gesti\u00f3n de galer\u00edas fotogr\u00e1ficas Gallery2<\/a>, que se realiza mediante un plugin dise\u00f1ado al efecto: WPG2<\/a>.<\/p>\n

No todas las fotograf\u00edas que publico son gestionadas mediante Gallery2. Para fotograf\u00edas sueltas utilizo el propio sistema de WordPress, pero cuando inserto referencias a una serie fotogr\u00e1fica (correspondiente a alg\u00fan viaje o evento concreto) s\u00ed que suelo utilizar Gallery2. El sistema es bastante simple: una vez subidas las fotograf\u00edas a Gallery2 y catalogadas por \u00e9ste, desde WordPress s\u00f3lo es necesario hacer referencia al identificador de la imagen mediante la etiqueta <wpg2id><\/em> para insertar la imagen en la entrada. Con esta referencia, el art\u00edculo muestra una versi\u00f3n reducida de la imagen, y un enlace a la imagen original dentro de la estructura de la galer\u00eda de im\u00e1genes, adaptada para su visualizaci\u00f3n en WordPress,<\/p>\n

Por lo general, el sistema funciona bastante bien. Sin embargo, desde hac\u00eda tiempo hab\u00eda observado un problema con las im\u00e1genes panor\u00e1micas, en las que existe una gran diferencia entre el ancho y el alto de la imagen: cuando insertaba una imagen mediante el sistema explicado anteriormente, en el caso de las fotograf\u00edas panor\u00e1micas no se mostraba la miniatura de la imagen, sino la imagen completa, pero escalada al tama\u00f1o de la miniatura definida. Los problemas que esto provoca, especialmente en tiempo de carga, eran significativos, ya que algunas de las panor\u00e1micas pueden alcanzar tama\u00f1os de m\u00e1s de 10000×2000 p\u00edxels, y pesos<\/em> superiores a los 10 MB, mientras que las miniaturas asociadas tienen unas dimensiones m\u00e1ximas de 400 p\u00edxels en su lado m\u00e1s grande, y pesos inferiores a los 30 KB.<\/p>\n

Tras un tiempo de investigaci\u00f3n, he conseguido dar con una soluci\u00f3n al problema, en los foros de Gallery: <wpg2> tags use always full-size versions<\/a> En una de las entradas, uno de los usuarios informa de que el problema se debe al m\u00e9todo en el que el sistema estudia si ha de escoger mostrar una miniatura o la versi\u00f3n completa de la imagen, aunque escalada. Para determinar esto el sistema compara el ancho y el alto de la imagen. Esta comparaci\u00f3n, si bien resulta adecuada para la mayor\u00eda de las im\u00e1genes, produce problemas en aquellas con importantes diferencias entre ancho y alto, como es el caso de las panor\u00e1micas. Ante ello, el usuario propone hacer uso s\u00f3lo del ancho. Para ello, es necesario realizar modificaciones en el archivo ImageBlockHelper.class<\/em>, ubicada en el directorio \/modules\/imageblock\/classes<\/em> de Gallery2 (en mi caso, al usar el paquete Debian, su ruta completa es \/usr\/share\/gallery2\/modules\/imageblock\/classes<\/em>). En concreto, es necesario realizar unas modificaciones a partir de la l\u00ednea 424 del archivo:<\/p>\n

\/* Get the list of resizes *\/
\n$resizes = array();
\nlist ($ret, $ok) = GalleryCoreApi::hasItemPermission(
\n$derivativeParentId, 'core.viewResizes', $userId);
\nif ($ret) {
\nreturn array($ret, null);
\n}
\nif ($ok) {
\nlist ($ret, $resizes) =
\nGalleryCoreApi::fetchResizesByItemIds(array($derivativeParentId));
\nif ($ret) {
\nreturn array($ret, null);
\n}
\n$resizes = isset($resizes[$derivativeParentId]) ? $resizes[$derivativeParentId]
\n: array();
\n}
\nif (isset($thumbnail)) {
\n$resizes[] = $thumbnail;
\n}
\nforeach ($resizes as $imageObject) {
\n\/*Primera modificacion*\/
\n\/*\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $rawDifferential = ($imageObject->getHeight() - $maxSize)
\n+ ($imageObject->getWidth() - $maxSize);*\/
\n$rawDifferential = ($imageObject->getWidth() - $maxSize);<\/strong>
\nif ($biggerOnly && $rawDifferential < 0) {
\ncontinue;
\n}
\n$resizeDifferential = abs($rawDifferential);
\n\/*Segunda modificacion*\/
\n\/*\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $resizeSize = $imageObject->getHeight() * $imageObject->getWidth();*\/
\n$resizeSize = $imageObject->getWidth();<\/strong>
\n\/*
\n* If this differential is smaller than the last, update the image target and
\n* the comparison value.
\n* If two differentials are equidistant, use the larger based on image size.
\n*\/
\nif ($resizeDifferential < $imageDifferential
\n|| $resizeDifferential == $imageDifferential
\n&& $resizeSize > $imageSize) {
\n$image = $imageObject;
\n$imageDifferential = $resizeDifferential;
\n$imageSize = $resizeSize;
\n}
\n}
\n}<\/code><\/p>\n

Una vez hecho esto, en WordPress se empezar\u00e1n a mostrar correctamente las miniaturas de las im\u00e1genes en vez de las versiones escaladas de las im\u00e1genes completas, en el caso de las panor\u00e1micas.<\/p>\n","protected":false},"excerpt":{"rendered":"

El sistema que utilizo para publicar este sitio web es<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[13],"tags":[517,712,1229,1794,1795],"series":[],"class_list":["post-2229","post","type-post","status-publish","format-standard","hentry","category-informatica","tag-debian","tag-gallery2","tag-panoramica","tag-wordpress","tag-wpg2"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/2229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2229"}],"version-history":[{"count":0,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=\/wp\/v2\/posts\/2229\/revisions"}],"wp:attachment":[{"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2229"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/bitacora.eniac2000.com\/index.php?rest_route=%2Fwp%2Fv2%2Fseries&post=2229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}