Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

DonWa2
Member
Registered: 2015-11-03
Posts: 32

Make Pangolin Top Pallet Logo Responsive?

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

Offline

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

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 350
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Online

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Online

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

DonWa2
Member
Registered: 2015-11-03
Posts: 32

Re: Make Pangolin Top Pallet Logo Responsive?

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Online

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

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 350
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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)

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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

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


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Online

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Make Pangolin Top Pallet Logo Responsive?

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Online

Board footer

Powered by FluxBB