The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Make a specific image on profiles display on every page

3 posters

Go down

Solved Make a specific image on profiles display on every page

Post by TheCrow May 26th 2017, 11:40

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:
Make a specific image on profiles display on every page Giphy

Any help would be appreciated. Thank you.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Ange Tuteur May 26th 2017, 16:37

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by TheCrow May 26th 2017, 16:40

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

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Ange Tuteur May 26th 2017, 17:13

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)
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by TheCrow May 26th 2017, 17:55

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?
Make a specific image on profiles display on every page 7aa4ac10
TheCrow
TheCrow
Manager
Manager

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Ange Tuteur May 26th 2017, 22:55

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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by TheCrow May 26th 2017, 23:32

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.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Ange Tuteur May 27th 2017, 04:49

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
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by TheCrow May 27th 2017, 14:30

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

TheCrow
TheCrow
Manager
Manager

Male Posts : 6896
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Draxion May 28th 2017, 00:10

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

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