ThemeConfigurator : Responsive : Image not responsive in footer : Fix?

[BrainSuperGlue]

Hi,

 

I'm using the default bootstrap theme, all good except. at the bottom in the footer, I've placed an image.

When the screen is full width the page looks fine, yet when I make the page width smaller, moving into mobile width, the image is not responsive unlike the rest of the page, so the image doesn't shrink.

I've seen a YouTube video that says if you have the standard Prestashop html editor, you can add a line that says

class="img-responsive"

That's fine as long has you have that editor.

As the image was added with Preferences/Themes/ThemeConfigurator/ "Hook Footer" , there isn't anywhere to edit the html to add the above class.

I just don't know either which file to edit to add it manually.

Any ideas?

Many thanks

BSG

[Scully]

You didn't mention your prestashop version in use.

And a screenshot of the image could be helpful. With V 1.6. we don't have images in our footer.

 

What editor concerns:

In principle you can use any text editor. If you don't have one, I'd recommend notepad++. It's easy to handle and has syntax highlighting for many languages.

The file in question might be footer.tpl.

Edited August 9, 2017 by Scully (see edit history)

[BrainSuperGlue]

You didn't mention your prestashop version in use.

And a screenshot of the image could be helpful. With V 1.6. we don't have images in our footer.

 

What editor concerns:

In principle you can use any text editor. If you don't have one, I'd recommend notepad++. It's easy to handle and has syntax highlighting for many languages.

The file in question might be footer.tpl.

Hi Scully, the version of Prestashop is 1.6

 

I don't understand "With 1.6 we don't have images in our footer"

 

I use Theme Configurator and the footer section is all about adding images to the footer.

 

As you can see, when the web page is open to full width, the image is in the correct position.

 

 

When the web page is set to limited width, the image doesn't responsively shrink to fit the width, it stays at its native width.

 

I had checked footer.tpl. It doesn't contain the theme configurator settings. You can add the responsive line to it with the image but it will literally take over the whole of the footer but the image does shrink when the page is limited width. That doesn't solve the problem though. It needs to be in the design placement it already is.

 

If I do an Inspect on the webpage for the picture it shows the following, it's from this I can't work out which file to edit.

 

Many thanks

BSG

[Scully]

In this case your file is located at the modules path: modules/themeconfigurator/views/templates/hook

The filename is hook.tpl.

Edited August 10, 2017 by Scully (see edit history)

[BrainSuperGlue]

In this case your file is located at the modules path: modules/themeconfigurator/views/templates/hook

The filename is hook.tpl.

Hi,

 

OK, so I went to the hook.tpl file at that location and it already has img-responsive in it.

 

Any ideas?

BSG

 

[Scully]

I think img-responsive isn't intended to handle such large images there. It's difficult to say without having a link to your shop.

[BrainSuperGlue]

I think img-responsive isn't intended to handle such large images there. It's difficult to say without having a link to your shop.

Hi Scully,

 

So I was thinking on this, the responsive side pictures on the site are of similar sizes to the non responsive map in the footer.

 

All of these pictures are controlled by the ThemeConfigurator.

 

 

I've attached the code for those side pictures and it doesn't look to have the img-responsive tag there but does state "100%" width and height which would still work given the smaller dimensions of the mobile window.

 

 

The link to the site BTW is this : https://secondtimearoundcharities.org/ecomm/index.php

[Scully]

But other pictures are not used at the same place. So it's a different story. And since you have enabled CCC for CSS files, we can't debug your site.

I'd try with adding max-width: 100% for the map.

[BrainSuperGlue]

But other pictures are not used at the same place. So it's a different story. And since you have enabled CCC for CSS files, we can't debug your site.

I'd try with adding max-width: 100% for the map.

Hi Sully,

 

For summary then, there is a configuration file for displaying images on the footer that the ThemeConfigurator uses. That the creation of the display code is created at runtime and there isn't one prebuilt file that is just contains the code posted for displaying the map on the footer. The key is finding and changing the image display code that ThemeConfigurator pulls in and add max-width 100% for the map. This could either be C++ or TPL or CSS. Is that a fair assumption?

 

I've also turned off all CCC if you'd like to take a look.

 

Many thanks for the help.

 

BSG

 

 

 

 

[Scully]

I haven't investigated all in detail, since I don't use the configurator for images at all. The only CSS class applied is 

class="item-link"

You could try to add a CSS rule to global.css or theme3.css for this class. But it might be used somewhere else as well. If this doesn't work, you had to adapt the configurators PHP code in order to apply a special class for your case.

 

Or as last option: Don't use the theme configurator and edit the footer.tpl accordingly. There you have every option of adding your own/new CSS rules.

Edited August 13, 2017 by Scully (see edit history)