Beta 1 - Image Element Filters

Hey guys,

Just a thought, would it be possible on the image element to add an option on the filters for a gradient. I know this can be done with the advanced background but with adding an image to background it loses its’ ALT text.

Could you give us the option to add a gradient filter on top of an image element

Loving the effects functionalities.

1 Like

You can do gradients in the advanced backgrounds?!? Am I missing something?

You can do this with advance background BUT the problem is that then the image added to the background can’t have the functionality of ALT text. So currently if you have a website using images with gradients on them they are unable to have ALT text. Doing this can be a bit of a bummer on SEO

IF, there is a gradient filter that can be added to the image element then you can still have the functionality of ALT text which is good for SEO.

Sadly we still don’t have gradients anywhere. Adding them would take developing a new color picker variant. We’ve started thinking some smaller (yet very important) things for the next cycle and gradients is a strong candidate.

3 Likes

That really good to hear, already looking forward to the next cycle haha!

Also, another thing slightly off topic but still regards to images.

When I design a section that looks like this:


I usually have to add the image as a background and there is the setting to have it cover
Screenshot 2020-10-01 at 20.07.51, so that the image is sized correctly filling in the whole column. But then again this causes the issue of not being able to add ALT text to the image because it a background image.

Is there a way of adding an object-fit and a object-positionoption to the existing image element? I know that currently, we can do this via CSS styling but again it would be ideal to have it at a push of a button. Also, having all the setup that includes height, width, max min width/height would be useful along with object-fit and position.
Screenshot 2020-10-01 at 19.59.51

Howdy, @Maratopia_Digital!

Thanks for sharing, this is actually something I’ve been considering getting in for a while now, so your feedback gave me the final push to go ahead and get it in. :slight_smile: Below you’ll see a screenshot of the new setup for the Image Element:

You’ll see that the Object Fit & Position control line has been added to the image control group up top, allowing you to specify these two properties as desired (initial values are object-fit: fill; and object-position: 50% 50%; which are the native defaults for browsers). Additionally, I’ve included two new controls for Height and Max Height. Finally, I’ve regrouped the dimension controls here using our new control column UI pattern, so hopefully that will distinguish between the width and height controls.

2 Likes

@kory Absolute LEGEND!

This is awesome, thank you so much for getting this into the beta. I think it will be super useful for many.

Just been playing with it and I love the new UI with the width and height I think that makes it a lot better to understand. I would go as far to say that if all width and height sections on the other elements had this UI, it would be a PLUS. But all and all, this is working beautifully!

Just one thing, a minor typo on the object-fit drop menu on scale down.

Cheers,
Jonathan

@kory I think you ended up with a small spelling mistake on object fit.

Should be Scale Down not Sacle Down :slight_smile:

1 Like

Fixed! Good catch there.

Howdy @Maratopia_Digital!

Glad that you’re liking it. I agree that the new column UI pattern we’ve come up with on this cycle would help with a lot of situations, specifically widths and heights across Elements. I definitely want to try and go back and remap these all at some point, but I will have to balance it with some other design goals and other things I’m needing to wrap up first on this release. But rest assured your suggestion is duly noted, and I completely agree. :slight_smile:

Also, thank you to you and @urchindesign for catching that typo…completely my bad. It takes a village. :upside_down_face:

@Maratopia_Digital, I also wanted to let you know that I’m currently working on an upgrade to the advanced background partial throughout the tool where it will have a new “Image Element” option that outputs the image asset using an <img/> tag instead. It will obviously take away the ability to leverage things like background-repeat and how background-size/position operate a little differently, but you will effectively be able to leverage these new object-fit and object-position controls using that markup, and it will allow for hero images to be more SEO friendly. Additionally, I’m playing around with a “Custom” option, where you could put things in like custom sliders, other decorative shortcodes from plugins, et cetera. I think that will be a big improvement there as well (just wanted to share all that as you mentioned it earlier in the thread). When this is in I will provide my comments on this thread: Layout Builder: a Hidden SEO Issue

2 Likes