User profile with images

[ghanlon]

Hi I am looking for a very simple solution to having an editable image in the users profile.

Community Builder does it but way more than I need.

I just want to have users be able to have their own image/avatars - simply


Thanks,
ghanlon

[oxiepagen]

Hi,
When will the pictures on your users need?
Is it the articles you can use the K2.

[ghanlon]

when they are logged in and pull up thier profile. they should have an image.

[kaiten67]

So you do not want it with any community software?

[ghanlon]

Community software is not really an issue for me.
The less cost the better for sure, and I have used Community Builder before.
I was just thinking it seemed like a huge amount of power and overhead, for something I was only using a little bit of.

originally I used Community builder for the sole purpose of being able to have user profiles contain a list of articles/lessons attached to that user. I grew to like the profile pics.

Now with Joomla 2.5.x I am able to easily create a link that satisfies the user/articles, and the only think CB is providing currently is the profile pic.

There is an extension called Profilepicture, that says all it does is add the ability to have pics on user profiles, but I have not been able to get it to work.

So long story short answer, I am not adverse to a community software.

[ghanlon]

I even was looking at oDude Profiler, but documentation left me wanting more.

[kaiten67]

Okay, so how do you intend to use this images, i.e. do you jst want them in a module or do you want them on the user profile page
??

[ghanlon]

User will be able to add or change their own image, and it will appear on their profile page when they are logged in.

[kaiten67]

Okay well, this might not be to your linking and requires a little bit of development, but you can use HTML 5's upload function to make this happen. It really wouldnt be that difficult. I will point you to the right article

http://hacks.mozilla.org/2011/01/how-to ... -uploader/

[ghanlon]

I will take a look at this when time permits thanks.

[kaiten67]

You are welcome

[Tdoek]

You can try to use vitabook. It's a guestbook extension with a simple avatar system. Though then you're attached to a guestbook.. Also you have to hack the profile image into the user profile pages. However this shouldn't be too hard.

[voidPortal]

I don't think some of the other commenters understand what you're asking for here. This is such a basic feauture that it's insane that it wasn't incorporated into version 2.5.

Did you ever get ProfilePicture to work?

[flimh]

Add a field on the users admin's backend, I am thinking it should be under administrator/components/com_users/models/forms/user.xml... thu I have not yet really check... you should be able to add parameters to it.

