HERO webpart - how to stop it autosizing in smaller window

[MagdalenaSmutek]

Hello:)

I have created a modern Sharepoint page for communication within the team. The first block that I have inserted is 2:1 columns en in the bigger column (left) I have inserted a HERO webpart with links to documents or others sites. So far so good.

But once the page is being scaled up or viewed on smaller screens or the window of the browser is presented in a smaller view the HERO app from the nice 5 pictures (one bigger left + four small and of the same size) to a corousel so that only one of the links is being shown (to see the others I have to click on the arrows). 

View in full window:

View in smaller window:

Now, is there an option on modern SharePoint site to change this behaviour? I have found an instruction to create an Image link from SharePoint site but it can only be used in the classic view which I cannot use (as on the same page I use many other modern webarts).

https://www.kalmstrom.com/tips/SPLinksImage.htm

Thank you 🙂

[#2]

Hello @MagdalenaSmutek ,

Instead of the Hero Webpart you can use the "Quicklinks" Webpart. In the edit pane on the right side you can change the button into Tile view, and also with full mode into your pictures. And then you can insert your hyperlinks to klick on the pics. Hope that helps. Greets, Eva.

[#3]

Hallo @Eva Vogel ,

Thank you for your tip and indeed it is a good solution, but from the creative point of view the quick links are nowhere near the HERO solution. See below:

They do stay on top the whole time but the pictures are not as prominent as in the HERO web part. That's why I was thinking that there may be a trick to add the pictures with links the old way - by which I mean: by hand (and code). So that the layout of the HERO web part will be the same but the picture could get smaller as the page is zoomed in or only partially showed.

If there is no other possibility we will probably go with the quick links but maybe, just maybe there is an option to overrule the settings?

[#4 · Accepted solution]

Hi @MagdalenaSmutek, the Hero Webpart is coded with a grid behind, but the classic code editor like SharePoint 2013 will not work, that correct. You can search for coding tips on github, to manipulate certain layouts in webparts, but you have to have developers permission to to that.

Another idea for you may be the "higlighted content webpart". You can show only your pictures in a certain (picture AND files) library, and thenspecify which pictures will be shown there, in which layout. But the responsive layout -i think it is part of the modern coding structure and you cannot manipulate it like media size, monitor size etc., as in the good old html5 times 🙂

Does that help? I personally like the new modern and very grid responsive design and it is not as static as in SharePoint 2013. Getting accustomed to the new grid styles in different devices is sometimes kind of "agile" and really not static at all, but it helps to read every text and see every picture and every monitor. Another kind of adoption challenge in my eyes... 

Give a Like if my ideas can help on your issues.

Kind regards, Eva.

[#5]

Hi @Eva Vogel,

Thank you for you tips - I have now dug deeper in the Highlighted content web part and will be using it although for other purposes. In this case I also think the HERO or quicklinks are the best solutions. Also as they respond to the changes in layout. I see this as a plus, but not everybody thought that way. 

I do not have the developers permissions to change the code behind the HERO web part, but maybe it is a good thing. This is after all only an internal page, not a page that is made for a customer etc. 

Thanks for your advice and time!

[#6]

Quite a bit of time has elapsed since this thread was created but for those who stumble upon it may want to know what's possible as of October 2022. Unfortunately, images are resized due to responsive state requirements. I recommend first understanding how these images resize in all major states (desktop, table, mobile) so that you can optimize the image you upload within a Hero web part. For ease I've created the SharePoint Content Creators Toolkit, which is 100% free to use. 

> Figma Download: https://lnkd.in/e9TvKxEy
> PDF Download: https://lnkd.in/eGFQgBPv

The SharePoint Content Creator’s Kit contains several components, templates, best practices, and other resources for creating your SharePoint site. This design kit shows how to take advantage of SharePoint's user interface capabilities and helps you focus on user experiences and best practice design standards.

Simply paste in your desired image, preview how it will appear in the generator, and export! It couldn't be easier.