Jump to content


Photo

Multiple banners on mobile version [Jetpack]

display header mobile jetpack image plugin

  • Please log in to reply
9 replies to this topic

#1 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 16 June 2017 - 09:16 AM

Hi all,

 

Each page on my site uses its own specific header image relevant to it.

 

I did this via WP Display Header plugin, but I don't know how to do this for the mobile version of the site i.e. the same banner appears on every page.

 

Is this possible? If so, how?

 

Any help is appreciated,

 

Niall



#2 BlueDreamer

BlueDreamer

    Web Guru

  • Moderators
  • PipPipPipPipPipPip
  • 7,440 posts
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 16 June 2017 - 11:39 PM

You mean use image SRCSET or the PICTURE element to use different sized images depending on the screen resolution?



#3 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 17 June 2017 - 03:34 PM

Don't think so.

 

At the top of every page of the desktop version of the site there is a banner (directly above the menu) that is a different image depending on the page. I did this via the plugin mentioned above. On the mobile version however, I can't change the banners so only one appears throughout the site.



#4 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,448 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 18 June 2017 - 02:38 PM

It's not working because you have a mobile site and a desktop site.

 

Change to responsive theme and bin the mobile version and the plugin will work.

 

PS: That's just one the problems with the site - there are lots of other things need fixing



#5 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 18 June 2017 - 03:51 PM

Ah, that's too bad.

 

What other problems are there?

 

I was hoping to keep a mobile theme for any phone users.



#6 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,448 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 18 June 2017 - 08:52 PM

You don't need a mobile theme, you need a responsive theme. This will adapt to any screen site: small phone, large phone, small tablet, large tablet, laptop, desktop and even a big flatscreen TV.

 

One of the problems is the link to the census on the homepage. It lesds to a 404 page with a depreciation warning.

 

The homepage sidebar is far too long. You end up with a great chunk of whitespace below the two icons. The two icons are anonymous until you hover. But a hover doesn't work on a touchscreen.

 

The menus are all in capitals - makes them difficult to read. And again, hovers don't work on a touchscreen

 

The sidebar has broken links and missing info. Some pages have content hidden under the sidebar.

 

There is a column of social media icons down the left that don't work.

 

All of these things are easily fixed with the right theme and a bit of planning. There are loads more improvements you could make but getting the right theme would be a great start



#7 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 19 June 2017 - 08:38 AM

I should have mentioned that the site is currently a work-in-progress and I would get around to sorting out those issues.

 

The site was started in 2006 and regrettably was largely table-based, over time I knew I had to make a major overhaul, but due to the scale of the task I always put it off (the site being a voluntary undertaking also didn't help!). The original site is still up and currently in use, but I'm shamed by it...

 

On the original site's home page I had an interactive map I created using Flash, I intend to recreate it at some point (SVG?) and the white space was a reminder.

 

I kind of like the menu items being in block capitals, I personally prefer the clean shape rather than having letters 'hang' - if this preference makes reading difficult then of course I would change to suit.

 

With a responsive theme would that mean the layout is more or less a template design? I would prefer to work to my own design, is that possible with a responsive theme? Although this website is voluntary, I have dedicated a lot of my time to it over the last decade or so and while it's not perfect I strive for it to be - a very frustrating labour of love!



#8 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,163 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 19 June 2017 - 01:30 PM

I should have mentioned that the site is currently a work-in-progress and I would get around to sorting out those issues.

 

The site was started in 2006 and regrettably was largely table-based, over time I knew I had to make a major overhaul, but due to the scale of the task I always put it off (the site being a voluntary undertaking also didn't help!). The original site is still up and currently in use, but I'm shamed by it...

 

On the original site's home page I had an interactive map I created using Flash, I intend to recreate it at some point (SVG?) and the white space was a reminder.

 

I kind of like the menu items being in block capitals, I personally prefer the clean shape rather than having letters 'hang' - if this preference makes reading difficult then of course I would change to suit.

 

With a responsive theme would that mean the layout is more or less a template design? I would prefer to work to my own design, is that possible with a responsive theme? Although this website is voluntary, I have dedicated a lot of my time to it over the last decade or so and while it's not perfect I strive for it to be - a very frustrating labour of love!

 

If you want to carry the work out yourself, I recommend downloading a working copy of the site and creating a new template. You can use the existing site as a basis, but to be honest it's probably going to be a lot of work to move the tables out and replace them. The majority of Wordpress templates I've seen are just a mess of PHP and HTML mixed together.

 

It's also going to be in your best interest to get up to speed with modern web development and building responsive sites. I recommend stating at the absolute basics, this roadmap should get you most of the way, but you may feel it's best to watch other videos to expand on what you know.

 

https://teamtreehous...-make-a-website

https://frontendmast...ive-web-design/

https://teamtreehous...p-for-wordpress

https://teamtreehous...eme-development

 

These are paid resources. The Frontend Masters course can be done within the free trial, but I'd keep hold of the Treehouse membership until you're finished because of the amount of HTML, CSS & Wordpress tutorials available to do.

 

If this sounds like a lot to learn, that's because it is. The alternative is to use a pre-made theme, something like https://www.simpleth...ordpress-themes.



#9 Demonolith

Demonolith

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 19 June 2017 - 05:20 PM

The site I linked to is the one I overhauled in Wordpress, it doesn't use tables like the original site.



#10 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,448 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 20 June 2017 - 05:16 PM

With a responsive theme would that mean the layout is more or less a template design? I would prefer to work to my own design, is that possible with a responsive theme? Although this website is voluntary, I have dedicated a lot of my time to it over the last decade or so and while it's not perfect I strive for it to be - a very frustrating labour of love!

I build all my own themes and they are all responsive. It takes a while to learn the intircacies but you can build something very fast and light.

 

Most of the responsive components come from the CSS and @media equiries. As long as your theme is structure properly doing the responsive bit isn't that complicated.







0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users