Redimensionamiento de imagen para la galería de imágenes en Tridion 2011

Question

Actualmente estoy trabajando en un sitio web que mostrará una especie de galería de imágenes en algunas páginas de detalles. Debe mostrar una navegación en la parte inferior con pequeñas imágenes en miniatura y debe mostrar por cada elemento información básica y la imagen grande.

También se debe cambiar el tamaño de la imagen grande, ya que existe un tamaño máximo permitido para ellas.

El objetivo es utilizar solo una imagen de origen por componente multimedia y poder cambiar el tamaño de las imágenes en el tiempo de publicación para que desde la imagen de origen se envíe al navegador del cliente una miniatura y una imagen grande. Es posible mostrar imágenes pequeñas y grandes utilizando solo estilos o HTML, pero esto es bastante ineficiente porque la imagen de origen (algunas de ellas realmente pesadas) siempre se envía al cliente.

Mi primer pensamiento fue un fragmento de código personalizado, algo escrito en C#, pero me parece complicado cambiar el tamaño de algunas imágenes a un tamaño determinado y luego cambiar el tamaño de nuevo a otro tamaño también. No encuentro la manera de reemplazar el SRC en el HTML final con las rutas apropiadas tampoco.

Otra idea era crear un método PublishBinary de estilo antiguo pero me parece que esto realmente compleja porque se parece a la arquitectura Tridion actual no tiene la intención de hacer esto en absoluto ...

Y el punto más importante, incluso en caso de que podamos hacer el cambio de tamaño con éxito (de alguna manera), actualmente es un problema de Tridion 2011 para publicar dos veces la misma imagen. Tanto la versión grande como la pequeña vendrían en realidad del mismo componente multimedia, por lo que no debería ser posible publicarlas o jugar con los nombres, la primera se habría ido, porque la ruta se actualizaría con la segunda. : -S.

¿Alguna idea?

Answer 1

He creado una imagen para cambiar el tamaño de TBB en el pasado que lee la salida de una plantilla Dreamweaver o XSLT. La idea es producir una etiqueta como la siguiente con la primera plantilla.

<img src="tcm:1-123" maxWidth="250" maxHeight="400" 
    cropPosition="middle" variantId="250x400" 
    action="PostProcess" enlargeIfTooSmall="true" 
/> 

El "redimensionamiento" TBB a continuación, después procesa el elemento de salida en el paquete, en busca de nodos con la acción de postprocesado.

A continuación, crea una variante del componente multimedia utilizando la biblioteca System.Drawing de acuerdo con los atributos maxHieght y maxWidth Dimention, y lo publica utilizando el método de AddBinary() @frank mencionado y utilizando el atributo variantId para un prefijo de nombre de archivo, y la variante de id (y reemplaza el atributo SRC con la URL del nuevo binario).

Para que esto sea 100% flexibles, si alguno de los atributos maxHeight o maxWidth se ponen a 0, las re-tamaños TBB sólo basados ​​en la dimensión "no cero", o si ambos están establecidos se recorta la imagen basada en el atributo cropPosition. Esto nos permite crear vistas en miniatura para imágenes panorámicas y verticales sin distorsionarlas. El atributo enlargeIfTooSmall se usa para evitar que las imágenes pequeñas se estiren demasiado.

Puede ver muestras de las galerías finales aquí: http://medicine.yale.edu/web/help/examples/specific/photo/index.aspx

y otros ejemplos imagen re-apresto aquí: http://medicine.yale.edu/web/help/examples/general/images.aspx

Todas las imágenes se acaba de subir al CMS una vez, y luego volver dimensionado y recortado sobre la marcha en tiempo de publicación.

Answer 2

Tridion puede publicar perfectamente múltiples variantes en una sola MMC. Cuando llame al AddBinary, puede especificar que este binario sea una variante de la MMC, identificándose cada variante con una cadena simple que usted especifique.

public Binary AddBinary(
    Stream content, 
    string filename, 
    StructureGroup location, 
    string variantId, 
    Component relatedComponent, 
    string mimeType 
) 

Como se puede ver también puede especificar el nombre de archivo para el binario. Si lo hace, es su responsabilidad que las variantes tengan nombres de archivo únicos y los nombres de archivo entre diferentes MMC sigan siendo únicos. Por lo general, es más fácil simplemente prefijar o sufijar el nombre del archivo con alguna indicación de la variantId: <MmcImageFileName>_thumbnail.jpg.

Answer 3

