Profile Layouts

gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
If any one out there has any good ideas for profile index page layouts and willing to share please let me know.
updated by @garymoncrieff: 07/24/15 01:24:27PM
paul
@paul
9 years ago
4,330 posts
I've always liked the idea of a grid of images and profile names that when you click on one it opens a modal window with all the profile info in.


--
Paul Asher - JR Developer and System Import Specialist
michael
@michael
9 years ago
7,744 posts
guess it depends alot on the kind of site. If the focus of the profile is what the owner of that is doing then the activity stream gives a good update of where they are commenting, what they are adding.

If the site is focused more on that profile's content, like say a band site would be, then showcasing what is in the profile makes more sense. What other users have commented on on the profiles content. Showcase the existing profiles stuff rather than what the owner of the profile is doing.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
I have now a few ideas sketched out on paper, and before I start coding them is there a way to add tabbed content on the profile index page out of the box or will I need to use custom css/js for this?
michael
@michael
9 years ago
7,744 posts
There's no smarty function to make tabs, but there are quite a few possible examples in the existing skins or the jrWidgets module of ways to construct it. (but there are other ways on the net in tutorial form too....)
paul
@paul
9 years ago
4,330 posts
I've used this code recently to make tabs on a profile index page -
    {* Search form and tabs *}
    {jrSearch_module_form module="jrComment" fields="comment_text"}
    <table class="page_content">
        <tr>
            <td class="page_tab_bar_holder">
                <ul class="page_tab_bar">
                    <li id="forum" class="page_tab{if !isset($_post.opt) && !isset($_post.ss)} page_tab_active{/if}"><a href="{$jamroom_url}/{$_post.module_url}/{$murl}">Forum</a></li>
                    <li id="latest_posts" class="page_tab{if $_post.opt == 'np'} page_tab_active{/if}"><a href="{$jamroom_url}/{$_post.module_url}/{$murl}/opt=np">Newest Posts</a></li>
                    {if jrUser_is_logged_in()}
                        <li id="my_posts" class="page_tab{if $_post.opt == 'mp'} page_tab_active{/if}"><a href="{$jamroom_url}/{$_post.module_url}/{$murl}/opt=mp">My Posts</a></li>
                    {/if}
                </ul>
            </td>
        </tr>
    </table>
    {* /Search form and tabs *}
hth


--
Paul Asher - JR Developer and System Import Specialist
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
This is only a very early preview of one layout, but the code I found on the net as an issue ( http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/) the tab height doesnt auto adjust.
cardproflile2.png
cardproflile2.png  •  581KB


updated by @garymoncrieff: 05/28/15 01:36:02AM
michael
@michael
9 years ago
7,744 posts
That's looking real nice.

The scaling can be fixed by changing the .tab class from 650px to
   width: 100%;

its the width of the ul.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Hi

Thanks, I already had it set to 100% in my code and the height still wont adjust.
michael
@michael
9 years ago
7,744 posts
weird, height should be automatic. Perhaps its set by a surrounding element. got a URL?
michael
@michael
9 years ago
7,744 posts
we're looking at the "experience" tab right? and it should go as high as it needs to go?
michael
@michael
9 years ago
7,744 posts
issue has to do with the max-height inline style on the .item inside the #tab_content2

Got to run now, but will take a longer look tomorrow if you havent fixed it.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
All tabs are getting cut off at the bottom of the page, even removing the max-heigght just means it gets cut off rather than scrolls.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
I gave up on the pure css method and registered a new js file with the theme to get it to work.
michael
@michael
9 years ago
7,744 posts
Good solution. :)
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
A few more things on this specfic layout, I can forsee an issue going forward where image sizes will through out the layout, is there a way set a hard size in the {jrCore_module_function function="jrImage_display"}?

Also what format would calculating the Age take, I know it's Todays Date - DOB but is there a smarty way of doing this?
updated by @garymoncrieff: 05/29/15 12:23:38AM
michael
@michael
9 years ago
7,744 posts
Yeah, images are fixed to specific widths, you can see what they are by getting one wrong:

https://www.jamroom.net/user/image/user_image/915/doesnt-exist

Quote: CRI: invalid image size - must be one of: 24,xxsmall,40,xsmall,56,72,small,96,icon96,128,icon,196,medium,256,large,320,larger,384,xlarge,512,xxlarge,800,xxxlarge,1280

