How can I change the showcase to full width or use a slide to replace it?

[deusbraga]

Hi, first of all let me say Gantry is getting better and better. I used a few years ago when I purchased a template from Rocketthemes and, the difference between versions is just shocking.. Now, the predicament that brings me here is the following: I would like to stretch the showcase to full width but I can't seem to do it because I know almost nothing of coding. I've read somewhere that I should add the following lines to index.php to add module position within body tag( don't know where to do this):

<?php /** Begin FullwidthSlider **/ if($gantry->countModules('fullslideshow')): ?>
                <div id="rt-fullslideshow">
                        <div class="rt-container">
                                       <?php echo $gantry->displayModules('fullslideshow','standard','standard'); ?>
                                       <div class="clear"></div>
                                </div>
                        </div>
                        <?php /** End FullwidthSlider **/ endif; ?>
    <?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>

2 - According to the same website I should then add the module to templateDetails.xml(which I've already found in hydrogen folder but doesn't seem to mention any modules); And at last the Instructions I've read mention I should create some custom css file and add:

#rt-fullslideshow{
    width:100%;
    height:500px;
    z-index: 999;
    overflow: hidden;
    .rt-container{
        position: fixed;
        top: 0px;
        left: 0px;
        width:100%;
        height: 100%;
        .rt-block{
            width:100%;
        margin:0;
        padding:0;
        .module-surround{
        overflow: hidden;
        width:100%;
        }
        }
        .rt-grid-12{
            width:100% !important;
        }

Now, my problem is, I've opened my website's index.php(which doesn't mention nor body nor and the templateDetails.xml and I don't know where to add the information nor if the instructions I'm following don't apply to gantry 5. Sorry for the long post. Can you help me?

[mahagr]

1 - You do not need to do that anymore as you can just use layout manager and some custom css to do the same. 2 - No need to add position either; Gantry 5 does that automatically as well.

@kevlardev @FrugalGeek This one is for you. :)

[RyanMPierson]

Howdy,

There's a configuration popup for each section in Gantry 5. Here's a link to the documentation: http://docs.gantry.org/gantry5/configure/layout-manager#sections

This popup enables you to set Fullwidth or Boxed section properties from a dropdown, without having to edit any files.

[deusbraga]

Mine is set at 100% but I don't think the picture is stretched all the way to the margins. Please give me your opinion. My website is http://fafschool.esy.es/ By the way, how can I get the picture in the showcase to resize automatically when on a mobile phone or tablet?

[Boumy]

Hello. @deusbraga I was looking for such a setting, but fullwidth doesn't seem (afaik) to do the job. I have found a solution on the web. However, the example below is done with image backround.

.panoramaphoto{ width: 100vw; left: calc(-50vw + 50%); height: 300px; position: relative; overflow: hidden; background: url(http://www.yoursite.com/yourimage.jpg); background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; }

[Boumy]

In conjunction with fullwidth class shouldn't we also set the Section or the Particle to "nopadding" "nomargin" Gantry's variants to reach the border of the browser's window?

[norcaljohnny]

No matter I choose it will still not go fullwidth...any ideas?

[JoomFX]

@norcaljohnny add the following code in your custom.scss file (read the docs about this file):

//Fullwidth Utility Class for the Showcase section
#g-showcase {
    &.fullwidth-section {
        padding: 0 !important;
        > .g-container {
            width: 100%;
            padding: 0;
            margin: 0;
        }
        .g-content {
            padding: 0;
            margin: 0;
        }
    }
}

Then add fullwidth-section in the "CSS Classes" field (see your screenshot above). You might also need to re-compile CSS from G5 Admin.

@w00fz @mahagr @kevlardev Guys, why don't you just provide such utility class by default? I do provide it in my templates, but I'd like to make the name of this class the same as the one you will include in Hydrogen and the premium RT templates.

Also, I find the Fullwidth/Boxed option really confusing and useless. Sorry to say that but this is my opinion:

There are really just a couple of scenarios when someone may benefit of it. It is confusing, because in modern websites "Fullwidth" means something else - no container, no padding/margin.... basically a big section that occupies the whole width of the screen, usually used for a big slideshow/banner (of course there are many other use cases).

And if I would want to have a Boxed website, I would definitely not go and set each section to "Boxed". I would wrap the whole layout in a DIV with the g-container class. Yes, this would require a template override for the page.html.twig file, so it might be a really good idea to add such option, option that adds such a wrapping DIV dynamically in 5.2.0 :smile:

And sorry if I have just misunderstood the Fullwidth/Boxed option.

[norcaljohnny]

@JoomFX I LOVE YOU BRO! That did the trick! I have looked everywhere for this answer in the last 24 hours. 2000 thanks!

[JoomFX]

:smile:

No problem mate ;)

[JoomFX]

Here is the utility class which will work for all sections (not only for showcase as in my comment above)

//Fullwidth Utility Class
.fullwidth-section {
    padding: 0 !important;
    > .g-container {
        width: 100%;
    }
    .g-content {
        padding: 0;
        margin: 0;
    }
}

[norcaljohnny]

Thank you once more my friend! This is very helpful as I was duplicating the same codes for other sections. Your time and efforts are very much appreciated! :D

[w00fz]

I was thinking of adding a 3rd Option: Fullwidth (flushed content) that would behave like Fullwidth but kill all the padding and margins like your snippet does. And perhaps rename the current Fullwidth label to Fullwidth (boxed content)

Do you guys think that would work? The Fullwidth might sound confusing but it is indeed doing what it says, makes the section fullwidth, although you are right the content is still 'Boxed'.

I think there is a case for all 3, I don't think replacing the current Fullwidth with a flushed behavior will be sufficient.

So totally there would be 4 options like this:

• Default (Page Settings)
• Fullwidth (Boxed Content)
• Fullwidth (Flushed Content)
• Boxed

From Page Settings you set a default one so with 1 setting and all your sections are set to inherit from Default, otherwise you can go and change individual Sections to use any of the 3 possible approaches.

Seems like a good solution to me, what do you guys think?

[mahagr]

Sounds good to me. I'm going to assign this to you and 5.2.

[JoomFX]

Yah, it sound very good to me too. Thanks @w00fz

And regarding the Boxed Layout of the whole website - could you probably add such an option in "Page Settings"? I mean add a "Layout" field with the following options:

1. Fullwidth (default)
2. Boxed

And if the user selects the "Boxed" option, the whole layout will be wrapped in a new DIV with class rt-container. In my opinion this is the proper way of having a Boxed website. This additional DIV will help you for many things, for example adding a box-shadow to the Boxed website.

[w00fz]

The problem with wrapping the whole layout in a boxed representation is that all the sections within will become restricted to that and won't be able to go fullwidth anymore.

I think at that level it should be a template decision and organization whether the main layout should or should not behaving like that.

[JoomFX]

The problem with wrapping the whole layout in a boxed representation is that all the sections within will become restricted to that and won't be able to go fullwidth anymore.

This is the purpose of the wrapping DIV, to restrict the sections :) Without this wrapping DIV the developer is not able to set box-shadow of the whole boxed layout or to manipulate the layout at once.

But I agree that then the "Fullwidth" option in the Layout Manager will become pointless. Yah, probably it will be better to leave this decision to the template developer, even though without this option in G5 Admin, the developer will have to override the page.html.twig file.

Also, all other Joomla frameworks offer such option in the Admin.

It is up to you, the RT Team, to decide how you will go about that :smile:

[w00fz]

I would be ok to add the option, the only concerns I have are:

1. All templates will have to support the boxed view, which will add an extra step for developers even when this is not necessary desired
2. If a user selects Boxed and then tries to change options for the individual sections, soon will be realized nothing happens and although this would be expected behavior, it would be seen as an issue and causing a lot of confusion. We also won't have any easy way to show/hide the sections Layout options easily based on what Page Settings.

[JoomFX]

Yes Djamil, it is definitely a tricky decision.

Even before I asked for this to be added, I was wondering if this will be a good idea because of what you said in point 1 - that all templates will have to support it. And for example the latest RT Template, Kraken, should not support it.

Point 2 should not be such a big issue as it is common sense that a Boxed website cannot (and should not) have fullwidth sections. Actually, one of my G4 templates (GossipFX) is a Boxed Layout with fullwidth section at the top :smile:

Well.... yah, it is really tricky. There is no right and wrong here.

There are definitely pros and cons of adding this option (the wrapping DIV). I really don't know which decision will be better - with or without this option :smile:

[w00fz]

Ok so this is how the implementation for the Sections Layout looks like:

In the Header Section Settings, Layout is set to Default which means it falls back to the Page Settings value which in turn is set to Boxed.

Fullwidth (Boxed Content) is the Fullwidth that you can currently find in Gantry 5.1.5, the new entry is Fullwidth (Flushed Content).

If you guys have better names, I'm all ears :)

Note: I didn't see the need of resetting the padding on the section itself like you are doing, is there any reason why you are forcing that padding: 0 !important; there?

[JoomFX]

Hey @w00fz ,

Thanks for this :smile: For me the names look good.

In the Header Section Settings, Layout is set to Default which means it falls back to the Page Settings value which in turn is set to Boxed.

Shouldn't the "Page Settings" default be set to Fullwidth (Boxed Content)? Oh, I see that in the YAML it is set to fullwidth:

    layout.sections:
      type: select.selectize
      label: Sections Layout
      description: Default layout behavior for Sections
      default: fullwidth
      options:
        0: Fullwidth (Boxed Content)
        1: Fullwidth (Flushed Content)
        2: Boxed

But shouldn't it be default: 0 instead of default: fullwidth?

Anyway, it looks very good to me!

Regarding resetting the padding with !important - in my case it is needed because the #g-showcase and most of the other sections have the following padding by default:

padding: $section-padding 0;

Since it was a simple utility class (.fullwidth-section) I wasn't going with CSS/SCSS specificity, but I was forcing it with !important because of the id having a higher weight over the class.

[mahagr]

Should be default: 0

[w00fz]

Yeah that fullwidth was a leftover. Fixed now.

What I meant to ask with the padding is why did you need to reset it in the first place. All sections never have padding in it, was it just a precaution or am I missing something? You can see here https://github.com/gantry/gantry5/commit/d4ce5e9b0fe781bb1ae2068f5de95f6d02fa2eba#diff-48578b7867ebf2e6395a61d7e32f6c2a that all I'm resetting is the g-content and seems to be working well.

[JoomFX]

Hmm, I'm not sure we are on the same page :)

All sections never have padding in it

In Hydrogen, Showcase, Features and Subfeature have padding. And the Showcase is the position that is most often wanted to be fullwidth.

In my templates I have many sections and almost all of them have some padding by default.

If you do not remove the padding on the section but only remove the padding and margin on g-content, you will not have a real "flushed" section, you will not be able to put the, so famous nowadays, fullwidth slideshow below the header ;)

