Grid FX

This shortcode will implement the default Grid FX layout into your posts.

How to Embed This Shortcode in Editor

[gridfx]

Shortcode Options

Example

Options are used to customize the shortcode and can be assigned as a pair option=value in your shortcode like this.

[gridfx option=value]

  • title – This is an optional parameter that lets you display a custom heading or title for your grid wall.
  • description – This is an optional parameter that lets you display a custom description below the title for your grid wall. You can use both text and HTML in this field.
  • theme – General theme to use, themes are located in /templates/themes folder. e.g. light or dark, etc. Default value : light
  • default_theme – Default theme fallback to use. The plugin will use this theme if the theme does not exist. Default value : light
  • transparent – Enable this option If you want to apply transparent background to your Grid FX grid to match your theme or parent background. Enabling this option will override Grid FX style background. Default value : 0
  • primary_font – Font to use in the plugin. You can see list of available fonts in the settings/generate pages. Default value : Open Sans
  • custom_css – Custom css rules that apply to the .gridfx container. You can add custom styles that will affect only the shortcode being shown. e.g. a special border, background, or any other css rule.
  • margin – This value controls the top margin above Grid FX items in pixels. Default value : 30
  • crop – Set this to 1 If your images have different dimensions and you want to apply the same height/crop all images to make them equal. Default value : 0
  • crop_quickmode – If you enable this, cropped image will be also used in quick mode. Turn off to make crop in grid items only (not quick view). Default value : 0
  • crop_width – If you enable the equal height/cropping, please enter the standard width of image here. Default value : 500
  • crop_height – If you enable the equal height/cropping, please enter the standard width of image here. Default value : 281
  • crop_pos – Enter your crop position here If you enable the crop option (equal image heights). The accepted value can be: t (Top) c (Center) b (Bottom) Default value : t
  • columns – The number of columns to show by default in the grid. This number should be logical and relative to the parent or window width, depending on screen/document width this number can be ignored in responsive mode. Default value : 3
  • items_container_width – The percentage width of the container that holds the items, not the width of whole Grid FX instance. This is useful if you want to leave gaps on the left and right of items. Default value : 100
  • image_max_width – This is the maximum percentage width an image can have in full/single mode. Default value : 100
  • item_content_width – This is the percentage width of full/single mode relative to its parent. Default value : 70
  • item_content_left_width – This is the percentage width of the left side in full mode and when content is available. e.g. Width of post image. Remember width of left and right containers must not exceed 100. Default value : 50
  • item_content_right_width – This is the percentage width of the right side in full mode and when content is available e.g. Width of post content. Remember width of left and right containers must not exceed 100. Default value : 45
  • instantsearch – This option can enable or disable instant search feature in your grid. The value can be 1 or 0. Default value : 1
  • search_placeholder – Set the default search placeholder if you enabled search feature. Default value : Search
  • integrate – The plugin offers integration with specific WordPress platforms. Note that this integration may override other options such as post type, taxonomies, and other template options. example: to integrate with WooCommerce instantly, enter woocommerce here. Default value : 0
  • posttypes – A comma seperated of allowed post types in the grid. This can be a single post type also. examples: post,page or attachment. Default value : post
  • sortmenu – This option can show or hide the sort results by dropdown where frontend users can sort the results by various ways. Default value : 1
  • taxonomy_filter – This can be a comma seperated list of taxonomies that you want to allow users to filter on the frontend. examples: category or category,post_tag, etc. This will display a list of these categories that user can filter by. Default value : category
  • hide_empty_cat – This option can hide/show empty categories from navigation. This option can be 1 or 0. Default value : 1
  • cat_list_orderby – Order of categories in the nav if you enable isotope filtering. This can be name, id, slug, or count. Default value : name
  • posts_per_page – Number of posts to show per page in the grid. To show all posts and disable pagination please use -1 as value to display all items. Default value : 9
  • orderby – This can control the order/sorting of posts and results in your grid. Accepted values are: date, title, name, ID, modified, comment_count. Default value : date
  • order – This will control the sorting order. This can be DESC or ASC. Default value : DESC
  • include_terms_tree – This can be a comma seperated list of parent categories IDs to include in the results. examples: 1,4,10. This will include the specified parent categories and their children categories in results. Default value : 0
  • include_terms – This can be a comma seperated list of children categories IDs to include in the results. examples: 1,4,10. This will include only the specified categories in results. 0
  • exclude_terms_tree – This can be a comma seperated list of parent categories IDs to exclude from the results. examples: 8,12,22. This will exclude the specified parent categories and their children categories from results. Default value : 0
  • exclude_terms – This can be a comma seperated list of children categories IDs to exclude from the results. examples: 8,12,22. This will exclude only the specified categories from results. Default value : 0
  • paged – This is the default page to display. It does not have effect when you display all items. Default value : 1
  • post_parent – If you want to display images from a specific post as a gallery for example, enter the parent post ID here. Leave blank to disable.
  • load_more – This option specify how you want loading more content to be handled. Possible values: button, pagination, navigation, full, or 0 to disable loading more items. Default value : button
  • load_more_text – The text that is shown on the button that loads more posts. examples: Load more themes. Default value : Load more
  • loaded_all_text – The text that is shown on the button after loading all items. examples: Loaded all content. Default value : Loaded all content
  • load_more_img – This is the path/URL of your loading spinner/image that get shown on the load more button until new results are loaded. Default value : http://localhost/wordpress/wp-content/plugins/gridfx/images/loading-more.png
  • enable_grid_media – Enable or disable media in grid gallery. Allow media in the grid too. Default value : 1
  • global_image_action – Here you can modify the action that happens on image click. Default is 0 and available values are open_fancybox or post_url to open post directly. Default value : 0
  • link_to_post – If you want to force link to post without messing up with custom template/buttons option please choose an appropriate option here. Default value : 0
  • link_to_post_text – If you choose to place the little icon over image to link to post, this is the text that will appear besides the icon. example: continue or full post. Default value : full post
  • show_title – This can show or hide the post title display below the item image in grid view. This option may not be supported by specific Grid FX themes. Default value : 1
  • pre_title – This can be optional prefix that gets shown before every title. For example If you are showing products, you can set this to Product.
  • excerpt_below_title – Enter number of words to display an excerpt below title. Leave blank to disable this excerpt.
  • excerpt_over_image – Enter number of words to display an excerpt over image. Leave blank to disable this excerpt.
  • tags_filter – This can be a comma seperated list of taxonomies to display post terms for each item in the grid. examples: post_tag or post_tag,category, etc. This will display a list of post terms/categories and enable isotope filtering automatically. This option may not be supported by specific Grid FX themes. Default value : post_tag
  • item_custom_field – This can be a custom meta key that displays data besides the title such as price, or any other meta data needed. Leave blank to disable. This option may not be supported by specific Grid FX themes.
  • item_custom_field_filter – If you store prices like this 1200 and want to apply automated filter or some sort of number format like converting the number to euro or US dollar format. Default value : 0
  • show_views – Enable views count in grid/overlay view. This option can be 1 or 0. Default value : 1
  • show_likes – Enable likes in grid/overlay view. This option can be 1 or 0. Default value : 1
  • show_comments – Comments are not yet integrated in Grid FX plugin. Please leave this disabled and watch for plugin updates. Default value : 0
  • show_corner – Enable or disable the display of a custom field value in the top right corner over grid item image in grid mode. Default value : 0
  • show_corner_key – If you enable the above option, enter the meta field key here to grab the value from. This can be useful to show any specific meta field value.
  • show_overlay_title_v2 – This is an extra overlay style. Enabling this title may remove other controls on overlay because it is centered in the image and gives a simple look. Default value : 0
  • show_overlay_title – Enable or disable title on item overlay in grid view. If enabled, the post title will be displayed on top of the overlay. Default value : 0
  • show_overlay_title_class – If you enable the above option, you can enter one of these values: none or top. none will show the title in static style over the item image, while top will animate the title from top to bottom when you move the mouse over the item image in grid mode. Default value : top
  • overlay_title_css – Custom css rules that apply to the overlay title which shows up on grid If enabled.
  • shadow_layer – Hide or show the shadow layer over your grid items. This option can be 1 or 0. Default value : hide
  • transparent_layer – Hide or show the transparent layer over your grid items. This option can be 1 or 0. Default value : hide
  • overlay_lightbox_text – This enable or disable the fancybox photos trigger on each grid item overlay. This can be 1 or 0. Default value : 1
  • photos_label – This controls the word that describes photos in plural form. examples: photos, screenshots, pictures. Default value : photos
  • photos_label_singular – This controls the word that describes photos in singular form. examples: photo, screenshot, picture. Default value : photo
  • more_details_text – This is the text that is shown on grid item overlay to expand view. Leave blank to disable this behaviour. Default value : quick view
  • item_links – This is optional. You can use this option to display buttons on the image in grid view e.g. Live Demo, Buy Now, etc. This template needs to have a special syntax and format. example: meta_key or URL|Button Text|Button Style. Please check out the FAQs on top to learn about available buttons styles.
  • item_extended_links – Custom extended links may NOT be supported by all Grid FX themes. This is optional. You can use this option to display buttons below item image in grid mode. e.g. Live Demo, Buy Now, etc. This template needs to have a special syntax and format. example: meta_key or URL|Button Text|Button Style. Please check out the FAQs on top to learn about available buttons styles.
  • single_theme – Theme to use in single/expanded view, themes are located in /templates/themes/single folder. e.g. light or dark, etc. Default value : dark
  • default_single_theme – Default theme fallback to use in single view. The plugin will use this theme if the single_theme does not exist. Default value : dark
  • scrollbar_theme – This is the theme name that controls the appearance of custom scrollbar in single view to navigate post content. This can be: light-thick, light, light-2, light-thin, dark-thick, dark, dark-2, dark-thin. Default value : light-thick
  • single_show_content – This enable or disable post content in full view even a post has content available. You can turn off contents completely by turning this to 0. Default value : 1
  • single_hide_image – This enable or disable post image in full view. Default value : 0
  • single_show_views – Enable views count in full view. This option can be 1 or 0. Default value : 1
  • single_show_likes – Enable likes in full view. This option can be 1 or 0. Default value : 1
  • single_show_comments – Comments are not yet integrated in Grid FX plugin. Please leave this disabled and watch for plugin updates. Default value : 0
  • single_show_corner – Enable or disable the display of a custom field value in the top right corner of image in full mode. Default value : 0
  • single_show_corner_key – If you enable the above option, enter the meta field key here to grab the value from. This can be useful to show any specific meta field value.
  • single_item_links – This is optional. You can use this option to display buttons on the image in expanded view e.g. Live Demo, Buy Now, etc. This template needs to have a special syntax and format. example: meta_key or URL|Button Text|Button Style. Please check out the FAQs on top to learn about available buttons styles.
  • single_item_custom_field – This can be a custom meta key that displays data besides the title such as price, or any other meta data needed. Leave blank to disable.
  • single_image_action – This will control the action that happens when they click the image under full view, this can be fancybox or permalink. Default value : fancybox
  • grid_image_size – The optimal image size to be considered in grid view display. This can be full, large, medium, or thumbnail. This can be decided based on grid width or number of items (columns). Default value : large
  • single_image_size – The optimal image size to be considered in full view or quick mode display. This can be full, large, medium, or thumbnail. This is the optimal image size in full view. Default value : large
  • placeholder – Enable or disable the image placeholder that gets displayed If your post does not have an image yet. This can be 1 or 0. Default value : 1
  • builtin_placeholder – If you enable placeholders, you can choose which placeholder image to use here. examples: light or dark or image name. Default value : light
  • custom_placeholder – If you prefer to use your own placeholder, enter your custom placeholder image URL here or leave blank to use builtin placeholder.
  • loader_mini – This is the URL of mini loading spinner that is used by the Grid FX plugin to update likes for example. Enter full URL here to change this image. Default value : http://localhost/wordpress/wp-content/plugins/gridfx/images/loader_mini.gif
  • lightbox_background – This is the RGBa background color to use for fancybox/lightbox images as a background. examples: rgba(255, 255, 255, 0.80) Leave blank for default fancybox background.
  • lightbox_padding – This controls the padding inside lightbox images. If you set this to 0, padding and borders in the lightbox will not be displayed. Default value : 0
  • lightbox_margin – This controls the margin outside lightbox images. The distance from the image edges to screen edges. Default value : 0
  • lightbox_title – Enables or disables display of image title in the lightbox. Default value : 0
  • lightbox_title_type – This is title type if you enable title in lightbox, you can set this to: over, inside, outside, or float. This will control the appearance of lightbox title. Default value : float
  • lightbox_closeclick – When enabled, lightbox content will be closed when user clicks on it. This option can be 1 or 0. Default value : 1
  • lightbox_closebtn – Shows or hides the close button in lightbox mode. This option can be 1 or 0. Default value : 0
  • lightbox_buttons – Shows or hides the lightbox buttons helper that helps you navigate between multiple images. Default value : 0
  • lightbox_thumbs – Shows or hides the small thumbnails that helps you browse photos in each post gallery. Default value : 1
  • taxonomy_filter_woo – You can use a comma seperated list of available WooCommerce taxonomies. Default value : product_cat

Was this article helpful?

Related Articles

Leave A Comment?