FooGallery

https://fooplugins.com/documentation/foogallery/
Admin
FooGallery is a WordPress media gallery plugin that allows users to easily create beautiful,...
Tokens:51,404
Snippets:831
Trust Score:10
Update:5 months ago
Show doc for...
Tokens:
Raw
### FooGallery Demo Custom CSS Example

Source: https://fooplugins.com/documentation/foogallery/developers/customize-gallery-custom-css

This CSS was used to style the main FooGallery demo. It customizes various elements including buttons, panels, and pagination/filtering controls.

```css
:root {
    --fg-button-text: #000;
    --fg-button-text-secondary: #6c757d;
    --fg-button-background: #FFF;
    --fg-button-gradient: linear-gradient(to right, #00CFFF, #7d4fff);
    --fg-panel-text: #FFF;
    --fg-panel-background: rgba(15, 2, 32, 0.6);
    --fg-panel-background-image: url(https://fooplugins.com/wp-content/themes/fooplugins-website/library/svg/bgs/masthead-banner.svg);
    --fg-panel-border: #0F0220;
    --fg-panel-button-text: #FFF;
    --fg-panel-button-background: #0F0220;
    --fg-panel-button-gradient: var(--fg-button-gradient);
}

/* Style the filtering & paging to match the theme */
.fg-custom .fg-load-more,
.fg-custom .fg-tag-item .fg-tag-link,
.fg-custom .fg-page-item .fg-page-link {
    position: relative;
    box-sizing: border-box;
    margin: 1px;
    padding: calc(.4em - 3px) calc(1em - 3px);
    color: var(--fg-button-text-secondary);
    background: transparent;
    border: 6px solid transparent;
    border-radius: .6rem;
    font-weight: 500;
    line-height: 1.5;

```

--------------------------------

### Render a FooGallery with Custom Arguments in PHP

Source: https://fooplugins.com/documentation/foogallery/developers/display-a-gallery-in-php-code

This example demonstrates how to render a gallery with specific arguments to override default settings, such as limiting the number of images or changing the caption source. Always check if `foogallery_render_gallery` function exists.

```php
<span><code class="hljs language-php">$gallery_id = <span class="hljs-number">123</span>;
$args = <span class="hljs-keyword">array</span>(
    <span class="hljs-string">'limit'</span> => <span class="hljs-number">5</span>, <span class="hljs-comment">// only show 5 thumbs in the gallery</span>
    <span class="hljs-string">'caption_title_source'</span> => <span class="hljs-string">'alt'</span> <span class="hljs-comment">// change the captions titles to use ALT text rather</span>
);

<span class="hljs-comment">// next, do a check to make sure FooGallery is loaded</span>
<span class="hljs-keyword">if</span> ( function_exists( <span class="hljs-string">'foogallery_render_gallery'</span> ) ) {
    
    <span class="hljs-comment">//render the gallery with arguments!</span>
    foogallery_render_gallery( $gallery_id, $args );

}</code></span>
```

--------------------------------

### Custom CSS for Lightbox

Source: https://fooplugins.com/documentation/foogallery/developers/customize-gallery-custom-css

Style the FooGallery lightbox panel and its elements using custom CSS. This example targets the '.fg-panel.fg-custom' class for specific styling of the lightbox.

```css
/* Style the lightbox */
.fg-panel.fg-custom,
.fg-panel.fg-custom .fg-panel-thumbs-button,

```

--------------------------------

### Manually Created Product Gallery Item

Source: https://fooplugins.com/documentation/foogallery/pro-commerce/creating-product-gallery

Example of a single product gallery item created manually, including image, title, price, and an 'Add to Cart' button.

```html
[!["Sunrise Beach"](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22250%22%20height%3D%22250%22%20viewBox%3D%220%200%20250%20250%22%3E%3C%2Fsvg%3E "Sunrise Beach")](https://fooplugins.com/wp-content/uploads/2021/09/beach-1246835_640.jpg)Sunrise Beach

$45

[Add to Cart](#)
```

```html
[!["Waterdrops on Flower"](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22250%22%20height%3D%22250%22%20viewBox%3D%220%200%20250%20250%22%3E%3C%2Fsvg%3E "Waterdrops on Flower")](https://fooplugins.com/wp-content/uploads/2021/09/Image-by-Meine-Reise-geht-hier-leider-zu-Ende.-Marchen-beginnen-mit-from-Pixabay.jpg)Waterdrops on Flower

$50

[Add to Cart](#)
```

```html
[!["Meadow"](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22250%22%20height%3D%22250%22%20viewBox%3D%220%200%20250%20250%22%3E%3C%2Fsvg%3E "Meadow")](https://fooplugins.com/wp-content/uploads/2021/09/meadow-4485609_640.jpg)Meadow

$45

[Add to Cart](#)
```