[JoomFX]

You might want to set a different background on #g-showcase and then publish a fullwidth slider in the showcase position and set it as "Fullwidth (Flushed Content)". You will still see the background of #g-showcase because of the padding.

[w00fz]

Ah I missed some sections having padding. I was testing Header and Navigation and they have no padding:

I'll reset the parent section padding as well.

[JoomFX]

Yep, Header and Navigation do not have padding :)

[w00fz]

There we go

[JoomFX]

Perfect! Thanks @w00fz

[ghost]

I am a bit confused, is this already added in CI Build? Or it's in another branch ?

Edit: Is feature, i see now, sorry :)

[norcaljohnny]

Hey great job guys and gals! I just downloaded the update, it did throw me off at first and some of my styling misbehaved, but all in all, this is great, helpful and will save time in coding. 2000 thanks from California!

[norcaljohnny]

OH! If I may add one thing...I have heard some say this is like a secondary CMS, and at first I may have agreed with that, but NO, it really isnt....It is more like a powerful template maker that is fully customizable, and more positions than you can imagine. I am not sure if I even need another template at this point! What a gift you have freely given us :D

[w00fz]

I wish there was a way to up your comment. Thank you @norcaljohnny.

[norcaljohnny]

@w00fz I am glad you found pleasure in words, your efforts help me feed my family, in many ways, i love you all :D

