Alloy Images are Being Stretched

We’re following your advice, sizing our images before putting them into Alloy.

We find the images are being starched to fill a space (a particular size); how do we control the size of the image space that Alloy is filling?

It is happening in preview and full view.

Thanks

Bill

Are you referring to topper images or images in the body of the post?

Topper images are specifically designed to fill the width of the blog post.

I’ve added a topper image in the blog editor.

The image is being stretched in the Full Entry View and in the Summery View.

Our images are taller than they are wide, for example a BBQ Sauce bottle.

Is there away to adjust the size the space the image is trying to fill?

You can make your Blog Entries stack narrower with a Container stack. As I said the topper will be the same width as the Blog Entries stack, whether that is on your summaries or full entries.

New idea, just talking out loud.

If I need more control over the blog page layout and image size and placement; can I some how use Droplets and Embeds to aid in the formatting of my Blog?

In other words can I use Droplets and Embeds to place my blog entry on a page?

I’m not sure how that would achieve what you’re wanting to do, but now you can’t do that.

I’m trying to use Alloy as a product catalog. The problem is our products are taller than they are wide.

Do you have a suggestion for how I might use Alloy to make our product catalog or another suggestion?

Alloy’s blog is not designed to be a product catalog. It is built as a blogging tool. Its blog posts are specifically focused on blogging and isn’t designed or promoted to be anything but as blogging solution. I am sorry if somehow I gave the impression that the blog posts in Alloy were meant as anything but a blogging tool.

Can you “pad” you images with whitespace/background so the images are wider than taller? Either 4x3 or 16x9? You’d have to do this in an image editor before bringing the images in. How well it would work depends on what your images are of, but you may find Alloy is not the best tool for a catalog.

1 Like

Thank you for your suggestion, very helpful.

Do you have a stack suggestion that might work better?

I’d need to better understand what you’re trying to do, how often you need to add/remove items, etc. The solution doesn’t have to be Foundry specific. You’d be better off posting on the Realmac forum, as you’ll reach more users.

The width issue never bothered me enough to try to change it (though it does). It just now occurred to me that I could use an image editor to give the image itself the padding that I wanted and make the padding area the same color as the web page. I don’t know if that would work or not.

Can someone explain what the full width image issue is? As I don’t really understand the problem from the above posts.

There is no issue if it works for you.

Alloy favors photos that run left to right, wider than taller.

In my project, my photos are teller then they are wide. To fill the image container, Alloy stretches the images.

Have you a URL to the live site? It’s more or less impossible to help without seeing the site published.

This is an example of a photo that I was trying to to use.wee-willys-pasta-sauce 350

OK, that’s a picture. Not much help is trying to work with you.

When asking for help with something, expecially if you want to step outside the way the stack you are using was meant to be used (as I think is the case here), you need to provide a link to the live site. Without this, it’s impossible to help.

First off, I very much appreciate you lending me a hand; thank you.

I’m in the process of building out the site; no link at the moment.

When I tried to add the photo that I posted as an example, Alloy stretches the picture to fit the topper image, which throws the page out of proportion. Make sense?

Yes.

Then as I say, it’s impossible to help. The site is published surely? Else, you won’t be able to add items to Alloy?

I appreciate you may not want to share the link, but that means help is going to be limited, if not, non-existent: You just can’t work on stuff like this without a live site.

EDIT: Shooting in the dark here, but try this bit of custom css. Bear in mind doing stuff like this “breaks” the stack it’s applied to, normally isn’t supported by devs and may have implications not expected in certain circumstances.

.topper-image {
width: 300px;
margin-left: auto;
margin-right: auto;
}

Change the width value to whatever you want.