Para un proyecto de demostración reciente, tomé un enfoque completamente diferente. Todos los binarios se publican en una base de datos de intermediarios. Se extraen del intermediario con un HttpModule, que escribe los datos binarios en el sistema de archivos. Hice posible codificar el ancho o alto deseado en la URL de la imagen (por supuesto, para binarios que no son imágenes, esta parte de la lógica no funcionará). Luego, el módulo cambia el tamaño de la imagen sobre la marcha (realmente sobre la marcha, no durante la publicación) y escribe la versión redimensionada en el disco.

Por ejemplo: si solicito /Images/photo.jpg, obtendré la imagen original. Si solicito /Images/photo_h100.jpg, obtengo una versión de 100 píxeles de alto. La url /Images/photo_w150.jpg lleva a un ancho de 150 píxeles.

No se necesitan variantes, no se puede volver a publicar debido a diferentes requisitos de tamaño: ¡el cambio de tamaño se realiza por completo a pedido! La penalización de rendimiento en el servidor es insignificante: cada tamaño se genera solo una vez, hasta que la imagen se vuelva a publicar.

Utilicé .NET, pero por supuesto también puede funcionar en Java.

Answer 4

Siguiendo la respuesta de Frank y Quirijn, puede que le interese cambiar el tamaño de la imagen en un procesador de reclamos de cartuchos utilizando el Marco de datos de ambiente. Esta solución sería independiente de la tecnología y puede reutilizarse tanto en Java como en .Net. Solo necesita poner los bytes de imagen redimensionados en una Reclamación y luego usarla en Java o .Net.

Java procesador de reclamaciones:

public void onRequestStart(ClaimStore claims) throws AmbientDataException { 
    int publicationId = getPublicationId(); 
    int binaryId = getBinaryId(); 

    BinaryContentDAO bcDAO = (BinaryContentDAO)StorageManagerFactory.getDAO(publicationId, StorageTypeMapping.BINARY_CONTENT); 
    BinaryContent binaryContent = bcDAO.findByPrimaryKey(publicationId, binaryId, null); 

    byte[] binaryBuff = binaryContent.getContent(); 
    pixelRatio = getPixelRatio(); 

    int resizeWidth = getResizeWidth(); 

    BufferedImage original = ImageIO.read(new ByteArrayInputStream(binaryBuff)); 
    if (original.getWidth() < MAX_IMAGE_WIDTH) { 
     float ratio = (resizeWidth * 1.0f)/(float)MAX_IMAGE_WIDTH; 

     float width = original.getWidth() * ratio; 
     float height = original.getHeight() * ratio; 

     BufferedImage resized = new BufferedImage(Math.round(width), Math.round(height), original.getType()); 
     Graphics2D g = resized.createGraphics(); 
     g.setComposite(AlphaComposite.Src); 

     g.drawImage(original, 0, 0, resized.getWidth(), resized.getHeight(), null); 
     g.dispose(); 

     ByteArrayOutputStream output = new ByteArrayOutputStream(); 

     BinaryMeta meta = new BinaryMetaFactory().getMeta(String.format("tcm:%s-%s", publicationId, binaryId)); 
     String suffix = meta.getPath().substring(meta.getPath().lastIndexOf('.') + 1); 

     ImageIO.write(resized, suffix, output); 
     binaryBuff = output.toByteArray(); 
    } 
    claims.put(new URI("taf:extensions:claim:resizedimage"), binaryBuff); 
} 

.Net controlador HTTP:

public void ProcessRequest(HttpContext context) { 
    if (context != null) { 
     HttpResponse httpResponse = HttpContext.Current.Response; 

     ClaimStore claims = AmbientDataContext.CurrentClaimStore; 
     if (claims != null) { 
      Codemesh.JuggerNET.byteArray javaArray = claims.Get<Codemesh.JuggerNET.byteArray>("taf:extensions:claim:resizedimage"); 
      byte[] resizedImage = javaArray.ToNative(javaArray); 
      if (resizedImage != null && resizedImage.Length > 0) { 
       httpResponse.Expires = -1; 
       httpResponse.Flush(); 
       httpResponse.BinaryWrite(resizedImage); 
      } 
     } 
    } 
} 

filtro de Java:

@Override 
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {  
     ClaimStore claims = AmbientDataContext.getCurrentClaimStore(); 
     if (claims != null) { 
      Object resizedImage = claims.get(new URI("taf:extensions:claim:resizedimage")); 
      if (resizedImage != null) { 
       byte[] binaryBuff = (byte[])resizedImage; 
       response.getOutputStream().write(binaryBuff); 
      } 
     } 
    }