Thay đổi kích thước hình ảnh cho thư viện hình ảnh trên Tridion 2011

Question

Tôi hiện đang làm việc trên một trang web sẽ hiển thị một bộ sưu tập hình ảnh trên một số trang chi tiết. Nó phải hiển thị một điều hướng ở phía dưới với hình ảnh thu nhỏ và nó phải hiển thị cho mỗi phần tử một số thông tin cơ bản và hình ảnh lớn.

Hình ảnh lớn cũng phải được thay đổi kích thước, vì có kích thước tối đa được phép cho chúng.

Vấn đề là chỉ sử dụng hình ảnh nguồn cho mỗi thành phần đa phương tiện và có thể thay đổi kích cỡ hình ảnh vào thời gian xuất bản, từ hình ảnh nguồn sẽ được gửi đến trình duyệt của khách hàng một hình thu nhỏ và hình ảnh lớn. Có thể hiển thị các hình ảnh nhỏ và lớn chỉ bằng cách sử dụng kiểu hoặc HTML, nhưng điều này khá không chính xác vì nguồn (một số ảnh thực sự nặng) luôn được gửi tới khách hàng. Ý tưởng đầu tiên của tôi là một đoạn mã tùy chỉnh, một cái gì đó được viết bằng C# nhưng tôi thấy phức tạp để thay đổi kích thước chỉ một số hình ảnh đến một kích thước nhất định và sau đó thay đổi kích thước chúng một lần nữa để kích thước khác quá. Tôi không tìm cách thay thế SRC trên HTML cuối cùng bằng các đường dẫn appropiate.

Một ý tưởng khác là tạo ra một phương pháp PublishBinary kiểu cũ nhưng tôi tìm thấy điều này thực sự phức tạp vì trông giống như kiến ​​trúc Tridion hiện tại không có nghĩa là để làm được điều này ở tất cả ...

Và điểm quan trọng nhất, thậm chí trong trường hợp chúng ta có thể thực hiện việc thay đổi kích thước thành công (bằng cách nào đó), đây là vấn đề Tridion 2011 để xuất bản hai lần cùng một hình ảnh. Cả phiên bản lớn và nhỏ sẽ đến từ cùng một thành phần đa phương tiện nên không thể xuất bản cả hai hoặc chơi với tên, cái đầu tiên sẽ là allways biến mất, bởi vì đường dẫn sẽ được cập nhật với phiên bản thứ hai :-S.

Bất kỳ ý tưởng nào?

Answer 1

Tôi đã xây dựng một TBB định cỡ lại hình ảnh trong quá khứ mà đọc đầu ra của mẫu Dreamweaver hoặc XSLT. Ý tưởng là tạo một thẻ như sau với mẫu đầu tiên.

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

TBB "Re-Sizing" sau đó xử lý các mục đầu ra trong gói, tìm kiếm các nút có hành động PostProcess.

Sau đó nó sẽ tạo ra một biến thể của phần đa phương tiện sử dụng thư viện System.Drawing theo maxHieght và maxWidth thuộc tính dimention, và phát hành nó bằng cách sử dụng phương pháp AddBinary() @frank đề cập và sử dụng variantId thuộc tính cho một tiền tố tên tập tin, và id biến thể (và thay thế thuộc tính SRC bằng URL của nhị phân mới).

Để làm cho 100% linh hoạt, nếu thuộc tính maxHeight hoặc maxWidth được đặt thành 0, kích thước lại TBB chỉ dựa trên thứ nguyên "khác 0" hoặc nếu cả hai được đặt thành hình ảnh trên thuộc tính cropPosition. Điều này cho phép chúng tôi tạo hình thu nhỏ sqare cho cả hình ảnh ngang và ngang mà không bóp méo chúng. Thuộc tính enlargeIfTooSmall được sử dụng để ngăn các hình ảnh nhỏ bị kéo dài nhiều.

Bạn có thể thấy các mẫu của các phòng trưng bày chính thức ở đây: http://medicine.yale.edu/web/help/examples/specific/photo/index.aspx

và các mẫu hình ảnh tái sizeing đây: http://medicine.yale.edu/web/help/examples/general/images.aspx

Tất cả các hình ảnh này đang được tải lên CMS một lần, và sau đó tái có kích thước và cắt trên bay lúc xuất bản thời gian.

Answer 2

Tridion hoàn toàn có thể xuất bản nhiều biến thể trên một MMC duy nhất. Khi bạn gọi AddBinary, bạn có thể chỉ định rằng nhị phân này là một biến thể của MMC, với mỗi biến thể được xác định bằng một chuỗi đơn giản mà bạn chỉ định.

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

Như bạn có thể nhìn thấy bạn cũng có thể chỉ định tên tập tin cho nhị phân. Nếu bạn làm vậy, bạn có trách nhiệm rằng các biến thể có tên tệp và tên tệp duy nhất giữa các MMC khác nhau vẫn là duy nhất. Vì vậy, thông thường, cách đơn giản nhất là tiền tố hoặc hậu tố tên tệp với một số dấu hiệu của biến thểId: <MmcImageFileName>_thumbnail.jpg.

Answer 3

Đối với một dự án demo gần đây, tôi đã thực hiện một cách tiếp cận hoàn toàn khác. Các tệp nhị phân đều được xuất bản cho cơ sở dữ liệu người môi giới. Chúng được trích xuất từ ​​nhà môi giới với một HttpModule, ghi dữ liệu nhị phân vào hệ thống tệp. Tôi có thể mã hóa chiều rộng hoặc chiều cao mong muốn trong URL của hình ảnh (tất nhiên, đối với các tệp nhị phân không phải là hình ảnh, phần này của logic sẽ không hoạt động). Mô-đun sau đó thay đổi kích thước hình ảnh khi đang di chuyển (thực sự đang di chuyển, không phải trong quá trình xuất bản!) Và ghi phiên bản đã thay đổi kích thước vào đĩa.

Ví dụ: nếu tôi yêu cầu /Images/photo.jpg, tôi sẽ nhận được hình ảnh gốc. Nếu tôi yêu cầu /Images/photo_h100.jpg, tôi nhận được phiên bản cao 100 pixel. Url /Images/photo_w150.jpg dẫn đến chiều rộng 150 pixel.

Không có biến thể cần thiết, không tái xuất bản vì yêu cầu kích thước khác nhau: thay đổi kích thước hoàn toàn được thực hiện theo yêu cầu! Các hình phạt hiệu suất trên máy chủ là không đáng kể: mỗi kích thước được tạo ra chỉ một lần, cho đến khi hình ảnh được tái bản.

Tôi đã sử dụng .NET, nhưng tất nhiên nó cũng có thể hoạt động trong Java.

Answer 4

Theo câu trả lời của Frank và Quirijn, bạn có thể quan tâm đến việc thay đổi kích thước hình ảnh trong bộ xử lý Yêu cầu hộp mực bằng cách sử dụng Khung dữ liệu xung quanh. Giải pháp này sẽ là công nghệ bất khả tri và có thể được tái sử dụng trong cả Java và .Net. Bạn chỉ cần đặt các byte hình ảnh đã thay đổi kích thước trong một Xác nhận quyền sở hữu và sau đó sử dụng nó trong Java hoặc .Net.

Java Lời xác nhận Bộ xử lý:

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 Lọc:

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