Jump to content


Photo

Get Image from CSS

file_get_contents css

Best Answer Psycho, 07 May 2018 - 02:48 PM

@Barand,

 

I see a potential problem with that logic. It assumes that if '#header-cover-image' is defined in the file then the next occurrence of url is necessarily for that element. If that class is defined but it has no url() parameter defined, but a later one does, it would erroneously pick up the url() parameter for the later element. You could use strpos to get the contents between the following {}, but this is where RegEx is very useful. Also, I think the search for '#header-cover-image' should include a space or '{' after the text - otherwise it would also find '#header-cover-image-something'.

 

While I know this can be accomplished with a single RegEx, I wasn't able to figure out the correct syntax. It would need to ensure that the url() was within the curly braces immediately following the class name being searched. I tried using a backreference, but my RegEx skills while good are not great. Perhaps someone else can create a single RegEx solution

<?php
 
$match = false;
//Get the contents of file
$text = file_get_contents('style.css');
//Find the contents of the css class definition
$CssContentRegEx = "~#header-cover-image[\ ]?\{([^\}]*)~s";
if(preg_match($CssContentRegEx, $text, $cssMatch))
{
    //find the url definition
    $imageUrlRegEx = "~url[\ ]?\(([^\)]*)~s";
    if(preg_match($imageUrlRegEx, $cssMatch[1], $urlMatch))
    {
        $match = $urlMatch[1];
    }
}
 
if($match) {
    echo "Match: {$match}";
} else {
    echo "No match";
}
 
?>
Go to the full post


  • Please log in to reply
14 replies to this topic

#1 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 07 May 2018 - 10:00 AM

how can I use file_get_contents to:

1: detect if '#header-cover-image' is in the page, and if so..

2: Get the URL out of background-image: url();


/* Cover image */
body.buddypress div#item-header #header-cover-image {
background-image: url(https://www.mywebsite.com/wp-content/uploads/buddypress/groups/34/cover-image/cover-image.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center !important;
}


#2 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,169 posts

Posted 07 May 2018 - 10:53 AM

Fans of regex might use that. I'd use strpos(). This may require some refinement.

$text = file_get_contents('mrlen.txt');

if (($pos1 = strpos($text, '#header-cover-image')) === false) 
    exit("No cover image");
    
$posurl = strpos($text, 'url', $pos1);        // find next occurence of "url"
$posend = strpos($text, ';', $posurl);        // find next ";" after the "url"

$imageurl = substr($text, $posurl+4, $posend - $posurl - 5); // grab text between those two positions

echo $imageurl;

If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#3 Psycho

Psycho
  • Moderators
  • Move along, nothing to see here
  • 11,937 posts
  • LocationCanada

Posted 07 May 2018 - 02:48 PM   Best Answer

@Barand,

 

I see a potential problem with that logic. It assumes that if '#header-cover-image' is defined in the file then the next occurrence of url is necessarily for that element. If that class is defined but it has no url() parameter defined, but a later one does, it would erroneously pick up the url() parameter for the later element. You could use strpos to get the contents between the following {}, but this is where RegEx is very useful. Also, I think the search for '#header-cover-image' should include a space or '{' after the text - otherwise it would also find '#header-cover-image-something'.

 

While I know this can be accomplished with a single RegEx, I wasn't able to figure out the correct syntax. It would need to ensure that the url() was within the curly braces immediately following the class name being searched. I tried using a backreference, but my RegEx skills while good are not great. Perhaps someone else can create a single RegEx solution

<?php
 
$match = false;
//Get the contents of file
$text = file_get_contents('style.css');
//Find the contents of the css class definition
$CssContentRegEx = "~#header-cover-image[\ ]?\{([^\}]*)~s";
if(preg_match($CssContentRegEx, $text, $cssMatch))
{
    //find the url definition
    $imageUrlRegEx = "~url[\ ]?\(([^\)]*)~s";
    if(preg_match($imageUrlRegEx, $cssMatch[1], $urlMatch))
    {
        $match = $urlMatch[1];
    }
}
 
if($match) {
    echo "Match: {$match}";
} else {
    echo "No match";
}
 
?>

Edited by Psycho, 07 May 2018 - 02:54 PM.

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#4 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,169 posts

Posted 07 May 2018 - 04:27 PM

Hence my caveat

 

This may require some refinement.


If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts

#5 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 08 May 2018 - 08:12 AM

Hey thanks guys!

I implemented this and it works like a charm.

The only problem I have now is that I am actually executing the code on the very same page that I am retrieving. ie: I am using file_get_contents to extract from an actual web page, as the CSS is not in a stylesheet (WordPress).

So, it causes the page to hang and the server gets so upset I literally have to restart the VPS lol.

I am currently trying to find a workaround for this problem, but the code above is perfect.

Thanks heaps! :)



#6 Psycho

Psycho
  • Moderators
  • Move along, nothing to see here
  • 11,937 posts
  • LocationCanada

Posted 08 May 2018 - 01:56 PM

The only problem I have now is that I am actually executing the code on the very same page that I am retrieving. ie: I am using file_get_contents to extract from an actual web page, as the CSS is not in a stylesheet (WordPress).

 

So, you are running code in a file to read the contents of the file in which the code resides? That makes no sense. It seems you have created an overly complicated solution for something that shouldn't be a problem to begin with. I don't understand why you would need to do that and I don't use WP specifically because of how limiting it is, so I can't help you with making it work aside from stating you are more than liking trying to resolve an issue in the wrong way.


The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net

#7 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 08 May 2018 - 08:28 PM

