![]() Using this technique, we can resize images for any purpose, before they hit the or an API request. We could crop the image at the same time, but we won’t – so the first four digits specified in imagecopyresampled are set to 0: Then, in the penultimate and most complex line, we convert and upscale $image into $image_p. $image = imagecreatefromstring(file_get_contents($filename)) There are lots of ways of determining and converting a filetype in PHP, but the easiest method in this case is to transfer the existing image into a variable with imagecreatefromstring, which autodetects the format of the original image for us: Without knowing that information, how are we meant to convert the file? Problem: we don’t know the filetype of the original image: it could be a GIF, PNG, or JPEG. $image_p = imagecreatetruecolor(120, 120) ![]() Next, we need to create a variable that will receive our new, resized image, specifying the new width and height: We rewrite the header of the file – much as I’ve demonstrated in how to create CSS3 with PHP – to convince Google that it is receiving a JPEG. Next, I’m going to convince Google that the result of this script is an image: These two lines get the value of the variable we passed to the script (cleaning it up with htmlspecialchars to prevent any cross-site exploits) and tells PHP where the thumbnail is to be found by concatenating it with our known folder structure. In this example, I’ll assume that the image filename will be passed to googlerequest.php from the page to be shared as a URL variable named thumb: There are many ways of gaining this information: defining a static image, pulling a record from a database that contains the filename, etc. I’ll create this script as a file called googlerequest.php at the root of my site.įirst, we need the name of the image that we wish to resize. Instead, we’ll create a PHP script that resizes the thumbnail image when it is requested by Google. Thumbnail images in Google+ must be at least 120 pixels high and wide in order to be shared: otherwise, Google will just grab the first suitable image it finds on the page and use that by default.ĭoes this mean I have to batch process all of the images in PhotoShop to 120 × 120 and keep copies in a special folder just to have them work on Google+? ![]() You’d think that if Google wanted to compete with Facebook, they’d make their rules for share thumbnails the same, but no. Like Facebook, Google uses a meta tag to determine the thumbnail image to use, as embedded microdata: Google+ Share Thumbnail Image Restrictions Due to these limitations, it’s very common to define a preset square thumbnail image for Facebook: on this blog, I create a thumbnail image for each article that is 114 × 114 pixels square. In addition, the aspect ratio of the image must be at least 1:3. The thumbnail image must be at least 50 pixels high and wide, and cannot exceed 130 × 110 pixels. First, the image must be specified, usually inside a meta tag: Facebook Share Thumbnail Standardsįacebook has very specific requirements for the thumbnail image used to illustrate a share. Another good example is social media sites’ request for a thumbnail image to associate with a web page or blog post, during a “share” or “like” action. Under such circumstances, CSS is useless: the image must be the right size and format before it is used. Another possibility is file uploads: if you allow users to upload images to your site, you’ll want to be sure they are scaled and cropped to specific dimensions. The need for a server-side image resize will often occur when you are interacting with a service external to your own site: an API that requests an image in a particular size and format, for example. ![]() ![]() It may seem counter-intuitive to use anything other than CSS or PhotoShop to resize images: why on earth would you rescale an image with a server-side technique when the same could be done easily and quickly with a modification to the image’s width and height in your code? ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |