search

tomusborne / generateblocks

GenerateBlocks is a small collection of lightweight WordPress blocks that can accomplish nearly anything.
https://generateblocks.com
194 stars 19 forks source link

Image Block improve object-fit #1090

Open diggeddy opened 1 year ago

diggeddy commented 1 year ago

Image Block Improvements:

  1. Add object-position property to the block settings. Value support is the same as background-position https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

  2. Auto add height: 100% to <figure> element if Object Fit is set and the Image Height has a % value. This is to resolve the issue highlighted below.

See example images. The columns are variable height. And the images both have object-fit: cover and height: 100% The right hand <figure> has been given height: 100% to illustrate the differences.

Screenshot 2023-07-26 at 10 33 21

For the given settings a users expectations would be that the right hand one is correct.

Consider: If Image Block has object-fit: cover and height has a % value then <figure> should have height: 100%

eastriverstudio commented 1 year ago

@diggeddy would be great if we could also get the object-position option to have better control over the postioning when object-fit is used. Sometimes just having it default to center center is not always ideal.

Calvin-Susan commented 1 year ago

Agreed — even if it was just the same implementation as background image position where you have a blank field you can type in.