Square Essential Grid featured image

[finkk]

Hello there,

Hello there,

How do we change the height of the featured image in the Essential Grid skin? We would like to have equal height and width.

This is our example with the filter beneath the grid: https://leslieh7.sg-host.com/people/

Kind Regards,

Spencer

[prakash_s]

Hello Spencer,

Thanks for writing to us.

I would suggest you go to your Grid —>Click on the settings icon. Please have a look at the given screenshots below.

Now go to the Media Fit ---->Set it as Contain

Hope it helps
Thanks

[finkk]

Hi @prakash_s,

Thanks for getting back.

I appear to have to change this setting on each individual items in the grid on the settings page - is this correct? Please see the attached image. Can this setting be global so we do not have to do this every time a new member of staff joins?

Kind Regards,

Spencer

[ruenel]

Hello Spencer,

You can edit the Grid Skin and in your Layout Composition, change the Media Fit to Contain.

If you are not familiar with the Essential Grid Editor, please check this out first:

• https://www.essential-grid.com/documentation/item-skin-editor/

Best Regards.

[finkk]

Hi @ruenel,

Thanks for getting back to me.

I have set the image to contain and it is squared. We want to add a border radius to the image to make them round, but the image tag cannot be targeted and the div .esg-media-poster is rectangular and cannot be made into a circle.

Any idea how we can achieve this?

Kind Regards,

Spencer

[ruenel]

Hello Spencer,

Regretfully you cannot make it into a circle because those images were used as a background image of the .esg-media-poster. If you apply a border-radius, you will only get a semi-rounded corners like this:

What you wanted is beyond the limits of the Essential Grid Skin’s design.

Cheers.