Skip to main content

I am hosting a community member appreciation week and I would love to be able to feature community member profile photos - I’ve seen this on a few communities (unfortunately I can’t find an example now), but I would like to see if this is a feature of if anyone has done this before. 

Another manual idea I have is just grabbing several profile photos and adding them into a banner - is there any good way to download profile photos? I haven’t been able to figure it out. 

Hi ​@cstrange - there isn’t really a native way to feature member profile photos but you can totally put something custom together.  Your idea of a banner is a great and straightforward one.  You can simply grab the profile photos in the normal way via the browser (right-click and copy/download from either from the user profile page in control or in the front-end).  They won’t be huge so you’ll want to keep them relatively small in your banner for them to look good, but that should be workable.


@cstrange 

If you want to have a ton of fun, you use an HTML widget.

Here is an example of the code you could use:

<div style="display: flex; flex-wrap: wrap; max-width: 800px; margin: 20px auto; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); font-family: Arial, sans-serif;">
  <!-- Image Section -->
  <div style="flex: 1 1 30%; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 20px;">
    <img src="replace with inspect source image of users picture" alt="username" style="max-width: 100%; height: auto; border-radius: 8px;">
  </div>

  <!-- Text Section -->
  <div style="flex: 1 1 70%; padding: 20px; background-color: #ffffff;">
    <h3 style="margin-top: 0; font-size: 1.2em; color: #333;">How We're Using AI in Our Community</h3>
    <p style="margin: 0 0 10px;">We’re leveraging tools like <strong>Glean</strong>, <strong>ChatGPT</strong>, and <strong>Workato</strong> to enhance how we engage with and support our community.</p>
    <p style="margin: 0;">By using the API, we pull data like submitted ideas, analyze it with AI, and share insights with the right teams. AI also helps us learn scripting, work with webhooks, and automate tasks that previously took hours.</p>
  </div>
</div>




Obviously, the text can be replaced and everything, and the styling can be changed.

I would copy the code and ask AI (ChatGPT/Gemini) to help you perfect it for your styling in your community.


Next time I should actually read your comment all the way before I get too excited and post, but you could do something like this:

<div style="max-width: 1000px; margin: 40px auto; padding: 20px;">
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; text-align: center;">

<!-- User 1 -->
<div style="flex: 1; min-width: 150px;">
<img src="https://via.placeholder.com/100x100.png?text=User+2" alt="user1" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
<div style="margin-top: 10px; font-weight: bold;">user1</div>
</div>

<!-- User 2 -->
<div style="flex: 1; min-width: 150px;">
<img src="https://via.placeholder.com/100x100.png?text=User+2" alt="user2" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
<div style="margin-top: 10px; font-weight: bold;">user2</div>
</div>

<!-- User 3 -->
<div style="flex: 1; min-width: 150px;">
<img src="https://via.placeholder.com/100x100.png?text=User+3" alt="user3" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
<div style="margin-top: 10px; font-weight: bold;">user3</div>
</div>

<!-- User 4 -->
<div style="flex: 1; min-width: 150px;">
<img src="https://via.placeholder.com/100x100.png?text=User+4" alt="user4" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
<div style="margin-top: 10px; font-weight: bold;">user4</div>
</div>

<!-- User 5 -->
<div style="flex: 1; min-width: 150px;">
<img src="https://via.placeholder.com/100x100.png?text=User+5" alt="user5" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;">
<div style="margin-top: 10px; font-weight: bold;">user5</div>
</div>

</div>
</div>

You will need to replace the user# with the user’s username.

Also, when you click into a user’s profile that you want to use, you can inspect their picture. Grab the img source URL and replace it in the code above.

I hope this helps!


Reply