{"id":733,"date":"2025-03-24T14:27:32","date_gmt":"2025-03-24T14:27:32","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/gd-post-images\/"},"modified":"2025-10-13T14:27:19","modified_gmt":"2025-10-13T13:27:19","slug":"gd-post-images","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/gd-post-images\/","title":{"rendered":"GD > Post Images"},"content":{"rendered":"\n<div class=\"wp-block-blockstrap-blockstrap-widget-alert d-flex align-items-center fade show alert alert-success mb-3\" role=\"alert\"><span class=\"fas fa-check-circle me-2\"><\/span><span class=\"flex-grow-1\">All Widgets come as Widgets, Shortcodes or Blocks. Learn more about our u003ca href=u0022https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/what-makes-geodirectory-widgets-special\/u0022u003eSuper Duper Widgetsu003c\/au003e.<\/span><\/div>\n\n\n\n<p>The <strong><em>Post Images<\/em><\/strong>&nbsp;widget outputs images from any image custom field. Some features include;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Output a single image<br><\/strong><\/li>\n\n\n\n<li><strong>Output multiple images as an image gallery grid.<\/strong><\/li>\n\n\n\n<li><strong>Output multiple images as a slider.<\/strong><\/li>\n\n\n\n<li><strong>Lazyload (ajax) all images for improved page load speed.<\/strong><\/li>\n\n\n\n<li><strong>Open images in a lightbox.<\/strong><\/li>\n\n\n\n<li><strong>Show multiple image custom fields in the one output.<\/strong><\/li>\n\n\n\n<li><strong>Set fallback images from the default category image or more.<\/strong><\/li>\n\n\n\n<li><strong>Use any URL custom field to generate a screenshot of that URL for inclusion on the output.<\/strong><\/li>\n\n\n\n<li><strong>Use any VIDEO custom field (youtube) to generate a screenshot of that Video for inclusion on the output.<\/strong><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-blockstrap-blockstrap-widget-alert d-flex align-items-center fade show alert alert-info mb-3\" role=\"alert\"><span class=\"fas fa-info-circle me-2\"><\/span><span class=\"flex-grow-1\">The u003ca href=u0022https:\/\/wpgeodirectory.com\/downloads\/multiratings-and-reviews\/u0022u003eMultiRatings and Reviews Extensionu003c\/au003e adds the ability for users to add images to reviews, these uploaded images can be output by this widget also.<\/span><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Widget Options<\/h2>\n\n\n\n<div class=\"wp-block-blockstrap-blockstrap-widget-alert d-flex align-items-center fade show alert alert-info mb-3\" role=\"alert\"><span class=\"fas fa-info-circle me-2\"><\/span><span class=\"flex-grow-1\">Some settings for this widget are advanced settings, reveal them by clicking the button next to save.<\/span><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Title<\/strong> &#8211; The widget title.<\/li>\n\n\n\n<li><strong>Output Type<\/strong> &#8211; Select the output type;\n<ul class=\"wp-block-list\">\n<li><strong>Single Image<\/strong> &#8211; Loads one image.<\/li>\n\n\n\n<li><strong>Slider <\/strong>&#8211; Load images in a flex slider which is mobile responsive and touch-enabled for swipe.<\/li>\n\n\n\n<li><strong>Gallery<\/strong> &#8211; Load images in a 4 image grid system.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Load via Ajax <\/strong>&#8211; This will load al images apart from the first slider image via AJAX for faster load times.<\/li>\n\n\n\n<li><strong>Auto start <\/strong>&#8211; (slider specific) Set the slider to auto start sliding.<\/li>\n\n\n\n<li><strong>Show title<\/strong> &#8211; (slider specific) Show the image title (if set) over the image.<\/li>\n\n\n\n<li><strong>Show caption<\/strong> &#8211;&nbsp;(slider specific) Show the image caption (if set) over the image.<\/li>\n\n\n\n<li><strong>Animation<\/strong> &#8211;&nbsp;(slider specific) Set the animation for the slider; <strong>slide<\/strong> or <strong>fade<\/strong>.<\/li>\n\n\n\n<li><strong>Control Navigation<\/strong> &#8211;&nbsp;(slider specific) Set control navigation below the slider. Options are;\n<ul class=\"wp-block-list\">\n<li><strong>Default<\/strong> &#8211; Bulletpoint selects.<\/li>\n\n\n\n<li><strong>Thumbnails&nbsp;<\/strong>&#8211; This will load the thumbnail images (not AJAX compatible) that users can see and select the preview.<\/li>\n\n\n\n<li><strong>None&nbsp;<\/strong>&#8211; No bottom control navigation.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Link to<\/strong> &#8211; Set if the images have links, options are; <strong>none, post <\/strong>or<strong> lightbox image<\/strong>.<\/li>\n\n\n\n<li>Show logo (<strong>deprecated<\/strong>) &#8211;&nbsp; Use <em><strong>types <\/strong><\/em>below to show the listing logo first if uploaded.<\/li>\n\n\n\n<li><strong>Image types<\/strong> &#8211;&nbsp;Comma separated list of image types (by key) to show. Defaults to: post_images.\n<ul class=\"wp-block-list\">\n<li><strong>Image fields<\/strong>&nbsp;&#8211; Any image input field can be used. eg:&nbsp; post_images,logo,header_image<\/li>\n\n\n\n<li><strong>URL Screenshot&nbsp;<\/strong>&#8211; Any URL field can be used to generate a screenshot, if your field key is &#8220;url&#8221; just add &#8220;_screenshot&#8221; to it eg: url_screenshot<\/li>\n\n\n\n<li><strong>Video Screenshot&nbsp;<\/strong>&#8211; (supports youtube URLs)&nbsp;Any Video or text field can be used to generate a screenshot, if your field key is &#8220;video&#8221; just add &#8220;_screenshot&#8221; to it eg:video_screenshot.&nbsp;<\/li>\n\n\n\n<li><strong>Review Images<\/strong> &#8211; (requires ratings manager extension) You can add images uploaded by users by using the key: comment_images<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Fallback types<\/strong> &#8211;&nbsp;Comma separated list of fallback types to show if post has no specified images (<strong>only one will be shown<\/strong>). Defaults to: logo,cat_default,cpt_default,listing_default.<\/li>\n\n\n\n<li><strong>Image size<\/strong> &#8211; You can set a specific WP image size. All images are output as responsive sizes so this option is rarely needed.<\/li>\n\n\n\n<li><strong>Image limit<\/strong> &#8211;&nbsp;Limit the number of images returned.<\/li>\n\n\n\n<li><strong>Show limit <\/strong>&#8211;&nbsp;Limit the number of images shown. This can be used to output 1-2 images in a gallery and if linked to lightbox it can ajax load more images when in a lightbox. This can also be used to turn the slider into a carousel and will set the default visible images.<\/li>\n\n\n\n<li><strong>Image cover type<\/strong> &#8211;&nbsp;This is how the image should cover the image viewport. You can give priority to height, width or to show the whole image, the default is to cover which looks best but can clip the edges of images.<\/li>\n\n\n\n<li><strong>Extra class<\/strong> &#8211;&nbsp;Give the wrapper an extra class so you can style things as you want.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Example Output<\/h2>\n\n\n\n<p>Single Image<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-AvfRXn3hlS.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Slider<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-WeBzN5S09L.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Slider (with thumbnail control nav)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-2hkDzKQTGi.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Gallery<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/wpgeodirectory.com\/documentation\/wp-content\/uploads\/2025\/03\/file-iQVbZ4C7lC.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Video Screenshot as Post Image?<\/h2>\n\n\n\n<p>It is possible to&nbsp;show a video using the <strong>GD &gt; Post Images <\/strong>widget, and in case the listing doesn&#8217;t have a video, it can automatically show the featured image instead.&nbsp;<\/p>\n\n\n\n<p>You&#8217;d simply need to&nbsp;set the first image to be <strong>&#8220;video_screenshot,post_images&#8221;<\/strong>&nbsp;and then, make sure <strong>&#8220;Show advanced is set&#8221;<\/strong> and set the limit to 1, and then paste the link to your screenshot. This will show a screenshot of the video and show it in a popup if clicked, and if no video exists then it will show the featured image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"types\">Image Types<\/h3>\n\n\n\n<p>types has a default value of:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">post_images,logo,comment_images,website_screenshot<\/pre>\n\n\n\n<p>If you choose to add another File Upload field that accepts images, you can also display that new image field with the same GD Pose Images widget; just add the field key into the list.<\/p>\n\n\n\n<p>To do that, add all the keys, onec for each image field that you want to load and in the order that you want them loaded.<\/p>\n\n\n\n<p>For example, if you made a new field &#8220;Product Image&#8221; with a key product image, you can add that image to the main GD Post Image widget by adding the key to a list like:<br><br>post_images,product_image<\/p>\n\n\n\n<p>Another example, you can make an additional &#8216;Gallery&#8217; File Upload field with key &#8216;gallery&#8217;. To display that field. you can simply set the key in the image types: gallery<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fallback_types\">Fallback Types<\/h3>\n\n\n\n<p>fallback_types has a default value of:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">logo,cat_default,cpt_default,listing_default<\/pre>\n\n\n\n<p>Fallback images show when the field is empty. Only the first listed fallback type to have a value will show.<\/p>\n\n\n\n<p>Each of these is a specific type of default that you can set in the GeoDirectory settings<\/p>\n\n\n\n<p><strong>cat_default<\/strong><\/p>\n\n\n\n<p>Set the category default image in the category edit screen, for example:<br><br><em>WP Admin &#8211; Places &#8211; Place Categories &#8211; Choose a category to edit &#8211; add category default image<\/em><\/p>\n\n\n\n<p><strong>cpt_default<\/strong><\/p>\n\n\n\n<p>Set the CPT default image in the CPT settings page. For example:<br><br><em>WP Admin &#8211; Places &#8211; Settings &#8211; General &#8211; Show advanced &#8211; Default image<\/em><\/p>\n\n\n\n<p><strong>listing_default<\/strong><\/p>\n\n\n\n<p>Set the listing default image in the GeoDirectory general settings<br><br><em>WP Admin &#8211; GeoDirectory &#8211; Settings &#8211; Design &#8211; Archives &#8211; Listing default Image<\/em><\/p>\n\n\n\n<p><strong>No fallback = 0<\/strong><\/p>\n\n\n\n<p>In the case that you do not want any fallback image types to show when the field is empty then set a 0 in the fallback types setting.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Post Images&nbsp;widget outputs images from any image custom field. Some features include; Widget Options Example Output Single Image Slider Slider (with thumbnail control nav) Gallery How to Set Video Screenshot as Post Image? It is possible to&nbsp;show a video using the GD &gt; Post Images widget, and in case the listing doesn&#8217;t have a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[213,422],"class_list":["post-733","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-extensions-features","gd_placecategory-core-widgets"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=733"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/733\/revisions"}],"predecessor-version":[{"id":2169,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/733\/revisions\/2169"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=733"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=733"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}