Change Profile Photo link in Profile Cover

1083 posts

For those of you who have looked at Dolphin 7.4.0 you will see that Boonex has added a link in the Profile Cover image to allow members to change the Profile Photo as well. This was done as a result of a request, but sadly it's probably not as good as it could be.

I don't plan to use 7.4.0 immediately, but the mod is something I've always wanted. I've successfully installed it on 7.3.4 and the attached docs show how. In trying to make it better, I've stumbled across some problems and a little help would be appreciated.

I haven't included my changes because they're not responsive, but the sample code is responsive and it works fine. Hopefully someone can look at the code and try to place the link over the photo and not on the right hand side.

Change Profile Photo.pdf · 105.2K · 222 downloads

Text for adding Change Profile Photo link.rtf · 1.2K · 197 downloads

Quote · 24 Feb 2019

johnk42Advanced

1083 posts

Here's a sample of what I'm using. My profile image is a bit larger, thus the link is not so dominant.

sample 1.jpg · 50.8K · 203 views

Quote · 24 Feb 2019

geek_girlPremium

11493 posts

Actually, they should not be displayed at all when someone is simply viewing their profile. There are several ways this could be handled better. One is thorough an action button or perhaps through a hover over the top right corner or something. I don't want to see anything; either on the profile cover or the avatar.

I actually just added the header to the Profile Customise module and my members use it all the time. It might be better with some drag to position the cover photo. In my method, you can also change the height of the block or not even use a profile cover. I won't be including the profile cover block on my site as I prefer my modification.

https://www.boonex.com/n/profile-cover-using-the-profile-customize-module

Geeks, making the world a better place

Quote · 24 Feb 2019

geek_girlPremium

11493 posts

As for members not knowing how to use the site? That is what help guides are for; I have detail help guides with images so they can quickly see how to do something.

Geeks, making the world a better place

Quote · 24 Feb 2019

mrtnPremium

281 posts

Would you give me the link to your website so that i can have a look?

Quote · 24 Feb 2019

johnk42Advanced

1083 posts

Hi @Mrtn I answered yesterday but my post hasn't appeared. I may have forgotten to submit it brfore leaving the page.

I do all my work on a WAMP server, thus I can't show you. It didn't work anyway because the code uses CSS attached to other elements and any changes make things go crazy. I also agree with Geek_Girl that having buttons all over the place instead of the actions block is also messy. As a person who expects things to be intuitive, I'm now looking at using the sub-menu. It's not used for much else so it's worth a look. See sample. I'll let you know if I progress any further.

cover.jpg · 23.8K · 415 views

Quote · 25 Feb 2019

johnk42Advanced

1083 posts

I've got the above example working except for Add Photos and Add Videos. I want the following popup to appear when the member clicks the link on the cover.

Can some kind person supply me with the URL to add to the menu item for Add Photos and Add Videos?

popup.jpg · 13.5K · 404 views

Quote · 26 Feb 2019

geek_girlPremium

11493 posts

I've got the above example working except for Add Photos and Add Videos. I want the following popup to appear when the member clicks the link on the cover.

Can some kind person supply me with the URL to add to the menu item for Add Photos and Add Videos?

When you do this you have to pass along the member's ID so that the script knows who is uploading the photo or video.

This is the code used for the add button in the photo section for the action button.

return (getLoggedId() && BxDolModule::getInstance('BxVideosModule')->isAllowedAdd()) ? _t('_sys_upload') : '';

I don't know what you are doing. I have a quick upload button for photos and videos that uses this php script:

//get the NickName based on the member id
$p_arr = getProfileInfo($theMemberID);

//pass the field name that you want now that we have a db array
$sMemberNickName = $p_arr['NickName'];

$html =<<<HTML

<div class="boxContent" style="padding:5px">
<div class="clear_both"></div>
<div class="dbContent">

<button class="bx-btn bx-btn-img bx-btn-small bx-btn-ifont" onclick="window.open ('m/videos/albums/my/add_objects/$sMemberNickName-s-videos/owner/$sMemberNickName','_self');">Upload Videos</button>

<button class="bx-btn bx-btn-img bx-btn-small bx-btn-ifont" onclick="window.open ('m/photos/albums/my/add_objects/$sMemberNickName-s-photos/owner/$sMemberNickName','_self');">Upload Photo</button>


</div>
<div class="clear_both"></div>
</div>

HTML;

echo $html;

Hope this helps.

Geeks, making the world a better place

Quote · 26 Feb 2019

geek_girlPremium

11493 posts

By the way, isn't the profile cover image stored in a profile cover album? If so, then what you want to do is to open up to the profile cover album; grabbing the user info first of course.

Geeks, making the world a better place

Quote · 26 Feb 2019

johnk42Advanced

1083 posts

Thanks @Geek_Girl, but I think you may be misunderstanding my intentions here.

This cover image represents what a member sees when they access their own profile. It's nothing more than an intuitive list of options which I feel the average member considers important: Post photos, change profile image and cover etc.

I have all but two links working properly: If they click Edit Profile, they're taken directly to their Profile Edit page. Ditto My Photos, Change Profile Photo, Change Cover Image etc. Everything works fine except:

When they click Add Photo or video link , I want them to be presented with the popup asking for the album etc as per my example. I can get them to the Album page okay, but they still have to press the + button to get the popup. That's not what I call intuitive.

I need the code which I can add to the Navigation Menu URL field that will take them directly to the popup screen as shown in my example. That is intuitive.

I understand that I have to pass on the Member's ID. Everything is fine there, but the best I can do is get the Albums page to appear and the member still has to hit the + icon. That's NOT intuitive.

From what I can see, the link must be a URL.

I hope that explains things better.

missing code.jpg · 34.7K · 207 views

Quote · 27 Feb 2019

geek_girlPremium

11493 posts

OK, it is js code that loads the modal for the upload.

onclick="showPopupAnyHtml('http://site.tld/m/photos/upload')

showPopupAnyHtml is a built in Dolphin function.

Geeks, making the world a better place

Quote · 27 Feb 2019

johnk42Advanced

1083 posts

Thanks @Geek-Girl. You pushed me in the right direction.

For anyone attempting this, the URL code to go in the menu block is:

Photos

javascript:void(0)" onclick="showPopupAnyHtml('http://yoursite.com.com/m/photos/upload')/owner/{profileUsername}

Videos

javascript:void(0)" onclick="showPopupAnyHtml('http://yoursite.com/m/videos/upload')/owner/{profileUsername}

When I've got everything sorted and I find the time, I'll clone the site so that people can see it and maybe do a tutorial. It's becoming very intuitive.

Quote · 28 Feb 2019

Reply ›

Change Profile Photo link in Profile Cover

Blogs

Help

Product

Company