Header Image in Discussions

Hi @LeonidS

Attached are the original image we published and the corresponding screenshots.

One screenshot is from a post on UNA 12 (the full image is visible), and the other screenshot is from a post on UNA 14 (the same issue occurs on UNA 13), where only part of the image is visible.

It's important to clarify that this happens on the post's view-discussion page.

Thank you for your response.

Hello @Claudio Acosta try this but of course you will lose the ability to move the image. Artificer-Styles-Custom Styles

.bx-base-text-entity-image img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;  
}

If you then want to hide the image buttons in the top left, you can do like this:

.bx-image-edit-buttons {
  display: none !important;
}

Thanks @PavelS , I'll try this, I'll let you know.

Hi @PavelS

I was finally able to test the CSS.

Now the image is a little more visible, but not completely. I've attached a screenshot of before and after.

What I don't understand is why the image isn't fully visible. Is there a purpose to it, or is it a bug?

Regards.

Hi @Claudio Acosta No, i think it's not a bug.. You need it to look like the screenshot, right?

Go to the page with the image and press F12, click on "Console" at the top, and paste this -- 

const style = document.createElement('style');
style.innerHTML = `
  .bx-base-text-entity-image img[class*="bx-image-edit-source"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 420px !important;
    aspect-ratio: 3 / 4 !important;
  }
`;
document.head.appendChild(style);

(height: 420px) -- adjust this as needed; I'd go with 650px, and then let me know, and I'll write the code for Artificer-Injection

Hi @PavelS

The idea is for the image to fill the entire width of the container.

The problem is that in the latest versions of UNA, this works differently. It's not the same as, for example, version 13, where the image is displayed in full and fills the entire width of the container.

I also arrived at the same result you did, but I'm not visually convinced, and in some cases, like the blue flyer, it makes it difficult to read.

I still don't understand the purpose of not displaying the full image, because there's surely some benefit that I'm probably missing.

Now I'm going to try replacing UNA's behavior and using <img src="real"> with a js script, only for the view-discussion page.

Thanks for your reply.