Jump to content

Recommended Posts

Store Logos Multi 1.0
Responsive and Localized Store Logos

Store Logos Multi

Compatibility:
Responsive 2.3.4.1 BS CE Frozen and all 2.3.4.(1.) BS EDGE versions and GOLD
PHP 5.4-7.2

How it Works:
Responsive and Localized Store Logos will add a new Logo page to your admin where you can upload 3 different logo sizes for each of your store languages.
A new alternative header content module is included which will display the Logo just like the standard core logo module.

Purposes:
1. Serve different logo sizes to allow the visitors browser to select the most apropiate for it’s device size and resolution. The browser will automatically download only the logo which fits best it’s need.
Example: You are using a banner style store logo which is set to half of the header width (col-6)

- for a standard desktop screen and a retina tablet a width of about 640px would be good
- for a retina desktop device with double resolution like i-mac, 1280px would be better
- for a small simple mobile phone 320px would be optimum to save download time.
This add-on allows you to upload 3 different sizes of your store logo (1280px, 640px and 320px for this example)
If your store logo uses the full width (col-12), upload for example the sizes 2560px, 1280px and 640px.

2. If you wish to use different versions of the Store Logo for each of your store languages, you can now easy upload a different set of logos for each language.
It is not mandatory, You can use one and the same logo and only upload to the default language. It will be used then for all languages.

 

Share this post


Link to post
Share on other sites

Does this work together with KissIT ImageThumbnailer Pro? Regardless of using pc or phone, i get 1280 logo always.

Regards,
Stephan


 

 

Share this post


Link to post
Share on other sites

Hello Stephan,

Try to change the tep_image functions in the module to tep_image_legacy.

It also depends on your mobile phone, if its retina 2x or 3x, you may get always the biggest version.

Share this post


Link to post
Share on other sites

ok, i changed the tep_image in tpl_cm_header_logo_multi.php to tep_image_legacy still getting the 1280 version always.

also deleted images from mobile chrome cache. still the 1280 only

its no retina. its a oneplus 3 mobile phone.


 

 

Share this post


Link to post
Share on other sites

I just checked and it is a retina display:

Manufacturers specs for OnePlus3

1080p Full HD (1920 x 1080 píxeles)
401 ppi

if your display width is 1080 px and your image is 1280 it will use this image size, the next smaller image wouldn't be enough

Share this post


Link to post
Share on other sites

I'ts difficult to simulate. I got it only in desktop chrome using the developer tools and adjusting manually size and xrate. But you have also to take care to work without cache. if the browser has already a bigger version in cache, it will not download again if the window is resized even you reload the page.

Share this post


Link to post
Share on other sites

example, as found here (second best answer) https://stackoverflow.com/questions/28650327/responsive-images-srcset-not-working

this one switches with the viewport / window size. don't know if that is ideal. what do you think?

    echo '<a href="' . tep_href_link('index.php') . '"><picture>
      <source srcset="' . $store_logo_big . '" media="(min-width: 1200px)" />
      <source srcset="' . $store_logo_medium . '" media="(min-width: 800px)" />
      <img src="' . $store_logo_small . '" title="' . STORE_NAME . '" alt="' . STORE_NAME . '" class="img-responsive no-watermark"/></picture></a>';[code]

 

 

Share this post


Link to post
Share on other sites

The original code worked when I tested. Anyway I'll have a look when I find time.

thank you

Share this post


Link to post
Share on other sites

I use 2.3.4.1 CE bootstrap version.

I have made a Christmas theme and I use this mod Store logos multi but it doesn't show the smaller logo i mobile view, I don't know why.

Can someone check in their mobile if it shows the logo DistansData webshop without the Christmas presents, or it is like it is for me that it shows the banner logo with Christmas presents in mobile view ? I thought if it is some cache problem in my mobile or something..

Look at it here https://www.distansdata.se/jultema/

Share this post


Link to post
Share on other sites

Thanks @burt for looking. hmm.. then it doesn't work this mod.. has anyone had the same problem and solved it ?

Edited by Kurre

Share this post


Link to post
Share on other sites
7 minutes ago, azpro said:

@Kurre  I think it looks fine .. probably your browser cache

Does it? in mobile view do you see this small logo version without presents ?

 

jultema-logo2-ny.png

Edited by Kurre

Share this post


Link to post
Share on other sites
33 minutes ago, Kurre said:

Ok..

You could give the modification posted by Stefan a try:

On 7/5/2018 at 4:22 PM, Stephan Gebbers said:

    echo '<a href="' . tep_href_link('index.php') . '"><picture>

	      <source srcset="' . $store_logo_big . '" media="(min-width: 1200px)" />

	      <source srcset="' . $store_logo_medium . '" media="(min-width: 800px)" />

	      <img src="' . $store_logo_small . '" title="' . STORE_NAME . '" alt="' . STORE_NAME . '" class="img-responsive no-watermark"/></picture></a>';[code]

Check also your resolutions, if viewed with a retina (high resolution device) it may take the big image even it is a small mobile screen.

Share this post


Link to post
Share on other sites

@Kurre,

This module is not intended to be used to show a different logo for mobile and desktop view. It is intended to show the optimized size of the same logo for each device size/resolution.

If you wish to show different logos for mobile and desktop/tablet, you have to use the bootstrap helper classes. It's a different approach.

Share this post


Link to post
Share on other sites
31 minutes ago, raiwa said:

@Kurre,

This module is not intended to be used to show a different logo for mobile and desktop view. It is intended to show the optimized size of the same logo for each device size/resolution.

If you wish to show different logos for mobile and desktop/tablet, you have to use the bootstrap helper classes. It's a different approach.

Ok so I have misunderstood the purpose of this module. What i want is one logo for pc/tablet and one smaller one for mobiles, is there such a module ?

Share this post


Link to post
Share on other sites
33 minutes ago, Kurre said:

What i want is one logo for pc/tablet and one smaller one for mobiles, is there such a module ?

As far as I know no.

What I do is just to use the core store logo module and duplicate the line with the image call. Then hardcode your small logo image name and add a bootstrap responsive class to show the small logo only on xs and sm and the big logo on all other viewports.

https://getbootstrap.com/docs/3.4/css/#responsive-utilities

Share this post


Link to post
Share on other sites
28 minutes ago, raiwa said:

As far as I know no.

What I do is just to use the core store logo module and duplicate the line with the image call. Then hardcode your small logo image name and add a bootstrap responsive class to show the small logo only on xs and sm and the big logo on all other viewports.

https://getbootstrap.com/docs/3.4/css/#responsive-utilities

Thanks, I will try to do that.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×