so add one of them instead:
https://www.jamroom.net/user/image/user_image/915/large

and the image appears. After that use CSS to pick the exact px width if you need more refinement.

--
Calculating the DOB easiest method depends on what you have to start with. If you have a time-stamp, then its a number of seconds, so calculate what 18 years is in seconds, subtract that from what they have and if its above 0 they are over 18.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
The widths are basically determined by the col width it's the height I will need to really control.
michael
@michael
9 years ago
7,744 posts
height should auto adjust to its aspect ratio.

So if your image is 400 wide and 300 high, setting a width to 100% and streching the image to 800 wide will result in the image being 600 high.

the image function in jamroom can force an image to certain aspect ratios using the crop= feature:

https://www.jamroom.net/user/image/user_image/915/large/crop=16:9
https://www.jamroom.net/user/image/user_image/915/large/crop=9:16
https://www.jamroom.net/user/image/user_image/915/large/crop=square
https://www.jamroom.net/user/image/user_image/915/large/crop=400:300
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Think I am almost there now with this 1 layout (another 9 or 10 to go).
halleberry1.png
halleberry1.png  •  912KB


updated by @garymoncrieff: 05/29/15 08:03:03AM
douglas
@douglas
9 years ago
2,793 posts
Looks good, nice job! :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
oh man do I hate checkboxs, what is the correct smarty notation for

if checkbox is checked

and if checkbox is not checked
douglas
@douglas
9 years ago
2,793 posts
on or off.

{if $checkbox_variable == 'on'}
    show code
{/if}



--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Always fall into the same trap when to use " or '.

However this isn't going to be as simple as I first thought. In the audio album edit details form I have an audio_featured field of this is checked the player shows on the profile. If its not checked it shows a media message about no file.

What I want to do is show something else in its place if no album is featured on profile.

So I guess I need some way to surface that field variable on a profile in order to determine if its checked out not.

On my cell phone so can't even post code I use to pull the featured album up. Two search criteria one for the current profile and another to search audio_ featured = on
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
This is the basic code I am t=using to show the featured album

                            {jrCore_media_player module="jrAudio" field="audio_file" search1="_profile_id = `$_profile_id`" search2="audio_featured = on" limit="21" type="jrAudio_blue_monday"}

So I have tried things like this but to no avail

{jrCore_media_player module="jrAudio" field="audio_file" search1="_profile_id = `$_profile_id`" search2="audio_featured = on" template="null" assign="show_featured"}

                        {if $show_featured}
                            {jrCore_media_player module="jrAudio" field="audio_file" search1="_profile_id = `$_profile_id`" search2="audio_featured = on" limit="21" type="jrAudio_blue_monday"}
                        {else}
                            <div class="block">
                                {jrCore_include template="profile_index_image.tpl"}
                            </div>
{/if}
douglas
@douglas
9 years ago
2,793 posts
See if this works for you:

{jrCore_media_player module="jrAudio" field="audio_file" search1="_profile_id = `$_profile_id`" search2="audio_featured = on" limit="21" type="jrAudio_blue_monday" assign="show_featured"}

{if isset($show_featured) && strlen($show_featured) > 0}
{$show_featured}
{else}
<div class="block">
    {jrCore_include template="profile_index_image.tpl"}
</div>
{/if}



--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
No luck just shows

{jrCore_media_player} no media found for player

if album isnt set as featured
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Still dont understand why this code doesnt work, is there a bug with assign and the media_player function?
michael
@michael
9 years ago
7,744 posts
gary.moncrieff:...Always fall into the same trap when to use " or '.....

The general rule I go by is which is the easiest to read.
$a = "hello there cat, you aren't \"very\" playful today";
$a = 'hello there cat, you aren\'t "very" playful today';

$a = 'today is  '. $the_date.' and some other text';
$a = "today is {$the_date} and some other text";

The difference is " will look for variables inside the string, so if there aren't any then you don't need to use it, but if there are words with a ' inside them then it can trip up on those so sometimes its better......... either works.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Thanks for the explanation.

Have you any idea why this doesnt work?

{jrCore_media_player module="jrAudio" field="audio_file" search1="_profile_id = `$_profile_id`" search2="audio_featured = on" limit="21" type="jrAudio_blue_monday" assign="show_featured"}

