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:

  • An image defined in the custom Social Settings metabox Image ID or Image URL field (Pro version).
  • An e-commerce product image from any of the supported 3rd-party plugins (Pro version).
  • A featured or attached image from the WordPress Media Library or NextGEN Gallery v2. Featured images are selected before attached images, and NextGEN Gallery v1 featured images are supported in the Pro version (requires additional media integration features).
  • An image from the NextGEN Gallery ImageBrowser, in combination with an nggalbum or nggallery shortcode (Pro version).
  • A preview image from a NextGEN Gallery nggalbum or nggallery shortcode (Pro version).
  • Image(s) from expanded NextGEN Gallery singlepic, nggallery, nggtags or ngg_images shortcodes.
  • Image(s) from <img/> HTML tags in the content text.
    • NextGEN Gallery <div|a|img/> HTML tags with the ‘data-ngg-pid‘ (automatically added by NGFB) or ‘data-image-id’ attribute (Pro version).
    • <img/> HTML tags with the ‘data-wp-pid‘ (automatically added by NGFB) attribute for media Library Images.
    • 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.
  • A default / fallback image defined on the SSO 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, may be ignored by the plugin – so always upload the largest images possible.

Image Dimensions

Review the WordPress Settings > Social and SEO 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 or better is required to avoid upscaling (stretching) images for retina / high-PPI displays — so it’s worth taking the time to make sure all your original images are at least 1200px wide, along with setting an Open Graph image dimension of 1200x630px cropped.

Cropped vs Uncropped

The difference between cropped and uncropped image dimensions is important to know — when resizing and cropping an image, it will be resized so that both sides meet or exceed the image dimensions required and the excess width or height is trimmed. The resulting image will match the required dimensions exactly (having sacrificed parts of the image). When resizing without cropping, the original aspect ratio is preserved, and no parts of the image are sacrificed. The image will be resized so both the width and height fit within the designed size &mash; so only one side of the image will match the required size.

Upscale / Enlarge Images?

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.

Verify Image Dimensions?

NGFB Pro can double-check that all images returned by WordPress match the dimensions it requested (as WordPress can return smaller and/or inaccurate images). This check also insures that images which are too small and/or tall / wide for social sites are rejected in favour of other larger (and more suitable) images. You can enforce this image check by enabling the “Enforce Image Dimensions Check” option under the Advanced > WP / Theme Integration tab.

Leave a Reply

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