Zmiana rozmiaru obrazu dla galerii obrazów na Tridion 2011

Question

Obecnie pracuję nad stroną internetową, która pokaże rodzaj galerii obrazów na niektórych stronach szczegółowych. Musi wyświetlać nawigację na dole z małymi miniaturkami i musi pokazywać na każdym elemencie podstawowe informacje i duży obraz.

Duże zdjęcie również musi zostać zmienione, ponieważ dozwolony jest dla nich maksymalny rozmiar.

Chodzi o to, aby użyć tylko obrazu źródłowego na każdy komponent multimedialny i móc zmieniać rozmiar obrazów w czasie publikacji, aby z obrazu źródłowego były wysyłane do przeglądarki klienta miniaturę i duży obraz. Możliwe jest pokazywanie małych i dużych obrazów za pomocą tylko stylów lub HTML, ale jest to dość nieczęste, ponieważ źródło (niektóre z nich naprawdę ciężkie) jest zawsze wysyłane do klienta.

Moja pierwsza myśl była niestandardowym fragmentem kodu, napisanym w języku C#, ale uważam, że trudno jest zmienić rozmiar tylko niektórych obrazów na określony rozmiar, a następnie zmienić ich rozmiar na inny. Nie znajduję też sposobu na zastąpienie kodu SRC w ostatecznym kodzie HTML odpowiednimi ścieżkami.

Innym pomysłem było stworzenie metody PublishBinary w starym stylu, ale uważam to bardzo skomplikowane, ponieważ wygląda jak bieżącym Tridion architekturze nie ma to zrobić w ogóle ...

I najważniejszy punkt, nawet na wypadek, gdybyśmy mogli zmienić rozmiar pomyślnie (w jakiś sposób) jest to obecnie kwestia Tridion 2011, aby opublikować dwa razy ten sam obraz. Zarówno wielka, jak i mała wersja pochodziłyby z tego samego komponentu multimedialnego, więc nie powinno być możliwości opublikowania ich obydwu lub gry z imionami, pierwszy z nich zniknie, ponieważ ścieżka zostanie zaktualizowana o drugą. : -S.

Wszelkie pomysły?

Answer 1

Zbudowałem obraz zmieniający rozmiar TBB w przeszłości, który odczytuje dane wyjściowe szablonu Dreamweaver lub XSLT. Pomysł polega na stworzeniu takiego tagu jak w przypadku pierwszego szablonu.

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

„Re-kalibrujący” TBB następnie po przetwarza element wyjściowy w opakowaniu, patrząc na węzłach z działaniem przetworzenia.

Następnie tworzy wariant składnik multimedialny użyciu biblioteki System.Drawing zgodnie z atrybutami dimention maxHieght i maxWidth i wydaje go za pomocą metody AddBinary() @frank wymienione i przy użyciu atrybutu variantId Prefiks nazwy pliku i wariant ID (i zastępuje atrybut SRC adresem URL nowego pliku binarnego).

Aby uczynić to w 100% elastycznym, jeśli jeden z atrybutów maxHeight lub maxWidth jest ustawiony na 0, rozmiar TBB zmienia się ponownie na podstawie wymiaru "niezerowego" lub jeśli oba są ustawione, przycina obraz na podstawie w atrybucie cropPosition. Dzięki temu możemy tworzyć miniatury dla obrazów krajobrazu i portretów bez ich zniekształcania. Atrybut enlargeIfTooSmall służy do zapobiegania nadmiernemu rozciągnięciu małych obrazów.

można zobaczyć próbki końcowych galerii tutaj: http://medicine.yale.edu/web/help/examples/specific/photo/index.aspx

i inne przykłady obraz ponownie sizeing tutaj: http://medicine.yale.edu/web/help/examples/general/images.aspx

Wszystkie obrazy są właśnie przesłanych do CMS raz, a następnie ponownie wielkości i przycięte w locie w czasie publikacji.

Answer 2

Tridion może doskonale opublikować wiele wariantów na jednym MMC. Po wywołaniu AddBinary można określić, że ten plik binarny jest wariantem MMC, przy czym każdy wariant jest identyfikowany za pomocą prostego łańcucha, który określasz.

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

Jak widać można również określić nazwę pliku binarnego. Jeśli tak, to twoja odpowiedzialność, że warianty mają unikalne nazwy plików i nazwy plików pomiędzy różnymi MMC, pozostają niepowtarzalne. Zwykle najłatwiej jest po prostu przedrostek lub przyrostek nazwy pliku z pewnym wskazaniem variantId: <MmcImageFileName>_thumbnail.jpg.

Answer 3

Do niedawnego projektu demonstracyjnego zastosowałem zupełnie inne podejście. Pliki binarne są publikowane w bazie danych brokera. Są one wyodrębniane z brokera za pomocą modułu HttpModule, który zapisuje dane binarne w systemie plików. Umożliwiłem kodowanie żądanej szerokości lub wysokości w adresie URL obrazu (oczywiście w przypadku plików binarnych, które nie są obrazami, ta część logiki nie zadziała). Następnie moduł zmienia rozmiar obrazu w locie (naprawdę w locie, a nie podczas publikowania!) I zapisuje na dysku zmienioną wersję.

Na przykład: jeśli poprosimy o /Images/photo.jpg, otrzymam oryginalny obraz. Jeśli zażądam /Images/photo_h100.jpg, otrzymam wersję o wysokości 100 pikseli. Adres URL /Images/photo_w150.jpg prowadzi do szerokości 150 pikseli.

Żadnych wariantów, nie ma potrzeby ponownego publikowania ze względu na różne wymagania dotyczące rozmiaru: zmiana rozmiaru jest całkowicie wykonywana na żądanie! Kara za wydajność na serwerze jest znikoma: każdy rozmiar jest generowany tylko raz, aż do ponownego opublikowania obrazu.

Użyłem .NET, ale oczywiście może działać również w Javie.

Answer 4

Po odpowiedziach Franka i Quirijna, możesz zainteresować się zmianą rozmiaru obrazu w procesorze roszczeń o wkłady przy użyciu Ambient Data Framework. To rozwiązanie byłoby agnostyczne i może być ponownie użyte zarówno w Javie, jak i .Net. Musisz tylko umieścić bajty o powiększonym obrazie w roszczeniu, a następnie użyć go w Javie lub .Net.

Java Zastrzeżenia Procesor:

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

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