```html
[!["Lake Island"](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22250%22%20height%3D%22250%22%20viewBox%3D%220%200%20250%20250%22%3E%3C%2Fsvg%3E "Lake Island")](https://fooplugins.com/wp-content/uploads/2021/09/Image-by-GreenvalleyPicture-from-Pixabay.jpg)Lake Island

$40

[Add to Cart](#)
```

```html
[!["Bluebell Field"](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22250%22%20height%3D%22250%22%20viewBox%3D%220%200%20250%20250%22%3E%3C%2Fsvg%3E "Bluebell Field")](https://fooplugins.com/wp-content/uploads/2021/09/bellflower-1576086.jpg)Bluebell Field

$42,50

[Add to Cart](#)
```

```html
[!["Island Sunrise"](data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22250%22%20height%3D%22250%22%20viewBox%3D%220%200%20250%20250%22%3E%3C%2Fsvg%3E "Island Sunrise")](https://fooplugins.com/wp-content/uploads/2021/09/sunset-3087145_640.jpg)Island Sunrise

$50

[Add to Cart](#)
```

--------------------------------

### Offset FooGallery Thumbnails

Source: https://fooplugins.com/documentation/foogallery/troubleshooting-foogallery/shortcode-attributes

Use the 'offset' attribute to start displaying thumbnails from a specific index. This allows you to skip initial images in a gallery.

```shortcode
[foogallery id="123" offset="3"]
```

--------------------------------

### Apply Custom CSS to Gallery

Source: https://fooplugins.com/documentation/foogallery/developers/customize-gallery-custom-css

Use custom CSS to modify the appearance of your gallery. This example shows how to add shadows and adjust spacing.

```CSS
.foogallery-gallery-wrapper {
    box-shadow: 0 2.5em 0 0 rgba(255, 255, 255, 0.2),
    -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2),
    -2.6em 0 0 0 rgba(255, 255, 255, 0.5),
    -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
}
```

--------------------------------

### Define FooGallery License Key in wp-config.php

Source: https://fooplugins.com/documentation/foogallery/developers/auto-license-activations-using-wp-config-php

Add this constant to your wp-config.php file to enable automatic license activation for FooGallery. Ensure you replace the dummy key with your actual license key.

```php
define( 'FOOGALLERY_LICENSE_KEY', 'sk_DUMMY_KEY_REPLACE_WITH_YOURS' );
/* That's all, stop editing! Happy publishing. */
```

--------------------------------

### Create Dynamic FooGallery

Source: https://fooplugins.com/documentation/foogallery/troubleshooting-foogallery/shortcode-attributes

Generate a gallery on the fly without saving it by providing attachment IDs and a template directly in the shortcode. This is useful for temporary or dynamically generated galleries.

```shortcode
[foogallery attachment_ids="45,46,49" template="masonry"]
```

--------------------------------

### Change FooGallery PRO Lightbox Background Color

Source: https://fooplugins.com/documentation/foogallery/developers/common-foogallery-custom-css

