Responsive logo

You are here

Thomas Bishop

Responsive logo

++++++++++++Update: Issue solved!++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

************************Note: I think I've found a way to solve this Mitch, so don't worry about it for now. Ill update this if I succeed. Cheers. ***********

Hi Mitch

I would like to serve a different sized logo at the following breakpoints:

Name-----Viewport size ------Image size
_______________________________________
Large --- 1366px and up --- 250x46px

Medium --- 768px-1366px --- 204x38px

Small --- 768px and smaller --- 158x32px

Currently the top size (Large) is the default on the site but when the viewport gets smaller this image becomes too big and loses resolution, hence why I want to serve scaled versions at these sizes. I am working from a SVG source which I have resized and exported to get the various pngs.

I am trying to do this via Drupal's responsive image module using the srcset attribute but it is not working (this is the guide I am using: https://chromatichq.com/blog/responsive-images-drupal-8-using-srcset). From research and forums it seems I need an overall image preferences pane but I cannot find them in the theme or within Drupal admin. Can you tell me how to do this, perhaps using PHP as I obviously cannot just use HTML which would be the straightforward option.

Alternatively, it might be easier to achieve this by using an svg version of the logo (I have found a way to upload an svg into the site branding region) and coding it to change size based on viewport dimensions.

Or maybe you know a better way. As far as I can tell the theme only allows for a single logo image but I really think it should offer more adaptive options.

This is really crucial to the appearance of my site so I would be grateful if you could advise.

Many thanks for any help here.

Cheers

Thomas