Widget to display enlarged avatar image

I found this related thread from 6+ years ago and wanted to share an updated version of the widget code based on the suggestions (using the Current vs Accessing user) and the steps to add it.  This worked in version 11.1.

Step 1 - Access the administration interface by clicking the following: pencil icon > Interface > Widget Studio and click the small plus sign icon to create a new widget.

Step 2 - On the resulting page, enter a Name and Description for the widget.

Step 3 - On the right hand side of the screen, click </> Content under the Components list.

Step 4 - Paste the code snippet below into the code editor.


<div>
    UserID: $core_v2_user.Current.Id
    <br />
    $core_v2_ui.GetResizedImageHtml($core_v2_user.Current.AvatarUrl, 600, 600, "%{ ResizeMethod='ZoomAndCrop' }")
</div>

Step 5 - On the bottom left of your screen click the three horizontal dots ...  in the orange Staged Changes notification, then click Publish All

Step 6 - In your community navigate to a user profile page, then click the pencil icon > Manage Site Theme > Edit this Page.

Step 7 - Search or browse the list of widgets to find the name you configured in step 2 above.

Step 8 - Click and drag the widget from the last step in the desired place on the profile page.

Step 9 - Go back to the admin panel fly out menu and click Publish, then refresh the page.



changed color of hyperlink so it is more visible
[edited by: Matt Nevill at 10:13 PM (GMT 0) on Tue, Jan 5 2021]
  • Thank you, Matt! This is awesome. If you'd like/are able, we can take a copy of your widget and add it to our marketplace and give you author credit there as well. These are great instructions as is, just always happy to have widgets join our marketplace too for people to just upload. Again, thank you for taking the time to post this!

  • Hi Grant.  Thanks for the comment.  Adding it to the marketplace would be great!  I've attached the export of the widget. 

    <scriptedContentFragments>
    	<scriptedContentFragment name="Profile Picture" version="11.1.3.12348" description="Widget to render a larger version of the avatar photo uploaded by the user.  Created by Matt from code in Telligent Community." instanceIdentifier="7134982fb13145ab9e18cb230de14462" theme="" isCacheable="false" varyCacheByUser="false" showHeaderByDefault="true" cssClass="" lastModified="2021-01-05 19:20:28Z">
    		<contentScript language="Velocity"><![CDATA[<div>
            <br />
        $core_v2_ui.GetResizedImageHtml($core_v2_user.Current.AvatarUrl, 600, 600, "%{ ResizeMethod='ZoomAndCrop' }")
    </div>
    ]]></contentScript>
    		<headerScript language="Velocity" />
    		<additionalCssScript language="Velocity" />
    	</scriptedContentFragment>
    </scriptedContentFragments>

    If you attribute anything to me in the marketplace listing, I think  and  should get most of the credit.  I basically copied and pasted the info from their post with a minor substitution.  

    The marketplace is awesome by the way.  It would be great if more people could share the widgets and extensions they've made so we can all benefit.

  • Awesome, thank you!

    It would be great if more people could share the widgets and extensions they've made so we can all benefit.

    Agreed. Like I did here, I'm encouraging anyone that is willing to share their work to do so. We have a good handful of partners that have added their work, but would love to see some more direct from customers. Thanks for being a part of it!

  • I just wanted to add a note that the mobile view of this widget and some particular desktop resolutions mixed with a specific zoom will cause the image to be abnormally enlarged.  One resolution in particular that looks incorrect is 1920 x 1440 with the browser zoom set at 175%.  Fixing whatever causes this is a bit beyond my capabilities, but if anyone more technical figures it out, please reply on this thread with any code corrections.