{if isset($show_featured) && strlen($show_featured) > 0}
{$show_featured}
{else}
<div class="block">
    {jrCore_include template="profile_index_image.tpl"}
</div>
{/if}

If there is no album set as featured it should show the photos block but that bit of code never gets initialised as if I oout a debug tag in there it never opens the debug window.

To me this would indicate an issue with the show_featured variable I assigned to the core_media_player function?
michael
@michael
9 years ago
7,744 posts
put a debug below the whole thing, look in it for {$show_featured}. See whats in it. Somethings in it, just need to know what. Might be that its an empty div.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
{$show_featured}
"{jrCore_media_player} no media found ..."
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Hmm cant edit posts,

You have entered an invalid value for "text" - value must be printable characters with the following allowed HTML tags: span,strong,em,a,b,u,i,p,div,br,img,h1,h2,h3,h4,pre,hr,ul,ol,li

{$show_featured}
"{jrCore_media_player} no media found ..." shows if no album is featured


updated by @garymoncrieff: 06/02/15 01:01:33AM
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
{$show_featured}
"<link rel="stylesheet" property="styl..." shows if album is featured
michael
@michael
9 years ago
7,744 posts
The HTML issue I'm aware of, need to get that sorted. Same for creating tickets. on the TODO list.

The issue is you are getting back some response, so checking for the string length isn't going to work.

Good news is we know what might come back so lets check for that:
{$chk = $show_featured|strpos:'{jrCore_media_p'}
{if $chk !== 0}
{$show_featured}
{else}
<div class="block">
    {jrCore_include template="profile_index_image.tpl"}
</div>
{/if}

Thats using the php strpos function:
http://php.net/strpos

That returns 0 because that IS the first part of the string.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Thanks Michael that's another headache solved now on to the next lol
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
If I wanted to include a slider on some layouts what would be a good way to go about this?
michael
@michael
9 years ago
7,744 posts
That question isn't "How do I build a slider?" is it ;)

Same way as normal I reckon, an
{if $quota_id == 5}
// show the slider for quota 5
{/if}

In the profile_index.tpl file. Is that the question?

--edit--

Or if you have a ton of quotas and what a few completely different layouts, then build a few profile_index include pages and include them depending on the quota

{jrCore_include template="quota_specific_id_`$quota_id`.tpl"}
to include
quota_specific_id_5.tpl

updated by @michael: 06/17/15 10:21:15PM
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Hey

Sorry I should have been more specific but I was on the way out the door.

I am using the Profile Tweaks module, along with a cut down version of my base skin as the base for each profile layout.

For Business profiles I want to give the option of an ecommerce index page or more of a corporate style index.

I am wondering is there any other way other than adding a series of profile fields to control the content of a slideshow? Just wary of this area having field overload.
ericdion
@ericdion
9 years ago
6 posts
no body can help me... all of user NOT FOUND
The Page You Requested Was Not Found!
but if login as admin...user show up..chek this
http://bandkamu.com/dhikiandreas

help...help.............
paul
@paul
9 years ago
4,330 posts
ericdion:
no body can help me... all of user NOT FOUND
The Page You Requested Was Not Found!
but if login as admin...user show up..chek this
http://bandkamu.com/dhikiandreas

help...help.............

I've responded to this same question you asked as a support ticket.


--
Paul Asher - JR Developer and System Import Specialist
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Here is an very early preview of my one of my business profile layouts.

Still needs a lot of work. This is where I want to make the cover image a slider on this particular layout.
corporate profile 1.png


updated by @garymoncrieff: 06/21/15 09:58:20AM
michael
@michael
9 years ago
7,744 posts
gary.moncrieff:...I am using the Profile Tweaks module, along with a cut down version of my base skin as the base for each profile layout.

For Business profiles I want to give the option of an ecommerce index page or more of a corporate style index.

I am wondering is there any other way other than adding a series of profile fields to control the content of a slideshow? Just wary of this area having field overload.


The Form Designer is the first way that springs to mind for me as it allows the images to be associated with the profile instead of with the skin.

Since its a profile thing, your going to need to have the images associated with the profile to know what to display.

So what you need is a way to allow the adding of multiple images. So thats either mulitple FILE Form Designer fields, or a module listener that adds a 'multiple' file upload field (pretty sure the Form Designer is a single file set thing from memory..... ). If you went the "Events and Listeners" route and built a simple module you could add a mulitple file upload field to the form and like the way images get uploded in the gallery module.

