Forums (Obsolete)

Member

zelewsky-lbpc - 7/28/2010 4:08:57 PM

determine image dimension before serving page

Is it possible to determine the dimension of a stored image to set the size of an html element?

My site uses three different widths for photos that accompany news articles. The width depends on what's in the photo so I don't want to standardize to one size. A portrait of one person is the narrowest (200px) and feature photos are the widest (500px). Unfortunately, there's no formula for determining when an article will have an accompanying photo and, if so, what width it will be.

The problem is that the <div> containing the photo and caption runs all the way across the content area (500 px) even when the photo is only 200 px wide. Thus, when the photo is narrow, the page has a big block of white space to the right of the photo, which floats left.

I want to restrict the caption to the same width of the photo and wrap the story around the photo and caption. The caption must appear beneath the photo, not next to it, and narrow photos should be on the left, not right.

If the transformation can evaluate the image width property, then that value can go in the caption div as style="width:<%# Eval("image.width") %>;" -- or something along those lines.

An HTML or CSS solution also would be welcome, but I don't believe it's possible for a replaced element to set dimensions for subsequent non-replaced elements.

We're running v4.1 build 3597.

Regards,
Paul

Kentico Developer

kentico_helenag - 8/13/2010 7:30:10 AM

RE:determine image dimension before serving page

Hi Paul,

If you eval the image field of your document type (e.g.: <%# Eval("NewsTeaser") %>) you get the GUID of Attachment. The width of image is stored in CMS_Attachment table as AttachmentImageWidth. If you know the GUID you can get the width.

You can use API to get the width:

CMS.FileManager.AttachmentInfo.AttachmentImageWidth

If you know the GUID you get the AttachmentInfo object by:

CMS.FileManager.AttachmentManager.GetAttachmentInfo(Guid attachmentGuid,string siteName)

You can create a custom transformation function for this purpose.

Best regards,
Helena Grulichova

Member

zelewsky-lbpc - 9/29/2010 3:58:50 PM

RE:determine image dimension before serving page

My solution was a more intricate transformation and using a table instead of divs to handle the photos. The reason I wanted to get image dimensions was to declare the size of the containing div on the fly. The images vary depending on the subject, some are narrow, some wide, but I wanted to have only one template for news articles, not one for each photo possibility.

While tables are old-school, this was once instance where they offer better presentation in terms of setting auto margins than divs.

Here is the transformation for handling the photos if there are any attached to the article. If there are no photos, the area collapses and the spacing between the headline and body appear normally. I also have a javascript running on the page that displays the a large version of the photo and caption in a pop-up. (There are no cr-lf's in the actual transformation because they can create spaces in the html.)

<table id="containphoto"><tbody><tr>
<td class="newsphoto">
<%# IfEmpty(Eval("File01"), "", "<a rel=\"thumbnail\" title=\"" + Eval("Caption01") + "\" href=\"" + GetFileUrl("File01") + "\"><img src=\"" + GetFileUrl("File01") + "?maxsidesize=300\" /></a>") %>
<%# (Eval("Credit01").ToString() == "" ? "" : "<div class='newsphotocredit'>Photo by " + Eval("Credit01") + "</div>") %></div></td>
<td class="newsphoto"><%# IfEmpty(Eval("File02"), "", "<a rel=\"thumbnail\" title=\"" + Eval("Caption02") + "\" href=\"" + GetFileUrl("File02") + "\"><img src=\"" + GetFileUrl("File02") + "?maxsidesize=300\" /></a>") %>
<%# (Eval("Credit02").ToString() == "" ? "" : "<div class='newsphotocredit'>Photo by " + Eval("Credit02") + "</div>") %></div></td>
<td id="newsphotocaption"><%# IfEmpty(Eval("Caption01"), "", "<p>" + Eval("Caption01") + "</p>") %><%# IfEmpty(Eval("Caption02"), "", "<p>" + Eval("Caption02") + "</p>") %></td>
</tr></tbody></table>
<%# (Eval("Caption01").ToString() == "" ? "" : "<div id=\"spacer\"> </div>") %>

Here's the CSS. The key feature for the template to not add any space when there's no photo is setting the padding to zero --

table#containphoto {
    margin:0 auto;
    padding:0;
    border-collapse:collapse;
    border-spacing:0 0;
}

td.newsphoto {
    border-top:1px dotted rgb(210,210,210);
    border-bottom:1px dotted rgb(210,210,210);
    background-color:rgb(232, 237, 245);
    empty-cells:hide;
    padding:0;
}

td#newsphotocaption {
    border-top:1px dotted rgb(210,210,210);
    border-bottom:1px dotted rgb(210,210,210);
    background-color:rgb(232, 237, 245);
    empty-cells:hide;
    padding:0;
}

.newsphoto {
    vertical-align:middle;
}

.newsphoto img {
    padding:0;
    margin:6px 10px 4px 10px;
}

.newsphotocredit {
    color:rgb(110,110,110);
    font-size:9px;
    text-align:right;
    margin:0 10px 7px 0;
}

#newsphotocaption {
    color:rgb(110,110,110);
    font-size:11px;
    text-align:justify;
    vertical-align:middle;
}

#newsphotocaption p:first-line {
    font-weight:bold;
}

#newsphotocaption p {
    margin:10px 13px 10px 0;
}

Hope this helps anyone who wants to use a single template for uniformly handling photos of varying widths.

-Paul Zelewsky
New Media Editor
Law Bulletin Publishing Co.
Chicago, Illinois USA