Code: Select all

  <?xml version="1.0" encoding="utf-8" ?> 
  <form>
  <fieldset name="user_details">
  <field name="name" type="text" class="inputbox" description="COM_USERS_USER_FIELD_NAME_DESC" label="COM_USERS_USER_FIELD_NAME_LABEL" required="true" size="30" /> 
  <field name="username" type="text" class="inputbox" description="COM_USERS_USER_FIELD_USERNAME_DESC" label="COM_USERS_USER_FIELD_USERNAME_LABEL" required="true" size="30" /> 
  <field name="password" type="password" autocomplete="off" class="inputbox validate-password" description="COM_USERS_USER_FIELD_PASSWORD_DESC" filter="raw" label="JGLOBAL_PASSWORD" size="30" /> 
  <field name="password2" type="password" autocomplete="off" class="inputbox validate-password" description="COM_USERS_USER_FIELD_PASSWORD2_DESC" filter="raw" label="COM_USERS_USER_FIELD_PASSWORD2_LABEL" size="30" validate="equals" field="password2" /> 
  <field name="email" type="email" class="inputbox" description="COM_USERS_USER_FIELD_EMAIL_DESC" label="JGLOBAL_EMAIL" required="true" size="30" validate="email" /> 
  <field name="registerDate" type="calendar" class="readonly" label="COM_USERS_USER_FIELD_REGISTERDATE_LABEL" description="COM_USERS_USER_FIELD_REGISTERDATE_DESC" readonly="true" format="%Y-%m-%d %H:%M:%S" size="22" filter="user_utc" /> 
  <field name="lastvisitDate" type="calendar" class="readonly" label="COM_USERS_USER_FIELD_LASTVISIT_LABEL" description="COM_USERS_USER_FIELD_LASTVISIT_DESC" readonly="true" format="%Y-%m-%d %H:%M:%S" size="22" filter="user_utc" /> 
  <field name="lastResetTime" type="calendar" class="readonly" label="COM_USERS_USER_FIELD_LASTRESET_LABEL" description="COM_USERS_USER_FIELD_LASTRESET_DESC" readonly="true" format="%Y-%m-%d %H:%M:%S" size="22" filter="user_utc" /> 
  <field name="resetCount" type="text" class="readonly" label="COM_USERS_USER_FIELD_RESETCOUNT_LABEL" description="COM_USERS_USER_FIELD_RESETCOUNT_DESC" default="0" readonly="true" /> 
  <field name="sendEmail" type="radio" default="0" label="COM_USERS_USER_FIELD_SENDEMAIL_LABEL" description="COM_USERS_USER_FIELD_SENDEMAIL_DESC">
  <option value="0">JNO</option> 
  <option value="1">JYES</option> 
  </field>
  <field name="block" type="radio" default="0" label="COM_USERS_USER_FIELD_BLOCK_LABEL" description="COM_USERS_USER_FIELD_BLOCK_DESC">
  <option value="0">JNO</option> 
  <option value="1">JYES</option> 
  </field>
  <field name="id" type="text" class="readonly" label="JGLOBAL_FIELD_ID_LABEL" description="JGLOBAL_FIELD_ID_DESC" default="0" readonly="true" /> 
  </fieldset>
  <field name="groups" type="hidden" /> 
  <fields name="params">
  <!--   Basic user account settings. 
  --> 
  <fieldset name="settings" label="COM_USERS_SETTINGS_FIELDSET_LABEL">
  <field name="admin_style" type="templatestyle" client="administrator" description="COM_USERS_USER_FIELD_BACKEND_TEMPLATE_DESC" label="COM_USERS_USER_FIELD_BACKEND_TEMPLATE_LABEL">
  <option value="">JOPTION_USE_DEFAULT</option> 
  </field>
  <field name="admin_language" type="language" client="administrator" description="COM_USERS_USER_FIELD_BACKEND_LANGUAGE_DESC" label="COM_USERS_USER_FIELD_BACKEND_LANGUAGE_LABEL">
  <option value="">JOPTION_USE_DEFAULT</option> 
  </field>
  <field name="language" type="language" client="site" description="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_DESC" label="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_LABEL">
  <option value="">JOPTION_USE_DEFAULT</option> 
  </field>
  <field name="editor" type="plugins" folder="editors" description="COM_USERS_USER_FIELD_EDITOR_DESC" label="COM_USERS_USER_FIELD_EDITOR_LABEL">
  <option value="">JOPTION_USE_DEFAULT</option> 
  </field>
  <field name="helpsite" type="helpsite" label="COM_USERS_USER_FIELD_HELPSITE_LABEL" description="COM_USERS_USER_FIELD_HELPSITE_DESC">
  <option value="">JOPTION_USE_DEFAULT</option> 
  </field>


  <field name="timezone" type="timezone" label="COM_USERS_USER_FIELD_TIMEZONE_LABEL" description="COM_USERS_USER_FIELD_TIMEZONE_DESC">
  <option value="">JOPTION_USE_DEFAULT</option>

  <!-- Please complete the settings here .... -->
  <field name="image" type="file" label="IMAGE" description="IMAGE_DESC">
 	
 
  </field>
  </fieldset>
  </fields>
  </form>

Study the form field for file.
http://docs.joomla.org/File_form_field_type
..

Not an easy task, but if you really want, I can study it for you, give me 3-5 days, PM me if your interested.

[flimh]

I know how to attach it on the back-end, please tell me how would you intend to display it on the front end?

Here's how to do it on the backend.
1.) Create a subdirectory on the {http://yousite.com/images/} folder, on this example I will name it "stories", so there should now be http://yoursite.com/images/stories directory.

2.) Locate the admin user.xml form. This is located in the ../administrator/components/com_users/models/forms/user.xml

