Dynamic Logo

[AsTecModels]

Hi All,

Sorry for al the questions - but here is another one. Is there an addon or way to have the logo change size, eg one size for PC/tablet viewing, smaller size for mobile use?

Any help would be much appreciated.

[Omar_one]

Hi All,

Sorry for al the questions - but here is another one. Is there an addon or way to have the logo change size, eg one size for PC/tablet viewing, smaller size for mobile use?

Any help would be much appreciated.

Store Logos Multi by @raiwa
app.php/addons/free_addon/store_logos_multi

[AsTecModels]

Thank you just found and tried it. It works as i want but installs logo in wrong place.

Top logo is in right place but does not resize, bottom logo resizes but in wrong place, how do i correct?

[Omar_one]

Addon Discussion/Support.
app.php/addons/free_addon/store_logos_multi/support

[AsTecModels]

Sorted without an Addon, for anyone else wanting to do it, in file "tpl_nb_brand.php"
Change:- (new Image('images/' . MINI_LOGO, [], htmlspecialchars(STORE_NAME)))->set_responsive(false);
to :- (new Image('images/' . MINI_LOGO, [], htmlspecialchars(STORE_NAME)))->set_responsive(true);

[BrockleyJohn]

Don't edit the file in place, copy it to your template and edit that copy.
Correct location for this one is
catalog/templates/[selected template]/includes/modules/navbar/tpl_nb_brand.php
where, if you haven't changed it, the selected template is called override

This stops you losing your changes when updating to a new version of core. For more examples of overrides, read this:
https://phoenixcart.org/phoenixcartwiki ... a_Template

When you update language files within admin, it does the copy to template for you.

[raiwa]

What you are doing is to allow the mini logo (which in your case is very big) to adapt dynamically to the viewport.
Even it works, it is not the best solution because the big image data is still loading on mobile even the displayed logo size is much smaller than the image size. This results in slowing down the first time page load on mobiles.
A big logo like yours also breaks the navbar layout and occupies space which can better be used for other modules. The navbar brand module is intended to be used with a small logo.

A better solution would be to create a small logo for to show on mobile and the big logo to show on tablet and desktop.
There are several solutions for it:
1. - Upload your small logo image as mini logo in Admin -> Configuration -> Store logo
- Upload your big logo version as Main Shop Logo
The mini logo will show in the navabar module and the main logo in the content header module.
Now to show the navabar mini logo only on mobile, add the following classes to the copy of the navbar brand template: d-block d-sm-none
so line 15 starts with:

Code: Select all

echo '<a class="navbar-brand nb-brand d-block d-sm-none" href="

Then to show the header module with the big logo only on bigger viewports (tablet and desktop) add "d-none d-sm-block" to the Content container class list in Admin -> Modules -> Content -> Logo[header].

My addon Store Logo Multi is not needed for this. But it could be used if you wish to show 3 different sizes: Mobile, Tablet and desktop.

[AsTecModels]

What you are doing is to allow the mini logo (which in your case is very big) to adapt dynamically to the viewport.

A better solution would be to create a small logo for to show on mobile and the big logo to show on tablet and desktop.

Now to show the navabar mini logo only on mobile, add the following classes to the copy of the navbar brand template: d-block d-sm-none
so line 15 starts with:

Code: Select all

echo '<a class="navbar-brand nb-brand d-block d-sm-none" href="

I understand what you are saying, and I probably do that if I uderstood all "d-block d-sm-none" stuff I have read throught the User Guide and the section on Bootstrap Grid but it still does not make sense to me I know it is just me as I see it works. One day I will get my head round it.

Thank you all for you help and putting up with my silly questions.