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.

user profile background image help

View previous topic View next topic Go down

Solved user profile background image help

Post by dodler-foddler on October 3rd 2015, 3:05 am

I'm trying to find a way for users to get enable their own specific profile background image.

I'm trying to use the js code from here as part of it. But that js requires someone else to edit it and set it for them, and I want them to be able to do it themselves.

So far what I tried to do was make a new text field in all profiles that lets the paste the url into the textfield. But after that I don't know? Anyone here have any ideas that could help me with this?

dodler-foddler
New Member

Male Posts : 17
Reputation : 1
Language : english

http://freneticgaming.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by Ange Tuteur on October 3rd 2015, 12:24 pm

Hi @dodler-foddler,

The idea you have can work perfectly with a bit of JavaScript. Go to Modules > JavaScript codes management and create a new script with the following settings :

Placement : In all the pages
Code:
/\/u\d+/.test(window.location.href) && $(function() {
  var field_id = 257,
      background = document.getElementById('field_id-' + field_id);

  if (background) {
    document.body.style.backgroundImage = 'url(' + $(background.lastChild).text() + ')';
  }
});

That will get the text of specified field, however, it doesn't have the id of your field.

See where the variable field_id is ? You need to replace 257 by the ID of your profile field. To find the id, create another script in all the pages with this as the content :
Code:
/\/u\d+/.test(window.location.href) && $(function() {
  $('#profile-tab-field-profil dl').click(function() {
    alert(this.id);
  });
});

Then go to your profile and click on the profile field that you want to get the id from. It'll display it in a popup box :


Then just replace 257 in the previous script by the number at the end in the popup box. ( 14 in the example ) After you get the id you needed you can delete this script.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by dodler-foddler on October 3rd 2015, 2:15 pm

Spoiler:
@Ange Tuteur wrote:Hi @dodler-foddler,

The idea you have can work perfectly with a bit of JavaScript. Go to Modules > JavaScript codes management and create a new script with the following settings :

Placement : In all the pages
Code:
/\/u\d+/.test(window.location.href) && $(function() {
  var field_id = 257,
      background = document.getElementById('field_id-' + field_id);

  if (background) {
    document.body.style.backgroundImage = 'url(' + $(background.lastChild).text() + ')';
  }
});

That will get the text of specified field, however, it doesn't have the id of your field.

See where the variable field_id is ? You need to replace 257 by the ID of your profile field. To find the id, create another script in all the pages with this as the content :
Code:
/\/u\d+/.test(window.location.href) && $(function() {
  $('#profile-tab-field-profil dl').click(function() {
    alert(this.id);
  });
});

Then go to your profile and click on the profile field that you want to get the id from. It'll display it in a popup box :


Then just replace 257 in the previous script by the number at the end in the popup box. ( 14 in the example ) After you get the id you needed you can delete this script.

while it definitely looks like it should work, it didn't, which made me scratch my head even more. the second js to find the field_id didn't work, but i already new the specific field id i needed, from trying to make my own scripts work (and failing miserably). beu

dodler-foddler
New Member

Male Posts : 17
Reputation : 1
Language : english

http://freneticgaming.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by Ange Tuteur on October 3rd 2015, 2:24 pm

I see.

Do you have a link to a profile on your forum that I can view ? I should be able to figure something out if I can get a look at your DOM structure. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by dodler-foddler on October 3rd 2015, 3:38 pm

@Ange Tuteur wrote:I see.

Do you have a link to a profile on your forum that I can view ? I should be able to figure something out if I can get a look at your DOM structure. Smile

sure thing! thanks for taking your time to help me!


http://freneticgaming.forumotion.com/u1

dodler-foddler
New Member

Male Posts : 17
Reputation : 1
Language : english

http://freneticgaming.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by Ange Tuteur on October 3rd 2015, 3:55 pm

No problem. Wink

See if this works for you :
Code:
/\/u\d+/.test(window.location.href) && $(function() {
  var field = document.getElementById('field_id3'), bg;

  if (field) {
    bg = $('.field_uneditable', field)[0];
    if (bg) document.body.style.backgroundImage = 'url(' + bg.innerHTML + ')';
  }
});

The placement should be in all the pages, of course. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by dodler-foddler on October 3rd 2015, 4:09 pm

@Ange Tuteur wrote:No problem. Wink

See if this works for you :
Code:
/\/u\d+/.test(window.location.href) && $(function() {
  var field = document.getElementById('field_id3'), bg;

  if (field) {
    bg = $('.field_uneditable', field)[0];
    if (bg) document.body.style.backgroundImage = 'url(' + bg.innerHTML + ')';
  }
});

The placement should be in all the pages, of course. Smile

Perfect! it works great. I haven't gotten on the js boat as much as I would like to, and this was really, really bugging me out - thank you very much!

dodler-foddler
New Member

Male Posts : 17
Reputation : 1
Language : english

http://freneticgaming.forumotion.com

Back to top Go down

Solved Re: user profile background image help

Post by Ange Tuteur on October 3rd 2015, 4:30 pm

You're welcome. ^^

JS is a very handy tool when it comes to manipulating the document and writing web applications. It takes a little bit of time to understand everything, but it's worth it. Just make sure to study native JavaScript first and then any libraries after that ( like jQuery, since our forums use it ) so you understand the basics.

Topic archived

If you have anymore questions or problems feel free to open a new topic. Have a great weekend. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.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