Make Pangolin Top Pallet Logo Responsive?

DonWa2 · 2017-10-01 20:35:45

Pangolin page designs = turning out great @ the turning gate!

I'm curious if the Top Pallet Logo can be made to behave responsively so that the social media and search buttons don't overflow, making the top pallet twice the height on small to medium size view ports. If it all elements could flow into the pallet's 48px height, it'd be a bit cleaner. Larger view ports obviously don't produce the issue. Been trying various html + css solutions with no luck.

http://quatrainfotographic.com/?page=PangolinHomePage

Any insight would be greatly appreciated!
Don

charlie.choc · 2017-10-01 22:04:32

This is what I use on my site to show two different logos:

function ttg_pallet_top_title( $style, $path ) {
echo '
<li class="top-pallet-logo">
<a href="/">
<picture>
<source media="(max-width: 440px)" srcset="/backlight/custom/images/Short_Logo.png">
<img src="/backlight/custom/images/Regular_Logo.png">
</picture>
</a>
</li>
';
return false;
} // END

rod barbee · 2017-10-01 22:05:48

you could try placing the logo in the top pallet as a background image. Then write a media query that loads a different sized logo for smaller devices.
this is done by using phplugins to replace the top_pallet_title with your own code and using custom css to place the logo

I have an example of using the logo as a background image here: http://pangolin.barbeephoto.com/logo-background/
I've not made the logo responsive, by adding a media query, but that should be easy enough.

rod barbee · 2017-10-01 22:10:59

Oooh, I like Charlie's suggestion. Much easier.
I didn't even know about the <picture> tag. Got to learn something new today! Thanks!

If anyone is curious, here's info on the <picture> tag: https://www.w3schools.com/tags/tag_picture.asp

DonWa2 · 2017-10-02 01:59:53

The Picture Tag is a fantastic solution, Charlie. Thank you! I haven't heard of that one yet, either.
Very successful integration into the PHP module.

From reading Rod's link, it looks like this is limited to two images. If I were to identify a need for more than one re-size, it looks like media queries and using various size images as background logo might be the ticket, eh?

Thanks again for the quick replies and very useful code resources!
Don

rod barbee · 2017-10-02 02:03:26

If you need more than one image, then the CSS solution probably the way to go

charlie.choc · 2017-10-02 02:23:25

I haven't tried it but the picture tag supports more than one <source> element and the example in the link Rod provided shows three different images based on screen width. Each <source> element contains a media query and the <img> is the default.

Last edited by charlie.choc (2017-10-02 02:25:41)

rod barbee · 2017-10-02 03:38:33

might have helped if I actually read all of that page....

I'm going to have to play with that <picture> tag

rod barbee · 2017-10-02 03:50:20

one thing to note about the <picture> element: it's only compatible with the latest browsers. That means Microsoft Edge is compatible but Internet Explorer is not.
So if you have an appreciable number of visitors still using older browsers, they'll basically get what you're seeing now without using the <picture> element or replacing the logo image via css.

Community @ The Turning Gate

#1 2017-10-01 20:35:45

Make Pangolin Top Pallet Logo Responsive?

#2 2017-10-01 22:04:32

Re: Make Pangolin Top Pallet Logo Responsive?

#3 2017-10-01 22:05:48

Re: Make Pangolin Top Pallet Logo Responsive?

#4 2017-10-01 22:10:59

Re: Make Pangolin Top Pallet Logo Responsive?

#5 2017-10-02 01:59:53

Re: Make Pangolin Top Pallet Logo Responsive?

#6 2017-10-02 02:03:26

Re: Make Pangolin Top Pallet Logo Responsive?

#7 2017-10-02 02:23:25

Re: Make Pangolin Top Pallet Logo Responsive?

#8 2017-10-02 03:38:33

Re: Make Pangolin Top Pallet Logo Responsive?

#9 2017-10-02 03:50:20

Re: Make Pangolin Top Pallet Logo Responsive?

Board footer