How to stretch a cover image to the whole width of the page ?

[USB83]

Hi,

I'm using the default bootstrap theme and i'm looking for a way to replace the front page's slider and two blocks with a wide cover image as in the image attached.

I tried editing the index.tpl, the image appears but it's displayed within the central columns pagewidth

Any help is welcome

Thanks

[Luis C]

The way default-bootstrap is constructed, right in that area you'll be inside a container div. Container divs on bootstrap have a responsive "fixed" width, meaning it will span only until the set width inside the breakpoint.

If you do NOT mind altering your template you could always try to add a new container div closing all opened div tags right before the point you want to insert your image, and then add a new div using container-fluid class. Container fluid uses the full width of the viewport (not exactly, but close enough) so anything inside it should span to the whole div if styled correctly.

E.G.

OLD CODE
<div class="container xxxxx">
  <div class="row xxxxx">
    <div class="col-xxxxxx">
{h name='displaySlider....}
    </div>
  </div>
  <div class="row xxx">
    <div class="col-xxx xxx">
{h name displayHome...}
	</div>
  </div>
</div>

NEW CODE
<div class="container xxxxx">
  <div class="row xxxxx">
    <div class="col-xxxxxx">
      <!--remove displayslider hook -->
    </div> <!-- close tag -->
  </div> <!-- close tag -->
</div> <!-- close tag -->
<div class="container-fluid xxx"> <!-- NEW CONTAINER -->
  <div class="row">
    YOUR NEW CONTENT IMAGE
  </div>
</div>
<div class="container xxx"> <!-- restore old containers -->
  <div class="row xxx">
    <div class="col-xxx xxx">
      {h name='displayHome'}
      <!-- ETC -->
    </div>
  </div>
</div>

 

Another way around it (safer, probably) is styling your new content to span wider than the container itself. In order to make it behave like that I'd recommend setting the parent container (row or col class div) to position relative (and assigning it a fixed height, or a aspect ratio using padding, then setting your image wrapper to absolute and making it wider 

#parent {position:relative;overflow-x:visible;}
.mycontentWrapper {position:absolute;width:100vw;max-width:100vw;height:var(--yourfixedheight)}
.mycontentWrapper img {width:100% !important}
<div id="parent">
  <div class="mycontentWrapper"><img src="yourimgsr"></div>
</div>

A different approach using this second scenario could be using negative margins based on the fixed width container (and all of its media queries)

.mycontainerWrapper{  
	margin-left: calc(-100vw / 2 + fixedcontainerwidth / 2);
	margin-right: calc(-100vw / 2 + fixedcontainerwidth / 2);
}

It will all depend on how much you want to modify your template, or just hack around CSS.

 

It'd be great if you could show your template structure.

Let me know if this helped at all, or was just as confusing for you to read as it was for me to type 😕

[USB83]

Hey,

Thank you for taking time to reply

I kept looking around myself (after posting this help topic) and ended up editing the header.tpl file instead of index.tpl

the file contained this
 

<div id="page">
  <div class="header-container">
      <header id="header">

Head Promo Banner
Logo - Search - Cart
Menu/Navigation

      </header>
  </div>

Right after this, i added this code :

<div class="container-fluid">
   <div class="row" style="width: 100%;display: inline-block;height: auto;">
       <img class="img-responsive" src="image-banner-2500px_500px.jpg">
   </div>
</div>

then the tpl continued with the original code :

<div class="columns-container">
                <div id="columns" class="container">

It works fine, the problem is that it is now displayed on EVERY page, not just the home page 🤦🏻‍♂️

So now i'm looking for a way to 'tell' the template engine to only display my banner if the page displayed is the homepage.

Thanks again for your help

Edited February 14, 2020 by USB83
spelling mistake (see edit history)

[Luis C]

Prestashop 1.6

{if $page_name == 'index'}

Your full width container

{/if}

 

Prestashop 1.7

{if $page.page_name == 'index'}

Your Full width container 

{/if}

 

[USB83]

Ahh, it wasn't working because I wrote

{if $page_name = 'index'}

I used a single = instead of two. Basic php mistake 😓☺️

It works fine now

Now that my initial goal is done, my challenge now is to try and adapt the code of the default slider module for it to be displayed there, instead of a single fixed image.

thanks again