Is there a way to scale an image so it completely fits in my Groups Logo? 9.2



This thread was automatically locked due to age.
[unlocked by: Kevin Cunningham at 1:43 AM (GMT -5) on Fri, Sep 1 2017]
Parents
  • Yes, but it is a minor development task, requiring a small, supported, edit to the Group - Banner widget. 

    The Group - Banner widget uses the $core_v2_ui.GetResizedImageHtml() API for server-side resizing of the group avatar. The method accepts an optional parameter, ResizeMethod, which supports two modes:

    1. ScaleDown - resizes the image to fit completely within the boundaries, though this could result in the image not filling the max width or max height.
    2. ZoomAndCrop - resizes the image to fill the max width / max height space completely with cropping of any part of the image that extends past.

    By default, the Group - Banner widget uses ZoomAndCrop, similar to user avatars. The Group - Banner also uses CSS to make the resized image round. 

    To edit the Widget:

    Administration > Interface > Widgets > Group - Banner > Content

    Replace the following block:

    <div class="avatar">
    	<a href="$core_v2_encoding.HtmlAttributeEncode($group.Url)" #if ($isRegistered) $core_v2_tourTip.Render($core_v2_language.GetResource('TourTipTitle')) #end >
    		$core_v2_ui.GetResizedImageHtml($core_v2_group.Current.AvatarUrl, 68, 68, "%{ alt = $group.Name, ResizeMethod='ZoomAndCrop' }")
    	</a>
    </div>

    with

    <div class="avatar" style="border-radius:0">
    	<a href="$core_v2_encoding.HtmlAttributeEncode($group.Url)" #if ($isRegistered) $core_v2_tourTip.Render($core_v2_language.GetResource('TourTipTitle')) #end >
    		$core_v2_ui.GetResizedImageHtml($core_v2_group.Current.AvatarUrl, 68, 68, "%{ alt = $group.Name, ResizeMethod='ScaleDown', style='border-radius:0;' }")
    	</a>
    </div>

    It's worth noting that changing this widget changes it for all groups. So you may find it preferable to first save the widget as a separate copy, and make the change to that widget instead. And then the copied widget would need to be applied to the Group's header in page management.

  • An alternative would be to make you image square by padding it with whitespace.  (e.g. if your image is 100px high and 200px wide, add 50px of white to the top & the bottom to make it 200x200px)

Reply Children
No Data