How does NGFB find / detect / select images?

The images used in the Open Graph, Rich Pin, Twitter Card, etc. meta tags are chosen in this sequence:

  1. An image defined in the custom Social Settings metabox Image ID or Image URL field (Pro version).
  2. An e-commerce product image from any of the supported 3rd-party plugins (Pro version).
  3. A featured or attached image from the WordPress Media Library or NextGEN Gallery v2.x. Featured images are selected before attached images and NextGEN Gallery v1.x images are supported in the Pro version (requires additional media integration features).
  4. An image from the NextGEN Gallery ImageBrowser, in combination with an nggalbum or nggallery shortcode (Pro version).
  5. A preview image from a NextGEN Gallery nggalbum or nggallery shortcode (Pro version).
  6. Image(s) from expanded NextGEN Gallery singlepic, nggallery, nggtags or ngg_images shortcodes.
  7. Image(s) from <img/> HTML tags in the content text.
    1. NextGEN Gallery <div|a|img/> HTML tags with the ‘data-ngg-pid‘ (automatically added by NGFB) or ‘data-image-id’ attribute (Pro version).
    2. <img/> HTML tags with the ‘data-wp-pid‘ (automatically added by NGFB) attribute for Media Library images.
    3. Any other <img/> HTML tag with a ‘src’ attribute (and using the image URL, it also tries to use pre-v2 NextGEN Gallery image IDs). If no image ID can be determined, then the ‘width’ and ‘height’ attributes must be present, and larger than the image dimensions chosen in the plugin settings.
  8. A default / fallback image defined on the NGFB General settings page.

All of these methods will lead to a properly sized image of the correct dimensions (since the image ID can be determined), provided the original image is large enough. Always upload the largest images you can to the Media Library and/or NextGEN Gallery, and let WordPress create the re-sized / smaller versions as required. If an original image is smaller than the required Image Dimensions, it will be ignored by the plugin – so always upload the largest images possible.

Image Dimensions

Review the WordPress Settings > Social Image Dimensions values. If your original images are large enough, you should set the Open Graph image dimensions to 1200x630px cropped or larger. Images that are 600px and wider are displayed more prominently on Facebook, and 1200px and wider is required to avoid web browsers upscaling (stretching) images for retina / high-PPI displays — so it’s worth taking the time to make sure all your original / full-size featured images are at least 1200px in width and 630px in height, along with setting an Open Graph image dimension of 1200x630px cropped.

The default Open Graph image dimensions are 600x315px cropped. You can reduce these values down to 200x200px cropped, but Facebook will display small images as thumbnails in user timelines. The minimum recommended image dimensions are 600x315px cropped — and for best results, use 1200px or wider.

If your original images are large enough, you can also double the default Twitter Card image dimensions from 600x600px to 1200x1200px, and from 300x300px to 600x600px. By offering larger images, you allow Twitter to provide higher resolution images for retina / high-PPI displays.

Cropped vs Uncropped

The difference between cropped and uncropped image dimensions is important — when resizing and cropping an image, it will be resized so that both sides meet or exceed the image dimensions, and any excess width or height will be trimmed. As an example, an image of 3264x2448px resized to 1200x630px cropped with have dimensions of 1200x630px, loosing 135px on both top and bottom (270px total). The same image resized to 1200x630px uncropped will have dimensions of 840x630px — the original aspect ratio was preserved and no parts of the image were sacrificed, but its width is not optimal for Facebook. The suggested Open Graph image dimensions are 600x315px or 1200x630px cropped since Facebook will crop Open Graph images to this aspect ratio for display anyway.

Upscale (Enlarge) Images or Not?

WordPress does not upscale (enlarge) images — WordPress only creates smaller images from larger full-size originals. Upscaled images do not look as sharp or clean when upscaled, and if enlarged too much, images will look fuzzy and unappealing — not something you want to promote on social sites. NGFB Pro includes an optional module that allows upscaling of WordPress Media Library images for NGFB image sizes (up to a maximum upscale percentage). For example, a full-size image of 100x200px could be upscaled up to 150x300px using the default maximum of 50%, but resizing the images any larger would fail (unless you increased the maximum).

If you feel strongly that upscaling small images in your WordPress Media Library is something you want (instead of uploading larger full-size originals), you can enable this feature under the Advanced > WP / Theme Integration tab. Do not enable this feature unless you want to publish lower quality images on social sites.

Not sure?

You can simulate the upscaling feature to generate the upscaling success / failure notice messages, without having WordPress save the resulting images — simply define the NGFB_IMAGE_UPSCALE_TEST constant as true or hook the ‘ngfb_image_upscale_test’ filter and return true. Other constants and filters are also available to upscale all images (not just the NGFB image sizes) and adjust the maximum percentage.

Leave a Reply

Your email address will not be published. Required fields are marked *