Well, it's not a "file" it's a repository of a billion functions, files, database calls, overlapping themes and plugins.. so don't even ask me how I would edit that "file" directly. I wouldn't even know where to start, lol.

But I DO have access to the header! ..and I know where that is. So this code is going straight in the header.

I'm about to go to bed, but I think I have a solution.

I will put ?file=GetCode on the end of the file_get_contents URL.

Then I sill use an if to say: if !isset('GetCode') .. then run the code.. otherwise don't.

So that's pretty much going to be my way of dealing with my problem :)



#8 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 08 May 2018 - 08:37 PM

Also, I can't get the file from the database, because the file could be different depending on the persons profile. It's a profile cover photo.

So that image in the CSS could be different, from a browser perspective, depending on which page they're at.

I am using the image for open graph.

So when Facebook loads the page, it needs to set that image as the og:image.

I honestly can't think of a better way to go about it.

I am sure ether IS a better way though. 



#9 kicken

kicken
  • Gurus
  • Wiser? Not exactly.
  • 3,407 posts
  • LocationBonita, FL

Posted 08 May 2018 - 10:28 PM

That URL / CSS fragment must exist somewhere for it to be merged into the page. All you need to do is figure out where and then pull the information from there, which might be easier and more reliable.

You mention it's part of a profile. Unless you have people specifying their profiles by typing in HTML/CSS code, I'd think that the URL to their profile image would exist as a field in your database somewhere meaning there would be no reason to parse css at all, just grab the URL directly.
Did I help you out? Feeling generous? I accept tips via Bitcoin @ 14mDxaob8Jgdg52scDbvf3uaeR61tB2yC7
Kicken's World⦄ ⦃Recycle old CD's

#10 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 09 May 2018 - 06:17 AM

But that just opens up a whole new tin of worms. A lot of the files get updated automatically via WordPress. So I could insert code one day and then next day it could be updated and gone. 

I agree with what you guys are saying, in principle and I also know it's 100% possible to do it all serve side, but the "how" is my problem. WordPress is not simple. It's very complicated and intricate.

I'll keep looking into it, but file_get_contents is the only way I know how to do it for now (without breaking something or losing the functionality next time something updates; assuming I can even fine the "file" in the first place).

The reason I am putting "file" in quotes, is that the css very likely gets written by a series of files and functions and databse calls. Nothing in wordpress is "in a file". It's all in the database and called by functions.
 


Edited by MrLeN, 09 May 2018 - 06:20 AM.


#11 maxxd

maxxd
  • Members
  • PipPipPip
  • Advanced Member
  • 747 posts
  • LocationNorth Carolina

Posted 09 May 2018 - 11:39 AM

If I'm reading this correctly, you're looking for user avatars, correct? If so, have a look here:

 

https://developer.wo...et_avatar_data/

 

https://developer.wo...get_avatar_url/

 

https://codex.wordpr...ence/get_avatar

 

 

On to some of your other points, there are a lot of files involved in a WordPress theme or plugin beyond just the required functions.php and style.css. If the CSS is being compiled on the fly, then I'd have to bet you're using a page builder. There's nothing wrong with that, they're just not my favorite method of theme development in WP for almost this exact reason - they mangle everything in the database with the shortcodes that most use to actually achieve the functionality. That being said, if the avatars are custom or from a plugin, chances are good that those image's locations are stored in the database. If they're default WordPress, they're served from Gravatar and accessible using the user's email address.



#12 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 09 May 2018 - 02:18 PM

If I'm reading this correctly, you're looking for user avatars, correct? If so, have a look here:

 

https://developer.wo...et_avatar_data/

 

https://developer.wo...get_avatar_url/

 

https://codex.wordpr...ence/get_avatar

 

 

On to some of your other points, there are a lot of files involved in a WordPress theme or plugin beyond just the required functions.php and style.css. If the CSS is being compiled on the fly, then I'd have to bet you're using a page builder. There's nothing wrong with that, they're just not my favorite method of theme development in WP for almost this exact reason - they mangle everything in the database with the shortcodes that most use to actually achieve the functionality. That being said, if the avatars are custom or from a plugin, chances are good that those image's locations are stored in the database. If they're default WordPress, they're served from Gravatar and accessible using the user's email address.

Actually, I am using Buddypress, and I am trying to extract the group cover photo, so if someone posts their group to social media, it will display their cover photo -- not their profile photo. I will use the same code for their profile (which also has a cover photo, and works the same way).



#13 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 09 May 2018 - 02:24 PM

..for example, here is my profile. It has a beach background:

https://www.freedomw.../members/admin/

..and here is a group. It has a blue news background:

https://www.freedomw...oups/real-news/

I am trying to make it so that if anyone shares these URL's, the cover photo will be displayed.

HOWEVER!

It's more complicated than that. If the page has a YouTube VIDEO, then the php displays the thumbnail for the video.

BUT .. if there is an IMAGE on the page, that will become the og:image instead.

I have all of the code written and functional -- even using the YouTube API.

This cover photo part is the last part (the last IF) I am implementing :)

It's all very complicated. Well, for me anyway. Programming is not my forte :)


Edited by MrLeN, 09 May 2018 - 02:24 PM.


#14 MrLeN

MrLeN
  • Members
  • PipPipPip
  • Advanced Member
  • 131 posts

Posted 09 May 2018 - 02:25 PM

..and there is no such Buddypress social media plugin that does any of this.



#15 maxxd

maxxd
  • Members
  • PipPipPip
  • Advanced Member
  • 747 posts
  • LocationNorth Carolina

Posted 11 May 2018 - 02:41 PM

Ahh. I've not used BuddyPress before, so I'm afraid I'm not going to be of any help on this... Good luck, though!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users