Select to view content in your preferred language

Category icons are resizing to fit screen, changing their shape

693
1
Jump to solution
06-26-2023 07:47 AM
user74562
Occasional Contributor

I am creating a GIS hub. I have custom icons for dataset categories that users can click on to navigate to relevant data. These icons are circles with symbology relevant to what the data is. For some reason, certain icons are resized to appear as ovals, when the original png image file is a circle. I've noticed it's only certain icons that are resized, and rearranging their placement or their position relative to other category icons does not change their shape. I've seen similar circular icons on other GIS Hubs that do not resize, so I assume there's some option to keep the size constant, however I do not see any option to do so. Has anyone encountered this issue, and can they provide guidance on how to fix it? Thank you. 

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
user74562
Occasional Contributor

I found the solution. Customized icons in your hub must be 120x120 pixels. If they are not, they will be scaled down to those parameters. However, if your icon is not symmetrical, such as 200x300 pixels, it will resize it to 120x120. In my case, I had negative space around the symmetrical circle icons, resulting in rectangular parameters. When these were resized to 120x120, it converted the circle into an oval. If you are using customized icons, make sure the pixel count is at least a square so that no distortions will occur when the hub resizes it down to 120x120. 

View solution in original post

0 Kudos
1 Reply
user74562
Occasional Contributor

I found the solution. Customized icons in your hub must be 120x120 pixels. If they are not, they will be scaled down to those parameters. However, if your icon is not symmetrical, such as 200x300 pixels, it will resize it to 120x120. In my case, I had negative space around the symmetrical circle icons, resulting in rectangular parameters. When these were resized to 120x120, it converted the circle into an oval. If you are using customized icons, make sure the pixel count is at least a square so that no distortions will occur when the hub resizes it down to 120x120. 

0 Kudos