This is one of those things you think you know (at least for me) until you run into probs; as I am doing with a current site: would some kind soul please point me to a tutorial on image resizing in RW, please?
I want my banner jpeg to shrink and expand as I resize (browser and/or on mobile device), but not distort, crop or otherwise lose content.
I’m using Mirage; Karn is his usual extremely helpful self, of course - thank you!
But I feel I need to educate myself too about the best way to get a stable 1200 x 250 (or similar) image displaying properly at all screen sizes.
@MarkSealey: My response is about images in general. Depending on the theme used, and whether it is responsive, there may be other factors at play with a banner.
I always warehouse my images, and then insert with an HTML stack (or a stack that allows warehousing). With the HTML stacks I use this general code:
You can change the width to something other than 100%, but the idea is then the image will adapt to whatever the “container” width is, unlike what happens when I specify a width in pixels.
And it’s the actual display that I don’t seem to have control over - though I always like the idea of warehousing.
I can see how the CSS will vary from theme to theme.
In this case, I’m not replacing a graphic within Mirage’s Package Contents, but specifying an overwriting site-wide container definition in Configuration > Code > CSS:
It does display. That all works. Just that it doesn’t really shrink and re-expand; it ‘crops itself’.
Would it be preferable to add a width attribute expressed as a percentage?
What puzzles me is this: the graphic in the Mirage preview page (reddish lava and dark grey rocks) seems to collapse and fold in on itself when I shrink the browser window; and re-uncurl when I expand it.
It’s a big image, 3774 x 1000 px. Yet somehow it fits into the banner page under all circumstances.
The ideal space for us in this Mirage-themed site which I’m building for the banner is 1200 x 250 or 300.
Should I aim for a graphic that is precisely 1200 x 250, or a larger one?
Neither case has worked in days of experimenting so far - because it either crops as shrunk, or doesn’t collapse at all!
@MarkSealey: In this case I’d suggest contacting the developer directly (Jonathan at Nimblehost). It seems the banner is not truly “responsive” in the manner I’m used to thinking of responsive. Responsive images adapt both ways (vertical, horizontal) so the ratio of the image (e.g. 16:9) remains constant.
I’m sure Jonathan has a reason for doing the banner in this manner: but it’s not responsive in the usual meaning of the word, but it clearly “adapts”. I’m sure he can suggest an approach that would work.
Alternatively, if you can try adding a width attribute that may fix everything directly. (Not sure in this case as I don’t know how he has coded the header banner area.)
Thanks, Mathew; Yes I have written and am waiting for Karn’s reply. With the launch of Armadillo 2, they’ll be busy.
In the meantime, if you - or anyone - can point me to a tutorial which explains best practice supporting image size - in general in order for it to resize as windows shrink and expand, I’d be grateful. Thanks!