SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible to replace facebook 'question mark'?

    Hi,

    I am pulling in the profile images of users to my webpage / app which is working fine.

    However, I would like to replace the horrible question mark image that appears when a user has not uploaded one. The problem is I can't figure out how to target the scr attr as it is transformed on page AFTER the page has requested it.

    For example:
    HTML Code:
    <img src="https://graph.facebook.com/106046376093686/picture?type=large" width="140px" height="140px">
    is transformed to https://s-static.ak.facebook.com/rsr...PCjrIGykBe.gif

    I was hoping to target the img src for 'static' and change it to my own (much nicer) missing image.

    Code:
    $('img').each(function(i){
    		//
    		  var imgSrc = this.src;
    		  var FBstaticImage = 'static';
    		  var imgSrcSearch = imgSrc.search(FBstaticImage);
    					
    					if(imgSrcSearch != -1) { // Check if the image url contains the identifier we looking for - if so replace it.
    					this.src = 'images/no-image.gif'; ////
    					}
    	})
    But 'in page' the src is remains https://graph.facebook.com/106046376...ure?type=large.

    Is there any way I get get the final src value?

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You possibly could do this with CSS, by looking at the url and hiding the image where appropriate. You could have your default image as a background on the image container that will show when the facebook image has been hidden.

    To hide the default Facebook image, you could try something like

    Code:
    img[src*="s-static"] {display: none;}

  3. #3
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    You think the CSS will 'see' the rendered src? Won't it have the same issue as jquery?

    I'll give it a wirl!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jamus View Post
    You think the CSS will 'see' the rendered src? Won't it have the same issue as jquery?
    I suspect so, although I'm not totally sure of how the page works. But definitely worth a try. Feel free to post a live link if you want us to look further.

    I'd love to know how you go with it, anyhow.

  5. #5
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. Just tested and your css works perfectly go hide the image if I add an image element manually to the page..

    HTML Code:
    <img src="https://s-static.ak.facebook.com/rsrc.php/v1/yA/r/gPCjrIGykBe.gif" >
    However, this remains untouched.

    HTML Code:
    <img src="https://graph.facebook.com/104073202962718/picture?type=large" >
    If I use Chromes inspector I can see the img element is 'pre-coversion' to the static url.

    Hmmmm not sure it can be done client side.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    OK, as I say, I'm not really clear on what's happening on your page, but with CSS, the idea is to set a rule to target whatever ends up on the page once it's loaded. So if the final URL is

    Code:
    https://graph.facebook.com/104073202962718/picture?type=large
    Code:
    img[src*="graph.facebook"] {display: none;}
    or something similar. The idea here is to choose something in the URL that only appears for the default Facebook images, as you don't want to hide proper avatars.

  7. #7
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah thats the problem. They are all unique until they hit facebooks server then they are converted somehow. Sadly the element on the page stays the same / does not seem to change the scr but rather what's inside it.

    I can't post my page but you can see whats happening from the code I have posted above.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jamus View Post
    you can see whats happening from the code I have posted above.
    I can't, really. I don't have a clear idea of what you are seeing, so am stabbing in the dark a bit. I am trying to get a sense of what the links to the question mark images look like on your page, and how they differ from links that have avatars you want to keep (if they differ at all). Or are they all the same, and some server-side script serves up something different each time?

  9. #9
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. It was pretty late.

    I'll try and post something this morning.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •