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 😄

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]

😄

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 😄

[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 😄

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 😄

[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?

[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.

[pleblanc92172]

@w00fz and @FrugalGeek - notice that the image in showcase is fullwidth but the interior boat image and the google map image isn't.

[pleblanc92172]

The site is currently under construction. Please let me know when you are finished viewing it so i can put the under construction page back up as soon as possible. i don't want the customer to see it yet.

[pleblanc92172]

@FrugalGeek - I see the Fullwidth option in variations but not Fullwidth (Flushed Content)

[RyanMPierson]

The one I was referring to is here:

[w00fz]

I don't see any map, I'm guessing you have it back under construction.
I think Ryan is spot on, you need to change the Section settings there, not the variation of the particle.

Try his suggestion.

[pleblanc92172]

I feel like an absolute idiot. You guys are correct. That fixed it. I was making the change in the particle setting and not the Section setting. When all else fail use screenshots! Thanks, guys. I have a large project that i'll be working on later this year. I am sure to use Gantry! Keep up the good work, Guys!

[BrenDude]

Hello all.
Any reason why my nav bar & menu is squished when using Fullwidth (Flushed Content)? The help wiki shows a pic sample of Fullwidth (Flushed Content) that is not squished. Any suggestions? Thanks in advance.

[norcaljohnny]

@BrenDude, do you have a site or a pic we can look at?

[BrenDude]

@norcaljohnny, yes, please see the attached snippet screenshot. I'm using the current Gantry 5 version on Joomla 3.5.1. Its a brand new localhost site where I'm just starting to try Gantry to check out what it can do. Fullwidth (Flushed Content) was one of the 1st things I tried. I did also try the Fixed Header Atom; but removed it in case it was related. It didn't seem to be related. Any suggestions? Thanks in advance.

[norcaljohnny]

@BrenDude,
I do not understand why you are using the full width flushed content on your nav. If anything I suggest full width remove container and if you want the menu flush to the right just select align right in the template layout options for that position.

[madmae]

I am having the same issue! Although, I went through this forum and quite a few others. Here are the steps I have tried so far:
made sure section settings were selected to Fullwidth (Content Flushed)
added code to custom .scss as recommended by JoomFX
added image picker to sections as recommended by "customize theme files" documentation
I have tried different pictures and different sections. The image will be flushed to top and bottom margins but there is still space on the sides. When I try setting the background image with the image picker, no image appears.

Your help would be greatly appreciated! I'm sure it's an easy fix but I just can't seem to figure out what I'm missing!

[w00fz]

Well the image is flushed, otherwise there would be padding at the top and bottom.
What you are missing is some CSS to make that image adaptable to the screen.

I haven't tried this but the concept is you need something of the like:

.fullwidth-section img {
    width: 100%; /* alternatively you could try 100vw */
    height: auto;
}

So basically you want that image to always fit horizontally and then properly scale vertically. I'm sure if you google you will find tons of documentation about this, it's purely CSS.

[madmae]

Okay. Thanks for the quick response. Where would I need to place this bit of code?

[madmae]

I was wondering about that. Hadn't quite fully formed the thought though... ; ) On mobile and tablet the image is fine, but on a desktop or tablet landscape mode the space is there.

[w00fz]

You should add all this logic in custom.scss, your best friend 😀

[madmae]

and that would be located in /templates/g5_hydrogen/custom/css-compiled correct?

[w00fz]

No, under /templates/g5_hydrogen/custom/scss. If you click the link it's all explained in there

[madmae]

sorry, I hadn't clicked. I'm a bit tired/stressed from being on the computer all day! Thank you again! Will check now

[madmae]

Okay, that did it. Thank you so much!!! I'm really excited about Gantry 5 and all its possibilities, and that was a big help!

[w00fz]

You're welcome, glad everything is sorted and that you're liking Gantry. 😃

[plainhavoc]

Hello, I've been loving on Gantry 5 for months now, both in Joomla and Wordpress. I do have one question in the vein of full-width. Now that we have sections able to do this, what would be the best method to allow content (And other positions) to also reach the margins? Would it be possible for the layout positions to inherit from the parent section?

[w00fz]

In the variations of the Block particle you can pick no margin and no padding, forcing the particle (position in your case) to fill all the space. If that's what you're trying to do.

// Djamil Legato // From iPhone //

On Sep 18, 2016, at 01:32, Robert Porter notifications@github.com wrote:

Hello, I've been loving on Gantry 5 for months now, both in Joomla and Wordpress. I do have one question in the vein of full-width. Now that we have sections able to do this, what would be the best method to allow content (And other positions) to also reach the margins? Would it be possible for the layout positions to inherit from the parent section?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[plainhavoc]

Hi w00fz, thanks for such a fast reply!

Sadly, I've already tried that (see screenshot) with multiple particles. Navigation and Header both show full-width and actually work. Not sure if there may be something overriding this in other sections and particles, but I have yet to find the cause. Any ideas?

[djyan]

if you want it to be 100% wide - use FLUSHED Content in a "Full Width"
variation.

On Sun, Sep 18, 2016 at 11:09 PM, Robert Porter notifications@github.com
wrote:

Hi w00fz, thanks for such a fast reply!

Sadly, I've already tried that (see screenshot) with multiple particles.
Navigation and Header both show full-width and actually work. Not sure if
there may be something overriding this in other sections and particles, but
I have yet to find the cause. Any ideas?

[image: content]
https://cloud.githubusercontent.com/assets/22272066/18618701/980f1f5e-7db1-11e6-84ec-d4f29be619de.png

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#747 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/APXI25oylu5-nPQUs2xvpBeawZAfnzJVks5qrZqDgaJpZM4Fw5sH
.

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■ ■ ■ ■
http://www.grizzlink.com | SKYPE : dj_yan_net | ח.פ: 304483571 |
info@grizzlink.com

[plainhavoc]

Hi djyan,

That actually reduces it to what I would call a "boxed" version. Before, at least the background image would touch the margins.

[djyan]

what template is that ?

[plainhavoc]

Just the basic Hydrogen with the particles, atoms, and background tutorials from the Gantry 5 documentation. Right now the default url (html) is pointing to a landing page, but it can be accessed via the .php. http://cwd.51shadesofgeek.com:8087/index.php