Header Images And Thumbnails With Wayne Corp
smouellette
I am trying to standardize the sizes of the thumbnails on this page: https://roi-ally.com/index.php/en/blog both the main area and the sidebar, while also having an image at the top of the article that scales but stays inside of the shaded area at the top, for example https://roi-ally.com/index.php/en/blog/how-to-do-a-long-term-study.
I have tried any of a number of combinations of the intro image, full article image and blog media, and I can't get one that is consistent across the blog page and sidebar while still constraining itself to the shaded image area on the article itself. I have even tried putting a narrower image in for the intro and/or the full article area with and without an image in the blog media area, but I can't find something that
- looks the same across the blog entries and sidebar while
- Constraining itself to the shaded area in the article itself.
I'd appreciate any help you can give me in achieving this! Login info below.
Ziaul Kabir
Accepted AnswerHello Smouellette,
Thanks for reaching out to us.
Could you please check now?
Thanks
smouellette
Accepted AnswerWell it scales, but it does not keep the aspect ratio, so my face gets squished. There must be a way to scale proportionately since it does that with the graphic in full-size article.
smouellette
Accepted AnswerI also noticed that some of the header images behave differently. For example, compare https://roi-ally.com/index.php/en/blog/measurement-system-analysis-potential-study-with-steve-ouellette which just chops off the image to https://roi-ally.com/index.php/en/blog/how-to-do-a-long-term-study which squashes or stretches the image. The difference is if the graphic is in the intro and full article spot or the blog media spot.
Ziaul Kabir
Accepted AnswerFor image squished issues, please, use similar aspect ratio's image for all article. If a image is small then it will be squished, To prevent this you need to do that.
You may notice inconsistent behavior in the length of your blog article titles—some titles span one or two lines, while others go up to three lines. To maintain a consistent layout, you can set a minimum height on the main wrapper <div>. This will help ensure that all article cards have a uniform height in most cases, regardless of the title length.
Let me know if you need help implementing this.
Ziaul Kabir
Accepted AnswerUse this css in your custom css:
.view-article .article-details .article-full-image img {
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}Thanks
smouellette
Accepted AnswerTake a look at https://roi-ally.com/index.php/en/blog/how-to-do-a-long-term-study. That image is not small, and is about the same aspect ratio of all my article headers - 1955 x 557, the original aspect ratio in the demo site for Wayne Corp. Or here: https://roi-ally.com/index.php/en/hidden-blogs/blog/from-false-confidence-to-trust-how-msa-transforms-quality-control that one is 1920 x 474.
I feel this is different behavior than previously. I uploaded a short wide image and it just worked. Could something have changed?
I don't mind the title wrapping - it is not too bad.