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]
Parents
  • 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.

Reply
  • 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.

Children