I am using .jpg images of size 2000 x 625 pixels as header images. However, I have noticed that these images appear differently in different monitors. In some, they look either cropped or stretched. Is their any way to make the final output uniform and responsive to different display configurations?
I am facing this problem for header images of both the page-headers and the collection-headers .
Hey @parasmoni, how are you?
I believe you are referring to the images on the Tainacan Interface theme, right? Both page headers and collection headers have this behavior per theme design. While you can set minimum height for them in the Customizer Menu, if you want o make sure they will always fit to a scale that do not crops in any situation it will probably be necessary some css.
Would you mind sharing a link with the pages/images that you are using so I can write a few lines of code for you?
Also, as a side note, collection header images should be more “decorative” than “representative”. For displaying an image that represents your collection, use the thumbnail image. For composing a nice background, use the header.
hi @mateus.m.luna , I’m fine and I am really amazed at your such a prompt response. Yes, I am referring to the Tainacan Interface theme. I would have loved to share my pages with you, but right now they are in local intranet and not in internet. Let me explore how I can share my page with you. But thanks a lot for your prompt response…Will it be possible to share my desktop with you through TeamViewer?
Can you share the images? If you prefere I can also start a conversation in private here (only admins can open one-to-one conversations)
Yes I can share the images…give me minute
@mateus.m.luna , I guess you will need some time to respond. Meanwhile, I will be happy if my images can be removed from this public domain. Thanks.
Ok, so the solution is to go to the “Customize” menu → “Custom CSS” and add the following line:
.page-header.page-header--image-full > img {
max-height: unset !important;
object-fit: unset !important;
height: auto !important;
}
This will do for the Collections banner. The site banner is a bit more tricky, as it really expects to be overlayed by the site title, so it doesn’t care on cropping. I did some tests here and you could:
.page-header.page-height {
background-position: left;
}
This will make sure the “Majuli Archive” logo is not cropped, but the rest of the image, on the right side, will be. I don’t think it is an ideal solution. A preferred way to this is to disable the header image completely (Go back to step 2 and look for the “hide banner” option). This will allow you to set the Site banner as you wish using Gutenberg blocks.
To give you more details, once you open any page/post of your site to edit it on Gutenberg, you will see a “page template” option, like this:
Instead of the Default Template, select “Landing” or “Landing with Breadcrumb”. This will allow you to display that page (may be a landing page, a home page) without the space existing for the banner and title. So you can use an image block, set it to full-width and insert your image there.
A similar approach can also be done to collection pages, if you want to take more control over their layout. You can:
This will replace the traditional page created by the theme with your own page. A good thing about building your layouts instead of using images is that they can be more responsive (better to read on mobile screens) and accessible (you can set alternative text to be read by screen readers on the image block).
I know it is a lot, but take a time to play around. If you need more details, just ask me here 
Also, if you ever feel too limited by the configurations of Tainacan Interface you may try using the Blocksy with the support plugin, but I can tell you upfront that you will have similar challenges with the collection banners as they really are made to be more decorative than informational (we tend to let textual information for the Collection description).
Dear @mateus.m.luna , thank you for these detailed and explanatory options to solve my problem. I shall explore these methods tomorrow and will get back to you.
Dear @mateus.m.luna , I have inserted your additional CSS scripts and that has resolved my problem. I shall definitely explore the Gutenberg blogs soon.
Great news @parasmoni!
We’re curious to see your work once it is done, it is great to see people from all over the world playing with Tainacan
