Full width Image on the home page

@pch
8 years ago
328 posts

Hello,

I have been trying to add a full width image that will show on the home page only similar to the one found on http://eskin.n8flex.com/ and https://www.jamroom.net but without any success. The image doesn't go full width, it just remains in the center of the page and has the size of the page content.

In my skin index.tpl (Elastic), I have used the following code:

  
<div>
      <div>
		<a href="{$jamroom_url}/url-here"><img src="{$jamroom_url}/skins/{$_conf.jrCore_active_skin}/img/image-here.jpg" alt="Text here" title="Text here" width="1920" class="img_scale"></a>
    </div>
</div>

Can someone tell me what am I missing to get the image full width?

Thanks in advance
updated by @pch: 11/08/16 05:49:28AM

Strumelia
@strumelia
8 years ago
3,603 posts

Maybe I'm wrong, but I suspect those images you are referencing are not header images, nor part of the header section.

--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
updated by @strumelia: 07/28/16 09:29:10AM

@pch
8 years ago
328 posts

Strumelia:
Maybe I'm wrong, but I suspect those images you are referencing are not header images, nor part of the header section.

Hi strumelia,

Thanks for your reply.

Yep, you are right, there are not header images. There are actually images on the home page, probably placed in the index.tpl. I have edited this post with the right title.

Thanks.

SteveX
@ultrajam
8 years ago
2,584 posts

Do you mean a background image, like the blue gradient here on jamroom.net?
https://www.jamroom.net/profiletweaks/background/2/1459964919

If so, you can add that as a background in your css. Jamroom.net uses this:

.index-splash {
    background-image: url('https://www.jamroom.net/image/img/skin/jrJamroomNet/bg2.jpg');
    background-size: 100% 100%;
    -webkit-background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}

You might not have a div with the class "index-splash", try adding it to body or html

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 07/28/16 01:20:45PM

@pch
8 years ago
328 posts

Hi ultrajam,

Thanks. I am not talking about the background image but about the image on the home page like here http://eskin.n8flex.com/
This is the image:
http://eskin.n8flex.com/skins/n8ESkin/img/slide_3.jpg

Anyway thanks for the css code for the background image i will take advantage of it and use the code.

Any idea about the full width image on the home page?

Thanks

@brian
8 years ago
10,148 posts

You just need to set the div it is in to width:100%. Make sure it is OUTSIDE the .container class, which likely has a max-width: 1140px on it. You can also do width: 100% !important if you want to force it out.

--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

@pch
8 years ago
328 posts

brian:
You just need to set the div it is in to width:100%. Make sure it is OUTSIDE the .container class, which likely has a max-width: 1140px on it. You can also do width: 100% !important if you want to force it out.

Hi Brian,

It doesn't work. No matter what I do, any image placed in the index.tpl file with the div set to width: 100% or width: 100% !important; even outside the .container class, just doesn't go full width. The image start at the left side border of the index.tpl border. I think maybe it is the way the Elastic template is set.

I have use this code:

    <div class="img_scale">
                   <a href="{$jamroom_url}/text-here"><img src="{$jamroom_url}/skins/{$_conf.jrCore_active_skin}/img/my-image.jpg" alt="text here" title="text here"></a>
</div>

I have even tried to reproduce the Jamroon site's main image (BTW, I love the way it is done). I placed this code in my index.tpl:


<div class="index-splash">
    <div class="index-row">
        <div class="index-top">

            <span class="index-leader">text here</span>

                        Text here.
            
            <div class="index-buttons">
                        Text here.
                <a href="linkhere">
                    <div class="index-hosted">
                                               Text Here</span>
                    </div>
                </a>
            </div>

        </div>
        <div class="down">
            <a href="#"></a>
        </div>
    </div>
</div>

and added the following style to my skin css:

.index-splash {
    background-image: url('https://www.sitehere.com/skins/myskin/img/myimage-here.jpg');
    background-size: 100% 100% !important;
    -webkit-background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}

.index-row {
margin-top:40px;
background-color:#161E34;
opacity:0.95;
}

.index-row {
position:relative;
}

.index-top {
padding:90px 20px;
color:#EEEEEE;
text-align:center;
font-size:22px;
}

.index-top {
padding:6px;
text-align:center;
font-size:15px;
line-height:15px;
}

.index-callout {
color:#FFD87C;
font-weight:bold;
}

.index-buttons {
margin-top:100px;
}

.index-buttons {
margin:20px 0;
}

.down {
bottom:-30px;
left:50%;
position:absolute;
transform:translateX(-50%);
width:60px;
z-index:100;
}

.down > a {
background:#fff url("https://www.my-url-here/skins/myskin/img/down_white.png") no-repeat scroll center center;
border-radius:50%;
display:block;
height:60px;
width:60px;
}

Same result. The image doesn't go full width even with code placed outside of the container class.

Am I missing something?

Also can you tell me in which file the main image on the home page of the jamroom.net site is placed? Is it placed in the index.tpl or in the header.tpl? Because on my site any image placed in the index.tpl doesn't go full width at all.

