Access to our product images from PHP

Hello everybody,

I have my store embeded with JavaScript on my website where I already have a standard Twitter card that looks something like this:

But I want to generate a custom Twitter card based on my products images. First I tried using PHP with GD library to open a “background” image and the product image that the visitor is currently watching, and the idea is to generate a final png with the composite of both images. The code had no errors but I still wasn’t able to generate the final image because I got a 403 Forbidden error each time I tried to read the product image with PHP.
Since this approach didn’t work I tried to do it in the client side with JavaScript using the Canvas HTML element, and I managed to generate the image I wanted like this one:

But the canvas element doesn’t allow me to use the function toDataURL() for security reasons, so I’m not able to capture the source of the resulting image and assign it to the Twitter card code. So, I’m back to square one.

So, the question is: Do I have any way to load the image from PHP so I’m able to generate the image as I want? Maybe using http authentication or anything?

Hallo,

maybe I can help you :slight_smile:

Did you try to provide a user_agent in your php request? Fetching images and similar require some things, at least the user_agent. So you may try something like @ini_set('user_agent', 'Program/1.0 (http://www.website.com; contact@your-email-address.com)'); to have all requests to SPRD with your user agent (file_get_contents or curl). The spec. format is required.


In some cases, you need to provide api key by url or having an authorization header.
This look something like

$apiKey = $api_key;
    $secret = $api_secret;
    $time = time() * 1000;

    $data = "$method $url $time";
    $sig = sha1("$data $secret");

    return "Authorization: SprdAuth apiKey=\"$apiKey\", data=\"$data\", sig=\"$sig\"";

Have fun!

1 Like

Thank you for your response @lovetee, setting the user_agent and using the api key and secret worked to fetch the file.
The only thing that I still have to find out is how to keep the png transparency when I read the file with curl, because is loosing it, but at least I’m on my way to what I want, I just have to keep testing :slight_smile:

Maybe I can help even with that :wink:

Depending on your image url there is an url parameter which sets the background. What url for the image are you using?

Well, thank you very much for all your help @lovetee, but actually I’ve already managed to keep the transparency and generate the image I wanted as you can see here :slight_smile:

Now I only have to figure out how or better said, in which event, to call the javascript to set this image as content value of the meta og:image element, because to do so I need that the first item image to be already loaded, or at least I need to have it’s url. And that is what I’m working right now. Any ideas?? :slight_smile:

Trying to use the load and DOMContentLoaded events in javascript without any luck, if any of you have any idea about in which event I can capture the source of the first product image would be of great help! :slight_smile:

Or if I have any other way of accessing the url of the first product image apart from traversing the DOM would work for me too. The only thing that I have for now is only what comes in the location.hash to use as a starting point to get any data from anywhere. Any ideas?

You want to get the first image/product of your shop, right? How did you embed the shop? Using the Javascript Code?

If you did use the Javascript variant, you could access every image like done here:
https://jsfiddle.net/thimo/9k85fcjv/ (I added a rear view of the products to the shop - just click on one of the designs).

To access the first image it might be something like:

$('.sprd-product-list-item div img:first').attr('src')

Well, you might not need jquery for that http://youmightnotneedjquery.com, but it helps a litte :wink:

If you’ve got that value, you can replace your og:image. It might not work for google (timing/javascript loading issue), but for sharing purposes like the share button, when page has completly rendered. An other option would be to get all articles via api and have a php page which does it for you :wink:

Is that what you wanted to do?