Scaling header images for different screen sizes
 

Hello Chaps

It's been ages since I had to ask something, and it's bound to be easy but I just can't figure this out.

I'm trying to set up a rotating header on http://tinyurl.com/gw-dur. I have formatted two images so that the files are 1920px by 428px. I read your recommendation that the image should be 1920px if that's the possible size of the display used to view the site.

I want the whole image to appear. I've set the header image depth to 428px.

When I view the page it is displaying the image full height, but not scaling down the width to suit the window.

What's the trick to get it to display properly?

Thanks
Graham

The problem is that if you get the image to "scale down" in width it also will need to scale down in height because of its aspect ratio. Then the height you set will be incorrect. Also the overlayed title and tagline won't be positioned properly.

I would probably look at finding a responsive slider plugin and implement that in some way via code where %image is or by adding a new widget area if the slider has a widget. You will still need to figure out how the title and tagline will be implemented.

Thanks Larry

What I love about ATA is the user interface that you provide to adjust just about everything. People tell me I need to use a responsive theme. I tried Montezuma but it didn't seem to have your same user interface. I'm really keen to avoid yet another steep learning curve.

Is it worth hanging in there by using a responsive plugin or am I ultimately better off going for a different theme?

I realise that it's a tough question but I respect your integrity.

Cheers, Graham

it all depends… do you expect the majority of your visitors will be on mobile devices (other than iPads, iPhones)?
How much time are you willing to spend learning a new theme and how fustrated will you be if you can't change things?

Your site looks very simple (at the moment) and would probably be easly transfered to Montezuma. I did that with my churches preschool site earlier this year.

Thanks Juggledad.

I can't seem to fathom out the way of customising Montezuma - the equivalent of your super user interface in Atahualpa. Is it there? Am I just not discovering it?

I'd certainly prefer to stick with you guys.

Cheers
Graham

With Montezuma, you don't have the number of options to build your CSS style sheet for you, you have to edit the CSS files yourself. There's pluses and minuses. For someone new, the Atahualpa style options is easier, but once you have a handle on CSS and something like FireBug, it's easy to add the CSS in directly. Several times I've given a solution to add something to the CSS inserts and then realized that there is an option that could be used instead.

Anything new is more uncomfortable than something you alteady know, but that's what learning and exploration is all about. Dig out your inner kid and explore and make a bunch of mistakes, it's the best way to learn. Just realize you won't learn it all in one day. My latest 'project' is using a Raspberry Pi (with a couple thermo probes attached) to send the temperatures they record, every 15 minutes, to a program at our website that stores the data in a database, checks if the temperature is too low and if it is, send out an email alert to a number of people. In addition I have a program on the server that checks once an hour to see if it got any data (could be a power outage).

I started this because we had a couple pipes freeze. When I started, I just had an idea and persistence (and Google). I didn't know how to connect the sensors up to th ePi. I had to find and modify a python script to read the data and add to that code to format and send an http request to the server. I had to figure out how to make it run headless (no monitor or keyboard) and I've got version 1 working. I ran into a problem that it would work for two days and then stop, so I had to figure out what was causeing that (a bug in my code). But now it works.

For version 2 I'm going to turn the code into a plugin for our wordpress site. :)