How do I move the Picture and About box in User Profile Page?

businessdad

Here we go, I created a test forum.
You can access it with the usual test/test credentials. You'll see it's very simple, the only two differences are the coloursand the absence of the extended dashboard (which would not make a difference anyway).

UnderDog

Now I'm really sure I'm not a CSS expert, but let's see if we can make some logic out of this:

< div id="Panel" >
< !-- Profile Panel, small box -- >
< a class="ProfileMainImage" href="/profile/2/test" title="test" >
< div >
< div class="Box About" >
< /div >
< div id="ProfileContainer" >
< div id="Content" >
< div id="mainContainer" >
Main content for Profile (big box)
< /div >
< /div >
< div style="clear:both" >< /div >

And the CSS for now:

body.Profile #Panel {
    float: left;
    margin-top: 15px;
    width: 250px !important;
}
body.Profile #Panel {
    float: left;
    width: 250px;
}

#ProfileContainer {
    margin-left: 275px;
}

#mainContainer {
    float: left;
    margin-right: -260px;
    width: 100%;
}

I still this should be done in the controller, but you can do it with CSS.

In the controller you can tell where to send those 'modules'

Don't get confused by the names that Garden (Vanilla) gives to its items.

Modules are those little boxes that show small parts of information. 'who is online' is a module, 'about' is a module, i think even the picture of the user is a module.
Other systems will call these 'widgets' or 'blocks'. It's all the same, they just give them a different name.

I cannot tell much about 'assets', I think it's something like the 'footer' which contains a bundle of information, same goes for the 'header' and the 'panels'.
You can send information (modules?) to those assets and then when the asset (for example the panel) renders, it shows all the information that was sent to it.
Makes sense?

x00

sorry misread the question

businessdad

@UnderDog I know CSS well, and I also believe this shouldn't be simply a CSS hack, but rather a repositioning done via code.

I'd like to ask you something, so that I can better understand what we're talking about. When you say I still this should be done in the controller, what controller are you talking about? Since I haven't coded anything related to the theme, I find myself with all default controllers and I'm not sure which one should be modified.

I think that, most probably, if I get a better grasp of "who does what" in the theme, everything will become much simpler. Of course, I'm not expecting anybody to reverse engineer the theme or its plugin (perhaps @mcu_hq could help, since he developed it), but having an idea of where I should look would be a good starting point.

UnderDog

I agree, give me some time to figure out what you need, businessdad.
In the meantime, could you please consider adding it to the Wiki once we've figured it all out, together?

peregrine

I think it would be much easier to leave all the info in the panel and change the size and position as I suggested.

But as I understand things....

the page is controlled by the profilecontroller.php.

applications/dashboard/controllers

everything you want to move is written to the sidemenu in the controller - you would have to modify this or modify the plugin or change the css or override the profilecontroller and do what you want.

It is your decision what you want to do. You seem to be making it a little harder than it is.

If you want to go the plugin route (modify the traditional plugin) You have to use the events.

    e.g.  give this a try just to give yourself some insights.

