1

my code looks like this

    <meta property='og:description' content='<?php echo($description) ?>' />
    <meta property='og:title' content='<?php echo($title) ?>' />
    <meta property='og:image' content='<?php echo($imageSrc) ?>' />
    <meta property="og:image:width" content= "280" />
    <meta property="og:image:height" content= "150" />
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" value="<?php echo($title) ?>" >
    <meta name="twitter:description" value="<?php echo($description) ?>" >
    <meta name="twitter:site" value="Wedding Paper Love" />
    <meta name="twitter:creator" value="<?php echo($author) ?>" />
    <meta name="twitter:image" value=""<?php echo($imageSrc) ?>" />
    <meta name="twitter:image:width" value= "280" />
    <meta name="twitter:image:height" value= "150" />

twitter card is validating but the image shows like this on timeline enter image description here

how can I make the twitter card image to show like this

enter image description here

any leads? thanks Maria

1

Unfortunately this won't be able to be done. The twitter:image:width and twitter:image:height meta tags where supported for the Twitter PhotoCard only however that was depreciated on 3rd July 2015. The summary card with large image (which is what you are using) does not support changing the size of the provided image. Based on Twitter documentation the image linked to in the meta tag should be at least 280px in width and 150px in height. If you wish to maintain the aspect ratio then you would need to increase the height of the image (as in the source image by scaling it up) to the point that the width scales up to 280px. There does not appear to be anyway to change this behaviour with Twitter and I suspect that it is more to do with CSS rules widening the image without adjusting the corresponding height to maintain the aspect ratio.

You will need to remove the height and width meta tags as these are not supported and use larger images.

As a side note there is a hard limit that the image must be less than 1MB in size so even you scale it up to a larger size you have to make sure that the final file size remains below 1MB.

  • 1
    In order to echo out the image URL with PHP the $imageSrc variable has to be defined in your code previously. A check of the echo statement in your comment shows that it is written exactly how it needs to be written, now all you have to do is go to where you define the $description and $title PHP variables (from your previous question) and define the image URL variable there based on the same data source you are using for the articles. – Chris Rutherfurd Feb 8 '17 at 11:44
  • I can't help you with the view padding part as it is not documented in the Twitter API. I would however recommend not relying on it as not being documented it will probably be a bug which could be closed out in a later version of the API. – Chris Rutherfurd Feb 8 '17 at 12:27
  • 1
    You can achieve this by using <meta name="twitter:image" value="<?php echo(str_replace("367.jpg", "150.jpg, $imageSrc)) ?>" /> What this does is searches the $imageSrc variable for any instance of 367.jpg and replaces it with 150.jpg. The str_replace function returns the ammended string with the changes in it so by wrapping it in an echo statement the code will echo out the changed string with no problem. You can find out more on the str_replace function at php.net/manual/en/function.str-replace.php – Chris Rutherfurd Feb 10 '17 at 0:55
  • 1
    Scale OMG! do you think this is where padding comes into play? twitter card needs ratio of 2:1 for the image to display if it is going to be of maximum height 150px so zazzle added white space to width to make the ratio 2:1 in respect to 150px? like make width (280px) by adding padding..... – user2018878 Feb 10 '17 at 14:38
  • 1
    This is getting substantially beyond webmaster I g now and more into programming. Best bet go to stack overflow. – Chris Rutherfurd Feb 10 '17 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.