Images Formats and Responsiveness

RapidWeaver Classic
1

As a newcomer to RapidWeaver I am going through the usual birth pains, but I’ve got a few pages up and running at www.bernardsmith.eu. I had a few questions about image formats and the RW community strongly suggested I stick with jpg, png, and gif formats. Before I commit to more webpages I’ve a couple of questions about images, and this webpage is a good example http://www.bernardsmith.eu/travel/castles_of_the_loire/.
My main problem is that the images don’t scale automatically when viewed on an iPad or iPhone, i.e. they stick out the right-hand side of the page. Probably a dumb question but I thought this would be automatic. Do I have to switch something on?
Also I have a png image of the different wines that looks fine in Preview and publishes fine, but in Edit it is just a big empty square. I can click on it and change the filename, Alt Tag, etc. The ‘Scale Image’ box is ticked and its set to 100%, but if I untick the box then the png image disappears in Preview mode. Irritating because I can’t see the logic. Sorry if these are dumb questions, but I’m almost ready to start to move my old website over to my new design. Just don’t want to make too many foolish mistakes that will cost me later.

2

You’re obviously adding something to the page that’s making this happen.

I just copied the top image and text, dropped each one into an Image stack and a Text stack, turned the sidebar off, previewed and then re-sized and the picture adjusts as it should. See attached.

screenshot_147
screenshot_147576×773 115 KB

I’d copy the page, add stacks one a time starting with the first image and see if it looks OK, then proceed until you find the one that breaks it.

Rob

1 Like
3

https://www.w3schools.com/css/css_rwd_images.asp

4

Hi, not using stacks, trying to keep thing ultra-simple. But your right, I should go step by step and find the culprit. Thanks for the advice.

5

Stacks would not make things not simple. (Did I just use a double negative?) All you would need do is drop the image is a good (responsive) image stack and that’s it. There is a specific stack to do almost anything, thus, using stacks would be the ultra-simple solution… not, not using Stacks (opps… did it again.)

6

The Stacks plugin is such a good investment. As @1611mac says, it makes everything - including stuff like this - so much easier.

Rapidweaver is the gateway drug to Stacks.

Rob

2 Likes
7

Although stacks is a good investment, you can make responsive images without purchasing stacks.

Try adding this CSS to your page(s) with images:

.imageStyle {
    max-width: 100%;
    height: auto;
}
2 Likes
8

Thanks, will try that out.
Not sure about my interest to have Stacks, the problem is I will not use 90% of its potential

Regards

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.