Can i use the Annika Live Wall as a comment wall?

Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
can i stick the annika live wall in place of my embeded chatroom and use it as a live comment wall so all members can post images and videos in it ?
Capture.PNG.png
Capture.PNG.png  •  758KB


updated by @zachary-moonshine: 02/13/16 07:51:26AM
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
i went ahead and added the annika template code to the page but there is no input field to post status update or whatever in it ? that would be awesome if i can do that
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok so i tested my idea out by grabbing the template code for user comments and added it to the template code for the annika and i see both the way i would want to see them but when i try to post a comment it wont let me?
Capture.PNG.png
Capture.PNG.png  •  103KB

paul
@paul
10 years ago
4,335 posts
It might be a bit annoying to have a comment form actually in the Annika template code. It is 'dynamic' so could refresh mid post whereupon you'd lose what you had entered so far. Maybe put it showing latest actions in a sidebar, say, with a comment form alongside.


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
well i have it above the code so its not actually in it i can type while its refreshing and nothing happens but i think i put the wrong code for commenting i see the comment form but when i try to enter a comment it tells me its invalid?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
invalid comment module?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
the only comment form code i put was the comment_form tpl ? is this correct? or should do i need to add other tpl?
paul
@paul
10 years ago
4,335 posts
Not really sure what you are doing.
Is this on a detail page near the comment section?
Or is it somewhere else? What form are you using if so?


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
no its on a custom page i made i just want to add a comment form so my members can all comment on the page and then use annika to show the comments as they happen
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
but i was reading on the comment module document says you have to link the comment form to an item? so i should maybe upload a picture or something to use as the basis of what is to be commented on and then i can put a comment box below it and run annika below that ? im basically trying to recreate the facebook timeline using the comment box and annika
paul
@paul
10 years ago
4,335 posts
Yeah - the Comment module isn't 'stand-alone', you have to comment on an item.
Why don't you use the timeline activity form to enter 'comments' and have Annika somewhere on that page. That would be very 'Facebook like' then.
Take a look at my site http://guffr.it
I think it does what you are wanting. Look at a profile page. Annika is showing all the latest actions and activity posts in a panel top left.
Register and have a play if you want.


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok let me try that what tpl exactly do i need for that ?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
i just registered at your site and yes that is perfect the way the timeline works and then the threading in the comments below it how can i add something exactly like that to a custom page on my site? just copy the tpl for the timeline activity ?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
when i go to look for th etpl of activity timeline, i see a whole list of different ones, do i need to use them all ?
paul
@paul
10 years ago
4,335 posts
I need to look at the site to see how I did it lol. Its getting late here. I'll do it tomorrow and let you know.


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok thank you
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
yerah looking at it more my timeline is nothing like that at all i feel jipped man hahahha i would be using my profile much more if it was like how you have yours set up fr sure and if i would so would my users !
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
i love how you can comment and a thread opens up live in front of you on your site
paul
@paul
10 years ago
4,335 posts
Here's the 'Annika' code from guff.it - its pretty straight forward -
In the profile sidebar -
            {if jrUser_is_logged_in()}
                <div class="block">
                    <h3>{jrCore_lang module="jrAnnika" id="2" default="Live Wall"}</h3>
                    <div style="padding:5px;border:1px solid #ccc;border-radius:5px;max-height:200px;overflow:auto;">
                        {jrAnnika_live_wall target="ptimeline" template="annika_profile_timeline.tpl" tpl_dir="jrAnnika" profile_id=$_profile_id style="width:240px;height:150px;overflow:auto;"}
                    </div>
                </div>

            {/if}
Then in the annika_profile_timeline.tpl template -
{* Show latest profile activities *}
{jrCore_list module="jrAction" order_by="_created numerical_desc" include_followed=true profile_id=$profile_id limit=5}

The jrAction item_list.tpl can then be modified, of course, to list actions as required.
hth


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
the timeline has me confused maybe im not using the annika timeline at all?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
can you log in and see what it is on my site ? www.metaldevastationradio.com
updated by @zachary-moonshine: 11/07/15 10:40:12AM
michael
@michael
10 years ago
7,822 posts
The code you are using is:
{jrAnnika_live_wall target="activity_wall" template="annika_module_item_list.tpl" tpl_dir="jrAnnika" module="jrAction"}

You've added that to a "Template Code" widget.

Because your using it from a "Template Code" widget things are a little more confusing since the module is aimed at developers steps from editing templates are easier to follow when your editing them all in the same place.

The Site Builder system doesn't provide you with a way to edit the template your linking to with your call:
template="annika_module_item_list.tpl"
to put the second half of the code.

