Our picks : images' size

[SecondSight]

Hello, 🙂

When I select a topic for the "Our picks" section, the image I publish is cropped. Example :

The image :

What it looks like once published in "Our picks" :

Is there a way to configure or change this ?

Thank you. 🙂

[Marc]

You would need customisation in order to change the way in which they appear on the 'our picks' section by default, or pick an image which suits the 'our picks' location

[SecondSight]

Ok. I will find the correct dimensions for the images. Thank you. 🙂

[Marc]

No problem. 🙂 

[Davyc]

I made some severe changes to the Our Picks Carousel on the front page, you're welcome to use and adapt the following CSS changes that allows some significant manipulation of the Our Picks.

This is before the changes:

This is after the changes:

 

/* Adjust our picks front page */
[data-role="carouselItems"] .ipsType_medium:not( .ipsType_richText ) {
    line-height: 1.53;
    display: none;
}
.cPromotedWidget_horizontal .cPromotedWidgetItem_content > .cPromotedWidgetItem_contentInner {
    flex-grow: 1;
    display: none;
}
[data-role="carouselItems"] .ipsPhotoPanel.ipsPhotoPanel_tiny.ipsType_blendLinks.ipsType_light {
    display: none;
}
[data-blocktitle="Our picks"] .ipsCarousel .ipsCarousel_inner {
    height: 330px !important;
}
.cPromotedWidgetItem .cPromotedHeader {
    min-height: 279px;
}
.cPromotedWidget_horizontal .cPromotedWidgetItem {
    width: 187px !important;
    display: flex;
    flex-direction: column;
}
.cPromotedTitle {
    font-size: 14px;
    font-weight: 600;
}
.ipsPad_half.ipsWidget_inner.ipsWidget_bottomBar {
    display: none;
}
.ipsBox--child {
    box-shadow: none;
    border-style: none !important;
    border-width: 0px !important;
    border-color: #26323e !important;
}
.cPromotedWidget_horizontal .cPromotedWidgetItem_content {
    padding-bottom: 15px;
    text-align: center;
   background: rgb(73 8 46);

}

Hope that helps 🙂

 

Edited August 2, 2022 by Davyc

[SecondSight]

Hello, 🙂

Yes it did help. Thank you. 🙂