Then in the templates check for those images existance and if they exist, show them in a slider.

Doesn't solve the problem of user uploading wrong aspect images or wrong scale images, but its a starting point.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Hey

My thought now is to repurpose the elastic slider and then somehow pass the images uploaded to the specfic fields in profile to this slider.

So for example, profile_coverimage, profile_coverimage2, profile_coverimage3.


    <script type="text/javascript">
        $(function () {
            $("#slider1").responsiveSlides({
                auto: true,          // Boolean: Animate automatically, true or false
                speed: 400,          // Integer: Speed of the transition, in milliseconds
                timeout: 4000,       // Integer: Time between slide transitions, in milliseconds
                pager: true,         // Boolean: Show pager, true or false
                random: true,        // Boolean: Randomize the order of the slides, true or false
                pause: true,         // Boolean: Pause on hover, true or false
                maxwidth: 1120,       // Integer: Max-width of the slideshow, in pixels
                namespace: "rslides" // String: change the default namespace used
            });
        });
    </script>

        {* Profile Cover Slider *}
        <div class="block_content">
            <div style="padding-top: 0px">
                <div class="callbacks_container">
                    <div class="ioutline">
                        <ul id="slider1" class="rslides callbacks">
         {* code to loop through images*}
                        </ul>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

Any tips using this method before I start?
michael
@michael
9 years ago
7,744 posts
tips.... mmm.

* Get the slider working with static images you know exits first so you can know that the slider works before trying to put dynamic content into it.

* I can see from the names of the fields profile_coverimage, profile_coverimage2, profile_coverimage3 that you plan to have 3 input fields, one for each image. Consider having 1 that allows multiple uploads. It might be harder to understand at first, but if you can get that going you will have 1 more trick up your sleeve if you're interested. (if you are interested, i can help. get the slider working first, then we can figure out how to get the images in.)
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
I have it working now using static images, using the three fields.

Probably not the best implemtation and still have to perform a check to see if any cover images are present, if not hide slider.

            <script type="text/javascript">
                $(function () {
                    $("#slider1").responsiveSlides({
                        auto: true,          // Boolean: Animate automatically, true or false
                        speed: 400,          // Integer: Speed of the transition, in milliseconds
                        timeout: 4000,       // Integer: Time between slide transitions, in milliseconds
                        pager: true,         // Boolean: Show pager, true or false
                        random: true,        // Boolean: Randomize the order of the slides, true or false
                        pause: true,         // Boolean: Pause on hover, true or false
                        maxwidth: 1120,       // Integer: Max-width of the slideshow, in pixels
                        maxheight: 400,       // Integer: Max-height of the slideshow, in pixels
                        namespace: "rslides" // String: change the default namespace used
                    });
                });
            </script>



            {* Profile Cover Image Slider *}
            <div class="block_content">
                <div style="padding-top: 0px">
                    <div class="callbacks_container">
                        <div class="">
                            <ul id="slider1" class="rslides callbacks">
                                {if isset($profile_cover_image_name)}
                                {jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_cover_image" item_id=$_profile_id size="xxlarge" class="img_scale img_shadow" alt=$profile_name width=false height=false}
                                {/if}
                                {if isset($profile_cover_image2_name)}
                                {jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_cover_image2" item_id=$_profile_id size="xxlarge" class="img_scale img_shadow" alt=$profile_name width=false height=false}
                                {/if}
                                {if isset($profile_cover_image3_name)}
                                {jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_cover_image3" item_id=$_profile_id size="xxlarge" class="img_scale img_shadow" alt=$profile_name width=false height=false}
                                {/if}
                            </ul>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>

One field for multiple images would be nice and given how many things I have now added to form designer, I have some suggestions for it, which I will put in a different thread as well.

Click and drag to sort fields
Clone Field
1 field that allows multiple uploads.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Nearing completion on this layout now. Doing all these profile layouts is proving very time consuming lol.

Additional footer blocks can be hidden.
Business-Layout-1.jpg
Business-Layout-1.jpg  •  374KB


updated by @garymoncrieff: 06/23/15 10:19:18AM
michael
@michael
9 years ago
7,744 posts
Looking fantastic. Hard work paying off :)

Tags