[djyan]

i know how yo do it ... simply get into showcase container settings and choose - FULLWIDTH (Flushed Content) ... and this module will get the ability to expand to 100% of screen's width.

[pleblanc92172]

Can someone please condense all of the information above and write a single "How To" make a slider full width in any layout section?

[gaelicwinter]

Regarding your first part, I believe I solved this by adding the styles nomarginall and nopaddingall to the particle in the showcase position.

Sent from my iPhone

On Dec 31, 2015, at 2:59 PM, pleblanc92172 notifications@github.com wrote:

Can someone please condense all of the information above and right a single "How To" make a slider full width in any layout section?

— Reply to this email directly or view it on GitHub.

[pleblanc92172]

Gaelicwinter - Are you suggesting that I don't use the fullwidth option and just use no margin and no padding?

[pleblanc92172]

I just tried that and it didn't work. I am using the Gantry 5 Hydrogen template. Can you give me step by step? The only full width that is working for me is in showcase. I would like to add a full width google map at the bottom. No matter what I do it will not go fullwidth. Please Help Me Someone!!

[gaelicwinter]

I think my template was pre-full width option and I did not have that available to me, so if that is available it sounds simpler to use. Multiple paths to your destination, etc.

Sent from my iPhone

On Dec 31, 2015, at 3:06 PM, pleblanc92172 notifications@github.com wrote:

