Make a specific image on profiles display on every page

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.

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.

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

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)

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?

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.

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.

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.

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.

I tried that but i couldn't change the new image's location and that's why i did the above!