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

businessdad · August 2012

I've been asked to move the Picture and About box in User Profile page from the left sidebar to the main content page, but I can't figure out which main template I would have to override.

I could see that both the Picture and the About box are actually Modules and that they are stored userphoto.php and userinfo.php), and I copied the Modules folder in my theme, together with these two files. I then modified the copied files and I could see that the User Profile page reflects the changes. This means that my Modules are now loaded. What I'd like to know is how to position them where I like.

What I'm trying to achieve is something similar to current Profile View on Vanilla Community, where the User Info are above the activities, rather than in a block on the left.

Thanks in advance for the help.

UnderDog · August 2012

Can you either show the Url of your website or a screenshot of what you have at the moment? There is a huge chance you need to take a look at the CSS elements using FireFox (you need to find out the names of those elements, classes, Id's) because that's the way you can manipulate the position of those elements... I'll alert @422 for this one...

I'm also very very interested in what you have in your theme directory, which files do you have in there? (not to change anything, but as an example for other themes :-) )

businessdad · August 2012

I don't have the Forum live, yet, but the Theme I'm using is the Traditional Chocolate theme without any changes, apart from some colours.

I checked the layouts, and it's definitely not just a matter of CSS, as the User Info block is rendered inside a DIV which is separate from the content one. I have an idea of what has to be done:
1- Change asset for Sidebar so that it doesn't load and display User's Photo and Profile.
2- Change asset for Content so that it does load and display User's Photo and Profile.
3- Alter modules for User's Photo and Profile so that they render as expected (this step involved CSS).

Point 3 is the easiest, but I can't figure out how to configure what's loaded in the various sections. I should probably involve @mcu_hq as well, he's the one who designed the Traditional Chocolate theme.

UnderDog · August 2012

Well, sure..., I'll download the theme and try to figure out what you mean. I'm not a theme designer though, so I'll hand you over to those guys :-)

businessdad · August 2012

@UnderDog Thanks for the help. I'm also not very strong with themes, at the moment I'm focusing on the development on my first three plugins (which will be awesome! Hopefully...).

422 · August 2012

Im a work with what ive got man, so can help when you have something to see

businessdad · August 2012

@422 Thanks, I appreciate your help! :)

peregrine · August 2012

I would think you could do it this way in a plugin - don't know how to modify something in theme that refers to info coming from dashboard/views

 public function ProfileController_BeforeRenderAsset_Handler($Sender) {

       $AssetName = GetValueR('EventArguments.AssetName', $Sender);

     if ($AssetName == "Content") {

            //spit out what you want
}

add css
     div .Box About {
                             display:none;
                             }

mcu_hq · August 2012

businessdad said: 1- Change asset for Sidebar so that it doesn't load and display User's Photo and Profile.

Yea, you are going to want to unset this in your profile controller somewhere before the view is rendered.

businessdad said: 2- Change asset for Content so that it does load and display User's Photo and Profile.

You can probably do this in the plugin. Have you tried loading the module in the sidebar on the main page? My theme should allow you to have a sidebar on the main page. That is also where I displayed a sudo user profile box along with forum stats.

businessdad · August 2012

@peregrine I don't want to output a box and hide it, I really want not to output it at all. The CSS trick is, therefore, not the best approach, but thanks for the answer.

@mcu_hq I don't have a Profile Controller implemented, and I'd like not to implement a plugin anywhere for this. Layout belongs to the View domain of MVC, I'd like the views to get all the modules and decide freely where to put them.
Unfortunately, my knowledge of Vanilla's theming logic is practically zero and I can't even figure out who decides what modules should be loaded, what data should be passed to them and how they are given to the Views.

Regarding the sidebar, I'm not sure we're talking about the same thing, but "Display sidebar" is disabled in TraditionalChocolate plugin. The one I'm talking about is the one of the left in User Control Panel, which is displayed anyway.

UnderDog · August 2012

It's too abstract for me. Please paint a picture, a screenshot of how you want it. I believe that's what 422 also asked for.

businessdad · August 2012

@UnderDog That will be hard, I'm really awful with design. Of course, we don't have any designer whatsoever working on the project either... Let's see if I can come out with something not-so-horrible.

businessdad · August 2012

Ok, I made a screenshot by "stealing" from the page that inspired my client, i.e. StackOverflow. Custom User Control Panel

The boxes in red are the modules that have to be moved around. To be more specific:
- User's photo.
- User's information.
- User's about box (provided by any 3rd party plugin, such as AboutMe).
- User's action menu (top right), which is normally displayed as a vertical menu on the left.

Notes
- I left some of StackOverflow elements around, but, obviously, they don't apply in this case (for example reputation, or badges, which, to my understanding, aren't currently available in Vanilla).
- The dashboard on the bottom is already implemented and displayed correctly. It's produced a custom plugin I wrote. Same for the extended menu, with Questions, Answers and so on, my plugin takes care of that.

