Media Object Suggestions

I really like the new Media Object component, but in experimenting with it, there are a couple of things that would make it even more useful.

  1. Please support SVG images in the image drop zone. I can see many situations where the image is an icon, which is most commonly an SVG.
  2. It would be useful if the MO had its own background color setting. It now appears to have no background color, which is handy, but I can see situations where I would like one without needing to resort to a section.
  3. I’d also like to see justification options for both the heading and the paragraph.

Thanks for adding these new components. They are certainly useful.

We will be adding better SVG support in the coming weeks.

We want to keep the components focussed, and solve one problem really well, which is why there is no background settings on the Media Object.

We are adding background settings to components where we think it makes most sense.

I have seen requests to add background settings for Grid, Flex, Grid Item, Flex Item, Heading, Paragraph, and Media Object. We think it complicates things, and worsens the UX, if we add background options to pretty much every component.

You can use the new Card component, which is likely the best option when using the Media Object. The Card is designed to be used within your content (whereas a Section would be better to wrap a group of components), and has options for background colors, gradients, and images.

More text options are on the way, likely in the next beta!

Thanks for the feedback :slight_smile:

3 Likes

I could not agree more, but this reinforces my idea that this background information should be captured in a separate BACKGROUND component. Then, it could be added where needed, but you are not hauling this complexity around if it is not used. My experience using Foundry 3 showed just how useful and important this can be.

I see what you’re saying, however, we’re also not convinced having completely separate components for backgrounds is the way to go.

One major downside would be that a separate component would add an additional layer to the component tree and an additional div to the exported code.

How is that any different from the current scenario, where when I want a background, I have to use either a container or a section? You are still creating an additional layer to the tree and an additional div to the exported code.

It’s different because those components with backgrounds have other settings as well. They serve a to solve a specific problem when building a web page.

If we separate out things like backgrounds, margin, padding, borders, shadows, etc, etc. then Elements would end up exporting “div soup”. You would also have a hard time navigating components as there would be so many on the page.

Those are not the only components that have a background settings. We plan on having components for all the most common situations that arise on a website.

For example: just this week we added the Card which has background settings.