Set a custom background color for the FooGallery PRO lightbox when an image is opened. The example uses a red color (#f33737).

```css
.fg-panel-area-inner.fg-panel-content-inner { background-color: #f33737; }
```

--------------------------------

### foogallery_loaded_template_before

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Enables custom code execution before a gallery template is loaded, allowing for pre-processing.

```APIDOC
## foogallery_loaded_template_before

### Description
This enables you to execute custom code before a gallery template is loaded, allowing for pre-processing or initialization.

### Method
add_action

### Hook Name
foogallery_loaded_template_before

### Parameters
- **$template** (string) - The name or path of the template about to be loaded.
- **$gallery** (object) - The gallery object associated with the template loading.

### Request Example
```php
add_action('foogallery_loaded_template_before', function($template, $gallery) {
    // Custom code to run before the template is loaded
});
```
```

--------------------------------

### Add Custom CSS to a Specific Gallery

Source: https://fooplugins.com/documentation/foogallery/developers/customize-gallery-custom-css

Use the Custom CSS metabox when editing a gallery to apply styles to that specific gallery. You can target the gallery using its ID, for example, `#foogallery-gallery-1234`.

--------------------------------

### Test FooGallery Initialization in Dev Tools

Source: https://fooplugins.com/documentation/foogallery/troubleshooting-foogallery/gallery-stops-showing

Run this JavaScript code in your browser's developer console to test if FooGallery can be initialized on the current page. This helps determine if external JavaScript errors are preventing it from loading.

```javascript
jQuery('.foogallery').foogallery();
```

--------------------------------

### Center Caption and Description in FooGallery PRO Lightbox

Source: https://fooplugins.com/documentation/foogallery/developers/common-foogallery-custom-css

Apply this CSS to center the caption and description text within the FooGallery PRO lightbox overlay.

```css
.fg-medium.fg-panel-info-overlay .fg-media-caption {

 text-align:center;

}
```

--------------------------------

### Render a FooGallery using PHP

Source: https://fooplugins.com/documentation/foogallery/developers/display-a-gallery-in-php-code

Use this snippet to display a specific gallery by its ID in your PHP code. Ensure FooGallery is active before calling the function.

```php
<span><code class="hljs language-php"><span class="hljs-comment">// you first need to know which gallery you want to render.
// you can hard-code this value or get it from somewhere else</span>
$gallery_id = <span class="hljs-number">123</span>;

<span class="hljs-comment">// next, do a check to make sure FooGallery is loaded</span>
<span class="hljs-keyword">if</span> ( function_exists( <span class="hljs-string">'foogallery_render_gallery'</span> ) ) {
    
    <span class="hljs-comment">//render the gallery!</span>
    foogallery_render_gallery( $gallery_id );

}</code></span>
```

--------------------------------

### Render Custom Settings Fields in FooGallery Admin

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Add custom input fields to the FooGallery settings page to extend configuration options.

```php
add_action('foogallery_admin_settings_custom_type_render_setting', function() {
    // Custom settings HTML
    echo '<input type="text" name="custom_setting" value="" />';
});
```

--------------------------------

### Override FooGallery Template

Source: https://fooplugins.com/documentation/foogallery/troubleshooting-foogallery/shortcode-attributes

Specify a different gallery template to use for displaying your gallery by setting the 'template' attribute. A list of available templates is provided in the documentation.

```shortcode
[foogallery id="123" template="masonry"]
```

--------------------------------

### foogallery_located_album_template_stack

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Enables custom code execution for stack album templates.

```APIDOC
## foogallery_located_album_template_stack

### Description
This allows you to execute custom code for stack album templates, useful for extending or modifying album template functionality.

### Method
add_action

### Hook Name
foogallery_located_album_template_stack

### Parameters
- **$template** (string) - The template being located.

### Request Example
```php
add_action('foogallery_located_album_template_stack', function($template) {
    // Custom code for stack album templates
});
```
```

--------------------------------

### Add Custom Submenu Items to FooGallery Admin Menu

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Extend the FooGallery admin interface by adding custom submenu pages.

```php
add_action('foogallery_admin_menu_after', function() {
add_submenu_page('foogallery', 'Custom Menu', 'Custom Menu', 'manage_options', 'custom-menu', 'custom_menu_page_callback');
});
```

--------------------------------

### Displaying Title and Custom URL

Source: https://fooplugins.com/documentation/foogallery/pro-expert/using-custom-captions

Use this template to display the image title followed by its custom URL. This utilizes built-in FooGallery placeholders.

```html
{{title}}
```

```html
{{custom_url}}
```

--------------------------------

### Product Gallery CSS Styling

Source: https://fooplugins.com/documentation/foogallery/pro-commerce/creating-product-gallery

Custom CSS to style a product gallery with a simple portfolio layout, adjusting item basis and margins.

```css
#foogallery-gallery-181679.fg-simple_portfolio { justify-content: center; }
#foogallery-gallery-181679.fg-simple_portfolio .fg-item { flex-basis: 250px; margin: 40px; }
```

--------------------------------

### FooGallery v3.0 Caption Selectors Cheat-Sheet (CSS)

Source: https://fooplugins.com/documentation/foogallery/troubleshooting-foogallery/foogallery-v3-0-custom-css-migration-guide

Use these selectors to style standard (non-preset) FooGallery captions. For specific galleries, prepend the gallery ID (e.g., #foogallery-gallery-123). Use with caution for preset galleries by prepending .foogallery.fg-preset.

```css
/* 1) Change typography for standard captions */
/* Title */
.foogallery:not(.fg-preset) .fg-caption-title {
  font-family: monospace;
  font-size: 20px;
  color: hotpink;
}

/* Description */
.foogallery:not(.fg-preset) .fg-caption-desc {
  font-family: monospace;
  font-size: 14px;
  color: hotpink;
}

/* 2) Change padding for caption content */
.foogallery:not(.fg-preset) .fg-caption .fg-caption-inner {
  padding: 30px;
}

/* 3) Change overlay icon (hover/zoom) */
.foogallery:not(.fg-preset) :is(.fg-caption-inner, .fg-image-overlay)::before {
  background-image: url(../assets/img/icons.svg#image-light);
  background-size: 32px 32px;
}

/* 4) Change the caption backdrop colour */
.foogallery:not(.fg-preset) .fg-caption {
  background-color: #00b9ff;
}
```

--------------------------------

### Hook Before Gallery Template Load

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Execute custom code before a gallery template is loaded. Useful for pre-processing or initialization tasks.

```php
add_action('foogallery_loaded_template_before', function($template, $gallery) {
    // Custom code to run before the template is loaded
});
```

--------------------------------

### foogallery_datasource_modal_content_folders

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Allows adding custom content to the data source modal for folders.

```APIDOC
## foogallery_datasource_modal_content_folders

### Description
This allows you to add custom content to the data source modal for folders, providing additional options or information.

### Method
add_action

### Hook Name
foogallery_datasource_modal_content_folders

### Parameters
None explicitly documented.

### Request Example
```php
add_action('foogallery_datasource_modal_content_folders', function() {
    // Custom content for folders data source modal
});
```
```

--------------------------------

### foogallery_admin_settings_override

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Allows overriding default FooGallery admin settings. You can modify existing settings or add new ones.

```APIDOC
## foogallery_admin_settings_override

### Description
Allows overriding default FooGallery admin settings, enabling the customization of configuration options.

### Method
add_filter

### Hook Name
foogallery_admin_settings_override

### Parameters
- **$settings** (array) - The array of admin settings to be modified.

### Request Example
```php
add_filter('foogallery_admin_settings_override', function($settings) {
    // Modify settings
    $settings['custom_setting'] = 'value';
    return $settings;
});
```
```

--------------------------------

### Apply CSS to All FooGalleries

Source: https://fooplugins.com/documentation/foogallery/troubleshooting-foogallery/foogallery-v3-0-custom-css-migration-guide

Use the `.foogallery` base class to apply custom CSS rules to every FooGallery on your website. This is suitable for global CSS settings.

```css
/* Applies to every FooGallery on the site */
.foogallery .fg-caption { /* … */ }
```

--------------------------------

### Execute Code After Gallery Template Load

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Run custom code after a gallery template has been loaded, useful for further modifications or initialization.

```php
add_action('foogallery_loaded_template_after', function($template, $gallery) {
// Custom code to run after the template is loaded
});
```

--------------------------------

### Move Image Viewer Controls to Top

Source: https://fooplugins.com/documentation/foogallery/developers/common-foogallery-custom-css

Reposition the Image Viewer controls and pagination from the bottom to the top of the gallery. Remember to replace '#foogallery-gallery-1' with the actual ID of your gallery.

```css
\#foogallery-gallery-1 .fiv-inner {

 display: inline-flex;

 flex-direction: column-reverse;

}

\#foogallery-gallery-1 .fiv-ctrls,

\#foogallery-gallery-1.fg-border-medium .fiv-ctrls,

\#foogallery-gallery-1.fg-border-thick .fiv-ctrls,

\#foogallery-gallery-1.fg-border-thin .fiv-ctrls {

 border-bottom-width: 1px;

}

\#foogallery-gallery-1.fg-border-thin .fiv-ctrls {

 border-top-width: 4px;

}

\#foogallery-gallery-1.fg-border-medium .fiv-ctrls {

 border-top-width: 10px;

}

\#foogallery-gallery-1.fg-border-thick .fiv-ctrls {

 border-top-width: 16px;

}
```

--------------------------------

### foogallery_datasource_modal_content_post_query

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Allows adding custom content to the data source modal for post queries.

```APIDOC
## foogallery_datasource_modal_content_post_query

### Description
This allows you to add custom content to the data source modal for post queries, providing additional options or information.

### Method
add_action

### Hook Name
foogallery_datasource_modal_content_post_query

### Parameters
None explicitly documented.

### Request Example
```php
add_action('foogallery_datasource_modal_content_post_query', function() {
    // Custom content for post query data source modal
});
```
```

--------------------------------

### foogallery_gallery_metabox_items_add

Source: https://fooplugins.com/documentation/foogallery/developers/foogallery-hooks

Allows adding custom items to the gallery metabox, extending displayed options or information.

```APIDOC
## foogallery_gallery_metabox_items_add

### Description
This allows you to add custom items to the gallery metabox, extending the options or information displayed within the metabox.

### Method
add_action

### Hook Name
foogallery_gallery_metabox_items_add

### Parameters
None explicitly documented.

### Request Example
```php
add_action('foogallery_gallery_metabox_items_add', function() {
    // Add custom items to the metabox
});
```
```
Tokens:
Raw