Adjusting the size of Topper Image on Summaries and Categories view

Foundry Alloy
1

Can anyone tell me how to adjust the size of the Topper image as it shows up on the Summaries and Categories view?

I am using Topper Plus and Conditional. I am not sure if Conditional is relevant to this problem.
Thanks
Mho

1 Like
2

Hi there @Mho – I think we’ll need more information and a URL to look at, at a minimum.

  • What is the URL to your summaries view? Which topper you trying to adjust?
  • In what way are you wanting to adjust the topper?
  • How is your Conditionals stack setup? If you want to post a screenshot here that would help, if you can get everything into a screenshot. Or you can send me a ZIP file containing your project file to adam at elixirgraphics dot com

It is the evening here, so if you post the information above I can look at it in the morning, or if someone else here on the forum can help you perhaps they’ll post before I rise and make it back to my desk next.

1 Like
3

Hello,
Thanks for looking at this. The blog is at http://www.corybant.com/rw/case_studies_page
My stack looks like this:
[Conditional – {full entry} [ Container[Topper Plus[Container[floating image, header]]]Container[Margins[Blog Entries]]] – {Summaries} [ Hero Banner[…][Continer[Blog Entries]]

I have two problems. One is that the background image on the Topper Plus in the Full Entry View is always scaled larger than its display window. This works OK if the topper image is a cloud but for example if I have a drawing as the topper image on a blog, in the Full Entry View it is always only showing the middle of the drawing on Topper image.

The second problem is that I can’t control the size of the Toper Image in the Summaries View and it is always stretched out to be the same width as the Blog pge.

Thanks again for looking at this.

1 Like
4

The first thing to note is you’re using parallax, which means the image has to be scaled larger so that it can perform the movement of the parallax image. That’s just how it works. Second, the image is a background image in the topper. It is scaled and cropped to cover a specific area. In a responsive environment this can change depending on the device / screen size, orientation, etc. This is just how background images work. For your specific images for your use case, which has writing, diagrams, etc, you don’t want it to be a background image. I would not use the Topper Plus in this case unless you use a different topper image and just include your diagrams in your blog posts somewhere.

1 Like
5

Thanks Adam, very useful insights. That actually makes sense and it helps in gaining some appreciation about the way the stacks library developers try to balance style and content so the site looks good.
Are there similar esthetic consideration about the Topper image as it shows up in the Summaries view and the summaries text (e.g. it looks better if the image is bigger than the text) or is there a way to control the size of the Topper Image in the Summaries view?

Thanks
Mho

1 Like
6

I’m not sure I follow 100%, but I’ll answer what I can…

The topper image keeps the aspect ratio of your original image. It also fills the width of the container of which the Blog Entries stack has been placed inside of.

When you say the …

I’m assuming you are referring to the summary itself on the summaries page, correct? If so, my suggestion would be to avoid placing an image within the first part of your post’s entry that will appear in the summary. In other words if your summary is set to 150 characters I would not place an image in the blog post until after that 150 characters. Say after about 200 characters or so. Basically after your intro paragraph in the blog entry.

Not sure if I answered your question or not, but hopefully I did.

1 Like
7

Thanks Adam,
Yes I did get my answer. The Topper image fills the width of the Blog entries container. I can work with this now that I know not to wonder into the weeds.
I keep falling back on thinking about this as though it is a way to generate HTML and I think that is what gets me in trouble. I should figure out how to think of it as a framework that unifies posting images and text to multiple devices.

In any case, thank you very much for talking me in off the ledge - as it were!

Mho

1 Like