The Social Pinpoint Learning Centre
23 October 2023
Images can significantly enhance the visual appeal and overall user experience of your website/projects. Whether you're a seasoned Social Pinpoint user or just starting out your journey with the platform, understanding how to handle your image dimensions effectively is essential for delivering stunning visuals. In this article we'll explore some valuable hacks, tips and tricks that will help you out with using the best dimensions for your projects!
We'll begin with the recommended image dimensions we have for the banner and a few of our tools that you can insert images onto, please note that these are the minimum or recommended sizes and will work great with the Social Pinpoint by auto-generating a number of thumbnails and images sizes, you could also increase the suggested image dimensions where the extra wow factor is needed to cater for image resolutions of high definition monitors.
Tools | Tool Name | Aspect Ratio | Dimensions (px) | Notes |
| Content Tools | Banner | 3:1 | 1920 x 640 | Full width image banners |
| Image | Any | See ratio examples | Images can be any ratio required. However please consider the image quality and size guidelines | |
| Multimedia Tools | Gallery | Any | > 1400 width | We recommend you size all images in the gallery to the same dimensions for maximum effect |
| Slider | Any | See ratio examples | The Image Slider can take a variety of image sizes. However we find that it looks stunning when the images in the tool are all the same size | |
| Swipe | Any | See ratio examples | Can take a variety of image sizes. It is essential that the two images are exactly the same size for the ‘before and after’ functionality to be effective | |
| Hotspot | Any | See examples below | The Hotspot tool can take a variety of image sizes, and of course the particular image that you are annotating | |
| Feedback Tools | Call to Action | 3:2 | 900 x 600 | Sizes of the CTA varies on the location of the tool, and the amount of call to action text, and will resize image to suit in a responsive manner. |
| Events | 3:1 | 1920 x 640 | Full width image banners | |
| Faces | 3:2 | 450 x 300 | Rectangle layout | |
| Feature Grid | 16:9 | 800 x 450 | ||
| Logo Splash | 3:2 | 300 x 200 | Landscape / horizontal logos: | |
| Newsfeed | 1:1 | 200 x 200 | ||
| Form: Image Option | 4:3 | 200 x 160 | Small square images similar to logos or landscape images. |
Another important factor for your images would be the file size of the image, for websites these can affect the users experience when it comes to load times as large files can impact the speed in which your web page loads in for the users. Ideally you'd want the file sizes to be kept within 10 MB - without sacrificing quality.
Social Pinpoint's banners are designed with accessibility in mind. We endeavor to make our web products as accessible as possible. As a result, our image banners are designed primarily for lifestyle imagery to accompany the project title and description - images with text are not recommended for accessibility, additionally text within those images may get cut off on different screen sizes, affecting readability for all users.
The platform utilizes an adaptive view-port, which automatically adjusts itself based on the screen size of the user. This ensures a consistent user experience across different devices and because of this adaptability its important to understand that banner dimensions can vary depending on the screen width. Here are a couple of examples on how the image banner reacts on different screens:
Standard Screen
Wide Screen
For these types of scenarios where parts of the images appear cropped even if proper dimensions were used, you would need to adjust the position of the image in the banner block settings. This function allows you to display the desired position of the image be it top/bottom or left/right, ensuring your visual content looks its best regardless of the screen size.
The thumbnail editing feature has been available for a while but hasn't
been widely used by our users. In this section, we'll guide you on how
to use it effectively. Thumbnail editing allows you to customize how
thumbnails appear in various sections of the platform, such as Project
Cards (used in your project lists), the Gallery, News Feed images, and
more!
Let's take a look at a sample project. We've perfectly aligned the image
banner. However, when we view its project card in the project list, we
notice that it's not cropped at an ideal location. We'll show you how to
edit this thumbnail using the File Manager.
💡 User Tip: Due to how web caches work, you might not see the changes take effect
immediately when you refresh the page. To test the edited thumbnail, you
can use an incognito/private browser window or clear your browser's
cache.
Please note that not all blocks use these custom thumbnails. Here's a guide indicating which blocks utilize this feature:
| Content Tool |
Thumbnail Image | Aspect Ratios |
| Gallery | Small / Medium / Large | 4:3 / 16:9 |
| Web Map (Image in feature pop-up) | Medium |
16:9 |
| Social Map (Image in feature pop-up) | Medium | 16:9 |
| Policyscape (Image in feature pop-up) | Medium | 16:9 |
| Q&A (Respondent avatar) | File Manager Listing | - |
| Events Feed | Small |
4:3 |
| Feature Grid | Medium / Large |
16:9 |
| News Feed | Small / Medium |
4:3 / 16:9 |
| Project Map | Small |
4:3 |
| Projects List Highlighted Projects List |
Project List Card | 16:9 |
For flow type forms with images, its important to note that the Form editor doesn't allow you to adjust the positioning of the image used as a banner. The dimensions of the image are automatically set with the adaptive view the platform has.
For the curious folk: The height of the image is set at 25% of the viewport height, with a
maximum height of 250 pixels. The width of the image dynamically adjusts
based on the screen width, with 876 pixels being the maximum rendered
width. As you resize your window, the image will proportionally scale
down.
Unfortunately, there is no built-in feature to change the positioning of the image using the thumbnail editor. Users looking to adjust the image's position will need to manually edit the image itself.
It's worth mentioning that not all images are well-suited for use as banners in flow type forms. Images that are already heavily cropped may not be the ideal choice. Ideally, you'd want more space to the left and right of faces or important elements to ensure they are always visible. The focal point of the image should ideally be centered to create a balanced and visually appealing banner.
Flow Form with Image:
Alternatively - you can opt to just add an image block 'above' the form tool instead:
To further elevate and innovate our focus on creating the best-in-class software solution dedicated to community engagement, we have decided to rebrand The HiVE as Social Pinpoint with an exciting update to the Social Pinpoint brand to match!
Community engagement is an ongoing process of collaboration and co-learning. When we evaluate our community engagement initiatives, we give ourselves the opportunity to measure our deeper impact and make improvements for future projects.
With the right action plan in place, we can ensure we are connecting with our community on an appropriate level to enhance public decision-making.
