Images Formats and Responsiveness


(Bernard Smith) #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.


(Rob Beattie) #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.

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


(Jannis from inStacks Software) #3

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


(Bernard Smith) #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.


(Greg Schneck) #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.)


(Rob Beattie) #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


(Doug Bennett) #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;
}

(Bernard Smith) #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


(system) #9

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