The location to adjust template code for 'annika_module_item_list' is at:
ACP -> SITE -> ANNIKA LIVE WALL -> TEMPLATES -> annika_module_item_list -> MODIFY
michael
@michael
10 years ago
7,822 posts
Try this code in your TEMPLATE CODE widget instead:
{capture name="template" assign="some_template"}
    {literal}
	    {jrCore_list module="jrComment" order_by="_created DESC"}
    {/literal}
{/capture}

{jrAnnika_live_wall target="activity_wall" template=$some_template tpl_dir=' '}

That will get the latest comments.
michael
@michael
10 years ago
7,822 posts
Zachary Moonshine:
can i stick the annika live wall in place of my embeded chatroom and use it as a live comment wall so all members can post images and videos in it ?

The above code will post comments that are left on the site and update them, but its not a chat module. Its just a live list of the latest X amount of comments from wherever they happen to be.
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok here is a picture of what my timeline looks like and how it works
my timeline.PNG.png
my timeline.PNG.png  •  461KB

Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
here is a picture of the timeline paul has on his site and this is the effect i am trying to create within my timeline
guff timeline.PNG.png
guff timeline.PNG.png  •  329KB

Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
everything in his timeline has an open box all ready to go to have comments made and like buttons on every single item in the timeline. what is it a different skin ? i am using ningja i dont know what skin he is using on his
paul
@paul
10 years ago
4,335 posts
Actually, what you are asking for is nothing to do with the Annika module. Comments being inserted in the thread is a standard feature of the Comment module, so all I have done on http://guffr.it is add the comment form to each action item in the jrAction item_list.tpl (activities and module actions sections only) -

    {* Activity Updates *}
    {elseif isset($item.action_text)}
    
        <div id="a{$item._item_id}" class="action_item_holder" style="border-bottom:0px;border-top:1px solid #ccc;">
            <div class="container">
                <div class="row">
                    <div class="col2">
                        <div class="action_item_media">
                            {if jrCore_checktype($item.user_image_size, 'number_nz')}
                                {jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$item._user_id size="icon" crop="auto" alt=$item.user_name class="action_item_user_img img_shadow img_scale"}
                            {elseif jrCore_checktype($item.profile_image_size, 'number_nz')}
                                {jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$item._profile_id size="icon" crop="auto" alt=$item.profile_name class="action_item_user_img img_shadow img_scale"}
                            {else}
                                &nbsp;
                            {/if}
                        </div>
                    </div>
                    <div class="col8" style="position:relative">
                        <div class="action_item_desc">
                            <a href="{$jamroom_url}/{$item.profile_url}" class="action_item_title" title="{$item.profile_name|jrCore_entity_string}">@{$item.profile_url}</a> <span class="action_item_actions">{if !isset($_params.random)}&bull; {$item._created|jrCore_date_format:"relative"}{/if}{if jrUser_is_logged_in() && $_user._user_id != $item._user_id && $item.action_shared_by_user != '1'} &bull; <a href="{$jamroom_url}/{$murl}/share/{$item._item_id}" onclick="if(!confirm('{jrCore_lang module="jrAction" id="9" default="Share this update with your followers?"}')) { return false; }">{jrCore_lang module="jrAction" id="10" default="Share This"}</a>{/if} {if $_post.module_url == $_user.profile_url && $item.action_shared_by_user == '1'} &bull; <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}">{jrCore_lang module="jrAction" id="26" default="shared by you"}</a> {elseif $item.action_shared_by_count > 0} &bull; {jrCore_lang module="jrAction" id="24" default="shared by"} <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}">{$item.action_shared_by_count} {jrCore_lang module="jrAction" id="25" default="follower(s)"}</a>{/if}{if $img == "comments.png"} &bull; <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}">{jrCore_lang module="jrAction" id="22" default="Comments"}: {$item.action_comment_count|default:0}</a>{/if}&bull; <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}">detail</a></span><br>
                            <div class="action_item_link">
                                <div class="p5">{$item.action_text|jrCore_format_string:$item.profile_quota_id|jrAction_convert_hash_tags}</div>
                            </div>
                        </div>


                        {*** Comment form here ***}
                        {jrComment_form module="jrAction" profile_id=$item._profile_id item_id=$item._item_id}



                    </div>
                    <div class="col2 last" style="position:relative">
                        <div class="position: absolute; top: 0px; right: 0px; display: none;">
                            <div id="d{$item._item_id}" class="action_item_delete">
                                 <script>$(function () { $('#a{$item._item_id}').hover(function() { $('#d{$item._item_id}').toggle(); }); });</script>
                                 {jrCore_item_update_button module="jrAction" profile_id=$item._profile_id item_id=$item._item_id}
                                 {jrCore_item_delete_button module="jrAction" profile_id=$item._profile_id item_id=$item._item_id}
                            </div>
                            <div>
                                {jrLike_button item=$item action="like" module="jrAction"}
                                {jrLike_button item=$item action="dislike" module="jrAction"}
                            </div>
                         </div>
                    </div>
                </div>
            </div>
         </div>

    {* Registered Module Action templates *}
    {elseif isset($item.action_data) && strpos($item.action_data, '{') !== 0}

        {jrCore_module_url module=$item.action_module assign="lurl"}

        <div id="a{$item._item_id}" class="action_item_holder" style="border-bottom:0px;border-top:1px solid #ccc;">
            <div class="container">
                <div class="row">

                    <div class="col2">
                        <div class="action_item_media">
                            {if jrCore_checktype($item.user_image_size, 'number_nz')}
                                {jrCore_module_function function="jrImage_display" module="jrUser" type="user_image" item_id=$item._user_id size="icon" crop="auto" alt=$item.user_name class="action_item_user_img img_shadow img_scale"}
                            {elseif jrCore_checktype($item.profile_image_size, 'number_nz')}
                                {jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$item._profile_id size="icon" crop="auto" alt=$item.profile_name class="action_item_user_img img_shadow img_scale"}
                            {else}
                                &nbsp;
                            {/if}
                        </div>
                    </div>
                    <div class="col8">

                        <div class="action_item_desc">

                            <a href="{$jamroom_url}/{$item.profile_url}" class="action_item_title" title="{$item.profile_name|jrCore_entity_string}">@{$item.profile_url}</a> <span class="action_item_actions">{if !isset($_params.random)}&bull; {$item._created|jrCore_date_format:"relative"}{/if}{if jrUser_is_logged_in() && $_user._user_id != $item._user_id && $item.action_shared_by_user != '1'} &bull; <a href="{$jamroom_url}/{$murl}/share/{$item._item_id}" onclick="if(!confirm('{jrCore_lang module="jrAction" id="9" default="Share this update with your followers?"}')) { return false; }">{jrCore_lang module="jrAction" id="10" default="Share This"}</a>{/if} {if $_post.module_url == $_user.profile_url && $item.action_shared_by_user == '1'} &bull; <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}">{jrCore_lang module="jrAction" id="26" default="shared by you"}</a> {elseif $item.action_shared_by_count > 0} &bull; {jrCore_lang module="jrAction" id="24" default="shared by"} <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}">{$item.action_shared_by_count} {jrCore_lang module="jrAction" id="25" default="follower(s)"}</a>{/if}{if $item.action_module != 'jrFollower' && $item.action_module != 'jrLike' && $item.action_mode != 'create_album'} &bull; <a href="{$jamroom_url}/{$item.action_item.profile_url}/{$lurl}/{$item.action_item._item_id}">detail</a>{/if}</span><br>

                            <div class="action_item_link">
                                {$item.action_data|jrCore_format_string:$item.profile_quota_id:null:"nl2br"}
                            </div>

                        </div>
                        


                        {*** Comment form here (NOTE that I don't allow comments on Follow and Like actions) ***}
                        {if $item.action_module != 'jrFollower' && $item.action_module != 'jrLike'}
                            {jrComment_form module="jrAction" profile_id=$item._profile_id item_id=$item._item_id}
                        {/if}
                        
                    </div>
                    <div class="col2 last">
                        <div id="d{$item._item_id}" class="action_item_delete">
                            <script>$(function () { $('#a{$item._item_id}').hover(function() { $('#d{$item._item_id}').toggle(); }); });</script>
                            {jrCore_item_delete_button module="jrAction" profile_id=$item._profile_id item_id=$item._item_id}
                        </div>
                        <div>
                            {if $item.action_module != 'jrLike'}
                                {jrLike_button item=$item action="like" module="jrAction"}
                                {jrLike_button item=$item action="dislike" module="jrAction"}
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    {/if}

Also note that in the jrAcion item_list.tpl template I exclude comment actions themselves in all the jrCoure_list calls, otherwise you'll be allowing comments on comment actions which could get out of hand!!

{jrCore_list module="jrAction" profile_id=$_profile_id order_by="_updated numerical_desc" pagebreak="12" page="1" pager=true search1="action_module != jrComment"}

hth


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok great can u tell me exactly where i go to paste this code
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
i have looked all over and cant find jrAction item_list.tpl
paul
@paul
10 years ago
4,335 posts
Ahh - Might be because in Core 5.3 we've moved the ACP modules around.

Pre Core 5.3 - ACP=>Users=>Actions=>Templates

Post Core 5.3 - ACP=>Profiles=>Timeline=>Templates

Its the item_index.tpl and item_list.tpl templates. NOTE that the code I posted above isn't complete and will braek your site if copied/pasted as is into your templates. Its just the jrComment call - {jrComment_form module="jrAction" profile_id=$item._profile_id item_id=$item._item_id} - that needs pasting in at the appropriate places.


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
jesus!
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
i just wont mess with it then i dont wanna mess it up, would be cool to have that as an option though maybe you can make that a future update or something