user profile background image help

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?

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.

Spoiler:

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).

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.

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.

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


http://freneticgaming.forumotion.com/u1

No problem.

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.

Ange Tuteur wrote:No problem.

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.

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!

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.