Blog's Topper image size


Hi Adam,

I am amazed at how well Alloy works, I can upload from my iPhone while on the road with Transit. Much easier on a small screen than some of the other options I have tried.

I do have a question, in case I am missing a setting somewhere, in regards to topper images. Other than uploading a static size, is there a way to set the size of an image in Alloy?

When I set the image to flexible and shrunk it that way, it lost the centering aspect of the blog. So the blog looked left aligned or that an unused sidebar was turned on like can be seen as an option in many themes.



Not sure I follow. Are you asking if Alloy can change the dimensions of the image you’re linking to for the topper, or crop it or something so that they’re all the same?


Hi Adam,

Yep, change the dimensions. When I uploaded a smaller pict, the page expanded to the larger size making it pixelated,

So, yes, is there a way to adjust the dimensions of the topper?



I set the container for the blog post to say 1200 px wide. I edit the images to be 2400 px wide. I also use an image compression app to reduce the size of the file. This method works for me. Alloy does not have any image sizing options. You need to edit your images prior to uploading them to your server.


@garageshop: No that isn’t an option of Alloy. The image is set to take up the full width of the container it is placed within. As @Steve_J points out, placing the Blog Entries stack inside of a Container to limit the width is a good idea. You’ll want to edit your images, also as @Steve_J points out, to make sure they’re at least as wide as the Container stack’s max-width value. This will prevent pixelation from upsizing of the image.


@Steve_J how big is the file size of your images? I’d love to use bigger images for e.g banners to span the full browser width. But I prefer to not use much more than 100kb for a picture.

I use to reduce the file size, after I exported them from Affinity Photo as jpg with 50% quality, which usually is enough for me.


@garageshop There is a way to make images not take up the full width of a container you use. But it involves using HTML instead of markdown. This bit of generic code will do it:

<img src="fullURL here" alt="text description" width="100%" />

The key is the width portion of the code. You could set to less than 100%. Markdown always assumes you want 100% of the available space.

I’m just letting you know in general. Most of the time in blogs folks want the images to span 100%. And for topper images it makes no sense to be less than 100%.


@mitchellm Problem is that @garageshop was interested in doing this for the Topper Image for each post. That is not an viable option for the Topper Image as Alloy creates that on its own.


Of course, Container stack! Thanks Steve and all. This makes perfect sense. I sometimes confuse the container and margins stack.

This is really helpful!