The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Make a specific image on profiles display on every page

View previous topic View next topic Go down

Solved Make a specific image on profiles display on every page

Post by Luffy on May 26th 2017, 10:40 am

Hello all,

So my question is the following:
I have a profile field where the user is able to edit the field and change the image anytime (s)he wishes. The fields code is this one:
Code:
[table class="coverPhoto" id="cvP"][tr][td][img]https://i58.servimg.com/u/f58/19/06/26/04/cover10.png[/img][/td][/tr][/table]

So the
Code:
table#cvP
is an image that is added to the profile information as a cover photo (same as Facebook cover photos) but this only stays on the profile tab.
I want this entire table code to go to each tab while viewing a member profile so that it stays on the top.

Here's a demo of what i mean:


Any help would be appreciated. Thank you.
avatar
Luffy
Manager
Manager

Male Posts : 4624
Reputation : 466
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Ange Tuteur on May 26th 2017, 3:37 pm

Hi @Luffy,

You can use AJAX to get the main profile page, then find and use the element from the response. Here's a quick example using get() :
Code:
if (/\/u\d+[a-z]+/.test(window.location.href)) { // executes on any profile page EXCEPT where the profile fields are
  $.get('/u' + window.location.href.replace(/.*?\/u(\d+).*/, '$1'), function (data) {
    var cover = $('.coverPhoto img', data)[0];

    if (cover) {
      // do something with the cover image
      // console.log(cover, cover.src);
    }
  });
}
You can also make use of localStorage to cache the image, thus making it load faster. Of course using this method you'll need to perform some checks against the cached value and the current value, and update the cached value if there's any changes.

If any questions, let me know.
avatar
Ange Tuteur
Forumaster

Male Posts : 13172
Reputation : 2868
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Luffy on May 26th 2017, 3:40 pm

So i can do this with the entire table right @Ange Tuteur?





avatar
Luffy
Manager
Manager

Male Posts : 4624
Reputation : 466
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Ange Tuteur on May 26th 2017, 4:13 pm

Yeah, just remove "img" from the selector
Code:
.coverPhoto img
, so you get this :
Code:
if (/\/u\d+[a-z]+/.test(window.location.href)) { // executes on any profile page EXCEPT where the profile fields are
  $.get('/u' + window.location.href.replace(/.*?\/u(\d+).*/, '$1'), function (data) {
    var cover = $('.coverPhoto', data)[0];
 
    if (cover) {
      // do something with the cover image
      // console.log(cover);
    }
  });
}

You can of course select other stuff that's present on the page by using data as the second param in jQuery's query selection. ex :
Code:
$('img', data)
avatar
Ange Tuteur
Forumaster

Male Posts : 13172
Reputation : 2868
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Luffy on May 26th 2017, 4:55 pm

I managed to do that work but now there is a tiny problem to this.
Once someone changed the code in the field, it shows the image in the field and they have to refresh to see the cover as it has to be, is there a way that once someone hits the send on that field and only to refresh the page? Or something else that will not show like this for example?





avatar
Luffy
Manager
Manager

Male Posts : 4624
Reputation : 466
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Ange Tuteur on May 26th 2017, 9:55 pm

The best solution would be to bind an event to the document so that when you click the save check mark it updates the banner. Something like this :
Code:
$(document).on('click', '#field_id-12 .ajax-profil_valid', function () {
  alert('Saved');
});
Remember to replace field_id-12 with the unique ID for your profile field.

So that it triggers your function that updates the banner image, I'd recommend naming your function so that it can be called multiple times. Here's a quick example of a named function :
Code:
function sayHi () {
  alert('Hi');
};

$(sayHi); // execute "sayHi" on doc ready

$(document).on('click', '#field_id-12 .ajax-profil_valid', sayHi); // execute "sayHi" when the profile field is updated

If you need any help let me know. salut
avatar
Ange Tuteur
Forumaster

Male Posts : 13172
Reputation : 2868
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Luffy on May 26th 2017, 10:32 pm

I don't have a specific function for the profile field. The field has "field_id2" and members can just edit it anytime they want. I don't have a function to do what i want because i did it using CSS and not relocating it using Javascript. So what i need to do is simple add the ajax part with no function in it?

And the function you're saying, is it the one that edits the field?


Okay so i made it differently and now it reloads while verifying the field by using this:
Code:
$(document).on('click', '#field_id2 .ajax-profil_valid', function () {
  alert('Saved! Please hold on while reloading.');
  $('.coverPhoto img').css('display','none');
  window.location.reload(true)
 
});

Thanks so much @Ange Tuteur.





avatar
Luffy
Manager
Manager

Male Posts : 4624
Reputation : 466
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Ange Tuteur on May 27th 2017, 3:49 am

Ah, that'll work. I was assuming you set the cover image behind the profile via JS, which is why I recommended using a named function that can be recalled to update it.

You're welcome btw. Have a good weekend. Doff
avatar
Ange Tuteur
Forumaster

Male Posts : 13172
Reputation : 2868
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Luffy on May 27th 2017, 1:30 pm

@Ange Tuteur wrote:Ah, that'll work. I was assuming you set the cover image behind the profile via JS, which is why I recommended using a named function that can be recalled to update it.

You're welcome btw. Have a good weekend. Doff
I tried that but i couldn't change the new image's location and that's why i did the above! Smile






avatar
Luffy
Manager
Manager

Male Posts : 4624
Reputation : 466
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Make a specific image on profiles display on every page

Post by Draxion on May 27th 2017, 11:10 pm

Problem solved as requsted by @Luffy & topic archived.
Please read our forum rules: ESF General Rules


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1352
Reputation : 187
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum