Bildgrößenanpassung für Bildergalerie auf Tridion 2011

Question

Ich arbeite gerade an einer Website, die eine Art Bildergalerie auf einigen Detailseiten zeigen wird. Es muss eine Navigation am unteren Rand mit kleinen Thumbnail-Bildern zeigen und es muss für jedes Element einige grundlegende Informationen und das große Bild zeigen.

Das große Bild muss auch in der Größe angepasst werden, da eine maximale Größe für sie erlaubt ist.

Der Punkt ist, nur ein Quellbild pro Multimedia-Komponente zu verwenden und in der Lage, die Bilder auf die Veröffentlichungszeit so zu skalieren, aus dem Quellbild würde an den Client-Browser ein Thumbnail und ein großes Bild gesendet werden. Es ist möglich, kleine und große Bilder nur mit Styles oder HTML zu zeigen, aber das ist ziemlich unvorteilhaft, weil das Bild (das teilweise sehr schwer ist) immer an den Kunden gesendet wird.

Mein erster Gedanke war ein benutzerdefiniertes Codefragment, etwas in C# geschrieben, aber ich finde es kompliziert, nur einige Bilder auf eine bestimmte Größe zu skalieren und sie dann wieder auf eine andere Größe zu skalieren. Ich finde den Weg nicht, den SRC auf dem abschließenden HTML mit den passenden Wegen keines auch zu ersetzen.

Eine weitere Idee war es, ein im alten Stil PublishBinary Verfahren zu schaffen, aber ich finde das wirklich komplex, da sieht aus wie die aktuelle Tridion-Architektur ist dies nicht dazu gedacht, auf alle ...

Und der wichtigste Punkt zu tun, auch Falls wir die Größenänderung erfolgreich durchführen können (irgendwie), ist es zur Zeit ein Problem von Tridion 2011, das gleiche Bild zweimal zu veröffentlichen. Sowohl die große als auch die kleine Version würden eigentlich von derselben Multimedia-Komponente kommen, so dass es nicht möglich sein sollte, beide zu veröffentlichen oder mit den Namen zu spielen, der erste wäre immer weg, weil der Pfad mit dem zweiten aktualisiert würde : -S.

Irgendwelche Ideen?

Answer 1

Ich habe ein Bild erstellt, das TBB in der Vergangenheit ändert und die Ausgabe einer Dreamweaver- oder XSLT-Vorlage liest. Die Idee ist, ein Tag wie das folgende mit der ersten Vorlage zu erzeugen.

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

Die „Re-Sizing“ TBB verarbeitet dann Post den Ausgabepunkt in dem Paket, für Knoten mit der Postprocess Aktion suchen.

Es erstellt dann eine Variante des Multimedia-Komponente die System.Drawing Bibliothek gemäß der maxHieght und maxWidth dimention Attribute und veröffentlicht es die AddBinary() Methode @Frank erwähnt, und unter Verwendung des variantId Attribut für eine Dateinamenpräfix und varianter id (und ersetzt das SRC-Attribut durch die URL der neuen Binärdatei.

Um dies 100% flexibel zu machen, wenn eines der Attribute maxHeight oder maxWidth auf 0 gesetzt ist, wird das TBB basierend auf der Dimension "nicht Null" neu skaliert oder wenn beide gesetzt sind, schneidet es das Bild basierend ab für das cropPosition-Attribut. Dies ermöglicht uns, Miniaturbilder für Quer- und Hochformatbilder zu erstellen, ohne sie zu verzerren. Das Attribut enlargeIfTooSmall wird verwendet, um zu verhindern, dass kleine Bilder zu stark gedehnt werden.

Sie können Proben der letzten Galerien sehen hier: http://medicine.yale.edu/web/help/examples/specific/photo/index.aspx

und andere Bildwieder sizeing Beispiele hier: http://medicine.yale.edu/web/help/examples/general/images.aspx

Alle Bilder zum CMS nur einmal hochgeladen werden und dann re- Größe und zugeschnitten im laufenden Betrieb zum Zeitpunkt der Veröffentlichung.

Answer 2

Tridion kann problemlos mehrere Varianten auf einer einzigen MMC veröffentlichen. Wenn Sie AddBinary aufrufen, können Sie angeben, dass diese Binärdatei eine Variante der MMC ist, wobei jede Variante durch eine einfache Zeichenfolge identifiziert wird, die Sie angeben.

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

Wie Sie Sie auch den Dateinamen für die binäre angeben können sehen können. Wenn Sie dies tun, liegt es in Ihrer Verantwortung, dass Varianten eindeutige Dateinamen haben und Dateinamen zwischen verschiedenen MMCs eindeutig bleiben. In der Regel ist es am einfachsten, den Dateinamen einfach mit einer Angabe der variantId voranzukommen oder zu ergänzen: <MmcImageFileName>_thumbnail.jpg.

Answer 3

Für ein neues Demo-Projekt nahm ich einen ganz anderen Ansatz. Die Binärdateien werden alle in einer Broker-Datenbank veröffentlicht. Sie werden vom Broker mit einem HttpModule extrahiert, das die Binärdaten in das Dateisystem schreibt. Ich habe es möglich gemacht, die gewünschte Breite oder Höhe in der URL des Bildes zu kodieren (natürlich, für Binärdateien, die keine Bilder sind, wird dieser Teil der Logik nicht funktionieren). Das Modul ändert dann die Größe des Bildes im laufenden Betrieb (wirklich während der Übertragung, nicht während der Veröffentlichung!) Und schreibt die geänderte Version auf die Festplatte.

Zum Beispiel: Wenn ich /Images/photo.jpg anfrage, erhalte ich das Originalbild. Wenn ich /Images/photo_h100.jpg anfordere, bekomme ich eine Version von 100 Pixeln hoch. Die URL /Images/photo_w150.jpg führt zu einer Breite von 150 Pixel.

Keine Varianten erforderlich, keine erneute Veröffentlichung wegen unterschiedlicher Größenanforderungen: Die Größenänderung erfolgt komplett auf Anfrage! Die Leistungseinbußen auf dem Server sind vernachlässigbar: Jede Größe wird nur einmal generiert, bis das Image erneut veröffentlicht wird.

Ich habe .NET verwendet, aber natürlich kann es auch in Java arbeiten.

Answer 4

Nach der Antwort von Frank und Quirijn können Sie das Bild in einem Cartridge Claims-Prozessor unter Verwendung des Ambient Data Framework anpassen. Diese Lösung ist technologieunabhängig und kann sowohl in Java als auch in .Net wiederverwendet werden. Sie müssen die geänderten Bildbytes nur in einen Claim einfügen und dann in Java oder .Net verwenden.

Java Claims Prozessor:

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 HTTP Handler:

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); 
      } 
     } 
    } 
} 

Java Filter:

@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); 
      } 
     } 
    }