Originally, here is what it would look like:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<form>
	<fieldset name="user_details">
		<field name="name" type="text"
			class="inputbox"
			description="COM_USERS_USER_FIELD_NAME_DESC"
			label="COM_USERS_HEADING_NAME"
			required="true"
			size="30"
		/>

		<field name="username" type="text"
			class="inputbox"
			description="COM_USERS_USER_FIELD_USERNAME_DESC"
			label="COM_USERS_USER_FIELD_USERNAME_LABEL"
			required="true"
			size="30"
		/>

		<field name="password" type="password"
			autocomplete="off"
			class="inputbox"
			description="COM_USERS_USER_FIELD_PASSWORD_DESC"
			filter="raw"
			label="JGLOBAL_PASSWORD"
			size="30"
		/>

		<field name="password2" type="password"
			autocomplete="off"
			class="inputbox"
			description="COM_USERS_USER_FIELD_PASSWORD2_DESC"
			filter="raw"
			label="COM_USERS_USER_FIELD_PASSWORD2_LABEL"
			size="30"
		/>

		<field name="email" type="email"
			class="inputbox"
			description="COM_USERS_USER_FIELD_EMAIL_DESC"
			label="JGLOBAL_EMAIL"
			required="true"
			size="30"
			validate="email"
		/>

		<field
			name="registerDate"
			type="calendar"
			class="readonly"
			label="COM_USERS_USER_FIELD_REGISTERDATE_LABEL"
			description="COM_USERS_USER_FIELD_REGISTERDATE_DESC"
			readonly="true"
			format="%Y-%m-%d %H:%M:%S"
			size="22"
			filter="user_utc"
		/>

		<field
			name="lastvisitDate"
			type="calendar"
			class="readonly"
			label="COM_USERS_USER_FIELD_LASTVISIT_LABEL"
			description="COM_USERS_USER_FIELD_LASTVISIT_DESC"
			readonly="true"
			format="%Y-%m-%d %H:%M:%S"
			size="22"
			filter="user_utc"
		/>

		<field
			name="lastResetTime"
			type="calendar"
			class="readonly"
			label="COM_USERS_USER_FIELD_LASTRESET_LABEL"
			description="COM_USERS_USER_FIELD_LASTRESET_DESC"
			readonly="true"
			format="%Y-%m-%d %H:%M:%S"
			size="22"
			filter="user_utc"
		/>

		<field
			name="resetCount"
			type="text"
			class="readonly"
			label="COM_USERS_USER_FIELD_RESETCOUNT_LABEL"
			description ="COM_USERS_USER_FIELD_RESETCOUNT_DESC"
			default="0"
			readonly="true"
			/>

		<field
				name="sendEmail"
				type="radio"
				default="0"
				label="COM_USERS_USER_FIELD_SENDEMAIL_LABEL"
				description="COM_USERS_USER_FIELD_SENDEMAIL_DESC">
				<option
					value="0">JNO</option>
				<option
					value="1">JYES</option>
		</field>

		<field
				name="block"
				type="radio"
				default="0"
				label="COM_USERS_USER_FIELD_BLOCK_LABEL"
				description="COM_USERS_USER_FIELD_BLOCK_DESC">
				<option
					value="0">JNO</option>
				<option
					value="1">JYES</option>
		</field>

		<field
			name="id"
			type="text"
			class="readonly"
			label="JGLOBAL_FIELD_ID_LABEL"
			description ="JGLOBAL_FIELD_ID_DESC"
			default="0"
			readonly="true"
			/>

	</fieldset>
	<field name="groups" type="hidden" />

	<fields name="params">

		<!--  Basic user account settings. -->
		<fieldset name="settings" label="COM_USERS_SETTINGS_FIELDSET_LABEL">

			<field name="admin_style" type="templatestyle"
				client="administrator"
				description="COM_USERS_USER_FIELD_BACKEND_TEMPLATE_DESC"
				label="COM_USERS_USER_FIELD_BACKEND_TEMPLATE_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="admin_language" type="language"
				client="administrator"
				description="COM_USERS_USER_FIELD_BACKEND_LANGUAGE_DESC"
				label="COM_USERS_USER_FIELD_BACKEND_LANGUAGE_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="language" type="language"
				client="site"
				description="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_DESC"
				label="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="editor" type="plugins" folder="editors"
				description="COM_USERS_USER_FIELD_EDITOR_DESC"
				label="COM_USERS_USER_FIELD_EDITOR_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="helpsite" type="helpsite"
				label="COM_USERS_USER_FIELD_HELPSITE_LABEL"
				description="COM_USERS_USER_FIELD_HELPSITE_DESC"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="timezone" type="timezone"
				label="COM_USERS_USER_FIELD_TIMEZONE_LABEL"
				description="COM_USERS_USER_FIELD_TIMEZONE_DESC"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>
		</fieldset>
	</fields>
</form>