Does Jamroom.net site use the same header on the home page and the entire site? or Is the header.tpl on the home page different to the header.tpl used in the remaining part of the site? I am lost.

Thanks for helping.

@douglas
8 years ago
2,791 posts

I've fixed this on your site as well, the code is now in your header.tpl file and will only show on the index page, let me know if that will work for you.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@pch
8 years ago
328 posts

douglas:
I've fixed this on your site as well, the code is now in your header.tpl file and will only show on the index page, let me know if that will work for you.

Hi Douglas,

Wow, You are just The Best. It works. Thanks a lot for fix it for us. What a great support!

I was suspecting that the code should go to the header.tpl because in the index.tpl the full width was not working.

I just did a small change to the fix you provided because although the image was set to full width, the right side of the image was cut on the computer screen.

In the image tag, I've removed width:false heigh:false and I added min-width:100%; max-width:100% in the style tag next to background-position:cover. It fixed that small issue. No more part of the image was cut. Also width:"100%" and height:"100%" instead of min-width:100%; max-width:100% works, I have tried it.

By the way, just for curiosity, the scrolling down arrow on the jamroom.net home page under the full width image, how does it work? Does it use javascript?

I have used:

<div class="down">
            <a href="#"></a>
        </div>

and added this style to my skin css:

.down {
bottom:-30px;
left:50%;
position:absolute;
transform:translateX(-50%);
width:60px;
z-index:100;
}

.down > a {
background:#fff url("https://www.my-url-here/skins/myskin/img/down_white.png") no-repeat scroll center center;
border-radius:50%;
display:block;
height:60px;
width:60px;
}

I can't get it work. It seems that I was missing something maybe javascrit to get it work.

Thanks.
updated by @pch: 08/03/16 11:52:44AM

@douglas
8 years ago
2,791 posts

I don't believe there is a scroll down function for the Elastic skin.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@douglas
8 years ago
2,791 posts

pch:
In the image tag, I've removed width:false heigh:false and I added min-width:100%; max-width:100% in the style tag next to background-position:cover. It fixed that small issue. No more part of the image was cut. Also width:"100%" and height:"100%" instead of min-width:100%; max-width:100% works, I have tried it.

You actually don't need the min-width and max-width elements since the backround-position element doesa the same thing, I've removed them for you.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@pch
8 years ago
328 posts

douglas:
You actually don't need the min-width and max-width elements since the backround-position element doesa the same thing, I've removed them for you.

Hi Douglas!

The problem is back when you remove min-width and max-width and take back backround-position. Is the image displaying well from your side? from my side, it is cut off at the right side. Even on mobile the image doesn't get responsive. It doesn't fill the full screen.

Please advise. Thanks

@pch
8 years ago
328 posts

douglas:
I don't believe there is a scroll down function for the Elastic skin.

So, any idea on how to get that arrow down botton scroll down when you click on it. I have manage to display the arrow icon but I can not get it work.

Thanks

@douglas
8 years ago
2,791 posts

pch:

douglas:
You actually don't need the min-width and max-width elements since the backround-position element doesa the same thing, I've removed them for you.

Hi Douglas!
The problem is back when you remove min-width and max-width and take back backround-position. Is the image displaying well from your side? from my side, it is cut off at the right side. Even on mobile the image doesn't get responsive. It doesn't fill the full screen.
Please advise. Thanks

This is what I see in FF on my Mac.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@douglas
8 years ago
2,791 posts

I've actually added back in the min and max widths, it works better for mobile that way.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@douglas
8 years ago
2,791 posts

pch:

douglas:
I don't believe there is a scroll down function for the Elastic skin.

So, any idea on how to get that arrow down botton scroll down when you click on it. I have manage to display the arrow icon but I can not get it work.
Thanks

You might try something like this, create an anchor tag where you want the scroll button to take you to.

<a name="sectionname" id="sectionname"></a>
<div>Section you want to scroll to.</div>

Then add an onclick handler to your button or icon to scroll to that section.

<a onclick="$('html, body').animate({ scrollTop: $('#sectionname').offset().top -10 }, 'slow');return false;">{jrCore_icon icon="down-arrow"}
</a>

You can change "sectionname" to whatever you like, just make sure it matches in the anchor tag and the onclick.

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@pch
8 years ago
328 posts

douglas:
I've actually added back in the min and max widths, it works better for mobile that way.

Hi Douglas,

Yep, I have tested it several time it works well only with the min and max widths specially on mobile. Thanks for adding it back.

By the way, would you mind removing the site screenshot you posted in your previous post. As I mentionned earlier, the site is still under-reconstruction and I am busy working on it. Many things will be changed included the home page image which isn't even ready yet. I haven't disclosed the site yet and I even blocked Searches Engine bots from indexing it while I am busy working on it. Once everything is done, the site will go public. That is why I sent you the url and the admin credential by email. Thanks a lot.

douglas:
You might try something like this, create an anchor tag where you want the scroll button to take you to.

I will give it a try and let you know.

Thanks a lot for the great support. You are The Best, Douglas.

@douglas
8 years ago
2,791 posts

Sorry about that... the screen shot has been removed.

And your welcome!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Full width Image on the home page

Tags