Media Gallery Thumbnails Improperly Stretched

Reply

drq Posted: Mon, May 5 2008 6:02 PM

rated by 0 users

The thumbnails in the new Hawaii theme look really bad for files.  For instance for PDF files it takes the PDF icon and stretches it with HTML so it becomes very distorted.  I realize the need for the area's size since this same area is used for thumbnails of images but why doesn't this take into consideration the original size of the image?

I would like to edit the theme\Media\aggregatepostlist.ascx control to display the icons for regular files without stretching and have the thumbnails from images displayed as it currently does.

Can I edit the below to include a display condition (in italics)?  What properties can I use for the ComparisonProperty?  Is there any documentation on this?  Is there a better way?

<CSMedia:MediaGalleryPostData LinkTo="View" runat="server">
       <DisplayConditions>
            <!-- perhaps a MediaGalleryPostPropertyValueComparison control here? -->
       </DisplayConditions>
<ContentTemplate><CSMedia:MediaGalleryPostViewer runat="server" ViewType="Preview" Width="131" Height="94" /></ContentTemplate>
</CSMedia:MediaGalleryPostData> 

It would be best not to check the extension - I'd really like to see the original size of the image and, if it's less than the suggested width/height, leave it alone.  Otherwise, if it's the only option, I guess I could check the download's extension and just do it for pdf/zip or whatever.  Thoughts?

I'm running the latest release: 4.0.30417.1769

Reply

drq replied on Tue, May 6 2008 9:41 AM

rated by 0 users

This works but I'm not sure if it's the best way.  What it does is check the Media Gallery Post's ContentType property and checks if it is of the type "image/pjpeg"  (not sure what a pjpeg is).  It uses the MediaGalleryPostViewer to display both the file icon and the image thumbnail but for images it specifies a width and height.  When the width/height are NOT specified it seems to leave the image alone.

<CSControl:ConditionalContent ID="ConditionalContent1" runat="server">
 <ContentConditions>
  <CSMedia:MediaGalleryPostPropertyValueComparison ID="MediaGalleryPostPropertyValueComparison1"
  runat="server" ComparisonProperty="ContentType" Operator="Contains" ComparisonValue="image/pjpeg" />
 </ContentConditions>
 <TrueContentTemplate>
  <CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer1" runat="server" ViewType="Preview"
  Width="131" Height="94" />
 </TrueContentTemplate>
 <FalseContentTemplate>
  <CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer2" runat="server" ViewType="Preview" />
 </FalseContentTemplate>
</CSControl:ConditionalContent>

Reply

drq replied on Tue, May 6 2008 9:53 AM

rated by 0 users

 The above doesn't work.  For some reason, when I upload a jpeg it doesn't set a ContentType.  Any answers here?

Reply

drq replied on Tue, May 6 2008 10:14 AM

rated by 0 users

Now using AttachmentFilename to check the extension of the attachment in myThemeNameHere\Media\aggregatepostlist.ascx

<CSMedia:MediaGalleryPostData ID="MediaGalleryPostData2" LinkTo="View" runat="server">
<ContentTemplate>         
 <CSControl:ConditionalContent ID="ConditionalContent1" runat="server">
  <ContentConditions Operator="or">
   <CSMedia:MediaGalleryPostPropertyValueComparison ID="MediaGalleryPostPropertyValueComparison1"
   runat="server" ComparisonProperty="AttachmentFilename" Operator="Contains" ComparisonValue=".jpeg" />
   <CSMedia:MediaGalleryPostPropertyValueComparison ID="MediaGalleryPostPropertyValueComparison2"
   runat="server" ComparisonProperty="AttachmentFilename" Operator="Contains" ComparisonValue=".jpg" />
   <CSMedia:MediaGalleryPostPropertyValueComparison ID="MediaGalleryPostPropertyValueComparison3"
   runat="server" ComparisonProperty="AttachmentFilename" Operator="Contains" ComparisonValue=".gif" />
   <CSMedia:MediaGalleryPostPropertyValueComparison ID="MediaGalleryPostPropertyValueComparison4"
   runat="server" ComparisonProperty="AttachmentFilename" Operator="Contains" ComparisonValue=".png" />
  </ContentConditions>
  <TrueContentTemplate>           
    <CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer1" runat="server" ViewType="Preview"
    Width="131" Height="94" />           
  </TrueContentTemplate>
  <FalseContentTemplate>           
    <CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer2" runat="server" ViewType="Preview" />           
  </FalseContentTemplate>
 </CSControl:ConditionalContent>       
</ContentTemplate>
</CSMedia:MediaGalleryPostData>

Reply

Ben Tiedt replied on Wed, May 7 2008 5:53 PM

rated by 0 users

This issue should only affect older browsers, such as IE6, which do not implement the neccessary CSS options to implement *maximum* width and height options.  This issue should not affect the latest versions of any popular browsers.

That said, if you want to continue use file-type-based rendering, I'd suggest using

<CSMedia:MediaGalleryPostViewerMediaTypeCondition runat="server" ViewType="View" MediaType="Image" /> 

instead of the file name conditions.

Reply

drq replied on Thu, May 8 2008 8:27 AM

rated by 0 users

Thanks Ben.  We are using IE 6 internally yet (and I hope not for too much longer).

Here's my final code:

<CSMedia:MediaGalleryPostData ID="MediaGalleryPostData2" LinkTo="View" runat="server">
<ContentTemplate>         
 <CSControl:ConditionalContent ID="ConditionalContent1" runat="server">
  <ContentConditions Operator="or">
   
   <CSMedia:MediaGalleryPostViewerMediaTypeCondition ID="MediaGalleryPostViewerMediaTypeCondition1" runat="server" ViewType="View" MediaType="Image" />
  
  </ContentConditions>
  <TrueContentTemplate>           
    <CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer1" runat="server" ViewType="Preview"
    Width="131" Height="94" />           
  </TrueContentTemplate>
  <FalseContentTemplate>           
    <CSMedia:MediaGalleryPostViewer ID="MediaGalleryPostViewer2" runat="server" ViewType="Preview" />           
  </FalseContentTemplate>
 </CSControl:ConditionalContent>  
</ContentTemplate>
</CSMedia:MediaGalleryPostData>