Get Image from CSS

[Guest MrLeN]

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;
}

[Barand]

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;

[Psycho]

@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 May 7, 2018 by Psycho

[Barand]

Hence my caveat

 

This may require some refinement.

[Guest MrLeN]

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!

[Psycho]

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.

[Guest MrLeN]

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

[Guest MrLeN]

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. 

[kicken]

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.

[Guest MrLeN]

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 May 9, 2018 by MrLeN

[maxxd]

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

 

https://developer.wordpress.org/reference/functions/get_avatar_data/

 

https://developer.wordpress.org/reference/functions/get_avatar_url/

 

https://codex.wordpress.org/Plugin_API/Filter_Reference/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.

[Guest MrLeN]

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

 

https://developer.wordpress.org/reference/functions/get_avatar_data/

 

https://developer.wordpress.org/reference/functions/get_avatar_url/

 

https://codex.wordpress.org/Plugin_API/Filter_Reference/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).

[Guest MrLeN]

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

https://www.freedomworkshop.com/members/admin/

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

https://www.freedomworkshop.com/groups/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 May 9, 2018 by MrLeN

[Guest MrLeN]

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

[maxxd]

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!