Gaelicwinter - Are you suggesting that I don't use the fullwidth option and just use no margin and no padding?

— Reply to this email directly or view it on GitHub.

[pleblanc92172]

None of the paths are working. No matter what i do the image will not go full width. I know you are busy so thank you for replying. But please let me know when you have a moment to assist further. This is a commercial site and i am under a lot of pressure.

[pleblanc92172]

Hey Guys - Do any of you know how I can get Gantry 5 Hydrogen template to display full width on any of it sections? For example: I have an image\pic in the Subfeature section but it will not display full width even after changing variations to full width. It really isn't rocket science it just wont display full width in any section other than the showcase section. Please help guys... I know you are busy but i really need help with this one.

[mahagr]

Fullwidth Flushed will remove all margin and padding from the content.

[pleblanc92172]

Mahagr - Could you please give me the steps? I am a template manipulator not a programmer.

[pleblanc92172]

Guys - I read from top to bottom. I don't see any step by step instructions on how to enable fullwidth images in gantry 5 \hydrogen. Will someone please...please....please take the time out to add those steps

[RyanMPierson]

@pleblanc92172 I'm working on it right now. Apologies for the delay I've been away on holiday. Getting caught up with requests presently.

[RyanMPierson]

@pleblanc92172 Just so I'm clear on what you'd like to have documented, are you wanting to have the section flushed to the edges of the browser? This can be achieved by going to the section's settings and switching the Layout option to Fullwidth (Flushed Content).

Make sure you have an updated version of Hydrogen (if that's the theme you're working with) and Gantry.

If you're referring to a single item in that section (such as an image within a particle) and having the particle's content non-flushed, it will take a bit more doing. But for the most part, this option should make any particles and/or content in a given section flushed to the edges of the browser.

I'll confirm and dive in with the development team tomorrow to get a comprehensive guide fleshed out for documentation. Thanks for your patience. I hope this helps. If it doesn't, just let me know (specifically) what you'd like to achieve and what you're working with. I'm here to help. :)

[pleblanc92172]

@FrugalGeek, Thank you so much for your help! I am using Hydrogen (v5.2.6 / g5_hydrogen). Gantry Version: 5.2.6 / Released: December 21, 2015. I am referring to a single item in a section (such as an image within a particle). Fullwidth works in the showcase section but not the others such as Subfeature. I added a particle with an image. I chose the fullwidth variation with no luck. I added and removed no padding and no margin... still no luck. I need the particle's content non-flushed. I need to be able to make any particles and/or content in a given section flushed to the edges of the browsers width. Again, Thanks!.... Peter LeBlanc

[RyanMPierson]

Hmm, I created a Custom HTML particle and placed it in Subfeature, set it Fullwidth (Flushed Content) and the image is totally flushed to the edges of the browser, just as expected.

When you talk about taking a part of a particle and changing how it acts without affecting everything else, you need to change the particle itself. That may require some coding as it means you will need to put a class on the image the particle displays that isn't consistent with the look of the rest.

Now, what I think you might be wanting to accomplish based on this conversation is a background image instead of a color for the section. An image that spans the width of the browser and the text is overlaid with normal padding and margins. This is explained in documentation.

You can find that tutorial here: http://docs.gantry.org/gantry5/advanced/customizing-theme-files#customizing-theme-files

[w00fz]

@pleblanc92172 Could you pass a URL to the issue? What you have should work

[pleblanc92172]

Sure.. www.fitzgeraldsrestoration.com - Please see the map and the interior boat images. I would like both of those to be fullwidth.