replace this    

  public function Setup() {


    with this in the class.traditional.plugin.php

    public function ProfileController_BeforeRenderAsset_Handler($Sender) {

             $Session = Gdn::Session();
        $AssetName = GetValueR('EventArguments.AssetName', $Sender);
        if ($AssetName == "Content") {
               echo UserPhoto($Session->User, array('LinkClass'=>'ProfilePhotoCategory','ImageClass'=>'ProfileMainImage'));
        }

       }

    public function Setup() {

Maybe someone else will have idea that meets your strictures.

UnderDog

Take a look at the Url in your address bar

vanilla/profile/1/UnderDog

If you strip out the 'vanilla' part, you will see 'profile' (in this case).


After the controller you will see some other things, let's assume it says : /1/UnderDog

That will be the basic (first / default) action the controller will take.

If we look in the profilecontroller class (/applications/dashboard/controllers/class.profilecontroller.php)

do I need to explain about which applications are in Vanilla?

The first / default action will be Index (it will be in all important controllers)

So, the Index will do a bunch of actions (let's call them procedures):

• Get User Information
• Show either Notifications or Activities depending on whether user is looking at his own profile

And then the User information function will do some extra procedures:

• Get the UserRoles
• Check whether the user exists
• Get and add the UserPhoto 'module'
• Get and add the SideMenu 'module'

And now we're getting somewhere.

Whenever the function wants to add a module it's done with the following code:

$this->AddModule($SideMenu, 'Panel');

So you can send that specific module to a 'target', most likely the 'Panel', but in this case you want to send it somewhere else, right?

Well, then let's take a look at the 'AddModule' function (procedure) in /library/core/class.controller.php

public function AddModule($Module, $AssetTarget = '') {

If you want to debug, there's a little echo that's commented out, now you can uncomment it and play with your targets :-)



Just think of what you want the AssetTarget to be...

You have those 3 'columns' in which you want the 'ProfilePicture', the 'About' and 'here is something about me'

I just really really hope that once you've accomplished what you want, you will release a (modified) version :-)

peregrine

good luck.

line 941
$this->AddModule($SideMenu, 'Content');

line 1085
$this->AddModule($UserPhotoModule,"Content");

businessdad

@UnderDog I think I finally get it. Now I have a starting point and I can see where I can go from there.
I just have one more question about something that I find confusing. In $this->AddModule($SideMenu, 'Panel');, what panel is "Panel"? Maybe it's a stupid question, but "panel" is a very generic word to me. I used to work with frameworks where every block element was a panel (head, body, content, foot, sidebar, widgets, all panels inside panels). In which case, does "Panel" identify a single, specific element, or is it dependent on context?

@peregrine Thanks for your help too, I will probably evaluate the different options and see which one is the most maintainable. Also, thanks for the good luck!

To all
I apologise if I sounded demanding, messy or even simply dumb in asking my questions. Although I started working with Vanilla in February (3 days before mcu_hq, and look at his great search plugin!) my concern is not much getting the job done, but getting it done in a way that won't bite me where the sun doesn't shine a few months from now.

Perhaps my past experience is holding me back, but the question "is there a better way?" kept coming out every time I tried to apply a solution. That's mainly because I'm not familiar with Vanilla's theming system and I tend not to act if things are not clear to me. I should probably take it easy from now on.

Thank you very much for your help and patience. I'll surely ask for permission to release the theme to the public once it's complete (it's a project made for a client). Also, I'm going to release the custom User Statistics panel soon, just the time to finish testing it. I also have other two plugins "baking", which will be released soon enough. As you can imagine, having to "fight" on so many fronts at once makes everything so much more complicated...

Thank you all for all the support and suggestions, I'm learning a lot and I can't wait to give something back to the Community.

PS: I also promised, in the past, to publish my findings on how to do Unit Testing and Continuous Integration with Vanilla. That's going to happen too, sorry for being slow.

peregrine

@businessdad said:
UnderDog I think I finally get it. Now I have a starting point and I can see where I can go from there.
I just have one more question about something that I find confusing. In $this->AddModule($SideMenu, 'Panel');, what panel is "Panel"?

Vanilla uses several primary assets as conventions:

Header  - top
Footer   - bottom
Panel    - right or left side - sized by css (generally smaller than content where people put there accessory info (whosonline, tags , etc)

Content - the primary info the larger div.

the general layout in vanilla 2.0.18.4
Top
panel  content
Bottom

or 
the general layout in vanilla 2.1

Top
content panel
Bottom


so in essence  panel is just the asset related to the div that is floated left or right of the content (the primary info on the page).

peregrine

all great questions Businessdad - they get us all thinking!

My thought now?

What solution would Lincoln Todd or Tim use to accomplish the movement (not important what theme is used).

businessdad

@peregrine Thanks for the explanation, now it's clearer. Regarding the opening question, if I understand the layout correctly, then I should move the boxes I want inside a div in the Content panel.

What I'm wondering is if it's possible to add more of these panels and create more complex layouts. For example, it's not infrequent to see a three-column layout (left sidebar, content, right sidebar). This would definitely require more than one Panel. I haven't been asked to do this yet, but I have this strange feeling in my belly...

peregrine

@peregrine Thanks for the explanation, now it's clearer. Regarding the opening question, if I understand the layout correctly, then I should move the boxes I want inside a div in the Content panel.

not necessarily - if you used a plugin you could throw everything into a top panel (or reshape panel as suggested above). The asset is just a convention to use various functions in vanilla for ease - but asset is not necessary. Basically its how you layout you divs is how they get positioned on the page.

header
top panel
content
footer

or

header
panel
content
footer

What I'm wondering is if it's possible to add more of these panels and create more complex layouts. For example, it's not infrequent to see a three-column layout (left sidebar, content, right sidebar). This would definitely require more than one Panel. I haven't been asked to do this yet, but I have this strange feeling in my belly...

of course you could layout divs left center right. you can add assets with any name you want.

search for adding assets whu606 had some good questions and answers about that.

businessdad

@peregrine Thanks again. Actually, the theme I'm using is relying on a plugin called Traditional, which I've been reluctant to modify as it was in Beta when I got it (without taking any merit away from @mcu_hq who wrote it). Therefore, I already have a place where I could write some code.

So, if I got it right, to alter the layout I could do the following:
1- Hide the current Panel by not rendering it, without moving it. This is to keep it there in case the client wants a sidebar (which is quite probable).
2- Add one more panel, somehow, where I'll put the boxes I need.
3- Add one more asset, to which I'll assign the panel created in step 2.
4- Render the asset in the layout and enjoy the result.

This should give me the expected result, while still retaining a good degree of flexibility. If this is a good approach, I got the what. Now it's time to find the how for each step.

I'll look into the questions asked by whu606, thanks.

peregrine

http://vanillaforums.org/discussion/20875/how-can-i-change-a-module-without-editing-the-core

http://vanillaforums.org/discussion/20628/how-can-you-declare-a-new-asset-in-vanilla

422

What would be cool, is griddifying vanilla. Like bootstrap, then append class to each div to change positions effortlessly.
I may dl new version, and have a play.

businessdad

@peregrine I'd like to explain what I understood so far, so that I don't confuse things:

• An Asset is a "big container", with one or more sub-elements, usually Modules, inside. One can think of Assets as "macros", good to keep together modules that always go together.
• To generate a <div>, I should create a Module. This module will then be assigned to an asset, via a plugin, using Gdn::Controller()->AddModule('ModuleName', 'AssetName').
• Modules implement a toHtml() method, which effectively renders them. Question: could modules use a View for rendering, to keep things separate?
• The template will be the skeleton of the page. Inside it, I can do two things:
  1- Render a module by calling it directly, using {module name="ModuleName"}.
  2- Render an Asset, which, in turn, will simply render every module it contains (Question: in which order?). An empty asset will be just like an empty <div>.

I hope I'm not too far from the truth (which, as they say, "is out there").

peregrine

its too complicated for me to process right now (I am kind of burnt out for the day), and I am no expert here

Rather than tell you what I think I know, perhaps x00, mcu_hq, s, lincoln, todd, tim or underdog could give you a more precise explanation.

look at a few plugins like the sphinx plugin and some of x00's karma plugins they are pretty extensive in techniques.

2- Render an Asset, which, in turn, will simply render every module it contains (Question: in which order?). An empty asset will be just like an empty div>.

http://vanillaforums.org/discussion/comment/163830/#Comment_163830

businessdad

@peregrine Thanks, I'm already diving into some plugins. I don't think I'll use mcu_hq's Sphinx one, though, it's a bit "massive" and I'm afraid I'd get lost in it. Still, it's one of the most useful plugins ever.

peregrine

the reason I mention the sphinx plugin - it has lots of answers to concepts you are asking about. You don't have to load it - just look at the code and try to mentally process through it, so far thats all I am doing before I load it.