Now on the bottom, add a new field called Media form field type http://docs.joomla.org/Media_form_field_type, it should now look like this:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<form>
	<fieldset name="user_details">
		<field name="name" type="text"
			class="inputbox"
			description="COM_USERS_USER_FIELD_NAME_DESC"
			label="COM_USERS_HEADING_NAME"
			required="true"
			size="30"
		/>

		<field name="username" type="text"
			class="inputbox"
			description="COM_USERS_USER_FIELD_USERNAME_DESC"
			label="COM_USERS_USER_FIELD_USERNAME_LABEL"
			required="true"
			size="30"
		/>

		<field name="password" type="password"
			autocomplete="off"
			class="inputbox"
			description="COM_USERS_USER_FIELD_PASSWORD_DESC"
			filter="raw"
			label="JGLOBAL_PASSWORD"
			size="30"
		/>

		<field name="password2" type="password"
			autocomplete="off"
			class="inputbox"
			description="COM_USERS_USER_FIELD_PASSWORD2_DESC"
			filter="raw"
			label="COM_USERS_USER_FIELD_PASSWORD2_LABEL"
			size="30"
		/>

		<field name="email" type="email"
			class="inputbox"
			description="COM_USERS_USER_FIELD_EMAIL_DESC"
			label="JGLOBAL_EMAIL"
			required="true"
			size="30"
			validate="email"
		/>

		<field
			name="registerDate"
			type="calendar"
			class="readonly"
			label="COM_USERS_USER_FIELD_REGISTERDATE_LABEL"
			description="COM_USERS_USER_FIELD_REGISTERDATE_DESC"
			readonly="true"
			format="%Y-%m-%d %H:%M:%S"
			size="22"
			filter="user_utc"
		/>

		<field
			name="lastvisitDate"
			type="calendar"
			class="readonly"
			label="COM_USERS_USER_FIELD_LASTVISIT_LABEL"
			description="COM_USERS_USER_FIELD_LASTVISIT_DESC"
			readonly="true"
			format="%Y-%m-%d %H:%M:%S"
			size="22"
			filter="user_utc"
		/>

		<field
			name="lastResetTime"
			type="calendar"
			class="readonly"
			label="COM_USERS_USER_FIELD_LASTRESET_LABEL"
			description="COM_USERS_USER_FIELD_LASTRESET_DESC"
			readonly="true"
			format="%Y-%m-%d %H:%M:%S"
			size="22"
			filter="user_utc"
		/>

		<field
			name="resetCount"
			type="text"
			class="readonly"
			label="COM_USERS_USER_FIELD_RESETCOUNT_LABEL"
			description ="COM_USERS_USER_FIELD_RESETCOUNT_DESC"
			default="0"
			readonly="true"
			/>

		<field
				name="sendEmail"
				type="radio"
				default="0"
				label="COM_USERS_USER_FIELD_SENDEMAIL_LABEL"
				description="COM_USERS_USER_FIELD_SENDEMAIL_DESC">
				<option
					value="0">JNO</option>
				<option
					value="1">JYES</option>
		</field>

		<field
				name="block"
				type="radio"
				default="0"
				label="COM_USERS_USER_FIELD_BLOCK_LABEL"
				description="COM_USERS_USER_FIELD_BLOCK_DESC">
				<option
					value="0">JNO</option>
				<option
					value="1">JYES</option>
		</field>

		<field
			name="id"
			type="text"
			class="readonly"
			label="JGLOBAL_FIELD_ID_LABEL"
			description ="JGLOBAL_FIELD_ID_DESC"
			default="0"
			readonly="true"
			/>

	</fieldset>
	<field name="groups" type="hidden" />

	<fields name="params">

		<!--  Basic user account settings. -->
		<fieldset name="settings" label="COM_USERS_SETTINGS_FIELDSET_LABEL">

			<field name="admin_style" type="templatestyle"
				client="administrator"
				description="COM_USERS_USER_FIELD_BACKEND_TEMPLATE_DESC"
				label="COM_USERS_USER_FIELD_BACKEND_TEMPLATE_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="admin_language" type="language"
				client="administrator"
				description="COM_USERS_USER_FIELD_BACKEND_LANGUAGE_DESC"
				label="COM_USERS_USER_FIELD_BACKEND_LANGUAGE_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="language" type="language"
				client="site"
				description="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_DESC"
				label="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="editor" type="plugins" folder="editors"
				description="COM_USERS_USER_FIELD_EDITOR_DESC"
				label="COM_USERS_USER_FIELD_EDITOR_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="helpsite" type="helpsite"
				label="COM_USERS_USER_FIELD_HELPSITE_LABEL"
				description="COM_USERS_USER_FIELD_HELPSITE_DESC"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="timezone" type="timezone"
				label="COM_USERS_USER_FIELD_TIMEZONE_LABEL"
				description="COM_USERS_USER_FIELD_TIMEZONE_DESC"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

            <field name="myimage" type="media" directory="stories" />

		</fieldset>
	</fields>
</form>

This very little code made the difference:

Code: Select all

       .
       .
       .
            <field name="myimage" type="media" directory="stories" />

      </fieldset>
   </fields>
</form>

Notice the directory name "stories", thats on step 1.
Now on the backend click on the User->User Manager and click on any user, on the basic settings pane on the right, there should ba new field called myimage (please see attached images on this post)..

Now the path of the image is safely stored on the #__users database table under the params.. The question now is: How do you intend to display this on the front end?

[flimh]

To access the profile picture on the front end, we simply have to add the same code to the front end forms.

In the components/com_users/models/forms/frontend.xml, please edit it to this code:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<form>
	<fields name="params">
		<!--  Basic user account settings. -->
		<fieldset name="params" label="COM_USERS_SETTINGS_FIELDSET_LABEL">

			<field name="editor" type="plugins" folder="editors"
				description="COM_USERS_USER_FIELD_EDITOR_DESC"
				label="COM_USERS_USER_FIELD_EDITOR_LABEL"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="timezone" type="timezone"
				label="COM_USERS_USER_FIELD_TIMEZONE_LABEL"
				description="COM_USERS_USER_FIELD_TIMEZONE_DESC"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

			<field name="language" type="language"
				client="site"
				description="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_DESC"
				label="COM_USERS_USER_FIELD_FRONTEND_LANGUAGE_LABEL"
				filter="cmd"
			>
				<option value="">JOPTION_USE_DEFAULT</option>
			</field>

            <field name="myimage" type="media" directory="stories" />

		</fieldset>
	</fields>
</form>

Please notice the same form field in the back end on my last post, I put the same code here on the front end.

When the user goes to edit profile, they should see the option to add image to their profile, now to display it on the profile page, we have to edit the profile view.

In the components/com_users/views/profile/tmpl/default_core.php, please edit to this code:

Code: Select all

<?php
/**
 * @package		Joomla.Site
 * @subpackage	com_users
 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @since		1.6
 */

defined('_JEXEC') or die;

echo '<img src="' . $this->data->params['myimage'] . '"></img>';

?>

<fieldset id="users-profile-core">
	<legend>
		<?php echo JText::_('COM_USERS_PROFILE_CORE_LEGEND'); ?>
	</legend>
	<dl>
		<dt>
			<?php echo JText::_('COM_USERS_PROFILE_NAME_LABEL'); ?>
		</dt>
		<dd>
			<?php echo $this->data->name; ?>
		</dd>
		<dt>
			<?php echo JText::_('COM_USERS_PROFILE_USERNAME_LABEL'); ?>
		</dt>
		<dd>
			<?php echo htmlspecialchars($this->data->username); ?>
		</dd>
		<dt>
			<?php echo JText::_('COM_USERS_PROFILE_REGISTERED_DATE_LABEL'); ?>
		</dt>
		<dd>
			<?php echo JHtml::_('date', $this->data->registerDate); ?>
		</dd>
		<dt>
			<?php echo JText::_('COM_USERS_PROFILE_LAST_VISITED_DATE_LABEL'); ?>
		</dt>

		<?php if ($this->data->lastvisitDate != '0000-00-00 00:00:00'){?>
			<dd>
				<?php echo JHtml::_('date', $this->data->lastvisitDate); ?>
			</dd>
		<?php }
		else {?>
			<dd>
				<?php echo JText::_('COM_USERS_PROFILE_NEVER_VISITED'); ?>
			</dd>
		<?php } ?>

	</dl>
</fieldset>

Notice the line: echo '<img src="' . $this->data->params['myimage'] . '"></img>';
Since the path of the image is stored on the #__users database under the params field, all we have to do is to display it using the <img> tag. This is a very crude way of displaying it, the web designer should be able to improve the HTML presentation if necessary.

To see the profile, open http://yoursite.com/index.php?option=co ... ew=profile

Please check the images I uploaded here.

Please check the screen shots.

[Henry Mc Cullum]

That's nice code provided it can be helpful for mr. ghanlon.

[flimh]

Havent heard anything from mr. ghanlon

[darkman71]

dear flimh,

that's exactly what i need. but still there are 2 problems:

1. I would like to allow the user at the time of registration, to upload a picture of himself.
2. The pic should have allways the same size. f.e.: 100*100 px. If the user does not upload any picture, it should display a dummy-pic.

best regards

dark

[DeadSword]

Hello! i know it´s a old thread but a need some help, its possible to put this image(myimage) in the articles like in wordpress? (https://wordpress.org/plugins/wp-user-avatar/)

but in this case changing the file default.php