Please let me know if you need more details, and thanks for the help.

422 · August 2012

The issue as i see it, isnt anything at this time anyone could help with. Because your asking for custom variant of hypothetical features that afaik arent publically available.

businessdad · August 2012

@422 I'm not sure what you mean with "hypothetical features". I'm aware that the data in the boxes is not what Vanilla provides (as I wrote, I took the snapshot from StackOverflow to get an idea of its layout), but the boxes themselves are available.

For example, the User Photo box is available, the User Details box is available and the User About box is optional, but also available. However, I'm more concerned about the first two.

Here's an updated screenshot containing all the information that Vanilla provides, arranged the way I'd like it.

And here's how the page looks now, with everything displayed vertically on the left hand side:

As you can see, all the data is there. From top to bottom:
- User photo. - User Information box (called About in the last screenshot). - User Menu, displayed vertically in the last screenshot.

The box with "Something about me" is missing, but that's not a big concern, and can be ignored for the moment.

422 · August 2012

I could hack the files to do this, but your gonna be better off with a custom profile plugin me thinks. Which is @peregrine 's forte. Nice concept tho.

422 · August 2012

Not looking at code as i am mobile, you need to create new template grid. Moving 2 of the sidepanel assets to two new positions within that new template structure.

businessdad · August 2012

@422 Thanks. I understand the logic, as I've done it many times in the past, but I don't know how to implement it in Vanilla. I never had the chance of understanding what an "asset" is, in Vanilla, nor I am familiar with Modules, or even templating in general. I thought it was a matter of moving some things here and there (after all, I'm really just trying to move a div from point A to point B), but it's clearly much more complicated than that.

I'll have to wait for some good Samaritan to give me some directions, as I'm completely lost with this.

422 · August 2012

Thats pretty much it. Except you can invoke or render an asset at a particular point and control its position. Im not offay with asset stuff either.

peregrine · August 2012

just write it to the panel but the info will be above the name.

I think you can do this in custom.css change for example

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

to 
body.Profile #Panel {
    width:750px!important;
    margin-top:15px;
}

otherwise you are going to have to provide a link to your page, or let us know what controller you are using and your code. You could post your proposed application add-on and then someone could download.

But as it stands it is just shooting in the dark ...

businessdad · August 2012

@422, @peregrine I truly appreciate the answers and the effort put in trying to understand my issue, but I'm afraid there's a misunderstanding.

I didn't write any custom code for the theme, nor I am using any controller except for the TraditionalChocolate Addon, which I have downloaded and installed, but not modified. I also don't have any application, the one I show in the screenshot is pure and plain Vanilla. True, there is my plugin that shows the "Stackoverflow-like" dashboard, but that doesn't change a thing, as it simply overrides a subsection of the bottom panels and has nothing to do with the user information and can be ignored.

I can also create a test environment, but reproducing it would be extremely simple:
- Plain Vanilla Installation
- Install Traditional Chocolate Theme and related plugin
- Done

The only differences you would have, in such case, is that Traditional Chocolate is dark, while my website is light.

businessdad · August 2012

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 · August 2012

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 · August 2012

sorry misread the question

businessdad · August 2012

@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 · August 2012

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 · August 2012

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 · August 2012

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 · August 2012

good luck.

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

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

businessdad · August 2012

@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! :D

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 · August 2012

@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).

Howdy, Stranger!

Categories

In this Discussion

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

Answers