';
+
+ // Type indicator icon (video or link)
+ $is_video = isset( $image['type'] ) && $image['type'] === 'video' && ! empty( $image['link'] );
+ $is_product = isset( $image['type'] ) && $image['type'] === 'product';
+
+ if ( $is_video ) {
+ // Video indicator
+ echo '
';
+ echo ' ';
+ } elseif ( ! $is_product && ! empty( $image['link'] ) ) {
+ // External link indicator (not for products)
+ echo '
';
+ echo ' ';
+ }
+
+ // Render by type: product, video, or image
+ if ( $is_product ) {
+ $this->render_product_item( $image, $index, $settings, $gallery_id );
+ } elseif ( $is_video ) {
+ $this->render_video_item( $image, $index, $settings, $gallery_id );
+ } else {
+ $this->render_image_item( $image, $index, $settings, $gallery_id );
+ }
+
+ echo '
';
+ if ( $settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+ if ( $show_categories && ! empty( $image['filters'] ) ) {
+ $filter_names = array();
+ foreach ( $image['filters'] as $filter_id ) {
+ $name = $this->get_filter_name( $filter_id );
+ if ( $name ) {
+ $filter_names[] = $name;
+ }
+ }
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+ echo '
';
+
+ if ( $settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_categories && ! empty( $image['filters'] ) ) {
+ $filter_names = array();
+ foreach ( $image['filters'] as $filter_id ) {
+ $name = $this->get_filter_name( $filter_id );
+ if ( $name ) {
+ $filter_names[] = $name;
+ }
+ }
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+
+ echo '
';
+
+ if ( $show_title && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_price && isset( $product_data['price'] ) ) {
+ echo '
' . wp_kses_post( $product_data['price'] ) . ' ';
+ }
+
+ if ( $show_categories && ! empty( $image['filters'] ) ) {
+ echo '
' . esc_html( implode( ', ', array_slice( $image['filters'], 0, 2 ) ) ) . '
';
+ }
+
+ echo '
$value ) {
+ if ( $attr === 'class' ) {
+ echo ' class="' . esc_attr( $value ) . '"';
+ } else {
+ echo ' ' . esc_attr( $attr ) . '="' . esc_attr( $value ) . '"';
+ }
+ }
+ echo '>';
+
+ // Render filters
+ if ( $this->settings['filters_enabled'] && ! empty( $this->filters ) ) {
+ $this->render_filters( $active_filter );
+ }
+
+ // For sidebar layouts, wrap remaining content in a main content div
+ if ( $is_sidebar ) {
+ echo '';
+ }
+
+ // Render search box
+ if ( $this->settings['search_enabled'] ) {
+ $this->render_search();
+ }
+
+ // Render gallery grid
+ $this->render_grid( $active_filter );
+
+ // Render pagination controls
+ if ( $pagination_enabled ) {
+ $this->render_pagination( $pagination_type, $items_per_page );
+ }
+
+ // Close main content wrapper for sidebar
+ if ( $is_sidebar ) {
+ echo '
';
+ }
+
+ echo '';
+ }
+
+ /**
+ * Output gallery-specific CSS variables.
+ *
+ * @param string $unique_id Unique gallery container ID.
+ */
+ protected function output_styles( $unique_id ) {
+ $styles = array(
+ '--pfg-cols-xl' => $this->settings['columns_xl'],
+ '--pfg-cols-lg' => $this->settings['columns_lg'],
+ '--pfg-cols-md' => $this->settings['columns_md'],
+ '--pfg-cols-sm' => $this->settings['columns_sm'],
+ '--pfg-gap' => $this->settings['gap'] . 'px',
+ '--pfg-border-width'=> $this->settings['border_width'] . 'px',
+ '--pfg-border-color'=> $this->settings['border_color'],
+ '--pfg-border-radius' => $this->settings['border_radius'] . 'px',
+ '--pfg-filter-bg' => isset( $this->settings['primary_color'] ) ? $this->settings['primary_color'] : ( $this->settings['filter_bg_color'] ?? '#3858e9' ),
+ '--pfg-filter-text' => $this->settings['filter_text_color'],
+ '--pfg-filter-active-bg' => isset( $this->settings['filter_active_color'] ) ? $this->settings['filter_active_color'] : ( $this->settings['primary_color'] ?? '#3858e9' ),
+ '--pfg-caption-bg' => isset( $this->settings['caption_bg_color'] ) ? $this->settings['caption_bg_color'] : '#ffffff',
+ '--pfg-caption-text'=> isset( $this->settings['caption_text_color'] ) ? $this->settings['caption_text_color'] : '#1e293b',
+ );
+
+ $css = '#' . $unique_id . ' {';
+ foreach ( $styles as $var => $value ) {
+ $css .= $var . ':' . $value . ';';
+ }
+ $css .= '}';
+
+ // Add custom CSS if any
+ if ( ! empty( $this->settings['custom_css'] ) ) {
+ $custom_css = str_replace( '.pfg-gallery', '#' . $unique_id, $this->settings['custom_css'] );
+ $css .= PFG_Security::sanitize( $custom_css, 'css' );
+ }
+
+ echo '';
+ }
+
+ /**
+ * Render filter buttons.
+ *
+ * @param string|null $active_filter Pre-selected filter slug.
+ */
+ protected function render_filters( $active_filter = null ) {
+ $position_class = 'pfg-filters--' . esc_attr( $this->settings['filters_position'] );
+ $style_class = 'pfg-filters--' . esc_attr( $this->settings['filters_style'] );
+ $multi_class = ! empty( $this->settings['multi_level_filters'] ) ? ' pfg-filters--multi' : '';
+ $hierarchical = $this->has_hierarchical_filters();
+
+ if ( $hierarchical ) {
+ $multi_class .= ' pfg-filters--hierarchical';
+ }
+
+ // Add count style class if showing counts on hover
+ $count_class = '';
+ if ( ! empty( $this->settings['show_filter_count'] ) && ( $this->settings['filter_count_style'] ?? 'always' ) === 'hover' ) {
+ $count_class = ' pfg-filters--count-hover';
+ }
+
+ echo '';
+
+ // "All" button
+ if ( $this->settings['show_all_button'] ) {
+ $all_active = empty( $active_filter ) ? ' pfg-filter--active' : '';
+ echo '';
+ echo esc_html( $this->settings['all_button_text'] );
+
+ if ( $this->settings['show_filter_count'] ) {
+ echo ' (' . count( $this->images ) . ') ';
+ }
+
+ echo ' ';
+ }
+
+ // Filter buttons - hierarchical or flat
+ $filters = $this->settings['sort_filters'] ? $this->sort_filters( $this->filters ) : $this->filters;
+
+ if ( $hierarchical ) {
+ $this->render_hierarchical_filters( $filters, $active_filter );
+ } else {
+ $this->render_flat_filters( $filters, $active_filter );
+ }
+
+ // AND/OR toggle for multi-select mode (only if setting enabled, defaults to true)
+ $show_toggle = isset( $this->settings['show_logic_toggle'] ) ? $this->settings['show_logic_toggle'] : true;
+ if ( ! empty( $this->settings['multi_level_filters'] ) && $show_toggle ) {
+ $this->render_logic_toggle();
+ }
+
+ echo '
';
+ }
+
+ /**
+ * Check if filters have hierarchical structure.
+ *
+ * @return bool
+ */
+ protected function has_hierarchical_filters() {
+ foreach ( $this->filters as $filter ) {
+ if ( ! empty( $filter['parent'] ) ) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ /**
+ * Render flat filter buttons.
+ *
+ * @param array $filters Filters array.
+ * @param string|null $active_filter Active filter slug.
+ */
+ protected function render_flat_filters( $filters, $active_filter ) {
+ $show_colors = ! empty( $this->settings['show_filter_colors'] );
+
+ foreach ( $filters as $filter ) {
+ $is_active = ( $active_filter === $filter['slug'] ) ? ' pfg-filter--active' : '';
+ $count = $this->count_images_in_filter( $filter['id'] );
+ $color = ! empty( $filter['color'] ) ? $filter['color'] : '';
+
+ echo '';
+
+ // Color dot indicator (only if enabled in settings)
+ if ( $show_colors && $color ) {
+ echo '(' . esc_html( $count ) . ') ';
+ }
+
+ echo ' ';
+ }
+ }
+
+ /**
+ * Render hierarchical filter buttons with multi-level parent/child grouping.
+ *
+ * @param array $filters Filters array.
+ * @param string|null $active_filter Active filter slug.
+ */
+ protected function render_hierarchical_filters( $filters, $active_filter ) {
+ // Build a lookup table by filter ID
+ $filter_lookup = array();
+ foreach ( $filters as $filter ) {
+ $filter_lookup[ $filter['id'] ] = $filter;
+ }
+
+ // Find root filters (no parent, or parent not in our filter set)
+ $roots = array();
+ $children_map = array();
+
+ foreach ( $filters as $filter ) {
+ $parent_id = ! empty( $filter['parent'] ) ? $filter['parent'] : 0;
+
+ // If no parent OR parent is not in our used filter set, it's a root
+ if ( empty( $parent_id ) || ! isset( $filter_lookup[ $parent_id ] ) ) {
+ $roots[] = $filter;
+ } else {
+ // It's a child of an existing filter
+ if ( ! isset( $children_map[ $parent_id ] ) ) {
+ $children_map[ $parent_id ] = array();
+ }
+ $children_map[ $parent_id ][] = $filter;
+ }
+ }
+
+ // Render each root filter with its children
+ foreach ( $roots as $root ) {
+ $this->render_filter_with_children( $root, $children_map, $active_filter, 0 );
+ }
+ }
+
+ /**
+ * Recursively render a filter and its children.
+ *
+ * @param array $filter The filter to render.
+ * @param array $children_map Map of parent_id => children.
+ * @param string|null $active_filter Active filter slug.
+ * @param int $level Current nesting level.
+ */
+ protected function render_filter_with_children( $filter, $children_map, $active_filter, $level ) {
+ $has_children = ! empty( $children_map[ $filter['id'] ] );
+ $is_active = ( $active_filter === $filter['slug'] ) ? ' pfg-filter--active' : '';
+ $count = $this->count_images_in_filter( $filter['id'] );
+ $color = ! empty( $filter['color'] ) ? $filter['color'] : '';
+ $show_colors = ! empty( $this->settings['show_filter_colors'] );
+
+ // Determine class based on level
+ $level_class = '';
+ if ( $level === 0 && $has_children ) {
+ $level_class = ' pfg-filter--parent';
+ } elseif ( $level > 0 ) {
+ $level_class = ' pfg-filter--child';
+ }
+
+ // Start group wrapper if this filter has children
+ if ( $has_children ) {
+ echo '';
+ }
+
+ // Render the filter button
+ echo '
';
+
+ // Color dot indicator (only if enabled in settings)
+ if ( $show_colors && $color ) {
+ echo '(' . esc_html( $count ) . ') ';
+ }
+ echo ' ';
+
+ // Render children if any
+ if ( $has_children ) {
+ echo '
';
+ foreach ( $children_map[ $filter['id'] ] as $child ) {
+ $this->render_filter_with_children( $child, $children_map, $active_filter, $level + 1 );
+ }
+ echo '
';
+ echo '
';
+ echo '' . esc_html__( 'OR', 'portfolio-filter-gallery' ) . ' ';
+ echo '' . esc_html__( 'AND', 'portfolio-filter-gallery' ) . ' ';
+ echo '
';
+ }
+
+ /**
+ * Build filter hierarchy map for JavaScript (parent slug => all descendant slugs).
+ *
+ * @return array
+ */
+ protected function build_filter_hierarchy() {
+ // Build lookup by ID
+ $by_id = array();
+ foreach ( $this->filters as $filter ) {
+ $by_id[ $filter['id'] ] = $filter;
+ }
+
+ // Build children map (parent_id => child filters)
+ $children_by_parent = array();
+ foreach ( $this->filters as $filter ) {
+ if ( ! empty( $filter['parent'] ) && isset( $by_id[ $filter['parent'] ] ) ) {
+ if ( ! isset( $children_by_parent[ $filter['parent'] ] ) ) {
+ $children_by_parent[ $filter['parent'] ] = array();
+ }
+ $children_by_parent[ $filter['parent'] ][] = $filter;
+ }
+ }
+
+ // Recursively get all descendant slugs for a filter
+ $get_descendants = function( $filter_id ) use ( &$get_descendants, $children_by_parent ) {
+ $descendants = array();
+ if ( isset( $children_by_parent[ $filter_id ] ) ) {
+ foreach ( $children_by_parent[ $filter_id ] as $child ) {
+ $descendants[] = $child['slug'];
+ $descendants = array_merge( $descendants, $get_descendants( $child['id'] ) );
+ }
+ }
+ return $descendants;
+ };
+
+ // Build hierarchy map: parent_slug => [all descendant slugs]
+ $hierarchy = array();
+ foreach ( $this->filters as $filter ) {
+ $descendants = $get_descendants( $filter['id'] );
+ if ( ! empty( $descendants ) ) {
+ $hierarchy[ $filter['slug'] ] = $descendants;
+ }
+ }
+
+ return $hierarchy;
+ }
+
+ /**
+ * Render search box.
+ */
+ protected function render_search() {
+ // Use translatable default if placeholder is the default value
+ $placeholder = $this->settings['search_placeholder'];
+ if ( empty( $placeholder ) || $placeholder === 'Search...' ) {
+ $placeholder = __( 'Search...', 'portfolio-filter-gallery' );
+ }
+
+ echo '';
+ echo '
';
+ }
+
+ /**
+ * Render gallery grid.
+ *
+ * @param string|null $active_filter Pre-selected filter slug.
+ */
+ protected function render_grid( $active_filter = null ) {
+ $layout_type = $this->settings['layout_type'];
+ $layout_class = 'pfg-grid--' . esc_attr( $layout_type );
+ $direction = $this->settings['direction'] === 'rtl' ? ' dir="rtl"' : '';
+ $grayscale = $this->settings['grayscale'] ? ' pfg-grid--grayscale' : '';
+
+ // Check if using card layout (title below image)
+ $title_position = isset( $this->settings['title_position'] ) ? $this->settings['title_position'] : 'overlay';
+
+ // Add fixed-height class for grid layouts (not masonry, justified, packed, or card layout)
+ $fixed_height = '';
+ if ( $layout_type === 'grid' && $title_position !== 'below' ) {
+ $fixed_height = ' pfg-grid--fixed-height';
+ }
+
+ // Build inline styles for layout-specific CSS variables
+ $inline_styles = array();
+
+ if ( $layout_type === 'justified' ) {
+ $row_height = absint( $this->settings['justified_row_height'] ?? 200 );
+ $inline_styles[] = '--pfg-row-height: ' . $row_height . 'px';
+
+ // Add last row handling class
+ $last_row = $this->settings['justified_last_row'] ?? 'left';
+ if ( $last_row === 'left' ) {
+ $layout_class .= ' pfg-grid--justified-last-left';
+ }
+ }
+
+ if ( $layout_type === 'packed' ) {
+ $min_size = absint( $this->settings['packed_min_size'] ?? 150 );
+ $inline_styles[] = '--pfg-packed-min: ' . $min_size . 'px';
+
+ // Add packed-cards class for title below mode
+ if ( $title_position === 'below' ) {
+ $layout_class .= ' pfg-grid--packed-cards';
+ }
+ }
+
+ // Add overlay color and opacity CSS variables
+ // Always output overlay color for hover overlays
+ $overlay_color = $this->settings['overlay_color'] ?? '#000000';
+ $overlay_opacity = isset( $this->settings['overlay_opacity'] ) ? ( floatval( $this->settings['overlay_opacity'] ) / 100 ) : 0.7;
+ $inline_styles[] = '--pfg-overlay-color: ' . $this->hex_to_rgba( $overlay_color, $overlay_opacity );
+
+ // Primary color for categories in overlay
+ $primary_color = $this->settings['primary_color'] ?? '#3858e9';
+ $inline_styles[] = '--pfg-primary-color: ' . $primary_color;
+
+ // Caption/title colors for card mode (below)
+ if ( ! empty( $this->settings['caption_text_color'] ) ) {
+ $inline_styles[] = '--pfg-caption-text: ' . $this->settings['caption_text_color'];
+ }
+
+ // Caption background for card mode
+ if ( ! empty( $this->settings['caption_bg_color'] ) ) {
+ $inline_styles[] = '--pfg-caption-bg: ' . $this->settings['caption_bg_color'];
+ }
+
+ $style_attr = ! empty( $inline_styles ) ? ' style="' . esc_attr( implode( '; ', $inline_styles ) ) . '"' : '';
+
+ // Output preloader if enabled
+ $show_preloader = $this->settings['show_preloader'] ?? true;
+ if ( $show_preloader ) {
+ echo '';
+ echo '
';
+ echo '
' . esc_html__( 'Loading...', 'portfolio-filter-gallery' ) . ' ';
+ echo '
';
+
+ // Determine how many items to render initially
+ $pagination_enabled = ! empty( $this->settings['pagination_enabled'] );
+ $pagination_type = $this->settings['pagination_type'] ?? 'load-more';
+ $items_per_page = absint( $this->settings['items_per_page'] ?? 12 );
+ $total_images = count( $this->images );
+
+ // For numbered pagination, render all items (client-side pagination)
+ // For load-more/infinite, only render first page (AJAX loads more)
+ if ( $pagination_enabled && $pagination_type !== 'numbered' ) {
+ $images_to_render = array_slice( $this->images, 0, $items_per_page );
+ } else {
+ $images_to_render = $this->images;
+ }
+
+ $index = 0;
+ foreach ( $images_to_render as $key => $image ) {
+ // For numbered pagination, hide items after first page
+ $is_hidden = $pagination_enabled && $pagination_type === 'numbered' && $key >= $items_per_page;
+ $this->render_item( $image, $index, $active_filter, $is_hidden );
+ $index++;
+ }
+
+ echo '
';
+ }
+
+ /**
+ * Render a single gallery item.
+ *
+ * @param array $image Image data.
+ * @param int $index Image index.
+ * @param string|null $active_filter Active filter slug.
+ * @param bool $is_paginated_hidden Whether item is hidden for pagination.
+ */
+ protected function render_item( $image, $index, $active_filter = null, $is_paginated_hidden = false ) {
+ // Get filter classes
+ $filter_classes = $this->get_image_filter_classes( $image );
+
+ // Check if should be hidden by active filter
+ $hidden_class = '';
+ if ( $active_filter !== null ) {
+ $should_show = false;
+
+ // For WooCommerce products, filters are category slugs - compare directly
+ $is_product = isset( $image['type'] ) && $image['type'] === 'product';
+
+ if ( $is_product && ! empty( $image['filters'] ) ) {
+ // Products have slugs directly in filters array
+ $should_show = in_array( $active_filter, $image['filters'], true );
+ } else {
+ // Media library images have filter IDs that need lookup
+ foreach ( $image['filters'] as $filter_id ) {
+ $filter = $this->get_filter_by_id( $filter_id );
+ if ( $filter && $filter['slug'] === $active_filter ) {
+ $should_show = true;
+ break;
+ }
+ }
+ }
+
+ if ( ! $should_show ) {
+ $hidden_class = ' pfg-item--hidden';
+ }
+ }
+
+ // Add pagination hidden class
+ if ( $is_paginated_hidden ) {
+ $hidden_class .= ' pfg-item--paginated-hidden';
+ }
+
+ // Hover effect class
+ $hover_class = 'pfg-item-hover--' . esc_attr( $this->settings['hover_effect'] );
+
+ // Layout-specific classes and styles
+ $layout_type = $this->settings['layout_type'];
+ $title_position = isset( $this->settings['title_position'] ) ? $this->settings['title_position'] : 'overlay';
+ $size_class = '';
+ $item_style = '';
+
+ // Get dimensions for aspect ratio - handle products differently
+ if ( isset( $image['type'] ) && $image['type'] === 'product' ) {
+ // For products, get dimensions from the product featured image
+ $product = wc_get_product( $image['id'] );
+ if ( $product ) {
+ $image_id = $product->get_image_id();
+ if ( $image_id ) {
+ $image_meta = wp_get_attachment_metadata( $image_id );
+ $width = isset( $image_meta['width'] ) ? (int) $image_meta['width'] : 1;
+ $height = isset( $image_meta['height'] ) ? (int) $image_meta['height'] : 1;
+ } else {
+ $width = 1;
+ $height = 1;
+ }
+ } else {
+ $width = 1;
+ $height = 1;
+ }
+ } else {
+ // Regular images - use attachment metadata
+ $attachment_id = $image['id'];
+ $image_meta = wp_get_attachment_metadata( $attachment_id );
+ $width = isset( $image_meta['width'] ) ? (int) $image_meta['width'] : 1;
+ $height = isset( $image_meta['height'] ) ? (int) $image_meta['height'] : 1;
+ }
+ $aspect_ratio = $width / max( $height, 1 );
+
+ // Justified layout: set aspect ratio as flex-grow
+ if ( $layout_type === 'justified' ) {
+ $item_style = ' style="--item-aspect: ' . round( $aspect_ratio, 2 ) . '"';
+ }
+
+ // Packed layout: add size class based on aspect ratio
+ if ( $layout_type === 'packed' ) {
+ if ( $aspect_ratio > 1.5 ) {
+ $size_class = ' pfg-item--wide';
+ } elseif ( $aspect_ratio < 0.7 ) {
+ $size_class = ' pfg-item--tall';
+ } elseif ( $width > 1200 && $height > 1200 ) {
+ $size_class = ' pfg-item--large';
+ }
+ }
+
+ echo '';
+
+ // Type indicator icon (video, product, or link)
+ if ( $image['type'] === 'video' && ! empty( $image['link'] ) ) {
+ // Detect if it's a Vimeo video for color styling
+ $is_vimeo = strpos( $image['link'], 'vimeo.com' ) !== false;
+ $video_class = $is_vimeo ? 'pfg-item-type-icon--video pfg-item-type-icon--vimeo' : 'pfg-item-type-icon--video';
+
+ // Video indicator
+ echo '
';
+ echo ' ';
+ } elseif ( ! empty( $image['product_id'] ) && class_exists( 'WooCommerce' ) ) {
+ // Product link indicator
+ echo '
';
+ echo ' ';
+ } elseif ( ! empty( $image['link'] ) && $image['type'] !== 'video' ) {
+ // External link indicator
+ echo '
';
+ echo ' ';
+ }
+
+ // Render image, video, or product
+ if ( isset( $image['type'] ) && $image['type'] === 'product' ) {
+ $this->render_product_item( $image, $index );
+ } elseif ( $image['type'] === 'video' && ! empty( $image['link'] ) ) {
+ $this->render_video_item( $image, $index );
+ } else {
+ $this->render_image_item( $image, $index );
+ }
+
+ echo '
';
+
+ // Sale badge (floating)
+ if ( $show_sale_badge && $is_on_sale ) {
+ echo '' . esc_html__( 'Sale!', 'portfolio-filter-gallery' ) . ' ';
+ }
+
+ // Product image with srcset (using image_id if available for proper WP handling)
+ if ( ! empty( $image['image_id'] ) ) {
+ $size = $this->get_image_size();
+ $img_src = wp_get_attachment_image_url( $image['image_id'], $size );
+ $img_srcset = wp_get_attachment_image_srcset( $image['image_id'], $size );
+ $img_sizes = $this->calculate_sizes();
+
+ echo '';
+ } else {
+ // Fallback to thumbnail URL
+ echo '';
+ }
+
+ // Overlay for overlay mode
+ if ( $title_position === 'overlay' && ( $show_title || $show_price ) ) {
+ echo '';
+
+ if ( $show_title && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_price && isset( $product_data['price'] ) ) {
+ echo '
' . wp_kses_post( $product_data['price'] ) . ' ';
+ }
+
+ if ( $show_categories && ! empty( $image['filters'] ) ) {
+ echo '
' . esc_html( implode( ', ', array_slice( $image['filters'], 0, 2 ) ) ) . '
';
+ }
+
+ echo '
';
+
+ // Caption below for below mode (same structure as images)
+ if ( $title_position === 'below' && ( $show_title || $show_price ) ) {
+ echo '';
+
+ if ( $show_title && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_price && isset( $product_data['price'] ) ) {
+ echo '
' . wp_kses_post( $product_data['price'] ) . ' ';
+ }
+
+ if ( $show_categories && ! empty( $image['filters'] ) ) {
+ echo '
' . esc_html( implode( ', ', array_slice( $image['filters'], 0, 2 ) ) ) . '
';
+ }
+
+ echo '
';
+
+ // Image
+ echo '
';
+
+ // Watermark overlay
+ $this->render_watermark();
+
+ // Action buttons overlay
+ echo '';
+
+ // Overlay with title/description (only if title_position is 'overlay')
+ if ( $title_position === 'overlay' && ( $this->settings['show_title'] || $this->settings['show_numbering'] || $show_categories ) ) {
+ echo '';
+
+ if ( $this->settings['show_numbering'] ) {
+ echo '
' . esc_html( $index + 1 ) . ' ';
+ }
+
+ if ( $this->settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_categories ) {
+ $filter_names = $this->get_image_filter_names( $image );
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+
+ echo '
';
+ } else {
+ // No link - just a wrapper div for styling consistency
+ echo '';
+ }
+
+ echo '
';
+
+ // Watermark overlay
+ $this->render_watermark();
+
+ // Overlay with title/description (only if title_position is 'overlay')
+ if ( $title_position === 'overlay' && ( $this->settings['show_title'] || $this->settings['show_numbering'] || $show_categories ) ) {
+ echo '';
+
+ if ( $this->settings['show_numbering'] ) {
+ echo '
' . esc_html( $index + 1 ) . ' ';
+ }
+
+ if ( $this->settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_categories ) {
+ $filter_names = $this->get_image_filter_names( $image );
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+
+ echo '
';
+
+ if ( $this->settings['show_numbering'] ) {
+ echo '
' . esc_html( $index + 1 ) . ' ';
+ }
+
+ if ( $this->settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_categories ) {
+ $filter_names = $this->get_image_filter_names( $image );
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+
+ echo '
';
+
+ // Thumbnail image
+ $loading = $this->settings['lazy_loading'] && $index > 3 ? 'lazy' : 'eager';
+ echo '';
+
+ if ( $this->settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_categories ) {
+ $filter_names = $this->get_image_filter_names( $image );
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+
+ echo '
';
+
+ // Card caption below image (when title_position is 'below')
+ if ( $title_position === 'below' && ( $this->settings['show_title'] || $show_categories ) ) {
+ echo '';
+
+ if ( $this->settings['show_numbering'] ) {
+ echo '
' . esc_html( $index + 1 ) . ' ';
+ }
+
+ if ( $this->settings['show_title'] && ! empty( $image['title'] ) ) {
+ echo '
' . esc_html( $image['title'] ) . ' ';
+ }
+
+ if ( $show_categories ) {
+ $filter_names = $this->get_image_filter_names( $image );
+ if ( ! empty( $filter_names ) ) {
+ echo '
' . esc_html( implode( ', ', $filter_names ) ) . '
';
+ }
+ }
+
+ echo '
';
+
+ if ( $type === 'text' ) {
+ $text = $this->settings['watermark_text'] ?? '';
+ if ( ! empty( $text ) ) {
+ echo '
' . esc_html( $text ) . ' ';
+ }
+ } else {
+ $image_url = $this->settings['watermark_image'] ?? '';
+ if ( ! empty( $image_url ) ) {
+ echo '
';
+ }
+ }
+
+ echo '
" + title + " ";
+ }
+ if (showDesc && description) {
+ caption += (caption ? "VIDEO `;
+ }
+ // Vimeo
+ match = url.match(/vimeo\.com\/(\d+)/);
+ if (match) {
+ return ``;
+ }
+ // Direct video file
+ if (url.match(/\.(mp4|webm|ogg)$/i)) {
+ return `${data.title} `;
+ }
+ if (data.showDesc && data.description) {
+ html += `${data.description} `;
+ }
+ el.innerHTML = html;
+ el.style.display = html ? "" : "none";
+ });
+ }
+ });
+ });
+
+ // Handle click on visible items only
+ grids.forEach(grid => {
+ grid.addEventListener("click", function(e) {
+ const link = e.target.closest("a[data-lightbox]");
+ if (!link) return;
+
+ // Check if this item is visible
+ const pfgItem = link.closest(".pfg-item");
+ if (pfgItem && (pfgItem.classList.contains("pfg-item--hidden") || pfgItem.classList.contains("pfg-item--paginated-hidden"))) return;
+
+ e.preventDefault();
+
+ // Get gallery wrapper settings
+ const wrapper = link.closest(".pfg-gallery-wrapper");
+ const showTitle = wrapper ? wrapper.dataset.lightboxTitle !== "false" : true;
+ const showDesc = wrapper ? wrapper.dataset.lightboxDescription === "true" : false;
+
+ // Get visible items in this grid
+ const visibleItems = getVisibleItems(grid);
+ const clickedIndex = visibleItems.indexOf(link);
+
+ if (clickedIndex === -1) return;
+
+ // Build data source from visible items
+ const dataSource = visibleItems.map(item => {
+ const isVideo = item.dataset.type === "video";
+ const img = item.querySelector("img");
+
+ if (isVideo) {
+ const videoEmbed = getVideoEmbed(item.href);
+ return {
+ html: `${videoEmbed || "
Video not supported
"}
' . esc_html( $message ) . '
';
+ }
+ return '';
+ }
+
+ /**
+ * Render empty gallery message.
+ *
+ * @param array $settings Gallery settings.
+ * @return string Empty message HTML.
+ */
+ protected function render_empty( $settings ) {
+ if ( current_user_can( 'edit_posts' ) ) {
+ return '' . esc_html__( 'This gallery has no images. Add some images in the gallery editor.', 'portfolio-filter-gallery' ) . '
';
+ }
+ return '';
+ }
+
+ /**
+ * Apply a starter template to settings.
+ * Template provides defaults, but user-saved settings take priority.
+ *
+ * @param string $template_name Template name.
+ * @param array $settings Current settings (user-saved).
+ * @return array Modified settings.
+ */
+ protected function apply_template( $template_name, $settings ) {
+ $templates = PFG_Templates::get_templates();
+
+ if ( isset( $templates[ $template_name ] ) ) {
+ $template_settings = $templates[ $template_name ]['settings'];
+ // User settings override template defaults
+ return wp_parse_args( $settings, $template_settings );
+ }
+
+ return $settings;
+ }
+}
diff --git a/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-gallery.css b/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-gallery.css
new file mode 100644
index 0000000..9de4abc
--- /dev/null
+++ b/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-gallery.css
@@ -0,0 +1,2234 @@
+/**
+ * Portfolio Filter Gallery - Core Styles
+ * Lightweight replacement for Bootstrap grid
+ *
+ * @package Portfolio_Filter_Gallery
+ * @version 2.0.0
+ */
+
+/* ==========================================================================
+ CSS Variables & Defaults
+ ========================================================================== */
+
+.pfg-gallery-wrapper {
+ --pfg-cols-xl: 4;
+ --pfg-cols-lg: 3;
+ --pfg-cols-md: 2;
+ --pfg-cols-sm: 1;
+ --pfg-gap: 20px;
+ --pfg-border-width: 0px;
+ --pfg-border-color: #ffffff;
+ --pfg-border-radius: 0px;
+ --pfg-filter-bg: #3858e9;
+ --pfg-filter-text: #ffffff;
+ --pfg-overlay-bg: rgba(0, 0, 0, 0.6);
+ --pfg-transition: 0.3s ease;
+
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ box-sizing: border-box;
+}
+
+.pfg-gallery-wrapper *,
+.pfg-gallery-wrapper *::before,
+.pfg-gallery-wrapper *::after {
+ box-sizing: inherit;
+}
+
+/* ==========================================================================
+ Gallery Preloader
+ ========================================================================== */
+
+.pfg-gallery-wrapper.pfg-loading {
+ position: relative;
+ min-height: 300px;
+}
+
+.pfg-gallery-wrapper.pfg-loading .pfg-grid {
+ opacity: 0;
+ visibility: hidden;
+}
+
+.pfg-preloader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+}
+
+.pfg-preloader-spinner {
+ width: 48px;
+ height: 48px;
+ border: 4px solid #e2e8f0;
+ border-top-color: var(--pfg-filter-bg, #3858e9);
+ border-radius: 50%;
+ animation: pfg-spin 0.8s linear infinite;
+}
+
+.pfg-preloader-text {
+ font-size: 14px;
+ color: #64748b;
+}
+
+@keyframes pfg-spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* CSS-only fallback: hide preloader after 3s animation delay */
+@keyframes pfg-fade-out {
+ 0%, 90% { opacity: 1; visibility: visible; }
+ 100% { opacity: 0; visibility: hidden; }
+}
+
+.pfg-preloader {
+ animation: pfg-fade-out 3.5s forwards;
+}
+
+.pfg-gallery-wrapper.pfg-loaded .pfg-preloader {
+ display: none;
+ animation: none;
+}
+
+.pfg-gallery-wrapper.pfg-loaded .pfg-grid {
+ opacity: 1;
+ visibility: visible;
+ transition: opacity 0.3s ease;
+}
+
+/* ==========================================================================
+ Filter Buttons
+ ========================================================================== */
+
+.pfg-filters {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-bottom: 30px;
+}
+
+.pfg-filters--top {
+ justify-content: flex-start;
+}
+
+.pfg-filters--center {
+ justify-content: center;
+}
+
+.pfg-filters--right {
+ justify-content: flex-end;
+}
+
+/* ==========================================================================
+ Sidebar Layout
+ ========================================================================== */
+
+.pfg-gallery-wrapper--sidebar {
+ display: flex;
+ gap: 30px;
+ overflow: visible;
+}
+
+.pfg-gallery-wrapper--sidebar-right {
+ flex-direction: row-reverse;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filters {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ flex-shrink: 0;
+ width: 240px;
+ margin-bottom: 0;
+ padding: 16px;
+ background: #f8fafc;
+ border-radius: 12px;
+ align-self: flex-start;
+ position: sticky;
+ top: 20px;
+ max-height: calc(100vh - 40px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ gap: 6px;
+}
+
+/* Custom scrollbar for sidebar */
+.pfg-gallery-wrapper--sidebar .pfg-filters::-webkit-scrollbar {
+ width: 4px;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filters::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filters::-webkit-scrollbar-thumb {
+ background: #cbd5e1;
+ border-radius: 4px;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-gallery-main {
+ flex: 1;
+ min-width: 0;
+}
+
+/* Sidebar filter buttons - vertical style */
+.pfg-gallery-wrapper--sidebar .pfg-filter {
+ width: 100%;
+ justify-content: flex-start;
+ padding: 10px 14px;
+ border-radius: 8px;
+ text-align: left;
+ font-size: 14px;
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #fff);
+ position: relative;
+ overflow: visible;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filter:hover {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg, #3858e9));
+ opacity: 0.85;
+ color: var(--pfg-filter-text, #fff);
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filter--active {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg, #3858e9));
+ color: var(--pfg-filter-text, #fff);
+}
+
+/* Color dot in sidebar - inline with text */
+.pfg-gallery-wrapper--sidebar .pfg-filter-color {
+ flex-shrink: 0;
+}
+
+/* On hover, add a subtle ring/glow around the color dot using its own color */
+.pfg-gallery-wrapper--sidebar .pfg-filter:hover .pfg-filter-color {
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
+ transform: scale(1.2);
+ transition: all 0.2s ease;
+}
+
+/* CRITICAL: Override hierarchical filter styles for sidebar */
+.pfg-gallery-wrapper--sidebar .pfg-filter-group {
+ display: flex !important;
+ flex-direction: column !important;
+ width: 100% !important;
+ margin-bottom: 4px;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filter--parent {
+ width: 100% !important;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filter-children {
+ margin-left: 0;
+ margin-top: 4px;
+ padding-left: 20px;
+ border-left: 2px solid #e2e8f0;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ width: 100%;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filter-children .pfg-filter {
+ padding: 8px 12px;
+ font-size: 13px;
+ width: 100%;
+}
+
+/* Sidebar: Override hierarchical orphan filter white background */
+.pfg-gallery-wrapper--sidebar .pfg-filters--hierarchical > .pfg-filter:not(.pfg-filter--parent):not(.pfg-filter--child) {
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #fff);
+ border: none;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filters--hierarchical > .pfg-filter:not(.pfg-filter--parent):not(.pfg-filter--child):hover {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg, #3858e9));
+ opacity: 0.85;
+}
+
+/* Sidebar filter count badge - inline style (not tooltip) */
+.pfg-gallery-wrapper--sidebar .pfg-filter-count {
+ position: static;
+ margin-left: auto;
+ background: #e2e8f0;
+ padding: 2px 8px;
+ border-radius: 10px;
+ font-size: 11px;
+ color: #64748b;
+ opacity: 1;
+ transform: none;
+ box-shadow: none;
+ pointer-events: auto;
+ max-width: none;
+ overflow: visible;
+ display: inline-block;
+}
+
+.pfg-gallery-wrapper--sidebar .pfg-filter--active .pfg-filter-count {
+ background: rgba(255, 255, 255, 0.2);
+ color: inherit;
+}
+
+/* Maintain active count styling on hover */
+.pfg-gallery-wrapper--sidebar .pfg-filter--active:hover .pfg-filter-count {
+ background: rgba(255, 255, 255, 0.3);
+ color: inherit;
+}
+
+/* Reset hover tooltip style for sidebar */
+.pfg-gallery-wrapper--sidebar.pfg-filters--count-hover .pfg-filter-count {
+ position: static;
+ opacity: 1;
+ transform: none;
+ top: auto;
+ right: auto;
+}
+
+/* Responsive sidebar - collapse on mobile */
+@media (max-width: 768px) {
+ .pfg-gallery-wrapper--sidebar {
+ flex-direction: column;
+ }
+
+ .pfg-gallery-wrapper--sidebar .pfg-filters {
+ width: 100%;
+ flex-direction: row;
+ flex-wrap: wrap;
+ padding: 15px;
+ position: static;
+ max-height: none;
+ }
+
+ .pfg-gallery-wrapper--sidebar .pfg-filter {
+ width: auto;
+ padding: 8px 16px;
+ }
+
+ .pfg-gallery-wrapper--sidebar .pfg-filter-children {
+ margin-left: 0;
+ padding-left: 0;
+ border-left: none;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+}
+
+.pfg-filter {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 10px 20px;
+ border: none;
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #ffffff);
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ border-radius: 6px;
+ transition: all var(--pfg-transition);
+}
+
+.pfg-filter-color {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.pfg-filter:hover,
+.pfg-filter:focus {
+ background: var(--pfg-filter-bg, #3858e9);
+ opacity: 0.85;
+ color: var(--pfg-filter-text, #ffffff);
+ outline: none;
+}
+
+.pfg-filter--active {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text);
+}
+
+.pfg-filter--active:hover,
+.pfg-filter--active:focus {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text);
+ opacity: 0.9;
+}
+
+.pfg-filter-count {
+ opacity: 0.7;
+ font-size: 0.85em;
+ margin-left: 2px;
+}
+
+/* Hover-only count display - Tooltip style badge */
+.pfg-filters--count-hover .pfg-filter {
+ position: relative;
+}
+
+.pfg-filters--count-hover .pfg-filter-count {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ background: var(--pfg-filter-active-bg, #333);
+ color: #fff;
+ font-size: 0.7em;
+ font-weight: 600;
+ padding: 2px 6px;
+ border-radius: 10px;
+ min-width: 18px;
+ text-align: center;
+ opacity: 0;
+ transform: scale(0.5) translateY(5px);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+ pointer-events: none;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ margin-left: 0;
+}
+
+.pfg-filters--count-hover .pfg-filter:hover .pfg-filter-count {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+}
+
+/* ==========================================================================
+ Filter Style Variations
+ ========================================================================== */
+
+/* Buttons (Default) - Already styled above */
+.pfg-filters--buttons .pfg-filter {
+ border-radius: 6px;
+}
+
+/* Pills - Fully rounded */
+.pfg-filters--pills .pfg-filter {
+ border-radius: 50px;
+ padding: 10px 24px;
+}
+
+/* Minimal - Text only, no background, no border */
+.pfg-filters--minimal .pfg-filter {
+ background: transparent !important;
+ border: none !important;
+ padding: 8px 16px;
+ color: #64748b;
+ font-weight: 500;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.pfg-filters--minimal .pfg-filter:hover {
+ background: transparent !important;
+ color: #1e293b;
+}
+
+.pfg-filters--minimal .pfg-filter--active {
+ background: transparent !important;
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg)) !important;
+ font-weight: 600;
+}
+
+.pfg-filters--minimal .pfg-filter--active:hover {
+ background: transparent !important;
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg)) !important;
+ opacity: 0.8;
+}
+
+.pfg-filters--minimal .pfg-filter--selected {
+ background: transparent !important;
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg)) !important;
+ font-weight: 600;
+}
+
+/* Outline - Bordered */
+.pfg-filters--outline .pfg-filter {
+ background: transparent;
+ border: 2px solid #e2e8f0;
+ color: #64748b;
+ padding: 8px 18px;
+ border-radius: 6px;
+}
+
+.pfg-filters--outline .pfg-filter:hover {
+ background: transparent;
+ border-color: #94a3b8;
+ color: #475569;
+}
+
+.pfg-filters--outline .pfg-filter--active {
+ background: transparent;
+ border-color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+}
+
+.pfg-filters--outline .pfg-filter--active:hover {
+ opacity: 0.8;
+}
+
+.pfg-filters--outline .pfg-filter--selected {
+ background: transparent !important;
+ border-color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+}
+
+/* Underline - Only bottom border on active, no other borders */
+.pfg-filters--underline .pfg-filter {
+ background: transparent !important;
+ border: none !important;
+ border-bottom: 2px solid transparent !important;
+ padding: 10px 16px;
+ color: #64748b;
+ font-weight: 500;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+.pfg-filters--underline .pfg-filter:hover {
+ background: transparent !important;
+ color: #1e293b;
+ border-bottom-color: #e2e8f0 !important;
+}
+
+.pfg-filters--underline .pfg-filter--active {
+ background: transparent !important;
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg)) !important;
+ border-bottom-color: var(
+ --pfg-filter-active-bg,
+ var(--pfg-filter-bg)
+ ) !important;
+ font-weight: 600;
+}
+
+.pfg-filters--underline .pfg-filter--active:hover {
+ background: transparent !important;
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg)) !important;
+ opacity: 0.9;
+}
+
+.pfg-filters--underline .pfg-filter--selected {
+ background: transparent !important;
+ color: var(--pfg-filter-active-bg, var(--pfg-filter-bg)) !important;
+ border-bottom-color: var(
+ --pfg-filter-active-bg,
+ var(--pfg-filter-bg)
+ ) !important;
+ font-weight: 600;
+}
+
+/* Multi-select mode - selected filters */
+.pfg-filters--multi .pfg-filter--selected {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text);
+ position: relative;
+ padding-right: 32px; /* Make room for checkmark */
+}
+
+.pfg-filters--multi .pfg-filter--selected::after {
+ content: "✓";
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 0.85em;
+ font-weight: bold;
+}
+
+/* AND/OR Logic Toggle - More prominent styling */
+.pfg-logic-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 0;
+ margin-left: auto;
+ border: 2px solid var(--pfg-filter-bg);
+ border-radius: 8px;
+ overflow: hidden;
+ background: #fff;
+}
+
+.pfg-logic-btn {
+ padding: 10px 18px;
+ border: none;
+ background: transparent;
+ color: var(--pfg-filter-bg);
+ font-size: 13px;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.25s ease;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.pfg-logic-btn:hover {
+ background: rgba(56, 88, 233, 0.1);
+}
+
+.pfg-logic-btn--active {
+ background: var(--pfg-filter-bg);
+ color: var(--pfg-filter-text);
+}
+
+.pfg-logic-btn--active:hover {
+ background: var(--pfg-filter-bg);
+ opacity: 0.9;
+}
+
+/* Hierarchical Filters - Inline groups with children below parent */
+.pfg-filters--hierarchical {
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: flex-start;
+}
+
+.pfg-filter-group {
+ display: inline-flex;
+ gap: 8px;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.pfg-filter--parent {
+ font-weight: 600;
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #fff);
+ border-radius: 6px;
+ width: fit-content;
+}
+
+.pfg-filter--parent:hover {
+ background: var(--pfg-filter-bg, #3858e9);
+ opacity: 0.85;
+ color: var(--pfg-filter-text, #fff);
+}
+
+.pfg-filter--parent.pfg-filter--active,
+.pfg-filter--parent.pfg-filter--selected {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text);
+}
+
+.pfg-filter-children {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ padding-left: 10px;
+ margin-left: 4px;
+ border-left: 3px solid var(--pfg-filter-bg);
+ align-items: center;
+}
+
+/* Nested children (3rd level and beyond) */
+.pfg-filter-children .pfg-filter-group {
+ display: inline-flex;
+ gap: 6px;
+ align-items: center;
+ margin: 0;
+ padding: 0;
+}
+
+.pfg-filter-children .pfg-filter-children {
+ padding-left: 8px;
+ margin-left: 3px;
+ border-left-width: 2px;
+}
+
+.pfg-filter--child {
+ font-size: 13px;
+ padding: 6px 12px;
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #ffffff);
+ border: none;
+ border-radius: 6px;
+}
+
+.pfg-filter--child:hover {
+ background: var(--pfg-filter-bg, #3858e9);
+ opacity: 0.85;
+}
+
+.pfg-filter--child.pfg-filter--active,
+.pfg-filter--child.pfg-filter--selected {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text);
+ border-color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+}
+
+/* Orphan filters - use primary color like standard filters */
+.pfg-filters--hierarchical
+ > .pfg-filter:not(.pfg-filter--parent):not(.pfg-filter--child) {
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #ffffff);
+ border: none;
+ border-radius: 8px;
+ padding: 10px 16px;
+ align-self: center;
+ font-size: 14px;
+}
+
+.pfg-filters--hierarchical
+ > .pfg-filter:not(.pfg-filter--parent):not(.pfg-filter--child):hover {
+ background: var(--pfg-filter-bg, #3858e9);
+ opacity: 0.85;
+}
+
+/* Active state for orphan filters (All button, standalone filters) */
+.pfg-filters--hierarchical
+ > .pfg-filter:not(.pfg-filter--parent):not(
+ .pfg-filter--child
+ ).pfg-filter--active,
+.pfg-filters--hierarchical
+ > .pfg-filter:not(.pfg-filter--parent):not(
+ .pfg-filter--child
+ ).pfg-filter--selected {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text);
+ border-color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+}
+
+/* Mobile responsive styles for hierarchical filters */
+@media (max-width: 768px) {
+ /* Stack filter groups vertically on mobile */
+ .pfg-filters--hierarchical {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 8px;
+ }
+
+ .pfg-filter-group {
+ flex-direction: column;
+ align-items: stretch;
+ width: 100%;
+ }
+
+ /* Parent filters - make them stand out more on mobile */
+ .pfg-filters--hierarchical .pfg-filter--parent {
+ width: 100%;
+ padding: 12px 16px;
+ font-size: 15px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border-radius: 8px;
+ position: relative;
+ }
+
+ /* Add visual indicator arrow for parent filters */
+ .pfg-filters--hierarchical .pfg-filter--parent::before {
+ content: "▶";
+ font-size: 10px;
+ margin-right: 8px;
+ opacity: 0.7;
+ }
+
+ /* Children container - clear indentation on mobile */
+ .pfg-filters--hierarchical .pfg-filter-children {
+ margin-left: 0;
+ margin-top: 4px;
+ padding-left: 16px;
+ border-left: 3px solid rgba(56, 88, 233, 0.3);
+ background: rgba(56, 88, 233, 0.02);
+ padding-top: 8px;
+ padding-bottom: 8px;
+ border-radius: 0 8px 8px 0;
+ }
+
+ /* Child filters - lighter styling to show subordination */
+ .pfg-filters--hierarchical .pfg-filter--child {
+ width: 100%;
+ padding: 10px 14px;
+ font-size: 13px;
+ font-weight: 500;
+ background: #f8fafc;
+ color: #475569;
+ border: 1px solid #e2e8f0;
+ border-radius: 6px;
+ }
+
+ .pfg-filters--hierarchical .pfg-filter--child:hover {
+ background: #f1f5f9;
+ border-color: var(--pfg-filter-bg, #3858e9);
+ color: #334155;
+ opacity: 1;
+ }
+
+ .pfg-filters--hierarchical .pfg-filter--child.pfg-filter--active,
+ .pfg-filters--hierarchical .pfg-filter--child.pfg-filter--selected {
+ background: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ color: var(--pfg-filter-text, #fff);
+ border-color: var(--pfg-filter-active-bg, var(--pfg-filter-bg));
+ font-weight: 600;
+ }
+
+ /* Orphan/standalone filters on mobile */
+ .pfg-filters--hierarchical > .pfg-filter:not(.pfg-filter--parent):not(.pfg-filter--child) {
+ width: 100%;
+ padding: 12px 16px;
+ }
+}
+/* Dropdown style filters */
+.pfg-filters--dropdown {
+ position: relative;
+}
+
+.pfg-filters--dropdown select {
+ padding: 12px 40px 12px 16px;
+ border: 1px solid #e2e8f0;
+ border-radius: 6px;
+ font-size: 14px;
+ background: #fff
+ url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"%3E%3Cpath fill="%23475569" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"/%3E%3C/svg%3E')
+ right 12px center no-repeat;
+ background-size: 16px;
+ cursor: pointer;
+ min-width: 200px;
+ appearance: none;
+}
+
+/* ==========================================================================
+ Search Box
+ ========================================================================== */
+
+.pfg-search {
+ margin-bottom: 20px;
+}
+
+.pfg-search-input {
+ width: 100%;
+ max-width: 300px;
+ padding: 12px 16px;
+ border: 1px solid #e2e8f0;
+ border-radius: 6px;
+ font-size: 14px;
+ transition: border-color var(--pfg-transition);
+}
+
+.pfg-search-input:focus {
+ outline: none;
+ border-color: var(--pfg-filter-bg);
+ box-shadow: 0 0 0 3px rgba(56, 88, 233, 0.1);
+}
+
+/* ==========================================================================
+ Gallery Grid
+ ========================================================================== */
+
+.pfg-grid {
+ display: grid;
+ grid-template-columns: repeat(var(--pfg-cols-sm), 1fr);
+ gap: var(--pfg-gap);
+}
+
+/* Base item styles for all layouts */
+/* NOTE: Transitions are controlled by JavaScript to prevent double-animation issues */
+.pfg-item {
+ will-change: transform, opacity;
+}
+
+/* Visible items - full opacity and scale */
+.pfg-item.pfg-item--visible {
+ opacity: 1;
+ transform: scale(1);
+}
+
+/* Phase 1: HIDING - Fade out animation (stays in layout for smooth exit) */
+.pfg-item.pfg-item--hiding {
+ opacity: 0;
+ transform: scale(0.9);
+ pointer-events: none;
+ transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
+ opacity 0.2s ease-out;
+}
+
+/* Phase 2: HIDDEN - Fully collapsed (after animation completes) */
+.pfg-item.pfg-item--hidden {
+ opacity: 0;
+ transform: scale(0.9);
+ pointer-events: none;
+ /* Now collapse from layout */
+ position: absolute;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ visibility: hidden;
+}
+
+@media (min-width: 576px) {
+ .pfg-grid {
+ grid-template-columns: repeat(var(--pfg-cols-sm), 1fr);
+ }
+}
+
+@media (min-width: 768px) {
+ .pfg-grid {
+ grid-template-columns: repeat(var(--pfg-cols-md), 1fr);
+ }
+}
+
+@media (min-width: 992px) {
+ .pfg-grid {
+ grid-template-columns: repeat(var(--pfg-cols-lg), 1fr);
+ }
+}
+
+@media (min-width: 1200px) {
+ .pfg-grid {
+ grid-template-columns: repeat(var(--pfg-cols-xl), 1fr);
+ }
+}
+
+/* Masonry layout - CSS Columns (browser handles positioning - no flash) */
+.pfg-grid--masonry {
+ display: block;
+ column-count: var(--pfg-cols-lg, 4);
+ column-gap: var(--pfg-gap, 16px);
+}
+
+/* Responsive column counts for masonry */
+@media (max-width: 575px) {
+ .pfg-grid--masonry {
+ column-count: var(--pfg-cols-sm, 2);
+ }
+}
+
+@media (min-width: 576px) and (max-width: 767px) {
+ .pfg-grid--masonry {
+ column-count: var(--pfg-cols-sm, 2);
+ }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+ .pfg-grid--masonry {
+ column-count: var(--pfg-cols-md, 3);
+ }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+ .pfg-grid--masonry {
+ column-count: var(--pfg-cols-lg, 4);
+ }
+}
+
+@media (min-width: 1200px) {
+ .pfg-grid--masonry {
+ column-count: var(--pfg-cols-xl, 5);
+ }
+}
+
+.pfg-grid--masonry .pfg-item {
+ break-inside: avoid;
+ margin-bottom: var(--pfg-gap, 16px);
+ border-radius: var(--pfg-radius, 8px);
+ background: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ overflow: hidden;
+ /* No base transition - controlled by JavaScript */
+ opacity: 1;
+ transform: scale(1);
+}
+
+/* Phase 1: HIDING in masonry - fade out + scale down while staying in layout */
+.pfg-grid--masonry .pfg-item.pfg-item--hiding {
+ opacity: 0;
+ transform: scale(0.9);
+ pointer-events: none;
+ transition: opacity 0.25s ease-out, transform 0.25s ease-out;
+}
+
+/* Phase 2: HIDDEN in masonry - remove from column flow */
+.pfg-grid--masonry .pfg-item.pfg-item--hidden {
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ left: -9999px;
+ width: 0;
+ height: 0;
+}
+
+/* ==========================================================================
+ Grid Layout - Fixed Height Images (non-masonry)
+ ========================================================================== */
+
+/* Fixed-height grid: crops images to same aspect ratio */
+.pfg-grid--fixed-height .pfg-item {
+ aspect-ratio: 4 / 3;
+ overflow: hidden;
+}
+
+.pfg-grid--fixed-height .pfg-item-link {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.pfg-grid--fixed-height .pfg-item-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+
+/* Grid with cards/captions: fixed aspect ratio image, caption below */
+.pfg-grid--grid .pfg-item {
+ display: flex;
+ flex-direction: column;
+}
+
+.pfg-grid--grid .pfg-item-link {
+ display: block;
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ overflow: hidden;
+}
+
+.pfg-grid--grid .pfg-item-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+}
+
+.pfg-grid--grid .pfg-caption {
+ width: 100%;
+ padding-top: 10px;
+ /* Below-image captions are always visible */
+}
+
+/* Grayscale effect */
+.pfg-grid--grayscale .pfg-item-image {
+ filter: grayscale(100%);
+ transition: filter var(--pfg-transition);
+}
+
+.pfg-grid--grayscale .pfg-item:hover .pfg-item-image {
+ filter: grayscale(0%);
+}
+
+/* RTL support */
+.pfg-grid[dir="rtl"] {
+ direction: rtl;
+}
+
+/* ==========================================================================
+ Justified Layout
+ ========================================================================== */
+
+.pfg-grid--justified {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--pfg-gap, 10px);
+ align-items: flex-start;
+}
+
+.pfg-grid--justified .pfg-item {
+ flex-grow: var(--item-aspect, 1);
+ min-width: 100px;
+ overflow: visible;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Image link container has the fixed height */
+.pfg-grid--justified .pfg-item-link {
+ width: 100%;
+ height: var(--pfg-row-height, 200px);
+ display: block;
+ overflow: hidden;
+}
+
+.pfg-grid--justified .pfg-item-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Caption below image can expand naturally */
+.pfg-grid--justified .pfg-caption {
+ width: 100%;
+ padding-top: 10px;
+ /* Below-image captions are always visible */
+}
+
+/* Last row handling */
+.pfg-grid--justified-last-left {
+ justify-content: flex-start;
+}
+
+.pfg-grid--justified-last-left .pfg-item:last-child {
+ flex-grow: 0;
+}
+
+/* ==========================================================================
+ Packed Layout (CSS Grid Dense)
+ ========================================================================== */
+
+/* Default packed layout - mosaic with overlay captions */
+.pfg-grid--packed {
+ display: grid;
+ grid-template-columns: repeat(
+ auto-fill,
+ minmax(var(--pfg-packed-min, 150px), 1fr)
+ );
+ grid-auto-rows: var(--pfg-packed-min, 150px);
+ grid-auto-flow: row; /* Changed from 'dense' to preserve DOM/sort order */
+ gap: var(--pfg-gap, 10px);
+}
+
+.pfg-grid--packed .pfg-item {
+ overflow: hidden;
+}
+
+.pfg-grid--packed .pfg-item-link {
+ display: block;
+ width: 100%;
+ height: 100%;
+}
+
+.pfg-grid--packed .pfg-item-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Size variations - spans grid cells */
+.pfg-grid--packed .pfg-item--wide {
+ grid-column: span 2;
+}
+
+.pfg-grid--packed .pfg-item--tall {
+ grid-row: span 2;
+}
+
+.pfg-grid--packed .pfg-item--large {
+ grid-column: span 2;
+ grid-row: span 2;
+}
+
+/* Packed layout: Caption overlay (default) */
+.pfg-grid--packed .pfg-item-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px 15px 15px;
+ background: linear-gradient(
+ to top,
+ var(--pfg-overlay-color, rgba(0, 0, 0, 0.8)) 0%,
+ rgba(0, 0, 0, 0.4) 60%,
+ transparent 100%
+ );
+ z-index: 5;
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pfg-grid--packed .pfg-item:hover .pfg-item-caption {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.pfg-grid--packed .pfg-item-caption .pfg-item-title {
+ color: var(--pfg-title-color, #fff);
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ font-size: 0.95em;
+ margin-bottom: 4px;
+ display: block;
+}
+
+.pfg-grid--packed .pfg-item-caption .pfg-item-categories {
+ color: var(--pfg-category-color, rgba(255, 255, 255, 0.85));
+ font-size: 0.8em;
+ display: block;
+}
+
+/* Packed with cards mode - JS-powered mosaic with captions below */
+.pfg-grid--packed.pfg-grid--packed-cards {
+ position: relative;
+ display: block !important; /* Override CSS Grid to use JS positioning */
+ transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pfg-grid--packed.pfg-grid--packed-cards .pfg-item {
+ overflow: visible;
+ border-radius: var(--pfg-radius, 8px);
+ background: #fff;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+ opacity: 0;
+ transform: translateY(15px) translateZ(0);
+ will-change: transform, opacity, left, top;
+ transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ top 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out,
+ transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ transition-delay: var(--pfg-stagger-delay, 0ms);
+}
+
+/* Show items after mosaic layout positions them */
+.pfg-grid--packed.pfg-grid--packed-cards .pfg-item.pfg-item--positioned {
+ opacity: 1;
+ transform: translateY(0) translateZ(0);
+}
+
+.pfg-grid--packed.pfg-grid--packed-cards .pfg-item-link {
+ display: block;
+ overflow: hidden;
+ border-radius: var(--pfg-radius, 8px);
+}
+
+/* Creative Agency template - top-only border radius (no bottom corners) */
+.pfg-template-creative-agency .pfg-item {
+ border-radius: var(--pfg-border-radius) var(--pfg-border-radius) 0 0;
+}
+
+.pfg-grid--packed.pfg-grid--packed-cards .pfg-item-caption {
+ position: static !important;
+ background: var(--pfg-caption-bg, #ffffff) !important;
+ padding: 12px 10px;
+ bottom: auto !important;
+ left: auto !important;
+ right: auto !important;
+}
+
+.pfg-grid--packed.pfg-grid--packed-cards .pfg-item-caption .pfg-item-title {
+ color: var(--pfg-filter-active-color, #e91e63);
+ text-shadow: none;
+ font-size: 0.9em;
+ margin-bottom: 4px;
+}
+
+.pfg-grid--packed.pfg-grid--packed-cards
+ .pfg-item-caption
+ .pfg-item-categories {
+ color: var(--pfg-primary-color, #3858e9);
+ font-size: 0.75em;
+}
+
+/* Product price in packed cards - use primary color */
+.pfg-grid--packed.pfg-grid--packed-cards
+ .pfg-item-caption
+ .pfg-product-caption-price {
+ color: var(--pfg-primary-color, #3858e9);
+ font-size: 0.85em;
+ font-weight: 600;
+}
+
+/* Responsive: reduce spans on small screens */
+@media (max-width: 768px) {
+ .pfg-grid--packed .pfg-item--wide,
+ .pfg-grid--packed .pfg-item--tall,
+ .pfg-grid--packed .pfg-item--large {
+ grid-column: span 1;
+ grid-row: span 1;
+ }
+}
+
+/* ==========================================================================
+ Gallery Items
+ ========================================================================== */
+
+.pfg-item {
+ position: relative;
+ border-radius: var(--pfg-border-radius);
+ border: var(--pfg-border-width) solid var(--pfg-border-color);
+ background: #f8fafc;
+ overflow: hidden; /* Clips children to rounded corners */
+ /* Smooth animation properties - using cubic-bezier for natural motion */
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ will-change: opacity, transform;
+}
+
+/* Hiding state - fade out before removing */
+.pfg-item--hiding {
+ opacity: 0;
+ transform: scale(0.95);
+ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ pointer-events: none;
+}
+
+/* Hidden state - completely remove from layout */
+.pfg-item--hidden {
+ display: none !important;
+}
+
+/* Visible items - JavaScript controls the animation */
+.pfg-item--visible {
+ opacity: 1;
+ transform: scale(1);
+}
+
+/* Staggered animation delay with natural easing */
+.pfg-item[data-delay="1"] {
+ transition-delay: 0.02s;
+}
+.pfg-item[data-delay="2"] {
+ transition-delay: 0.04s;
+}
+.pfg-item[data-delay="3"] {
+ transition-delay: 0.06s;
+}
+.pfg-item[data-delay="4"] {
+ transition-delay: 0.08s;
+}
+.pfg-item[data-delay="5"] {
+ transition-delay: 0.1s;
+}
+.pfg-item[data-delay="6"] {
+ transition-delay: 0.12s;
+}
+
+.pfg-item-link {
+ display: block;
+ position: relative;
+ text-decoration: none;
+ color: inherit;
+ overflow: hidden;
+}
+
+.pfg-item-image {
+ display: block;
+ width: 100%;
+ height: auto;
+ transition: transform var(--pfg-transition);
+}
+
+/* ==========================================================================
+ Item Overlays
+ ========================================================================== */
+
+/* Legacy overlay class (for backwards compatibility) */
+.pfg-item-overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px;
+ background: var(--pfg-overlay-color, rgba(0, 0, 0, 0.7));
+ color: #fff;
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* New overlay caption class */
+.pfg-item-caption--overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 50px 15px 15px;
+ background: linear-gradient(
+ to top,
+ var(--pfg-overlay-color, rgba(0, 0, 0, 0.7)) 0%,
+ transparent 100%
+ );
+ color: #fff;
+ opacity: 0;
+ transform: translateY(10px);
+ z-index: 5;
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pfg-item:hover .pfg-item-overlay,
+.pfg-item:hover .pfg-item-caption--overlay {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Overlay text colors */
+.pfg-item-overlay .pfg-item-title,
+.pfg-item-caption--overlay .pfg-item-title {
+ color: var(--pfg-caption-text, #fff);
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.pfg-item-overlay .pfg-item-categories,
+.pfg-item-caption--overlay .pfg-item-categories {
+ color: var(--pfg-primary-color, #3858e9);
+ font-size: 0.85em;
+ margin-top: 4px;
+}
+
+.pfg-item-title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.pfg-item-number {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ background: var(--pfg-filter-bg);
+ color: var(--pfg-filter-text);
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 24px;
+ text-align: center;
+ border-radius: 50%;
+ margin-bottom: 8px;
+}
+
+/* ==========================================================================
+ Type Indicator Icons (Video/Link in corner)
+ ========================================================================== */
+
+.pfg-item-type-icon {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ z-index: 5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ background: rgba(0, 0, 0, 0.6);
+ color: #fff;
+ border-radius: 50%;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+ transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.pfg-item-type-icon svg {
+ display: block;
+}
+
+.pfg-item:hover .pfg-item-type-icon {
+ background: rgba(0, 0, 0, 0.8);
+ transform: scale(1.1);
+}
+
+.pfg-item-type-icon--video {
+ background: rgba(220, 38, 38, 0.85); /* YouTube red */
+}
+
+.pfg-item:hover .pfg-item-type-icon--video {
+ background: rgba(220, 38, 38, 1);
+}
+
+/* Vimeo blue color variant */
+.pfg-item-type-icon--vimeo {
+ background: rgba(26, 183, 234, 0.85); /* Vimeo blue #1ab7ea */
+}
+
+.pfg-item:hover .pfg-item-type-icon--vimeo {
+ background: rgba(26, 183, 234, 1);
+}
+
+.pfg-item-type-icon--link {
+ background: var(--pfg-primary-color, rgba(59, 130, 246, 0.85));
+}
+
+.pfg-item:hover .pfg-item-type-icon--link {
+ background: var(--pfg-primary-color, rgba(59, 130, 246, 1));
+}
+
+/* ==========================================================================
+ Card Caption (title below image) - NOT overlay captions
+ ========================================================================== */
+
+.pfg-item-caption:not(.pfg-item-caption--overlay) {
+ padding: 14px 16px;
+ background: var(--pfg-caption-bg, #ffffff);
+ /* Border radius is inherited from parent via overflow:hidden */
+}
+
+.pfg-item-caption:not(.pfg-item-caption--overlay) .pfg-item-title {
+ margin: 0 0 4px 0;
+ font-size: 15px;
+ font-weight: 600;
+ color: var(--pfg-caption-text, #1e293b);
+ line-height: 1.4;
+}
+
+.pfg-item-caption:not(.pfg-item-caption--overlay) .pfg-item-categories {
+ font-size: 13px;
+ color: var(--pfg-filter-bg, #3858e9);
+ font-weight: 500;
+}
+
+.pfg-item-caption:not(.pfg-item-caption--overlay) .pfg-item-number {
+ margin-bottom: 8px;
+ color: var(--pfg-caption-text, #1e293b);
+}
+
+/* ==========================================================================
+ Dual Action Icons (link + lightbox)
+ ========================================================================== */
+
+.pfg-item-link--dual {
+ display: block;
+ position: relative;
+ cursor: default;
+}
+
+.pfg-item-actions {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ gap: 16px;
+ opacity: 0;
+ z-index: 10;
+ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pfg-item:hover .pfg-item-actions {
+ opacity: 1;
+}
+
+.pfg-action-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.95);
+ color: #1e293b;
+ text-decoration: none;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
+}
+
+.pfg-action-btn svg {
+ width: 22px;
+ height: 22px;
+}
+
+.pfg-action-btn:hover {
+ transform: scale(1.1);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+ background: #fff;
+ color: var(--pfg-filter-bg, #3858e9);
+}
+
+.pfg-action-btn:active {
+ transform: scale(1.05);
+}
+
+/* Background overlay when dual icons are shown */
+.pfg-item-link--dual::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.35);
+ opacity: 0;
+ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ z-index: 5;
+ pointer-events: none;
+}
+
+.pfg-item:hover .pfg-item-link--dual::before {
+ opacity: 1;
+}
+
+/* Video play button */
+.pfg-video-play {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 60px;
+ height: 60px;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: transform var(--pfg-transition), background var(--pfg-transition);
+}
+
+.pfg-video-play svg {
+ width: 24px;
+ height: 24px;
+ margin-left: 3px;
+}
+
+.pfg-item:hover .pfg-video-play {
+ transform: translate(-50%, -50%) scale(1.1);
+ background: #fff;
+}
+
+/* ==========================================================================
+ Hover Effects
+ ========================================================================== */
+
+/* Fade */
+.pfg-item-hover--fade:hover .pfg-item-image {
+ opacity: 0.85;
+}
+
+/* Zoom */
+.pfg-item-hover--zoom:hover .pfg-item-image {
+ transform: scale(1.08);
+}
+
+/* Lift */
+.pfg-item-hover--lift {
+ transition: transform var(--pfg-transition), box-shadow var(--pfg-transition);
+}
+
+.pfg-item-hover--lift:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Overlay */
+.pfg-item-hover--overlay .pfg-item-link::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: var(--pfg-overlay-bg);
+ opacity: 0;
+ transition: opacity var(--pfg-transition);
+}
+
+.pfg-item-hover--overlay:hover .pfg-item-link::after {
+ opacity: 1;
+}
+
+/* Slide up */
+.pfg-item-hover--slide-up .pfg-item-overlay {
+ transform: translateY(100%);
+ opacity: 1;
+}
+
+.pfg-item-hover--slide-up:hover .pfg-item-overlay {
+ transform: translateY(0);
+}
+
+/* Dark overlay */
+.pfg-item-hover--dark-overlay .pfg-item-link::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.4);
+ opacity: 0;
+ transition: opacity var(--pfg-transition);
+}
+
+.pfg-item-hover--dark-overlay:hover .pfg-item-link::after {
+ opacity: 1;
+}
+
+/* Color reveal (for grayscale galleries) */
+.pfg-item-hover--color-reveal .pfg-item-image {
+ filter: grayscale(100%);
+}
+
+.pfg-item-hover--color-reveal:hover .pfg-item-image {
+ filter: grayscale(0%);
+}
+
+/* Subtle */
+.pfg-item-hover--subtle:hover .pfg-item-image {
+ transform: scale(1.02);
+}
+
+/* Overlay zoom */
+.pfg-item-hover--overlay-zoom .pfg-item-link::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: var(--pfg-overlay-bg);
+ opacity: 0;
+ transition: opacity var(--pfg-transition);
+}
+
+.pfg-item-hover--overlay-zoom:hover .pfg-item-link::after {
+ opacity: 1;
+}
+
+.pfg-item-hover--overlay-zoom:hover .pfg-item-image {
+ transform: scale(1.1);
+}
+
+/* Slide in */
+.pfg-item-hover--slide-in .pfg-item-overlay {
+ transform: translateX(-100%);
+ opacity: 1;
+ background: var(--pfg-overlay-bg);
+ inset: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.pfg-item-hover--slide-in:hover .pfg-item-overlay {
+ transform: translateX(0);
+}
+
+/* ==========================================================================
+ Error & Empty States
+ ========================================================================== */
+
+.pfg-error,
+.pfg-empty {
+ padding: 40px 20px;
+ text-align: center;
+ background: #fef2f2;
+ border: 1px solid #fecaca;
+ border-radius: 8px;
+ color: #dc2626;
+}
+
+.pfg-empty {
+ background: #f8fafc;
+ border-color: #e2e8f0;
+ color: #64748b;
+}
+
+/* ==========================================================================
+ Animation for filtering - Removed CSS animations, now controlled by JavaScript
+ ========================================================================== */
+
+/* ==========================================================================
+ Accessibility
+ ========================================================================== */
+
+.pfg-filter:focus-visible,
+.pfg-item-link:focus-visible {
+ outline: 2px solid var(--pfg-filter-bg);
+ outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .pfg-item,
+ .pfg-item-image,
+ .pfg-item-overlay,
+ .pfg-filter,
+ .pfg-video-play {
+ transition: none;
+ animation: none;
+ }
+}
+
+/* ==========================================================================
+ Print styles
+ ========================================================================== */
+
+@media print {
+ .pfg-filters,
+ .pfg-search,
+ .pfg-item-overlay,
+ .pfg-video-play {
+ display: none;
+ }
+
+ .pfg-grid {
+ display: block;
+ }
+
+ .pfg-item {
+ page-break-inside: avoid;
+ margin-bottom: 20px;
+ }
+}
+
+/* ==========================================================================
+ Pagination Styles
+ ========================================================================== */
+
+/* Hidden by pagination - remove from layout */
+.pfg-item--paginated-hidden {
+ display: none !important;
+}
+
+/* Pagination wrapper */
+.pfg-pagination-wrap {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 30px;
+ gap: 10px;
+}
+
+/* Load More Button */
+.pfg-load-more {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ padding: 14px 32px;
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #fff);
+ border: none;
+ border-radius: 8px;
+ font-size: 15px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.pfg-load-more:hover {
+ background: var(--pfg-filter-active-bg, #2d4ad4);
+ transform: translateY(-2px);
+ box-shadow: 0 8px 20px rgba(56, 88, 233, 0.3);
+}
+
+.pfg-load-more:active {
+ transform: translateY(0);
+}
+
+.pfg-load-more.loading {
+ opacity: 0.7;
+ pointer-events: none;
+}
+
+.pfg-load-more-count {
+ opacity: 0.8;
+ font-weight: 400;
+ font-size: 13px;
+}
+
+.pfg-load-more-spinner {
+ width: 18px;
+ height: 18px;
+ border: 2px solid rgba(255, 255, 255, 0.3);
+ border-top-color: #fff;
+ border-radius: 50%;
+ animation: pfgSpin 0.8s linear infinite;
+}
+
+/* Numbered Pagination */
+.pfg-numbered-pagination {
+ display: flex;
+ gap: 6px;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.pfg-pagination-btn {
+ min-width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f1f5f9;
+ color: #475569;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.25s ease;
+}
+
+.pfg-pagination-btn:hover {
+ background: #e2e8f0;
+ color: #1e293b;
+}
+
+.pfg-pagination-btn.active {
+ background: var(--pfg-filter-bg, #3858e9);
+ color: var(--pfg-filter-text, #fff);
+}
+
+.pfg-pagination-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Infinite Scroll Loader */
+.pfg-scroll-loader {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ padding: 20px;
+ color: #64748b;
+ font-size: 14px;
+}
+
+.pfg-scroll-spinner {
+ width: 24px;
+ height: 24px;
+ border: 3px solid #e2e8f0;
+ border-top-color: var(--pfg-filter-bg, #3858e9);
+ border-radius: 50%;
+ animation: pfgSpin 0.8s linear infinite;
+}
+
+.pfg-scroll-trigger {
+ height: 1px;
+ visibility: hidden;
+}
+
+@keyframes pfgSpin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* Load more items animation */
+@keyframes pfgSlideUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* ==========================================================================
+ WooCommerce Product Gallery Styles
+ ========================================================================== */
+
+/* Product item container */
+.pfg-product-item {
+ position: relative;
+}
+
+.pfg-product-item .pfg-item-inner {
+ position: relative;
+ overflow: hidden;
+}
+
+/* Sale Badge */
+.pfg-sale-badge {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ z-index: 10;
+ padding: 4px 10px;
+ background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+ color: #fff;
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border-radius: 4px;
+ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
+}
+
+/* Product Price */
+.pfg-product-price {
+ display: block;
+ margin: 8px 0;
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+}
+
+.pfg-product-price del {
+ opacity: 0.6;
+ font-size: 13px;
+ margin-right: 6px;
+}
+
+.pfg-product-price ins {
+ text-decoration: none;
+ color: #10b981;
+}
+
+/* View Product Button */
+.pfg-view-product {
+ display: inline-block;
+ padding: 8px 20px;
+ margin-top: 12px;
+ background: rgba(255, 255, 255, 0.15);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(4px);
+}
+
+.pfg-product-item:hover .pfg-view-product {
+ background: #fff;
+ color: #1e293b;
+ border-color: #fff;
+ transform: scale(1.05);
+}
+
+/* Out of Stock */
+.pfg-out-of-stock .pfg-item-image {
+ filter: grayscale(50%);
+}
+
+.pfg-out-of-stock::after {
+ content: "Out of Stock";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 10;
+ padding: 8px 16px;
+ background: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ border-radius: 4px;
+}
+
+/* Product overlay enhancements */
+.pfg-product-item .pfg-item-overlay {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+.pfg-product-item .pfg-item-title {
+ margin: 0;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+/* On Sale Animation */
+.pfg-on-sale .pfg-sale-badge {
+ animation: pfgPulse 2s ease-in-out infinite;
+}
+
+@keyframes pfgPulse {
+ 0%,
+ 100% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.05);
+ }
+}
+
+/* Product item hover effects */
+.pfg-product-item .pfg-item-link:hover .pfg-item-image {
+ transform: scale(1.05);
+}
+
+/* Product Caption Below Styles */
+.pfg-product-item .pfg-item-caption {
+ padding: 12px;
+ text-align: center;
+}
+
+.pfg-product-caption-price {
+ display: block;
+ margin-top: 6px;
+ font-size: 15px;
+ font-weight: 600;
+ color: #16a34a;
+}
+
+.pfg-product-caption-price del {
+ color: #94a3b8;
+ font-weight: 400;
+ margin-right: 6px;
+}
+
+.pfg-product-caption-price ins {
+ text-decoration: none;
+ color: #16a34a;
+}
+
+/* View Product Button in Caption */
+.pfg-product-caption {
+ text-align: center;
+}
+
+.pfg-view-product-btn {
+ display: inline-block;
+ margin-top: 10px;
+ padding: 8px 18px;
+ background: var(--pfg-primary-color, #3858e9);
+ color: #fff;
+ text-decoration: none;
+ border-radius: 6px;
+ font-size: 13px;
+ font-weight: 500;
+ transition: all 0.3s ease;
+}
+
+.pfg-view-product-btn:hover {
+ background: var(--pfg-hover-color, #2d4ad4);
+ color: #fff;
+ transform: translateY(-2px);
+}
+
+
+
+/* Caption in overlay mode - inside link */
+.pfg-item-caption--overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 15px;
+ background: linear-gradient(
+ transparent,
+ var(--pfg-overlay-color, rgba(0, 0, 0, 0.7))
+ );
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pfg-item-link:hover .pfg-item-caption--overlay {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Product Hover Effects - same as images */
+.pfg-item[data-id] .pfg-item-link:hover .pfg-item-image {
+ transform: scale(1.05);
+}
+
+/* Product overlay - gradient at bottom like images */
+.pfg-item .pfg-item-overlay {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: flex-start;
+ background: linear-gradient(to top, var(--pfg-overlay-color, rgba(0, 0, 0, 0.7)) 0%, transparent 100%);
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ padding: 20px 15px;
+ text-align: left;
+ min-height: 80px;
+}
+
+.pfg-item .pfg-item-link:hover .pfg-item-overlay {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Product price in overlay */
+.pfg-item .pfg-product-price {
+ color: var(--pfg-title-color, #fff);
+ font-size: 16px;
+ font-weight: 600;
+ margin-top: 6px;
+}
+
+.pfg-item .pfg-product-price del {
+ color: rgba(255, 255, 255, 0.6);
+ font-weight: 400;
+ margin-right: 6px;
+}
+
+.pfg-item .pfg-product-price ins {
+ text-decoration: none;
+}
+
+/* Sale badge positioning */
+.pfg-item .pfg-sale-badge {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ z-index: 5;
+}
+
+/* ==========================================================================
+ Watermark Overlay
+ ========================================================================== */
+
+.pfg-watermark {
+ position: absolute;
+ z-index: 3;
+ pointer-events: none;
+ padding: 8px 12px;
+ color: #fff;
+ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+}
+
+/* Watermark text styling */
+.pfg-watermark-text {
+ display: inline-block;
+ white-space: nowrap;
+}
+
+/* Watermark image styling */
+.pfg-watermark-image {
+ max-width: 80px;
+ max-height: 40px;
+ width: auto;
+ height: auto;
+ display: block;
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+/* Position variants */
+.pfg-watermark--top-left {
+ top: 10px;
+ left: 10px;
+}
+
+.pfg-watermark--top-center {
+ top: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.pfg-watermark--top-right {
+ top: 10px;
+ right: 10px;
+}
+
+.pfg-watermark--center {
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.pfg-watermark--bottom-left {
+ bottom: 10px;
+ left: 10px;
+}
+
+.pfg-watermark--bottom-center {
+ bottom: 10px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.pfg-watermark--bottom-right {
+ bottom: 10px;
+ right: 10px;
+}
+
+/* Ensure proper positioning context for watermark */
+.pfg-item-link {
+ position: relative;
+}
+
+.pfg-item-link--dual {
+ position: relative;
+}
+
diff --git a/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-hover.css b/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-hover.css
new file mode 100644
index 0000000..7ed5c0c
--- /dev/null
+++ b/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-hover.css
@@ -0,0 +1,282 @@
+/**
+ * Portfolio Filter Gallery - Hover Effects
+ *
+ * @package Portfolio_Filter_Gallery
+ */
+
+/* ==========================================================================
+ Base Transitions
+ ========================================================================== */
+
+/* Base .pfg-item transition removed - controlled by JavaScript for FLIP animation */
+/* Hover effects apply to .pfg-item-image and specific hover classes instead */
+
+.pfg-item-image {
+ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ opacity 0.4s ease,
+ filter 0.4s ease;
+}
+
+.pfg-item-link {
+ position: relative;
+ overflow: hidden;
+}
+
+/* ==========================================================================
+ None - No Effect
+ ========================================================================== */
+
+.pfg-item-hover--none .pfg-item-image {
+ transition: none;
+}
+
+/* ==========================================================================
+ Zoom Effect
+ ========================================================================== */
+
+.pfg-item-hover--zoom .pfg-item-image {
+ transform: scale(1);
+ transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.pfg-item-hover--zoom:hover .pfg-item-image {
+ transform: scale(1.1);
+}
+
+/* ==========================================================================
+ Fade Effect
+ ========================================================================== */
+
+.pfg-item-hover--fade .pfg-item-image {
+ opacity: 1;
+ transform: scale(1);
+ transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.pfg-item-hover--fade:hover .pfg-item-image {
+ opacity: 0.7;
+ transform: scale(1.05);
+}
+
+/* Fade effect overlay - smooth transition */
+.pfg-item-hover--fade .pfg-item-overlay,
+.pfg-item-hover--fade .pfg-item-caption--overlay {
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pfg-item-hover--fade:hover .pfg-item-overlay,
+.pfg-item-hover--fade:hover .pfg-item-caption--overlay {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* ==========================================================================
+ Slide Up Effect - Applies to entire card
+ ========================================================================== */
+
+.pfg-item-hover--slide-up {
+ position: relative;
+ transform: translateY(0);
+ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.pfg-item-hover--slide-up:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+/* ==========================================================================
+ Blur Effect (Premium)
+ ========================================================================== */
+
+.pfg-item-hover--blur .pfg-item-image {
+ filter: blur(0);
+ transition: filter 0.4s ease, transform 0.4s ease;
+}
+
+.pfg-item-hover--blur:hover .pfg-item-image {
+ filter: blur(3px);
+ transform: scale(1.02);
+}
+
+/* Make overlay more visible on blur */
+.pfg-item-hover--blur .pfg-item-overlay,
+.pfg-item-hover--blur .pfg-item-caption--overlay {
+ background: rgba(0, 0, 0, 0.4);
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+ background 0.35s ease;
+}
+
+.pfg-item-hover--blur:hover .pfg-item-overlay,
+.pfg-item-hover--blur:hover .pfg-item-caption--overlay {
+ background: rgba(0, 0, 0, 0.6);
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* ==========================================================================
+ Grayscale Effect (Premium)
+ ========================================================================== */
+
+.pfg-item-hover--grayscale .pfg-item-image {
+ filter: grayscale(100%);
+ transition: filter 0.5s ease;
+}
+
+.pfg-item-hover--grayscale:hover .pfg-item-image {
+ filter: grayscale(0%);
+}
+
+/* ==========================================================================
+ Shine Effect (Premium)
+ ========================================================================== */
+
+.pfg-item-hover--shine .pfg-item-link {
+ position: relative;
+ overflow: hidden;
+}
+
+.pfg-item-hover--shine .pfg-item-link::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 60%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent 0%,
+ rgba(255, 255, 255, 0.1) 20%,
+ rgba(255, 255, 255, 0.4) 50%,
+ rgba(255, 255, 255, 0.1) 80%,
+ transparent 100%
+ );
+ transform: skewX(-25deg);
+ z-index: 5;
+ pointer-events: none;
+ transition: left 0s;
+}
+
+.pfg-item-hover--shine:hover .pfg-item-link::before {
+ left: 150%;
+ transition: left 0.8s ease;
+}
+
+/* ==========================================================================
+ 3D Tilt Effect (Premium) - Applies to entire card
+ ========================================================================== */
+
+.pfg-item-hover--3d-tilt {
+ perspective: 1000px;
+ transform-style: preserve-3d;
+ transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.pfg-item-hover--3d-tilt:hover {
+ transform: perspective(1000px) rotateY(6deg) rotateX(4deg) scale(1.02);
+ box-shadow: -8px 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+/* ==========================================================================
+ Lift Effect
+ ========================================================================== */
+
+.pfg-item-hover--lift {
+ transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.pfg-item-hover--lift:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+/* ==========================================================================
+ Grow Shadow Effect (Legacy)
+ ========================================================================== */
+
+.pfg-item-hover--hvr-grow-shadow,
+.pfg-item-hover--grow-shadow {
+ transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.pfg-item-hover--hvr-grow-shadow:hover,
+.pfg-item-hover--grow-shadow:hover {
+ transform: scale(1.05);
+ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+}
+
+/* ==========================================================================
+ Float Shadow Effect (Legacy)
+ ========================================================================== */
+
+.pfg-item-hover--hvr-float-shadow,
+.pfg-item-hover--float-shadow {
+ transition: transform 0.4s ease, box-shadow 0.4s ease;
+}
+
+.pfg-item-hover--hvr-float-shadow:hover,
+.pfg-item-hover--float-shadow:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 18px 30px rgba(0, 0, 0, 0.15);
+}
+
+/* ==========================================================================
+ Glow Effect (Legacy)
+ ========================================================================== */
+
+.pfg-item-hover--hvr-glow,
+.pfg-item-hover--glow {
+ transition: box-shadow 0.4s ease;
+}
+
+.pfg-item-hover--hvr-glow:hover,
+.pfg-item-hover--glow:hover {
+ box-shadow: 0 0 25px rgba(56, 88, 233, 0.5);
+}
+
+/* ==========================================================================
+ Box Shadow Effects (Legacy)
+ ========================================================================== */
+
+.pfg-item-hover--hvr-box-shadow-outset,
+.pfg-item-hover--box-shadow-outset {
+ transition: box-shadow 0.3s ease;
+}
+
+.pfg-item-hover--hvr-box-shadow-outset:hover,
+.pfg-item-hover--box-shadow-outset:hover {
+ box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
+}
+
+.pfg-item-hover--hvr-box-shadow-inset,
+.pfg-item-hover--box-shadow-inset {
+ transition: box-shadow 0.3s ease;
+}
+
+.pfg-item-hover--hvr-box-shadow-inset:hover,
+.pfg-item-hover--box-shadow-inset:hover {
+ box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.2);
+}
+
+/* ==========================================================================
+ Scale Overlay Effect
+ ========================================================================== */
+
+.pfg-item-hover--scale-overlay .pfg-item-overlay {
+ opacity: 0;
+ transform: scale(0.85);
+ transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.pfg-item-hover--scale-overlay:hover .pfg-item-overlay {
+ opacity: 1;
+ transform: scale(1);
+}
diff --git a/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-lightbox.css b/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-lightbox.css
new file mode 100644
index 0000000..aa3fde9
--- /dev/null
+++ b/wp-content/plugins/portfolio-filter-gallery/public/css/pfg-lightbox.css
@@ -0,0 +1,400 @@
+/**
+ * Portfolio Filter Gallery - Lightbox Styles
+ *
+ * @package Portfolio_Filter_Gallery
+ * @version 2.0.0
+ */
+
+/* ==========================================================================
+ Body Lock - Prevent layout shift when lightbox opens
+ ========================================================================== */
+
+body.pfg-lightbox-open {
+ overflow: hidden !important;
+ padding-right: var(--pfg-scrollbar-width, 0px) !important;
+}
+
+/* ==========================================================================
+ Lightbox Container
+ ========================================================================== */
+
+.pfg-lightbox {
+ --pfg-lb-bg: rgba(0, 0, 0, 0.95);
+ --pfg-lb-text: #ffffff;
+ --pfg-lb-accent: #3858e9;
+
+ position: fixed !important;
+ inset: 0 !important;
+ z-index: 999999 !important;
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ background: var(--pfg-lb-bg) !important;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.3s ease, visibility 0.3s ease;
+ /* CSS isolation from theme */
+ box-sizing: border-box !important;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+ line-height: 1.5 !important;
+ color: #fff !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ border: none !important;
+ text-align: center !important;
+}
+
+.pfg-lightbox *,
+.pfg-lightbox *::before,
+.pfg-lightbox *::after {
+ box-sizing: border-box !important;
+}
+
+.pfg-lightbox--open {
+ opacity: 1;
+ visibility: visible;
+}
+
+.pfg-lightbox--loading .pfg-lightbox-content::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 40px;
+ height: 40px;
+ margin: -20px 0 0 -20px;
+ border: 3px solid rgba(255, 255, 255, 0.3);
+ border-top-color: #fff;
+ border-radius: 50%;
+ animation: pfgLbSpin 0.8s linear infinite;
+}
+
+@keyframes pfgLbSpin {
+ to { transform: rotate(360deg); }
+}
+
+/* ==========================================================================
+ Lightbox Content
+ ========================================================================== */
+
+.pfg-lightbox-content {
+ position: relative !important;
+ max-width: 90vw !important;
+ max-height: 90vh !important;
+ margin: 0 !important;
+ padding: 0 !important;
+}
+
+.pfg-lightbox-image {
+ display: block !important;
+ max-width: 90vw !important;
+ max-height: 85vh !important;
+ object-fit: contain !important;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+}
+
+.pfg-lightbox--loaded .pfg-lightbox-image {
+ opacity: 1;
+}
+
+/* Video container */
+.pfg-lightbox-video {
+ width: 90vw !important;
+ max-width: 1200px !important;
+ aspect-ratio: 16 / 9;
+ background: #000 !important;
+ border: none !important;
+ border-radius: 0 !important;
+}
+
+.pfg-lightbox-video iframe {
+ width: 100% !important;
+ height: 100% !important;
+ border: none !important;
+}
+
+/* ==========================================================================
+ Caption - Isolated from theme styles
+ ========================================================================== */
+
+.pfg-lightbox-caption {
+ position: fixed !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ top: auto !important;
+ text-align: center !important;
+ color: #ffffff !important;
+ padding: 20px 60px !important;
+ margin: 0 !important;
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
+ z-index: 10 !important;
+ opacity: 0;
+ transform: translateY(20px);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+ line-height: 1.5 !important;
+ width: 100% !important;
+ max-width: none !important;
+}
+
+.pfg-lightbox--loaded .pfg-lightbox-caption {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.pfg-lightbox-title {
+ font-size: 18px !important;
+ font-weight: 600 !important;
+ margin: 0 0 6px 0 !important;
+ padding: 0 !important;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
+ color: #ffffff !important;
+ text-align: center !important;
+ line-height: 1.4 !important;
+ letter-spacing: 0 !important;
+ text-transform: none !important;
+ font-family: inherit !important;
+ border: none !important;
+ background: none !important;
+}
+
+.pfg-lightbox-description {
+ font-size: 14px !important;
+ font-weight: 400 !important;
+ opacity: 0.9;
+ margin: 0 auto !important;
+ padding: 0 !important;
+ max-width: 800px !important;
+ text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
+ color: #ffffff !important;
+ text-align: center !important;
+ line-height: 1.5 !important;
+ letter-spacing: 0 !important;
+ text-transform: none !important;
+ font-family: inherit !important;
+ border: none !important;
+ background: none !important;
+}
+
+/* ==========================================================================
+ Navigation
+ ========================================================================== */
+
+.pfg-lightbox-nav {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 50px;
+ height: 50px;
+ border: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: #fff;
+ font-size: 24px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s ease;
+ z-index: 10;
+}
+
+.pfg-lightbox-nav:hover {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.pfg-lightbox-nav:focus {
+ outline: 2px solid var(--pfg-lb-accent);
+ outline-offset: 2px;
+}
+
+.pfg-lightbox-nav--prev {
+ left: 20px;
+}
+
+.pfg-lightbox-nav--next {
+ right: 20px;
+}
+
+.pfg-lightbox-nav svg {
+ width: 24px !important;
+ height: 24px !important;
+ min-width: 24px;
+ flex-shrink: 0;
+}
+
+/* ==========================================================================
+ Close Button
+ ========================================================================== */
+
+.pfg-lightbox-close {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ width: 44px;
+ height: 44px;
+ border: none;
+ background: rgba(255, 255, 255, 0.1);
+ color: #fff;
+ font-size: 28px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s ease;
+ z-index: 10;
+}
+
+.pfg-lightbox-close:hover {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.pfg-lightbox-close:focus {
+ outline: 2px solid var(--pfg-lb-accent);
+ outline-offset: 2px;
+}
+
+.pfg-lightbox-close svg {
+ width: 20px !important;
+ height: 20px !important;
+ min-width: 20px;
+ flex-shrink: 0;
+}
+
+/* ==========================================================================
+ Counter
+ ========================================================================== */
+
+.pfg-lightbox-counter {
+ position: absolute;
+ top: 25px;
+ left: 20px;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 14px;
+ z-index: 10;
+}
+
+/* ==========================================================================
+ Thumbnails Strip (optional)
+ ========================================================================== */
+
+.pfg-lightbox-thumbs {
+ position: absolute;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 8px;
+ padding: 10px;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 8px;
+ max-width: 80vw;
+ overflow-x: auto;
+}
+
+.pfg-lightbox-thumb {
+ width: 60px;
+ height: 60px;
+ border: 2px solid transparent;
+ border-radius: 4px;
+ cursor: pointer;
+ overflow: hidden;
+ flex-shrink: 0;
+ opacity: 0.6;
+ transition: opacity 0.2s ease, border-color 0.2s ease;
+}
+
+.pfg-lightbox-thumb:hover {
+ opacity: 0.9;
+}
+
+.pfg-lightbox-thumb--active {
+ opacity: 1;
+ border-color: #fff;
+}
+
+.pfg-lightbox-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* ==========================================================================
+ Mobile Adjustments
+ ========================================================================== */
+
+@media (max-width: 768px) {
+ .pfg-lightbox-nav {
+ width: 40px;
+ height: 40px;
+ }
+
+ .pfg-lightbox-nav--prev {
+ left: 10px;
+ }
+
+ .pfg-lightbox-nav--next {
+ right: 10px;
+ }
+
+ .pfg-lightbox-close {
+ top: 10px;
+ right: 10px;
+ width: 40px;
+ height: 40px;
+ }
+
+ .pfg-lightbox-thumbs {
+ display: none;
+ }
+
+ .pfg-lightbox-caption {
+ bottom: 0;
+ background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+ padding: 30px 15px 15px;
+ }
+}
+
+/* ==========================================================================
+ Touch/Swipe support indicator
+ ========================================================================== */
+
+@media (pointer: coarse) {
+ .pfg-lightbox-nav {
+ opacity: 0.5;
+ }
+}
+
+/* ==========================================================================
+ Accessibility
+ ========================================================================== */
+
+.pfg-lightbox:focus {
+ outline: none;
+}
+
+.pfg-lightbox[aria-hidden="true"] {
+ display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .pfg-lightbox,
+ .pfg-lightbox-image,
+ .pfg-lightbox-nav,
+ .pfg-lightbox-close {
+ transition: none;
+ }
+
+ .pfg-lightbox--loading .pfg-lightbox-content::after {
+ animation: none;
+ }
+}
diff --git a/wp-content/plugins/portfolio-filter-gallery/public/js/pfg-gallery.js b/wp-content/plugins/portfolio-filter-gallery/public/js/pfg-gallery.js
new file mode 100644
index 0000000..f28641e
--- /dev/null
+++ b/wp-content/plugins/portfolio-filter-gallery/public/js/pfg-gallery.js
@@ -0,0 +1,1605 @@
+/**
+ * Portfolio Filter Gallery - Core JavaScript
+ * Vanilla JS - No jQuery dependency
+ * Supports multi-filter selection and AND/OR logic
+ *
+ * @package Portfolio_Filter_Gallery
+ * @version 2.1.0
+ */
+
+(function () {
+ "use strict";
+
+ /**
+ * Gallery class for handling filtering and interactions
+ */
+ class PFGGallery {
+ constructor(container) {
+ this.container = container;
+ this.galleryId = container.dataset.galleryId;
+ this.grid = container.querySelector(".pfg-grid");
+ this.filtersContainer = container.querySelector(".pfg-filters");
+ this.filters = container.querySelectorAll(".pfg-filter");
+ this.items = container.querySelectorAll(".pfg-item");
+ this.searchInput = container.querySelector(".pfg-search-input");
+ this.logicToggle = container.querySelector(".pfg-logic-toggle");
+
+ // Multi-filter settings
+ this.multiSelect = container.dataset.multiSelect === "true";
+ this.filterLogic = container.dataset.filterLogic || "or"; // 'and' or 'or'
+ this.activeFilters = new Set();
+ this.searchTerm = "";
+
+ // Deep linking settings
+ this.deepLinking = container.dataset.deepLinking === "true";
+ this.urlParam = container.dataset.urlParam || "filter";
+ this.defaultFilter = container.dataset.defaultFilter || "";
+
+ // Filter hierarchy (parent slug => array of child slugs)
+ this.filterHierarchy = {};
+ try {
+ this.filterHierarchy = JSON.parse(
+ container.dataset.filterHierarchy || "{}"
+ );
+ } catch (e) {
+ console.warn("PFG: Failed to parse filter hierarchy", e);
+ }
+
+ this.init();
+ }
+
+ init() {
+ this.bindFilters();
+ this.bindSearch();
+ this.bindLogicToggle();
+ this.initLazyLoading();
+ this.assignStaggerDelays();
+ this.initDeepLinking();
+ this.initPackedLayout();
+ this.initPreloader();
+ }
+
+ /**
+ * Initialize preloader - hide after images load
+ */
+ initPreloader() {
+ // Check if all images are already loaded (cached)
+ const images = Array.from(this.container.querySelectorAll('.pfg-grid img'));
+ const allLoaded = images.every(img => img.complete && img.naturalHeight !== 0);
+
+ if (allLoaded) {
+ // Images already loaded, remove preloader immediately
+ this.removePreloader();
+ return;
+ }
+
+ // Wait for images to load
+ this.waitForImagesMain().then(() => {
+ this.removePreloader();
+ });
+
+ // Fallback: always hide preloader after 3 seconds max
+ setTimeout(() => {
+ this.removePreloader();
+ }, 3000);
+ }
+
+ /**
+ * Wait for images in main grid
+ */
+ waitForImagesMain() {
+ const images = Array.from(this.container.querySelectorAll('.pfg-grid img'));
+ const promises = images.map((img) => {
+ if (img.complete) {
+ return Promise.resolve();
+ }
+ return new Promise((resolve) => {
+ img.addEventListener('load', resolve, { once: true });
+ img.addEventListener('error', resolve, { once: true });
+ // Timeout fallback
+ setTimeout(resolve, 5000);
+ });
+ });
+ return Promise.all(promises);
+ }
+
+ /**
+ * Remove preloader and show gallery
+ */
+ removePreloader() {
+ this.container.classList.remove('pfg-loading');
+ this.container.classList.add('pfg-loaded');
+ }
+
+ /**
+ * Initialize URL filter and default filter
+ * URL param ALWAYS works, Deep Linking only controls URL updates on click
+ */
+ initDeepLinking() {
+ // Check URL param first (highest priority, always works)
+ const urlParams = new URLSearchParams(window.location.search);
+ const urlFilter = urlParams.get(this.urlParam);
+
+ if (urlFilter) {
+ this.activateFilterBySlug(urlFilter);
+ return;
+ }
+
+ // Otherwise, activate default filter if set
+ if (this.defaultFilter) {
+ this.activateFilterBySlug(this.defaultFilter);
+ } else {
+ // No URL filter and no default filter - activate "All" button
+ const allBtn = this.container.querySelector('[data-filter="*"]');
+ if (allBtn) {
+ allBtn.classList.add("pfg-filter--active");
+ }
+ }
+ }
+
+ /**
+ * Activate a filter by its slug
+ */
+ activateFilterBySlug(slug) {
+ const filterBtn = this.container.querySelector(
+ `.pfg-filter[data-filter="${slug}"]`
+ );
+ if (filterBtn) {
+ this.setSingleFilter(slug, filterBtn);
+ this.filterItems();
+ }
+ }
+
+ /**
+ * Update URL with current filter (deep linking)
+ */
+ updateUrl(filter) {
+ if (!this.deepLinking) return;
+
+ const url = new URL(window.location.href);
+
+ if (filter === "*" || !filter) {
+ url.searchParams.delete(this.urlParam);
+ } else {
+ url.searchParams.set(this.urlParam, filter);
+ }
+
+ window.history.replaceState({}, "", url.toString());
+ }
+
+ /**
+ * Assign stagger delays to items for animation
+ */
+ assignStaggerDelays() {
+ this.items.forEach((item, index) => {
+ item.dataset.delay = (index % 6) + 1;
+ });
+ }
+
+ /**
+ * Bind filter button click events
+ */
+ bindFilters() {
+ this.filters.forEach((filter) => {
+ filter.addEventListener("click", (e) => {
+ e.preventDefault();
+ const filterValue = filter.dataset.filter;
+
+ if (this.multiSelect && filterValue !== "*") {
+ // Multi-select mode: toggle filter
+ this.toggleFilter(filterValue, filter);
+ } else {
+ // Single-select mode or "All" clicked
+ this.setSingleFilter(filterValue, filter);
+ }
+
+ this.filterItems();
+ });
+ });
+ }
+
+ /**
+ * Toggle a filter in multi-select mode
+ */
+ toggleFilter(filter, button) {
+ if (this.activeFilters.has(filter)) {
+ this.activeFilters.delete(filter);
+ button.classList.remove("pfg-filter--selected", "pfg-filter--active");
+ } else {
+ this.activeFilters.add(filter);
+ button.classList.add("pfg-filter--selected", "pfg-filter--active");
+ }
+
+ // Update "All" button state
+ const allBtn = this.container.querySelector('[data-filter="*"]');
+ if (allBtn) {
+ if (this.activeFilters.size === 0) {
+ allBtn.classList.add("pfg-filter--active");
+ } else {
+ allBtn.classList.remove("pfg-filter--active");
+ }
+ }
+ }
+
+ /**
+ * Set single active filter (clears others)
+ */
+ setSingleFilter(filter, button) {
+ this.activeFilters.clear();
+
+ if (filter !== "*") {
+ this.activeFilters.add(filter);
+ }
+
+ // Update button states
+ this.filters.forEach((btn) => {
+ btn.classList.remove("pfg-filter--active", "pfg-filter--selected");
+ });
+ button.classList.add("pfg-filter--active");
+
+ // Update URL for deep linking
+ this.updateUrl(filter);
+ }
+
+ /**
+ * Bind search input events
+ */
+ bindSearch() {
+ if (!this.searchInput) return;
+
+ let debounceTimer;
+ this.searchInput.addEventListener("input", (e) => {
+ clearTimeout(debounceTimer);
+ debounceTimer = setTimeout(() => {
+ this.searchTerm = e.target.value.toLowerCase().trim();
+ this.filterItems();
+ }, 300);
+ });
+ }
+
+ /**
+ * Bind AND/OR logic toggle
+ */
+ bindLogicToggle() {
+ if (!this.logicToggle) return;
+
+ const buttons = this.logicToggle.querySelectorAll(".pfg-logic-btn");
+ buttons.forEach((btn) => {
+ btn.addEventListener("click", () => {
+ this.filterLogic = btn.dataset.logic;
+
+ // Update container dataset so AJAX picks up the current logic
+ this.container.dataset.filterLogic = this.filterLogic;
+
+ // Update button states
+ buttons.forEach((b) => b.classList.remove("pfg-logic-btn--active"));
+ btn.classList.add("pfg-logic-btn--active");
+
+ this.filterItems();
+ });
+ });
+ }
+
+ /**
+ * Filter gallery items with smooth FLIP animation
+ * FLIP = First, Last, Invert, Play - for smooth position animations
+ */
+ filterItems() {
+ // Re-query items from DOM to include any dynamically loaded items (Load More)
+ this.items = this.container.querySelectorAll(".pfg-item");
+
+ // FLIP Step 1: FIRST - Record current positions of ALL items
+ const firstPositions = new Map();
+ this.items.forEach((item) => {
+ if (!item.classList.contains("pfg-item--hidden")) {
+ const rect = item.getBoundingClientRect();
+ firstPositions.set(item, { x: rect.left, y: rect.top });
+ }
+ });
+
+ let visibleIndex = 0;
+ const itemsToShow = [];
+ const itemsToHide = [];
+ const itemsToAnimate = []; // Items that stay visible but may move
+
+ // Determine which items to show/hide
+ this.items.forEach((item) => {
+ const matchesFilter = this.itemMatchesFilter(item);
+ const matchesSearch = this.itemMatchesSearch(item);
+ const wasVisible = !item.classList.contains("pfg-item--hidden");
+
+ if (matchesFilter && matchesSearch) {
+ if (wasVisible) {
+ itemsToAnimate.push(item); // Already visible, may need to move
+ } else {
+ itemsToShow.push({ item, index: visibleIndex }); // Newly shown
+ }
+ visibleIndex++;
+ } else if (wasVisible) {
+ itemsToHide.push(item); // Was visible, now hiding
+ }
+ });
+
+ // Phase 1: Apply HIDING animation (fade out while staying in layout)
+ itemsToHide.forEach((item) => {
+ item.classList.remove("pfg-item--visible", "pfg-item--hidden");
+ item.classList.add("pfg-item--hiding");
+ });
+
+ // Phase 2: After hide animation, collapse and apply FLIP
+ setTimeout(() => {
+ // Collapse hidden items from layout
+ itemsToHide.forEach((item) => {
+ item.classList.remove("pfg-item--hiding");
+ item.classList.add("pfg-item--hidden");
+ });
+
+ // Show new items - apply inline styles FIRST to prevent CSS animation conflict
+ itemsToShow.forEach(({ item }) => {
+ // Remove hidden state
+ item.classList.remove("pfg-item--hidden", "pfg-item--hiding");
+ // Apply starting state BEFORE adding visible class
+ item.style.opacity = "0";
+ item.style.transform = "scale(0.9)";
+ item.style.transition = "none"; // Prevent any transition during setup
+ });
+
+ // Force reflow to get new positions
+ void this.container.offsetHeight;
+
+ // FLIP Step 2: LAST - Get new positions
+ const lastPositions = new Map();
+ [...itemsToAnimate, ...itemsToShow.map(i => i.item)].forEach((item) => {
+ const rect = item.getBoundingClientRect();
+ lastPositions.set(item, { x: rect.left, y: rect.top });
+ });
+
+ // FLIP Step 3: INVERT - Apply inverse transform (so items appear in old position)
+ itemsToAnimate.forEach((item) => {
+ const first = firstPositions.get(item);
+ const last = lastPositions.get(item);
+
+ // IMPORTANT: Explicitly set opacity to prevent CSS transition from causing double fade
+ item.style.opacity = "1";
+
+ // For items with recorded first position: do full FLIP animation
+ if (first && last) {
+ const deltaX = first.x - last.x;
+ const deltaY = first.y - last.y;
+
+ // Check if item moved significantly
+ const didMove = Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1;
+
+ // Disable transition and apply inverse transform with scale
+ item.style.transition = "none";
+ if (didMove) {
+ // Item moved - apply inverse position + slight scale down
+ item.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(0.97)`;
+ } else {
+ // Item didn't move - just add subtle scale pulse
+ item.style.transform = "scale(0.97)";
+ }
+
+ // Force reflow
+ void item.offsetHeight;
+
+ // FLIP Step 4: PLAY - Enable ONLY transform transition (not opacity)
+ item.style.transition = "transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)";
+ item.style.transform = "translate(0, 0) scale(1)";
+ } else {
+ // For items without recorded first position (e.g., Load More items):
+ // Just do a subtle scale pulse animation
+ item.style.transition = "none";
+ item.style.transform = "scale(0.97)";
+
+ // Force reflow
+ void item.offsetHeight;
+
+ item.style.transition = "transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)";
+ item.style.transform = "scale(1)";
+ }
+ });
+
+ // Animate in new items with stagger
+ itemsToShow.forEach(({ item, index }) => {
+ const delay = index * 50;
+ setTimeout(() => {
+ item.style.transition = "opacity 0.3s ease-out, transform 0.3s ease-out";
+ item.style.opacity = "1";
+ item.style.transform = "scale(1)";
+ }, delay);
+ });
+
+ // Clean up inline styles after animation and add proper CSS classes
+ setTimeout(() => {
+ itemsToAnimate.forEach((item) => {
+ item.style.transition = "";
+ item.style.transform = "";
+ item.style.opacity = "";
+ });
+ itemsToShow.forEach(({ item }) => {
+ item.style.transition = "";
+ item.style.transform = "";
+ item.style.opacity = "";
+ // Now add visible class after animation is done
+ item.classList.add("pfg-item--visible");
+ });
+ }, 500);
+
+ }, 280); // Wait for hide animation to complete
+
+ // Dispatch custom event for other scripts
+ this.container.dispatchEvent(
+ new CustomEvent("pfg:filtered", {
+ bubbles: true,
+ detail: {
+ filters: Array.from(this.activeFilters),
+ logic: this.filterLogic,
+ search: this.searchTerm,
+ visibleCount: visibleIndex,
+ },
+ })
+ );
+
+ // Update numbered pagination after filtering
+ this.updateNumberedPaginationAfterFilter();
+
+ // Reset Load More button visibility when filter changes
+ // Show button if pagination is enabled and there might be more items
+ this.resetLoadMoreButton();
+ }
+
+ /**
+ * Reset Load More button visibility when filter changes
+ * Shows the button if there are more items to load for the current filter
+ */
+ resetLoadMoreButton() {
+ const gallery = this.container.closest(".pfg-gallery-wrapper");
+ if (!gallery) return;
+
+ const btn = gallery.querySelector(".pfg-load-more");
+ if (!btn) return;
+
+ const isPaginationEnabled = gallery.dataset.pagination === "true";
+ if (!isPaginationEnabled) return;
+
+ // Get current active filter(s)
+ const isAllFilter = this.activeFilters.size === 0 || this.activeFilters.has("*");
+
+ let filterTotal = 0;
+ let loadedMatching = 0;
+
+ if (isAllFilter) {
+ // For "All" filter, use global total
+ filterTotal = parseInt(gallery.dataset.totalItems) || 0;
+ loadedMatching = gallery.querySelectorAll(".pfg-item").length;
+ } else {
+ // For specific filter, get count from filter button
+ const activeFilterSlug = Array.from(this.activeFilters)[0];
+ const filterBtn = this.container.querySelector(`.pfg-filter[data-filter="${activeFilterSlug}"]`);
+
+ if (filterBtn) {
+ // Try to get count from button text (e.g., "Wedding Portraits (2)")
+ const countMatch = filterBtn.textContent.match(/\((\d+)\)/);
+ if (countMatch) {
+ filterTotal = parseInt(countMatch[1]) || 0;
+ }
+ }
+
+ // Count how many items matching this filter are already in DOM
+ // Use itemMatchesFilter to properly handle parent/child filter relationships
+ const allItems = gallery.querySelectorAll(".pfg-item");
+ allItems.forEach(item => {
+ if (this.itemMatchesFilter(item)) {
+ loadedMatching++;
+ }
+ });
+ }
+
+ const remaining = filterTotal - loadedMatching;
+
+ if (remaining > 0) {
+ // Show button with accurate remaining count
+ btn.style.display = "";
+ const countEl = btn.querySelector(".pfg-load-more-count");
+ if (countEl) {
+ countEl.textContent = `(${remaining} remaining)`;
+ countEl.style.display = ""; // Ensure count is visible (may have been hidden by AJAX response)
+ }
+ } else {
+ // No more items for this filter - hide button
+ btn.style.display = "none";
+ }
+ }
+
+ /**
+ * Apply mosaic layout with FLIP animation for smooth repositioning
+ */
+ applyMosaicLayoutWithFLIP(firstPositions) {
+ // Apply new layout (this sets new --pfg-x and --pfg-y values)
+ this.applyMosaicLayout();
+
+ // FLIP Step 2 & 3: After layout applied, calculate inverse transforms
+ // The CSS will handle the smooth animation via transition
+ }
+
+ /**
+ * Check if item matches current filter(s)
+ */
+ itemMatchesFilter(item) {
+ // No filters active = show all
+ if (this.activeFilters.size === 0) return true;
+
+ const itemFilters = this.getItemFilters(item);
+
+ // Expand active filters to include their children
+ const expandedFilters = this.expandFiltersWithChildren([
+ ...this.activeFilters,
+ ]);
+
+ if (this.filterLogic === "and") {
+ // AND logic: item must match ALL active filters (or their children)
+ const result = [...this.activeFilters].every((filter) => {
+ const filterAndChildren = [
+ filter,
+ ...(this.filterHierarchy[filter] || []),
+ ];
+ const matches = filterAndChildren.some((f) => itemFilters.includes(f));
+ return matches;
+ });
+ return result;
+ } else {
+ // OR logic: item must match ANY active filter (or their children)
+ return expandedFilters.some((filter) => itemFilters.includes(filter));
+ }
+ }
+
+ /**
+ * Expand filter list to include all child filters
+ */
+ expandFiltersWithChildren(filters) {
+ const expanded = new Set(filters);
+ filters.forEach((filter) => {
+ if (this.filterHierarchy[filter]) {
+ this.filterHierarchy[filter].forEach((child) => expanded.add(child));
+ }
+ });
+ return [...expanded];
+ }
+
+ /**
+ * Get all filter slugs for an item
+ */
+ getItemFilters(item) {
+ const classes = Array.from(item.classList);
+ return classes
+ .filter((c) => c.startsWith("pfg-filter-"))
+ .map((c) => c.replace("pfg-filter-", ""));
+ }
+
+ /**
+ * Check if item matches search term
+ */
+ itemMatchesSearch(item) {
+ if (!this.searchTerm) return true;
+
+ const title = item.querySelector(".pfg-item-title");
+ const alt = item.querySelector(".pfg-item-image")?.alt || "";
+
+ const searchableText = (title?.textContent || "") + " " + alt;
+ return searchableText.toLowerCase().includes(this.searchTerm);
+ }
+
+ /**
+ * Show an item with smooth animation
+ */
+ showItem(item, index) {
+ // Remove hidden class
+ item.classList.remove("pfg-item--hidden");
+
+ // Remove any previous visible class and re-add for animation
+ item.classList.remove("pfg-item--visible");
+
+ // Force reflow to restart animation
+ void item.offsetWidth;
+
+ // Add visible class with stagger delay for smooth sequential animation
+ const delay = (index % 8) * 50; // 50ms stagger between items
+ setTimeout(() => {
+ item.classList.add("pfg-item--visible");
+ }, delay);
+
+ // Reset inline styles
+ item.style.maxHeight = "";
+ item.style.margin = "";
+ item.style.padding = "";
+ }
+
+ /**
+ * Hide an item with smooth animation
+ */
+ hideItem(item) {
+ // Just add hidden class - CSS handles animation
+ item.classList.add("pfg-item--hidden");
+ }
+
+ /**
+ * Initialize lazy loading for images
+ */
+ initLazyLoading() {
+ if ("loading" in HTMLImageElement.prototype) {
+ // Native lazy loading supported
+ return;
+ }
+
+ // Fallback for browsers without native lazy loading
+ if ("IntersectionObserver" in window) {
+ const imageObserver = new IntersectionObserver(
+ (entries, observer) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ if (img.dataset.src) {
+ img.src = img.dataset.src;
+ img.removeAttribute("data-src");
+ }
+ observer.unobserve(img);
+ }
+ });
+ },
+ {
+ rootMargin: "50px 0px",
+ }
+ );
+
+ this.items.forEach((item) => {
+ const img = item.querySelector("img[data-src]");
+ if (img) {
+ imageObserver.observe(img);
+ }
+ });
+ }
+ }
+
+ /**
+ * Initialize Packed layout with JS positioning for correct sort order
+ * Note: Masonry now uses CSS columns - no JavaScript positioning needed
+ */
+ initPackedLayout() {
+ // Check if this is a packed-cards layout (JS positioning needed)
+ // Masonry uses CSS columns now - no JS positioning required
+ const packedCardsGrid = this.grid?.classList.contains(
+ "pfg-grid--packed-cards"
+ );
+
+ if (!packedCardsGrid) {
+ return;
+ }
+
+ // Mark that this gallery uses mosaic layout
+ this.usesMosaicLayout = true;
+
+ // Wait for all images to load before calculating layout
+ this.waitForImages().then(() => {
+ this.applyMosaicLayout();
+ });
+
+ // Re-apply on resize with debounce
+ let resizeTimeout;
+ window.addEventListener("resize", () => {
+ clearTimeout(resizeTimeout);
+ resizeTimeout = setTimeout(() => {
+ if (this.usesMosaicLayout) {
+ this.applyMosaicLayout();
+ }
+ }, 200);
+ });
+ }
+
+ /**
+ * Wait for all images to load
+ */
+ waitForImages() {
+ const images = Array.from(this.grid.querySelectorAll("img"));
+ const promises = images.map((img) => {
+ if (img.complete) {
+ return Promise.resolve();
+ }
+ return new Promise((resolve) => {
+ img.addEventListener("load", resolve, { once: true });
+ img.addEventListener("error", resolve, { once: true });
+ });
+ });
+ return Promise.all(promises);
+ }
+
+ /**
+ * Apply mosaic/packed layout with absolute positioning
+ * Uses requestAnimationFrame for reliable caption height measurement
+ * Note: Masonry uses CSS columns - skipped here
+ */
+ applyMosaicLayout() {
+ if (!this.grid) return;
+
+ // Skip masonry - CSS columns handle it now
+ const isMasonry = this.grid.classList.contains("pfg-grid--masonry");
+ if (isMasonry) return;
+
+ const items = Array.from(
+ this.grid.querySelectorAll(".pfg-item:not(.pfg-item--hidden)")
+ );
+ if (items.length === 0) return;
+
+ const containerWidth = this.grid.offsetWidth;
+ const gap =
+ parseInt(getComputedStyle(this.grid).getPropertyValue("--pfg-gap")) ||
+ 10;
+
+ // Calculate columns from min-size for packed layout
+ const minSize =
+ parseInt(
+ getComputedStyle(this.grid).getPropertyValue("--pfg-packed-min")
+ ) || 200;
+ const cols = Math.max(2, Math.floor(containerWidth / (minSize + gap)));
+
+ const colWidth = (containerWidth - gap * (cols - 1)) / cols;
+
+ // Prepare item data with widths
+ const itemData = [];
+
+ items.forEach((item, index) => {
+ const img = item.querySelector("img");
+ const imgLink = item.querySelector(".pfg-item-link");
+ const caption = item.querySelector(".pfg-item-caption");
+
+ // Get image aspect ratio
+ let aspectRatio = 1;
+ if (img && img.naturalWidth && img.naturalHeight) {
+ aspectRatio = img.naturalWidth / img.naturalHeight;
+ }
+
+ // Determine column span - only for packed layout, masonry is always single column
+ let itemCols = 1;
+ if (!isMasonry && aspectRatio > 1.5 && cols >= 3 && index % 4 === 0) {
+ itemCols = 2;
+ }
+
+ const itemWidth = colWidth * itemCols + gap * (itemCols - 1);
+ const imgHeight = Math.round(itemWidth / aspectRatio);
+
+ // Set item width and image height
+ // Disable transitions for initial positioning if item is new (not yet positioned)
+ const isNewItem = !item.classList.contains("pfg-item--positioned");
+ if (isNewItem) {
+ item.style.transition = "none";
+ }
+
+ item.style.position = "absolute";
+ item.style.width = itemWidth + "px";
+
+ if (imgLink) {
+ imgLink.style.display = "block";
+ imgLink.style.width = "100%";
+ imgLink.style.height = imgHeight + "px";
+ imgLink.style.overflow = "hidden";
+ }
+
+ if (img) {
+ img.style.width = "100%";
+ img.style.height = "100%";
+ img.style.objectFit = "cover";
+ }
+
+ itemData.push({
+ item,
+ itemCols,
+ imgHeight,
+ itemWidth,
+ caption,
+ });
+ });
+
+ // Use setTimeout to ensure DOM has fully rendered captions
+ setTimeout(() => {
+ // Track column heights
+ const colHeights = new Array(cols).fill(0);
+ let visibleIndex = 0;
+
+ itemData.forEach((data) => {
+ const { item, itemCols, imgHeight, caption, itemWidth } = data;
+
+ // Skip hidden items
+ if (item.classList.contains("pfg-item--hidden")) {
+ return;
+ }
+
+ // Measure caption height - use fallback if 0
+ let captionHeight = 0;
+ if (caption) {
+ captionHeight = Math.ceil(caption.getBoundingClientRect().height);
+ // Fallback: if caption exists but height is 0, estimate it
+ if (captionHeight === 0) {
+ captionHeight = 50; // Fallback for 2 lines of text
+ }
+ }
+
+ // Round up to prevent fractional pixel gaps
+ const itemHeight = Math.ceil(imgHeight + captionHeight);
+
+ // Column selection differs by layout type
+ let bestCol;
+ if (isMasonry) {
+ // Masonry: use shortest column for Pinterest-style layout
+ bestCol = 0;
+ for (let c = 1; c < cols; c++) {
+ if (colHeights[c] < colHeights[bestCol]) {
+ bestCol = c;
+ }
+ }
+ } else {
+ // Packed/other: use round-robin to preserve sort order
+ bestCol = visibleIndex % cols;
+ // For multi-column items, place in first column that fits
+ if (itemCols > 1) {
+ bestCol = Math.min(bestCol, cols - itemCols);
+ }
+ }
+
+ // Get the height at this column position
+ let minHeight = colHeights[bestCol];
+ if (itemCols > 1) {
+ minHeight = Math.max(...colHeights.slice(bestCol, bestCol + itemCols));
+ }
+
+ // Calculate position - round to whole pixels for crisp rendering
+ const x = Math.round(bestCol * (colWidth + gap));
+ const y = Math.round(minHeight);
+
+ // Use CSS custom properties for GPU-accelerated transform positioning
+ const isFirstPosition = !item.classList.contains("pfg-item--positioned");
+
+ if (isFirstPosition) {
+ // First time positioning - disable transition for instant placement
+ item.classList.add("pfg-item--flip-first");
+ }
+
+ // Set position via CSS custom properties (used by transform in CSS)
+ item.style.setProperty("--pfg-x", x + "px");
+ item.style.setProperty("--pfg-y", y + "px");
+
+ // Add staggered delay for smooth cascade effect
+ item.style.setProperty(
+ "--pfg-stagger-delay",
+ visibleIndex * 30 + "ms"
+ );
+
+ if (isFirstPosition) {
+ // Force reflow to apply position without transition
+ item.offsetHeight;
+ // Enable transitions and mark as positioned
+ item.classList.remove("pfg-item--flip-first");
+ item.classList.add("pfg-item--positioned");
+ }
+
+ // Update column heights
+ for (let c = bestCol; c < bestCol + itemCols && c < cols; c++) {
+ colHeights[c] = y + itemHeight + gap;
+ }
+
+ visibleIndex++;
+ });
+
+ // Set container height
+ const maxHeight = Math.max(...colHeights, 0);
+ this.grid.style.position = "relative";
+ this.grid.style.height = Math.ceil(maxHeight) + "px";
+ }, 50);
+ }
+
+ /**
+ * Public method to re-apply mosaic layout (called after Load More)
+ */
+ refreshMosaicLayout() {
+ if (this.usesMosaicLayout) {
+ // Update items reference
+ this.items = this.container.querySelectorAll(".pfg-item");
+
+ this.waitForImages().then(() => {
+ this.applyMosaicLayout();
+ });
+ }
+ }
+
+ /**
+ * Public API: Set filter logic programmatically
+ */
+ setLogic(logic) {
+ if (logic === "and" || logic === "or") {
+ this.filterLogic = logic;
+ this.filterItems();
+ }
+ }
+
+ /**
+ * Public API: Add a filter programmatically
+ */
+ addFilter(filter) {
+ this.activeFilters.add(filter);
+ this.filterItems();
+ }
+
+ /**
+ * Public API: Clear all filters
+ */
+ clearFilters() {
+ this.activeFilters.clear();
+ this.filters.forEach((btn) => {
+ btn.classList.remove("pfg-filter--active", "pfg-filter--selected");
+ });
+ const allBtn = this.container.querySelector('[data-filter="*"]');
+ if (allBtn) allBtn.classList.add("pfg-filter--active");
+ this.filterItems();
+ }
+
+ /**
+ * Update numbered pagination after filtering
+ * Re-paginates only the visible (filtered) items
+ */
+ updateNumberedPaginationAfterFilter() {
+ const paginationWrap = this.container.querySelector(
+ ".pfg-numbered-pagination"
+ );
+ if (!paginationWrap) return;
+
+ const itemsPerPage = parseInt(this.container.dataset.itemsPerPage) || 12;
+
+ // Get only visible (non-filtered-hidden) items
+ const visibleItems = Array.from(
+ this.container.querySelectorAll(".pfg-item:not(.pfg-item--hidden)")
+ );
+ const totalVisible = visibleItems.length;
+ const totalPages = Math.ceil(totalVisible / itemsPerPage);
+
+ // Show first page of filtered items, hide rest
+ visibleItems.forEach((item, index) => {
+ if (index < itemsPerPage) {
+ item.classList.remove("pfg-item--paginated-hidden");
+ } else {
+ item.classList.add("pfg-item--paginated-hidden");
+ }
+ });
+
+ // Rebuild pagination buttons
+ paginationWrap.innerHTML = "";
+ for (let i = 1; i <= totalPages; i++) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.className = "pfg-pagination-btn" + (i === 1 ? " active" : "");
+ btn.dataset.page = i;
+ btn.textContent = i;
+ paginationWrap.appendChild(btn);
+ }
+
+ // Hide pagination if only one page
+ paginationWrap.style.display = totalPages <= 1 ? "none" : "";
+ }
+ }
+
+ /**
+ * Pagination handler class
+ */
+ class PFGPagination {
+ constructor() {
+ this.init();
+ }
+
+ init() {
+ this.bindLoadMore();
+ this.bindNumberedPagination();
+ this.initInfiniteScroll();
+ this.bindFilterReset();
+ }
+
+ /**
+ * Listen for filter changes to reset pagination
+ * NOTE: Disabled - items loaded via Load More now persist until page reload
+ * Client-side filtering handles show/hide without AJAX reset
+ */
+ bindFilterReset() {
+ // Removed: AJAX reset on filter change
+ // Items loaded via Load More now stay in DOM and are filtered client-side
+ // This provides better UX - users don't lose loaded items when filtering
+
+ // document.addEventListener("pfg:filtered", (e) => {
+ // const gallery = e.target.closest(".pfg-gallery-wrapper");
+ // if (gallery && gallery.dataset.pagination === "true") {
+ // this.resetPagination(gallery);
+ // }
+ // });
+ }
+
+ /**
+ * Bind Load More button clicks
+ */
+ bindLoadMore() {
+ document.addEventListener("click", (e) => {
+ const btn = e.target.closest(".pfg-load-more");
+ if (!btn) return;
+
+ const gallery = btn.closest(".pfg-gallery-wrapper");
+ this.loadMoreItems(gallery, btn);
+ });
+ }
+
+ /**
+ * Bind numbered pagination clicks
+ */
+ bindNumberedPagination() {
+ document.addEventListener("click", (e) => {
+ const btn = e.target.closest(".pfg-pagination-btn");
+ if (!btn || btn.disabled || btn.classList.contains("active")) return;
+
+ const gallery = btn.closest(".pfg-gallery-wrapper");
+ const page = parseInt(btn.dataset.page);
+
+ this.goToPage(gallery, page);
+ });
+ }
+
+ /**
+ * Navigate to specific page (numbered pagination)
+ */
+ goToPage(gallery, page) {
+ const items = gallery.querySelectorAll(
+ ".pfg-item:not(.pfg-item--hidden)"
+ );
+ const itemsPerPage = parseInt(gallery.dataset.itemsPerPage) || 12;
+ const startIndex = (page - 1) * itemsPerPage;
+ const endIndex = startIndex + itemsPerPage;
+
+ items.forEach((item, index) => {
+ if (index >= startIndex && index < endIndex) {
+ item.classList.remove("pfg-item--paginated-hidden");
+ } else {
+ item.classList.add("pfg-item--paginated-hidden");
+ }
+ });
+
+ // Update pagination buttons
+ gallery.querySelectorAll(".pfg-pagination-btn").forEach((btn) => {
+ btn.classList.toggle("active", parseInt(btn.dataset.page) === page);
+ });
+
+ // Scroll to gallery
+ gallery.scrollIntoView({ behavior: "smooth", block: "start" });
+ }
+
+ /**
+ * Load more items via AJAX
+ * NOTE: Always loads ALL items regardless of current filter
+ * Client-side filtering handles show/hide after loading
+ */
+ async loadMoreItems(gallery, btn) {
+ const galleryId = gallery.dataset.galleryId;
+ const itemsPerPage = parseInt(gallery.dataset.itemsPerPage) || 12;
+ const currentPage = parseInt(gallery.dataset.currentPage) || 1;
+ const nextPage = currentPage + 1;
+
+ // Get current active filter to load matching items
+ const pfgGallery = gallery.pfgGallery;
+ const activeFilters = pfgGallery ? pfgGallery.activeFilters : new Set();
+ const isMultiSelect = gallery.dataset.multiSelect === "true";
+
+ // Build filter parameter based on active filters
+ let filter = "*";
+ if (activeFilters.size > 0 && !activeFilters.has("*")) {
+ filter = Array.from(activeFilters).join(",");
+ }
+
+ // Use total items count (not filtered count)
+ const totalItems = parseInt(gallery.dataset.totalItems) || 0;
+
+ // Calculate how many are already loaded
+ const loadedCount = gallery.querySelectorAll(".pfg-item").length;
+
+ // Check if all items are already loaded
+ if (loadedCount >= totalItems) {
+ if (btn) btn.style.display = "none";
+ return;
+ }
+
+ if (btn) {
+ btn.classList.add("loading");
+ const spinner = btn.querySelector(".pfg-load-more-spinner");
+ const text = btn.querySelector(".pfg-load-more-text");
+ if (spinner) spinner.style.display = "inline-block";
+ if (text) text.textContent = "Loading...";
+ }
+
+ try {
+ // Track the filter used for this load (so resetPagination knows if we need to reload for "All")
+ gallery.dataset.lastLoadFilter = filter;
+
+ // Get IDs of already loaded items to avoid duplicates
+ const existingItems = gallery.querySelectorAll(".pfg-item");
+ const excludeIds = Array.from(existingItems)
+ .map(item => item.dataset.id)
+ .filter(id => id);
+
+ // Calculate offset based on items already in DOM
+ const offset = existingItems.length;
+
+ // Make AJAX request
+ const formData = new FormData();
+ formData.append("action", "pfg_load_more");
+ formData.append("gallery_id", galleryId);
+ formData.append("page", nextPage);
+ formData.append("items_per_page", itemsPerPage);
+ formData.append("filter", filter);
+ formData.append("filter_logic", gallery.dataset.filterLogic || "or");
+ formData.append("nonce", window.pfgData?.nonce || "");
+ formData.append("offset", offset);
+ formData.append("exclude_ids", excludeIds.join(","));
+
+ const response = await fetch(
+ window.pfgData?.ajaxUrl || "/wp-admin/admin-ajax.php",
+ {
+ method: "POST",
+ body: formData,
+ }
+ );
+
+ const data = await response.json();
+
+ if (data.success && data.data.html) {
+ // Append new items to grid
+ const grid = gallery.querySelector(".pfg-grid");
+ if (grid) {
+ // Check if using mosaic layout (packed-cards OR masonry)
+ const isMosaicLayout = grid.classList.contains("pfg-grid--packed-cards") ||
+ grid.classList.contains("pfg-grid--masonry");
+
+ // Create temp container to parse HTML
+ const temp = document.createElement("div");
+ temp.innerHTML = data.data.html;
+
+ // Note: Items are pre-filtered by server based on current filter
+ // No client-side filter check needed - just animate all received items
+
+ if (isMosaicLayout) {
+ // For mosaic/masonry layout: add items with animation
+ // Items are already filtered by server, so all loaded items should be shown
+ Array.from(temp.children).forEach((item, i) => {
+ // Add visible class for filtering state
+ item.classList.add("pfg-item--visible");
+
+ // Start hidden for animation
+ item.style.opacity = "0";
+ item.style.transform = "scale(0.9)";
+ item.style.transition = "none";
+ grid.appendChild(item);
+
+ // Trigger animation with stagger
+ requestAnimationFrame(() => {
+ setTimeout(() => {
+ item.style.transition = "opacity 0.3s ease-out, transform 0.3s ease-out";
+ item.style.opacity = "1";
+ item.style.transform = "scale(1)";
+
+ // Clean up inline styles after animation
+ setTimeout(() => {
+ item.style.transition = "";
+ item.style.opacity = "";
+ item.style.transform = "";
+ }, 350);
+ }, i * 50);
+ });
+ });
+
+ // Refresh mosaic layout after items added
+ if (
+ gallery.pfgGallery &&
+ gallery.pfgGallery.refreshMosaicLayout
+ ) {
+ setTimeout(() => {
+ gallery.pfgGallery.refreshMosaicLayout();
+ }, 100);
+ }
+ } else {
+ // For other layouts: animate each new item
+ // Items are already filtered by server, so all loaded items should be shown
+ Array.from(temp.children).forEach((item, i) => {
+ // Add visible class for filtering state
+ item.classList.add("pfg-item--visible");
+
+ // Start hidden for animation
+ item.style.opacity = "0";
+ item.style.transform = "translateY(20px) scale(0.95)";
+ item.style.transition = "none";
+ grid.appendChild(item);
+
+ // Trigger animation with stagger
+ requestAnimationFrame(() => {
+ setTimeout(() => {
+ item.style.transition =
+ "opacity 0.3s ease, transform 0.3s ease";
+ item.style.opacity = "1";
+ item.style.transform = "translateY(0) scale(1)";
+
+ // Clean up inline styles after animation
+ setTimeout(() => {
+ item.style.transition = "";
+ item.style.opacity = "";
+ item.style.transform = "";
+ }, 350);
+ }, i * 50);
+ });
+ });
+ }
+ }
+
+ // Update state
+ gallery.dataset.currentPage = nextPage;
+
+ // Update remaining count
+ this.updateLoadMoreCount(gallery, data.data.remaining);
+
+
+ // Note: Items are now pre-filtered during load, no need for separate filterItems call
+
+ // Hide button if no more items
+ if (!data.data.has_more && btn) {
+ btn.style.display = "none";
+ }
+ }
+ } catch (error) {
+ console.error("PFG Load More Error:", error);
+ }
+
+ if (btn) {
+ btn.classList.remove("loading");
+ const spinner = btn.querySelector(".pfg-load-more-spinner");
+ const text = btn.querySelector(".pfg-load-more-text");
+ if (spinner) spinner.style.display = "none";
+ if (text) text.textContent = btn.dataset.loadMoreText || "Load More";
+ }
+ }
+
+ /**
+ * Reset pagination when filters change (AJAX version)
+ */
+ async resetPagination(gallery) {
+ const galleryId = gallery.dataset.galleryId;
+ const itemsPerPage = parseInt(gallery.dataset.itemsPerPage) || 12;
+
+ // Reset page counter
+ gallery.dataset.currentPage = 1;
+
+ // Check if using multi-select mode
+ const isMultiSelect = gallery.dataset.multiSelect === "true";
+
+ // Get all active/selected filters
+ const activeFilters = gallery.querySelectorAll(
+ ".pfg-filter--active, .pfg-filter--selected"
+ );
+
+ // Determine if we're showing "All" (no filters or just the * filter)
+ let isShowingAll = activeFilters.length === 0;
+ if (activeFilters.length === 1 && activeFilters[0].dataset.filter === "*") {
+ isShowingAll = true;
+ }
+
+ // Build filter string (comma-separated for multi-select)
+ let filter = "*";
+ if (!isShowingAll) {
+ if (isMultiSelect) {
+ const selectedFilters = gallery.querySelectorAll(".pfg-filter--selected");
+ const filterSlugs = Array.from(selectedFilters)
+ .map(f => f.dataset.filter)
+ .filter(f => f && f !== "*");
+ filter = filterSlugs.length > 0 ? filterSlugs.join(",") : "*";
+ } else {
+ const activeFilter = gallery.querySelector(".pfg-filter--active");
+ filter = activeFilter ? activeFilter.dataset.filter || "*" : "*";
+ }
+ }
+
+ // Check pagination type
+ const paginationType = gallery.dataset.paginationType;
+ const isNumberedPagination = paginationType === "numbered";
+
+ // For numbered pagination, items are already rendered - just update display
+ // Don't use AJAX, filtering is done client-side
+ if (isNumberedPagination) {
+ const visibleItems = gallery.querySelectorAll(
+ ".pfg-item:not(.pfg-item--hidden)"
+ );
+ this.updateNumberedPagination(
+ gallery,
+ visibleItems.length,
+ itemsPerPage
+ );
+ this.goToPage(gallery, 1);
+ return;
+ }
+
+ // If showing "All" (*), check if we need to reload
+ // We need to reload if:
+ // 1. We previously loaded items with a filter (stored in data-last-load-filter)
+ // 2. Current page > 1 (we've done Load More before)
+ if (isShowingAll) {
+ const lastLoadFilter = gallery.dataset.lastLoadFilter || "*";
+ const currentPage = parseInt(gallery.dataset.currentPage) || 1;
+
+ // If we previously loaded with a specific filter, we need to reload "All" from server
+ // because the DOM only contains items for that specific filter
+ if (lastLoadFilter !== "*" && lastLoadFilter !== "") {
+ // Clear the last load filter since we're resetting to "All"
+ gallery.dataset.lastLoadFilter = "*";
+
+ // Don't return early - continue to AJAX reload below
+ // Set isShowingAll to false to trigger the AJAX path
+ // but keep filter as "*" for the reload
+ filter = "*";
+ } else {
+ // No filtered loads before - just show what's there
+ // Clear filtered total since we're showing all
+ delete gallery.dataset.filteredTotal;
+
+ // For Load More: show button if there are more items
+ const totalItems = parseInt(gallery.dataset.totalItems) || 0;
+ const loadedItems = gallery.querySelectorAll(".pfg-item").length;
+ const remaining = totalItems - loadedItems;
+
+ this.updateLoadMoreCount(gallery, remaining);
+ const loadMoreBtn = gallery.querySelector(".pfg-load-more");
+ if (loadMoreBtn) {
+ loadMoreBtn.style.display = remaining > 0 ? "" : "none";
+ }
+
+ // For Numbered Pagination: update page buttons based on visible items
+ const visibleItems = gallery.querySelectorAll(
+ ".pfg-item:not(.pfg-item--hidden)"
+ );
+ this.updateNumberedPagination(
+ gallery,
+ visibleItems.length,
+ itemsPerPage
+ );
+
+ // Reset pagination view to page 1
+ this.goToPage(gallery, 1);
+
+ return;
+ }
+ }
+
+ // Track the filter we're loading with (for detecting filtered Load More)
+ gallery.dataset.lastLoadFilter = filter;
+
+ // For filtered views with AJAX, we need to reload from server
+ // Show loading state
+ const grid = gallery.querySelector(".pfg-grid");
+ const loadMoreBtn = gallery.querySelector(".pfg-load-more");
+
+ if (loadMoreBtn) {
+ loadMoreBtn.classList.add("loading");
+ }
+
+ try {
+ const formData = new FormData();
+ formData.append("action", "pfg_load_more");
+ formData.append("gallery_id", galleryId);
+ formData.append("page", 1);
+ formData.append("items_per_page", itemsPerPage);
+ formData.append("filter", filter);
+ formData.append("filter_logic", gallery.dataset.filterLogic || "or");
+ formData.append("nonce", window.pfgData?.nonce || "");
+
+ const response = await fetch(
+ window.pfgData?.ajaxUrl || "/wp-admin/admin-ajax.php",
+ {
+ method: "POST",
+ body: formData,
+ }
+ );
+
+ const data = await response.json();
+
+ if (data.success) {
+ // Always update grid content (even if empty - 0 results is valid)
+ if (grid) {
+ grid.innerHTML = data.data.html || "";
+
+ // Check if using mosaic/packed layout and refresh it (packed-cards OR masonry)
+ const isMosaicLayout = grid.classList.contains("pfg-grid--packed-cards") ||
+ grid.classList.contains("pfg-grid--masonry");
+
+ if (isMosaicLayout && data.data.html) {
+ // Refresh mosaic layout after content replacement
+ if (
+ gallery.pfgGallery &&
+ gallery.pfgGallery.refreshMosaicLayout
+ ) {
+ setTimeout(() => {
+ gallery.pfgGallery.refreshMosaicLayout();
+ }, 50);
+ }
+ }
+ }
+
+ // Update remaining count and button visibility
+ this.updateLoadMoreCount(gallery, data.data.remaining);
+
+ if (loadMoreBtn) {
+ loadMoreBtn.style.display = data.data.has_more ? "" : "none";
+ }
+
+ // Store filtered total for subsequent loads
+ gallery.dataset.filteredTotal = data.data.total;
+
+ // For Numbered Pagination: update page buttons based on total filtered items
+ // After AJAX, all visible items are the first page of filtered results
+ const visibleItems = grid
+ ? grid.querySelectorAll(".pfg-item").length
+ : 0;
+ const totalFiltered = data.data.total || visibleItems;
+ this.updateNumberedPagination(gallery, totalFiltered, itemsPerPage);
+ }
+ } catch (error) {
+ console.error("PFG Reset Pagination Error:", error);
+ }
+
+ if (loadMoreBtn) {
+ loadMoreBtn.classList.remove("loading");
+ }
+ }
+
+ /**
+ * Update Load More count display
+ */
+ updateLoadMoreCount(gallery, remaining) {
+ const countEl = gallery.querySelector(".pfg-load-more-count");
+ if (countEl) {
+ if (remaining > 0) {
+ countEl.textContent = `(${remaining} remaining)`;
+ countEl.style.display = "";
+ } else {
+ countEl.style.display = "none";
+ }
+ }
+ }
+
+ /**
+ * Update numbered pagination buttons
+ */
+ updateNumberedPagination(gallery, totalVisible, itemsPerPage) {
+ const paginationWrap = gallery.querySelector(".pfg-numbered-pagination");
+ if (!paginationWrap) return;
+
+ const totalPages = Math.ceil(totalVisible / itemsPerPage);
+
+ // Rebuild pagination buttons
+ paginationWrap.innerHTML = "";
+ for (let i = 1; i <= totalPages; i++) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.className = "pfg-pagination-btn" + (i === 1 ? " active" : "");
+ btn.dataset.page = i;
+ btn.textContent = i;
+ paginationWrap.appendChild(btn);
+ }
+
+ // Hide pagination if only one page
+ paginationWrap.style.display = totalPages <= 1 ? "none" : "";
+ }
+
+ /**
+ * Initialize Infinite Scroll (AJAX version)
+ */
+ initInfiniteScroll() {
+ const galleries = document.querySelectorAll(
+ '.pfg-gallery-wrapper[data-pagination-type="infinite"]'
+ );
+
+ galleries.forEach((gallery) => {
+ const trigger = gallery.querySelector(".pfg-scroll-trigger");
+ const loader = gallery.querySelector(".pfg-scroll-loader");
+ if (!trigger) return;
+
+ let isLoading = false;
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting && !isLoading) {
+ const totalItems = parseInt(gallery.dataset.totalItems) || 0;
+ const loadedItems =
+ gallery.querySelectorAll(".pfg-item").length;
+
+ if (loadedItems < totalItems) {
+ isLoading = true;
+ if (loader) loader.style.display = "";
+
+ this.loadMoreItems(gallery, null).then(() => {
+ isLoading = false;
+ if (loader) loader.style.display = "none";
+
+ const newLoadedItems =
+ gallery.querySelectorAll(".pfg-item").length;
+ if (newLoadedItems >= totalItems) {
+ observer.disconnect();
+ if (loader) loader.remove();
+ }
+ });
+ }
+ }
+ });
+ },
+ { rootMargin: "100px" }
+ );
+
+ observer.observe(trigger);
+ });
+ }
+ }
+
+ /**
+ * Initialize galleries when DOM is ready
+ */
+ function initGalleries() {
+ const galleries = document.querySelectorAll(".pfg-gallery-wrapper");
+
+ galleries.forEach((container) => {
+ // Skip if already initialized
+ if (container.dataset.pfgInitialized) return;
+
+ container.pfgGallery = new PFGGallery(container);
+ container.dataset.pfgInitialized = "true";
+ });
+
+ // Initialize pagination (once)
+ if (!window.pfgPaginationInitialized) {
+ new PFGPagination();
+ window.pfgPaginationInitialized = true;
+ }
+ }
+
+ // Initialize on DOM ready
+ if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", initGalleries);
+ } else {
+ initGalleries();
+ }
+
+ // Re-initialize for dynamically added content
+ if (typeof MutationObserver !== "undefined") {
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ mutation.addedNodes.forEach((node) => {
+ if (node.nodeType === 1) {
+ if (node.classList?.contains("pfg-gallery-wrapper")) {
+ node.pfgGallery = new PFGGallery(node);
+ } else {
+ const galleries = node.querySelectorAll?.(
+ ".pfg-gallery-wrapper:not([data-pfg-initialized])"
+ );
+ galleries?.forEach((g) => {
+ g.pfgGallery = new PFGGallery(g);
+ });
+ }
+ }
+ });
+ });
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+ }
+
+ // Expose to global scope for external use
+ window.PFGGallery = PFGGallery;
+ window.pfgInitGalleries = initGalleries;
+})();
diff --git a/wp-content/plugins/portfolio-filter-gallery/public/js/pfg-lightbox.js b/wp-content/plugins/portfolio-filter-gallery/public/js/pfg-lightbox.js
new file mode 100644
index 0000000..5737e9d
--- /dev/null
+++ b/wp-content/plugins/portfolio-filter-gallery/public/js/pfg-lightbox.js
@@ -0,0 +1,366 @@
+/**
+ * Portfolio Filter Gallery - Lightbox
+ * Vanilla JS - No jQuery dependency
+ *
+ * @package Portfolio_Filter_Gallery
+ * @version 2.0.0
+ */
+
+(function() {
+ 'use strict';
+
+ /**
+ * Lightbox class
+ */
+ class PFGLightbox {
+ constructor() {
+ this.isOpen = false;
+ this.currentIndex = 0;
+ this.items = [];
+ this.galleryGroup = null;
+ this.touchStartX = 0;
+ this.touchEndX = 0;
+
+ this.createLightbox();
+ this.bindEvents();
+ }
+
+ /**
+ * Create lightbox DOM structure
+ */
+ createLightbox() {
+ // Safe access to i18n strings with fallbacks
+ const i18n = (typeof pfgData !== 'undefined' && pfgData.i18n) ? pfgData.i18n : {};
+ const closeText = i18n.close || 'Close';
+ const prevText = i18n.prev || 'Previous';
+ const nextText = i18n.next || 'Next';
+
+ const html = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
').appendTo($('body'));
+
+ // Cache jQuery objects
+ this.$lightbox = $('#lightbox');
+ this.$overlay = $('#lightboxOverlay');
+ this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
+ this.$container = this.$lightbox.find('.lb-container');
+ this.$image = this.$lightbox.find('.lb-image');
+ this.$nav = this.$lightbox.find('.lb-nav');
+
+ // Store css values for future lookup
+ this.containerPadding = {
+ top: parseInt(this.$container.css('padding-top'), 10),
+ right: parseInt(this.$container.css('padding-right'), 10),
+ bottom: parseInt(this.$container.css('padding-bottom'), 10),
+ left: parseInt(this.$container.css('padding-left'), 10)
+ };
+
+ this.imageBorderWidth = {
+ top: parseInt(this.$image.css('border-top-width'), 10),
+ right: parseInt(this.$image.css('border-right-width'), 10),
+ bottom: parseInt(this.$image.css('border-bottom-width'), 10),
+ left: parseInt(this.$image.css('border-left-width'), 10)
+ };
+
+ // Attach event handlers to the newly minted DOM elements
+ this.$overlay.hide().on('click', function() {
+ self.end();
+ return false;
+ });
+
+ this.$lightbox.hide().on('click', function(event) {
+ if ($(event.target).attr('id') === 'lightbox') {
+ self.end();
+ }
+ });
+
+ this.$outerContainer.on('click', function(event) {
+ if ($(event.target).attr('id') === 'lightbox') {
+ self.end();
+ }
+ return false;
+ });
+
+ this.$lightbox.find('.lb-prev').on('click', function() {
+ if (self.currentImageIndex === 0) {
+ self.changeImage(self.album.length - 1);
+ } else {
+ self.changeImage(self.currentImageIndex - 1);
+ }
+ return false;
+ });
+
+ this.$lightbox.find('.lb-next').on('click', function() {
+ if (self.currentImageIndex === self.album.length - 1) {
+ self.changeImage(0);
+ } else {
+ self.changeImage(self.currentImageIndex + 1);
+ }
+ return false;
+ });
+
+ /*
+ Show context menu for image on right-click
+
+ There is a div containing the navigation that spans the entire image and lives above of it. If
+ you right-click, you are right clicking this div and not the image. This prevents users from
+ saving the image or using other context menu actions with the image.
+
+ To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
+ set pointer-events to none on the nav div. This is so that the upcoming right-click event on
+ the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
+ we set the pointer events back to auto for the nav div so it can capture hover and left-click
+ events as usual.
+ */
+ this.$nav.on('mousedown', function(event) {
+ if (event.which === 3) {
+ self.$nav.css('pointer-events', 'none');
+
+ self.$lightbox.one('contextmenu', function() {
+ setTimeout(function() {
+ this.$nav.css('pointer-events', 'auto');
+ }.bind(self), 0);
+ });
+ }
+ });
+
+
+ this.$lightbox.find('.lb-loader, .lb-close').on('click keyup', function(e) {
+ // If mouse click OR 'enter' or 'space' keypress, close LB
+ if (
+ e.type === 'click' || (e.type === 'keyup' && (e.which === 13 || e.which === 32))) {
+ self.end();
+ return false;
+ }
+ });
+ };
+
+ // Show overlay and lightbox. If the image is part of a set, add siblings to album array.
+ Lightbox.prototype.start = function($link) {
+ var self = this;
+ var $window = $(window);
+
+ $window.on('resize', $.proxy(this.sizeOverlay, this));
+
+ this.sizeOverlay();
+
+ this.album = [];
+ var imageNumber = 0;
+
+ function addToAlbum($link) {
+ self.album.push({
+ alt: $link.attr('data-alt'),
+ link: $link.attr('href'),
+ title: $link.attr('data-title') || $link.attr('title')
+ });
+ }
+
+ // Support both data-lightbox attribute and rel attribute implementations
+ var dataLightboxValue = $link.attr('data-lightbox');
+ var $links;
+
+ if (dataLightboxValue) {
+ $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
+ for (var i = 0; i < $links.length; i = ++i) {
+ addToAlbum($($links[i]));
+ if ($links[i] === $link[0]) {
+ imageNumber = i;
+ }
+ }
+ } else {
+ if ($link.attr('rel') === 'lightbox') {
+ // If image is not part of a set
+ addToAlbum($link);
+ } else {
+ // If image is part of a set
+ $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
+ for (var j = 0; j < $links.length; j = ++j) {
+ addToAlbum($($links[j]));
+ if ($links[j] === $link[0]) {
+ imageNumber = j;
+ }
+ }
+ }
+ }
+
+ // Position Lightbox
+ var top = $window.scrollTop() + this.options.positionFromTop;
+ var left = $window.scrollLeft();
+ this.$lightbox.css({
+ top: top + 'px',
+ left: left + 'px'
+ }).fadeIn(this.options.fadeDuration);
+
+ // Disable scrolling of the page while open
+ if (this.options.disableScrolling) {
+ $('body').addClass('lb-disable-scrolling');
+ }
+
+ this.changeImage(imageNumber);
+ };
+
+ // Hide most UI elements in preparation for the animated resizing of the lightbox.
+ Lightbox.prototype.changeImage = function(imageNumber) {
+ var self = this;
+ var filename = this.album[imageNumber].link;
+ var filetype = filename.split('.').slice(-1)[0];
+ var $image = this.$lightbox.find('.lb-image');
+
+ // Disable keyboard nav during transitions
+ this.disableKeyboardNav();
+
+ // Show loading state
+ this.$overlay.fadeIn(this.options.fadeDuration);
+ $('.lb-loader').fadeIn('slow');
+ this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
+ this.$outerContainer.addClass('animating');
+
+ // When image to show is preloaded, we send the width and height to sizeContainer()
+ var preloader = new Image();
+ preloader.onload = function() {
+ var $preloader;
+ var imageHeight;
+ var imageWidth;
+ var maxImageHeight;
+ var maxImageWidth;
+ var windowHeight;
+ var windowWidth;
+
+ $image.attr({
+ 'alt': self.album[imageNumber].alt,
+ 'src': filename
+ });
+
+ $preloader = $(preloader);
+
+ $image.width(preloader.width);
+ $image.height(preloader.height);
+
+ var aspectRatio = preloader.width / preloader.height;
+
+ windowWidth = $(window).width();
+ windowHeight = $(window).height();
+
+ // Calculate the max image dimensions for the current viewport.
+ // Take into account the border around the image and an additional 10px gutter on each side.
+ maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20;
+ maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70;
+
+ /*
+ Since many SVGs have small intrinsic dimensions, but they support scaling
+ up without quality loss because of their vector format, max out their
+ size inside the viewport.
+ */
+ if (filetype === 'svg') {
+ if (aspectRatio >= 1) {
+ imageWidth = maxImageWidth;
+ imageHeight = parseInt(maxImageWidth / aspectRatio, 10);
+ } else {
+ imageWidth = parseInt(maxImageHeight / aspectRatio, 10);
+ imageHeight = maxImageHeight;
+ }
+ $image.width(imageWidth);
+ $image.height(imageHeight);
+
+ } else {
+
+ // Fit image inside the viewport.
+ if (self.options.fitImagesInViewport) {
+
+ // Check if image size is larger then maxWidth|maxHeight in settings
+ if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) {
+ maxImageWidth = self.options.maxWidth;
+ }
+ if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) {
+ maxImageHeight = self.options.maxHeight;
+ }
+
+ } else {
+ maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth;
+ maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight;
+ }
+
+ // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
+ // option than we need to size down while maintaining the aspect ratio.
+ if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
+ if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
+ imageWidth = maxImageWidth;
+ imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
+ $image.width(imageWidth);
+ $image.height(imageHeight);
+ } else {
+ imageHeight = maxImageHeight;
+ imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
+ $image.width(imageWidth);
+ $image.height(imageHeight);
+ }
+ }
+ }
+
+ self.sizeContainer($image.width(), $image.height());
+ };
+
+ // Preload image before showing
+ preloader.src = this.album[imageNumber].link;
+ this.currentImageIndex = imageNumber;
+ };
+
+ // Stretch overlay to fit the viewport
+ Lightbox.prototype.sizeOverlay = function() {
+ var self = this;
+ /*
+ We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
+ Why do this? If the `disableScrolling` option is set to true, a class is added to the body
+ tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is
+ hidden before we measure the document width, as the presence of the scrollbar will affect the
+ number.
+ */
+ setTimeout(function() {
+ self.$overlay
+ .width($(document).width())
+ .height($(document).height());
+
+ }, 0);
+ };
+
+ // Animate the size of the lightbox to fit the image we are showing
+ // This method also shows the the image.
+ Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) {
+ var self = this;
+
+ var oldWidth = this.$outerContainer.outerWidth();
+ var oldHeight = this.$outerContainer.outerHeight();
+ var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
+ var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
+
+ function postResize() {
+ self.$lightbox.find('.lb-dataContainer').width(newWidth);
+ self.$lightbox.find('.lb-prevLink').height(newHeight);
+ self.$lightbox.find('.lb-nextLink').height(newHeight);
+
+ // Set focus on one of the two root nodes so keyboard events are captured.
+ self.$overlay.trigger('focus');
+
+ self.showImage();
+ }
+
+ if (oldWidth !== newWidth || oldHeight !== newHeight) {
+ this.$outerContainer.animate({
+ width: newWidth,
+ height: newHeight
+ }, this.options.resizeDuration, 'swing', function() {
+ postResize();
+ });
+ } else {
+ postResize();
+ }
+ };
+
+ // Display the image and its details and begin preload neighboring images.
+ Lightbox.prototype.showImage = function() {
+ this.$lightbox.find('.lb-loader').stop(true).hide();
+ this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
+
+ this.updateNav();
+ this.updateDetails();
+ this.preloadNeighboringImages();
+ this.enableKeyboardNav();
+ };
+
+ // Display previous and next navigation if appropriate.
+ Lightbox.prototype.updateNav = function() {
+ // Check to see if the browser supports touch events. If so, we take the conservative approach
+ // and assume that mouse hover events are not supported and always show prev/next navigation
+ // arrows in image sets.
+ var alwaysShowNav = false;
+ try {
+ document.createEvent('TouchEvent');
+ alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false;
+ } catch (e) {}
+
+ this.$lightbox.find('.lb-nav').show();
+
+ if (this.album.length > 1) {
+ if (this.options.wrapAround) {
+ if (alwaysShowNav) {
+ this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1');
+ }
+ this.$lightbox.find('.lb-prev, .lb-next').show();
+ } else {
+ if (this.currentImageIndex > 0) {
+ this.$lightbox.find('.lb-prev').show();
+ if (alwaysShowNav) {
+ this.$lightbox.find('.lb-prev').css('opacity', '1');
+ }
+ }
+ if (this.currentImageIndex < this.album.length - 1) {
+ this.$lightbox.find('.lb-next').show();
+ if (alwaysShowNav) {
+ this.$lightbox.find('.lb-next').css('opacity', '1');
+ }
+ }
+ }
+ }
+ };
+
+ // Display caption, image number, and closing button.
+ Lightbox.prototype.updateDetails = function() {
+ var self = this;
+
+ // Enable anchor clicks in the injected caption html.
+ // Thanks Nate Wright for the fix. @https://github.com/NateWr
+ if (typeof this.album[this.currentImageIndex].title !== 'undefined' &&
+ this.album[this.currentImageIndex].title !== '') {
+ var $caption = this.$lightbox.find('.lb-caption');
+ if (this.options.sanitizeTitle) {
+ $caption.text(esc_js(this.album[this.currentImageIndex].title));
+ } else {
+ $caption.html(this.album[this.currentImageIndex].title);
+ }
+ $caption.fadeIn('fast');
+ }
+
+ if (this.album.length > 1 && this.options.showImageNumberLabel) {
+ var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
+ this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast');
+ } else {
+ this.$lightbox.find('.lb-number').hide();
+ }
+
+ this.$outerContainer.removeClass('animating');
+
+ this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() {
+ return self.sizeOverlay();
+ });
+ };
+
+ // Preload previous and next images in set.
+ Lightbox.prototype.preloadNeighboringImages = function() {
+ if (this.album.length > this.currentImageIndex + 1) {
+ var preloadNext = new Image();
+ preloadNext.src = this.album[this.currentImageIndex + 1].link;
+ }
+ if (this.currentImageIndex > 0) {
+ var preloadPrev = new Image();
+ preloadPrev.src = this.album[this.currentImageIndex - 1].link;
+ }
+ };
+
+ Lightbox.prototype.enableKeyboardNav = function() {
+ this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
+ this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this));
+ };
+
+ Lightbox.prototype.disableKeyboardNav = function() {
+ this.$lightbox.off('.keyboard');
+ this.$overlay.off('.keyboard');
+ };
+
+ Lightbox.prototype.keyboardAction = function(event) {
+ var KEYCODE_ESC = 27;
+ var KEYCODE_LEFTARROW = 37;
+ var KEYCODE_RIGHTARROW = 39;
+
+ var keycode = event.keyCode;
+ if (keycode === KEYCODE_ESC) {
+ // Prevent bubbling so as to not affect other components on the page.
+ event.stopPropagation();
+ this.end();
+ } else if (keycode === KEYCODE_LEFTARROW) {
+ if (this.currentImageIndex !== 0) {
+ this.changeImage(this.currentImageIndex - 1);
+ } else if (this.options.wrapAround && this.album.length > 1) {
+ this.changeImage(this.album.length - 1);
+ }
+ } else if (keycode === KEYCODE_RIGHTARROW) {
+ if (this.currentImageIndex !== this.album.length - 1) {
+ this.changeImage(this.currentImageIndex + 1);
+ } else if (this.options.wrapAround && this.album.length > 1) {
+ this.changeImage(0);
+ }
+ }
+ };
+
+ // Closing time. :-(
+ Lightbox.prototype.end = function() {
+ this.disableKeyboardNav();
+ $(window).off('resize', this.sizeOverlay);
+ this.$lightbox.fadeOut(this.options.fadeDuration);
+ this.$overlay.fadeOut(this.options.fadeDuration);
+
+ if (this.options.disableScrolling) {
+ $('body').removeClass('lb-disable-scrolling');
+ }
+ };
+
+ return new Lightbox();
+}));
diff --git a/wp-content/plugins/portfolio-filter-gallery/readme.txt b/wp-content/plugins/portfolio-filter-gallery/readme.txt
new file mode 100644
index 0000000..df09c3e
--- /dev/null
+++ b/wp-content/plugins/portfolio-filter-gallery/readme.txt
@@ -0,0 +1,364 @@
+=== Portfolio Filter Gallery ===
+Contributors: awordpresslife, razipathhan, hanif0991, muhammadshahid, fkfaisalkhan007, sharikkhan007, zishlife, FARAZFRANK
+Donate link: https://paypal.me/awplife
+Tags: portfolio, gallery, portfolio gallery, photo gallery, video gallery
+Requires at least: 5.8
+Tested up to: 6.9
+Requires PHP: 7.4
+Stable tag: 2.0.2
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+A WordPress plugin designed for creating filterable portfolio galleries. Supports images and videos with masonry layouts and lightbox display.
+
+== Description ==
+
+**Portfolio Filter Gallery** is a WordPress plugin built to help you organize and display your creative work. It provides a structured way to present images and videos, allowing visitors to filter content by category.
+
+
+= Demo Links =
+
+* [Video Gallery](https://awplife.com/demo/portfolio-filter-gallery-premium/video-gallery/)
+* [Plugin Features](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-wordpress-plugin/)
+* [Gallery Demo](https://awplife.com/demo/portfolio-filter-gallery-premium/)
+* [Upgrade To Premium](https://awplife.com/account/signup/portfolio-filter-gallery)
+
+
+= Support Links =
+
+* [Documentation](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-new-wordpress-plugin/)
+* [Support Forum](https://wordpress.org/support/plugin/portfolio-filter-gallery/)
+
+= What This Plugin Does =
+
+The core function of Portfolio Filter Gallery is to let you build galleries where users can click filter buttons to view specific categories of work. Instead of scrolling through an entire page of images, a visitor can select "Web Design" or "Photography" and see only those items.
+
+The plugin includes a dedicated page for managing filter categories. You create your filters once, then assign them to individual images or videos as you build your gallery. This separation keeps your workflow clean and organized.
+
+= Use Cases =
+
+This plugin suits a range of users and projects:
+
+* Photographers displaying work by genre (portraits, landscapes, events)
+* Web designers showcasing projects by type (e-commerce, corporate, landing pages)
+* Agencies presenting client work across different industries
+* Architects organizing projects by category (residential, commercial, renovations)
+* Artists grouping pieces by medium or theme
+* Freelancers building a professional online presence
+
+= Free Features =
+
+**Gallery Filtering**
+
+* Manage filters through a separate category interface
+* Assign multiple filters to each gallery item
+* CSS3 animations for smooth filter transitions
+
+**Layout Options**
+
+* Masonry layout that adapts to varying image dimensions
+* Grid layout for uniform presentation
+* Column options: 2, 3, or 4 columns
+* Configurable spacing between items
+
+**Lightbox**
+
+* Bootstrap-based responsive lightbox
+* Navigation arrows for browsing images
+* Title display within the lightbox
+* Touch support for mobile devices
+
+**Video Support**
+
+* Embed YouTube videos
+* Embed Vimeo videos
+* Videos play directly in the lightbox
+
+**Customization**
+
+* Show or hide image titles
+* Optional image numbering
+* Grayscale effect on hover
+* Customizable filter button colors
+* Border width and color settings
+
+= Premium Features =
+
+The [premium version](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-wordpress-plugin/) extends the plugin with additional capabilities:
+
+
+
+**Additional Lightboxes**
+
+* LD Lightbox
+* Swipebox with touch gestures
+* PopTrox with video support
+* Viewer Lightbox
+* BlueImp Gallery
+
+**Advanced Features**
+
+* Ajax Load More for paginated loading
+* URL-based filtering (load a page with a specific filter pre-selected)
+* Default filter selection on page load
+* Ascending/descending sort controls
+* Shuffle button for randomized display
+* Search functionality within galleries
+* Watermark overlay support
+* Custom CSS input
+
+**Extended Customization**
+
+* Unlimited filter color schemes
+* Custom thumbnail dimensions
+* Responsive column control per device type (desktop, tablet, mobile)
+* Dropdown-style filter menu
+
+= How to Use Portfolio Filter Gallery =
+
+1. Navigate to **Portfolio Gallery > Filters** in your WordPress dashboard
+2. Create the filter categories you need
+3. Go to **Portfolio Gallery > Add New** to create a gallery
+4. Upload images, add video URLs, and assign filters to each item
+5. Adjust settings for layout, lightbox style, and appearance
+6. Copy the generated shortcode and paste it into any page or post
+
+The shortcode follows this format:
+`[Portfolio_Gallery id="123"]`
+
+Replace "123" with your gallery's ID.
+
+= Masonry Layout =
+
+The masonry layout arranges images in a Pinterest-style grid. Images of different sizes fit together naturally without requiring uniform dimensions. This layout includes:
+
+* Automatic adjustment to image proportions
+* CSS3 animation effects
+* Full compatibility with filtering and sorting
+
+= Linking Portfolio Items =
+
+You can attach custom URLs to individual gallery items. This allows you to:
+
+* Link images to project detail pages
+* Direct users to external client websites
+* Open links in the same tab or a new tab
+
+= Page Builder Compatibility =
+
+Portfolio Filter Gallery works with standard WordPress editing tools and popular page builders:
+
+* Gutenberg block editor
+* Elementor
+* WPBakery Page Builder
+* Divi Builder
+* Beaver Builder
+
+Simply paste the shortcode into any text block or widget.
+
+= Support =
+
+For questions or troubleshooting, visit the [Support Forum](https://wordpress.org/support/plugin/portfolio-filter-gallery/). The development team typically responds within the same day.
+
+== Screenshots ==
+
+1. Portfolio Filter Gallery 3 Column With Number And Title
+2. Portfolio Filter Gallery Without Spacing
+3. Portfolio Filter Gallery With 2 Column Layout
+4. Portfolio Filter Gallery With Gray Scale (Gray Effect On Hover) On Thumbnails
+5. Portfolio Filter Gallery With Masonry
+6. Add Filters In Portfolio Gallery
+7. Filter Thumbnails By Portfolio Filters
+8. A. Adding Thumbnails B. Shortcode
+9. Portfolio Filter Gallery Settings
+
+== Installation ==
+
+**Automatic Installation**
+
+1. Go to WordPress Dashboard → Plugins → Add New
+2. Search for "Portfolio Filter Gallery"
+3. Click "Install Now" and then "Activate"
+
+**Manual Installation**
+
+1. Download the plugin from WordPress.org
+2. Upload the `portfolio-filter-gallery` folder to `/wp-content/plugins/`
+3. Activate the plugin through the 'Plugins' menu in WordPress
+
+**Getting Started**
+
+1. Go to Portfolio Gallery → Filters to create your filter categories
+2. Go to Portfolio Gallery → Add New to create your gallery
+3. Upload images and assign filters to each image
+4. Configure your gallery settings (layout, lightbox, colors)
+5. Copy the shortcode and paste it into any page or post
+
+== Frequently Asked Questions ==
+
+= Is Portfolio Filter Gallery free? =
+
+Yes. The free version includes all core features: filterable galleries, masonry layout, video embedding, and the Bootstrap lightbox. A [premium version](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-wordpress-plugin/) is available with additional hover effects, lightbox styles, and advanced functionality.
+
+= How do I create filters? =
+
+Go to Portfolio Gallery > Filters in your WordPress dashboard. This dedicated page allows you to add, edit, and remove filter categories independently from your galleries.
+
+= Can I include videos? =
+
+Yes. Portfolio Filter Gallery supports YouTube and Vimeo. When adding a gallery item, select the video option and enter the video URL. Videos will play in the lightbox.
+[See Video Gallery Demo](https://awplife.com/demo/portfolio-filter-gallery-premium/portfolio-video-gallery/)
+
+= Is the gallery responsive? =
+
+Yes. The gallery layout and lightbox adapt to all screen sizes. The masonry layout uses CSS3 for smooth animations on any device.
+
+= Is there a limit to gallery items? =
+
+No. You can add as many images and videos as needed. For large galleries, the premium version offers Ajax Load More for improved performance.
+
+= Can I place multiple galleries on one page? =
+
+Yes. Each gallery has its own shortcode and operates independently with separate filters and settings.
+
+= Can I rearrange gallery items? =
+
+Yes. The gallery editor supports drag-and-drop reordering.
+
+= Does it work with page builders? =
+
+Yes. The plugin is compatible with Gutenberg, Elementor, WPBakery, Divi, and Beaver Builder. Paste the shortcode into any text block or widget.
+
+= Is the plugin GDPR compliant? =
+
+Yes. Portfolio Filter Gallery does not collect user data or make external requests. All assets load locally from your WordPress installation.
+
+= Is translation supported? =
+
+Yes. The plugin is translation-ready and works with WPML and other translation plugins.
+
+= Where can I get help? =
+
+Visit the [Support Forum](https://wordpress.org/support/plugin/portfolio-filter-gallery/) for assistance. For premium support, visit the [developer website](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-wordpress-plugin/).
+
+== Changelog ==
+
+= 2.0.2 =
+* Added: Filter multiple languages support
+* Added: Search Placeholder field in gallery settings
+* Fixed: Show Title toggle not saving when OFF
+* Fixed: Columns/Gap settings preserved on template change
+
+= 2.0.1 =
+* Bug Fixed
+
+= 2.0.0 =
+**Major Update - Complete Redesign**
+
+This is a major update with a completely redesigned interface. Your existing galleries and data will be automatically migrated and preserved.
+
+* **New:** Completely redesigned admin interface with modern UI
+* **New:** Enhanced image management with drag-and-drop ordering
+* **New:** Improved modal editor for individual image settings
+* **New:** Bulk selection and batch operations
+* **New:** Filter hierarchy support with parent-child relationships
+* **New:** Multiple lightbox options (LD Lightbox, Bootstrap Lightbox)
+* **New:** Enhanced migration system for legacy data
+* **New:** Version tracking for future upgrade logic
+* **Improved:** Better PHP 8.x compatibility with strict type handling
+* **Improved:** Performance optimizations for large galleries
+* **Fixed:** Sanitize_title error with legacy filter data stored as arrays
+* **Fixed:** Filter count migration from legacy versions
+* **Fixed:** Version conflict handling when both Free and Premium active
+
+= 1.7.5 =
+* Text domain error fixed.
+* Tested with WordPress version 6.9
+
+= 1.7.4 =
+* Text domain error fixed.
+* Tested with WordPress version 6.8.3
+
+= 1.7.2 =
+* Regular plugin check and update.
+* Tested with WordPress version 6.8
+
+= 1.7.1 =
+* Linking Fixed.
+* Tested with WordPress version 6.7.2
+
+= 1.7.0 =
+* Image stacking fixed.
+* Tested with WordPress version 6.7
+
+= 1.6.9 =
+* Filter select box error fix.
+* Tested with WordPress version 6.7
+
+= 1.6.8 =
+* Alphabetical image sorting issue fixed.
+* Tested with WordPress version 6.6.2
+
+= 1.6.7 =
+* Image border issue fixed.
+* Tested with WordPress version 6.6.1
+
+= 1.6.6 =
+* Lightbox error fixed.
+
+= 1.6.5 =
+* Lightbox sanitization fixed.
+
+= 1.6.4 =
+* Filter alignment fixed.
+* Tested with WordPress version 6.5.5
+
+= 1.6.3 =
+* Bootstrap CSS fixed.
+
+= 1.6.2 =
+* Tested with WordPress version 6.5.4
+
+= 1.6.1 =
+* Bootstrap extra menu CSS removed.
+
+== Other Notes ==
+
+= Shortcode Usage =
+
+Copy the shortcode from your gallery and paste it into any page, post, or widget:
+`[Portfolio_Gallery id="123"]`
+Replace "123" with your actual gallery ID.
+
+= Browser Compatibility =
+
+Portfolio Filter Gallery works on all modern browsers:
+* Google Chrome
+* Mozilla Firefox
+* Apple Safari
+* Microsoft Edge
+* Opera
+* iOS Safari & Android browsers
+
+= Security & Privacy =
+
+* GDPR Compliant
+* No external requests
+* No data collection
+* Secure code following WordPress standards
+* Regular security updates
+
+= Contact & Support =
+
+* [WordPress Support Forum](https://wordpress.org/support/plugin/portfolio-filter-gallery/)
+* [Premium Support](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-wordpress-plugin/)
+* [Documentation](https://awplife.com/wordpress-plugins/portfolio-filter-gallery-wordpress-plugin/)
+* [Video Tutorials](https://www.youtube.com/watch?v=6rvJ9NN_kA0)
+
+== Upgrade Notice ==
+
+= 2.0.0 =
+**Major Update - Complete Redesign!** This version includes a completely redesigned admin interface with a modern and user-friendly design. Don't worry - your existing galleries and settings will be automatically migrated and preserved. We recommend backing up your site before updating. New features include: enhanced image management, bulk operations, filter hierarchy support, better PHP 8.x compatibility, and improved performance.
+
+= 1.7.5 =
+Text domain error fixed. Tested with WordPress 6.9.
\ No newline at end of file
diff --git a/wp-content/themes/twentytwentyfive-retro/style.css b/wp-content/themes/twentytwentyfive-retro/style.css
new file mode 100644
index 0000000..90c529b
--- /dev/null
+++ b/wp-content/themes/twentytwentyfive-retro/style.css
@@ -0,0 +1,73 @@
+/*
+Theme Name: Twenty Twenty-Five Retro
+Theme URI: https://flatlogic.com/
+Description: A retro 70s modern child theme for Twenty Twenty-Five.
+Author: Flatlogic Gemini
+Author URI: https://flatlogic.com/
+Template: twentytwentyfive
+Version: 1.0.0
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+*/
+
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Outfit:wght@100..900&display=swap');
+
+/* Custom CSS for 70s Retro Style */
+
+/* Subtle grain texture effect */
+body::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
+ opacity: 0.05;
+ z-index: 9999;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ text-transform: capitalize;
+ letter-spacing: -0.02em;
+}
+
+.wp-block-query-title {
+ font-size: clamp(2.5rem, 8vw, 4rem);
+ font-weight: 900;
+}
+
+.wp-block-post-title {
+ font-weight: 800;
+}
+
+/* Rounded corners for everything */
+img, .wp-block-button__link, .wp-block-query {
+ border-radius: 24px !important;
+}
+
+/* Thick borders for a retro feel */
+.wp-block-post-featured-image img {
+ border: 6px solid #5e3023;
+ box-shadow: 12px 12px 0px #e3b448;
+}
+
+.wp-block-query {
+ padding: 40px;
+ background: #fdf5e6;
+ border: 4px double #5e3023;
+}
+
+.wp-block-button__link {
+ border: 2px solid #5e3023 !important;
+ box-shadow: 4px 4px 0px #5e3023;
+ transition: all 0.2s ease;
+ padding: 15px 30px !important;
+ font-weight: 800 !important;
+}
+
+.wp-block-button__link:hover {
+ transform: translate(-2px, -2px);
+ box-shadow: 6px 6px 0px #5e3023;
+}
diff --git a/wp-content/themes/twentytwentyfive-retro/theme.json b/wp-content/themes/twentytwentyfive-retro/theme.json
new file mode 100644
index 0000000..6bdf44d
--- /dev/null
+++ b/wp-content/themes/twentytwentyfive-retro/theme.json
@@ -0,0 +1,111 @@
+{
+ "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
+ "version": 3,
+ "settings": {
+ "color": {
+ "palette": [
+ {
+ "color": "#f5e6be",
+ "name": "Cream",
+ "slug": "base"
+ },
+ {
+ "color": "#5e3023",
+ "name": "Dark Brown",
+ "slug": "contrast"
+ },
+ {
+ "color": "#e3b448",
+ "name": "Mustard Yellow",
+ "slug": "accent-1"
+ },
+ {
+ "color": "#d1603d",
+ "name": "Burnt Orange",
+ "slug": "accent-2"
+ },
+ {
+ "color": "#4d5d53",
+ "name": "Avocado Green",
+ "slug": "accent-3"
+ },
+ {
+ "color": "#a04033",
+ "name": "Retro Red",
+ "slug": "accent-4"
+ }
+ ]
+ },
+ "typography": {
+ "fontFamilies": [
+ {
+ "fontFamily": "\"Fraunces\", serif",
+ "name": "Fraunces (Retro Serif)",
+ "slug": "heading"
+ },
+ {
+ "fontFamily": "\"Outfit\", sans-serif",
+ "name": "Outfit (Modern Sans)",
+ "slug": "body"
+ }
+ ]
+ }
+ },
+ "styles": {
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--body)",
+ "fontSize": "1.1rem",
+ "lineHeight": "1.6"
+ },
+ "color": {
+ "background": "var(--wp--preset--color--base)",
+ "text": "var(--wp--preset--color--contrast)"
+ },
+ "elements": {
+ "heading": {
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--heading)",
+ "fontWeight": "800"
+ }
+ },
+ "link": {
+ "color": {
+ "text": "var(--wp--preset--color--accent-2)"
+ },
+ "typography": {
+ "textDecoration": "none"
+ },
+ ":hover": {
+ "typography": {
+ "textDecoration": "underline"
+ }
+ }
+ },
+ "button": {
+ "color": {
+ "background": "var(--wp--preset--color--accent-1)",
+ "text": "var(--wp--preset--color--contrast)"
+ },
+ "border": {
+ "radius": "50px"
+ }
+ }
+ },
+ "blocks": {
+ "core/site-title": {
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--heading)",
+ "fontWeight": "900",
+ "fontStyle": "italic",
+ "fontSize": "2rem"
+ }
+ },
+ "core/post-title": {
+ "typography": {
+ "fontFamily": "var(--wp--preset--font-family--heading)",
+ "fontWeight": "800"
+ }
+ }
+ }
+ }
+}
diff --git a/wp-content/uploads/2026/01/pexels-12289987-1024x693.jpg b/wp-content/uploads/2026/01/pexels-12289987-1024x693.jpg
new file mode 100644
index 0000000..550e493
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-12289987-1024x693.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-12289987-150x150.jpg b/wp-content/uploads/2026/01/pexels-12289987-150x150.jpg
new file mode 100644
index 0000000..23d958f
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-12289987-150x150.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-12289987-1536x1039.jpg b/wp-content/uploads/2026/01/pexels-12289987-1536x1039.jpg
new file mode 100644
index 0000000..f11d8ba
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-12289987-1536x1039.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-12289987-300x203.jpg b/wp-content/uploads/2026/01/pexels-12289987-300x203.jpg
new file mode 100644
index 0000000..7cdc44e
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-12289987-300x203.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-12289987-768x520.jpg b/wp-content/uploads/2026/01/pexels-12289987-768x520.jpg
new file mode 100644
index 0000000..14728f3
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-12289987-768x520.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-12289987.jpg b/wp-content/uploads/2026/01/pexels-12289987.jpg
new file mode 100644
index 0000000..fe8b648
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-12289987.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-33986791-150x150.jpg b/wp-content/uploads/2026/01/pexels-33986791-150x150.jpg
new file mode 100644
index 0000000..e0e25d7
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-33986791-150x150.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-33986791-200x300.jpg b/wp-content/uploads/2026/01/pexels-33986791-200x300.jpg
new file mode 100644
index 0000000..ecff70e
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-33986791-200x300.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-33986791-683x1024.jpg b/wp-content/uploads/2026/01/pexels-33986791-683x1024.jpg
new file mode 100644
index 0000000..f9087be
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-33986791-683x1024.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-33986791-768x1152.jpg b/wp-content/uploads/2026/01/pexels-33986791-768x1152.jpg
new file mode 100644
index 0000000..6280c20
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-33986791-768x1152.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-33986791.jpg b/wp-content/uploads/2026/01/pexels-33986791.jpg
new file mode 100644
index 0000000..62caa15
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-33986791.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7332390-150x150.jpg b/wp-content/uploads/2026/01/pexels-7332390-150x150.jpg
new file mode 100644
index 0000000..e10915b
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7332390-150x150.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7332390-200x300.jpg b/wp-content/uploads/2026/01/pexels-7332390-200x300.jpg
new file mode 100644
index 0000000..c3666c5
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7332390-200x300.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7332390-683x1024.jpg b/wp-content/uploads/2026/01/pexels-7332390-683x1024.jpg
new file mode 100644
index 0000000..6de218b
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7332390-683x1024.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7332390-768x1152.jpg b/wp-content/uploads/2026/01/pexels-7332390-768x1152.jpg
new file mode 100644
index 0000000..b8bd64e
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7332390-768x1152.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7332390.jpg b/wp-content/uploads/2026/01/pexels-7332390.jpg
new file mode 100644
index 0000000..061a6ae
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7332390.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7867913-1024x682.jpg b/wp-content/uploads/2026/01/pexels-7867913-1024x682.jpg
new file mode 100644
index 0000000..3187966
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7867913-1024x682.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7867913-150x150.jpg b/wp-content/uploads/2026/01/pexels-7867913-150x150.jpg
new file mode 100644
index 0000000..f04b9cd
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7867913-150x150.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7867913-1536x1024.jpg b/wp-content/uploads/2026/01/pexels-7867913-1536x1024.jpg
new file mode 100644
index 0000000..72287c1
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7867913-1536x1024.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7867913-300x200.jpg b/wp-content/uploads/2026/01/pexels-7867913-300x200.jpg
new file mode 100644
index 0000000..31acd77
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7867913-300x200.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7867913-768x512.jpg b/wp-content/uploads/2026/01/pexels-7867913-768x512.jpg
new file mode 100644
index 0000000..aa3ff9c
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7867913-768x512.jpg differ
diff --git a/wp-content/uploads/2026/01/pexels-7867913.jpg b/wp-content/uploads/2026/01/pexels-7867913.jpg
new file mode 100644
index 0000000..3718210
Binary files /dev/null and b/wp-content/uploads/2026/01/pexels-7867913.jpg differ
diff --git a/wp-content/uploads/pexels_cyberpunk.jpg b/wp-content/uploads/pexels_cyberpunk.jpg
new file mode 100644
index 0000000..b4d43a0
Binary files /dev/null and b/wp-content/uploads/pexels_cyberpunk.jpg differ
diff --git a/wp-content/uploads/pexels_mountain.jpg b/wp-content/uploads/pexels_mountain.jpg
new file mode 100644
index 0000000..0602288
Binary files /dev/null and b/wp-content/uploads/pexels_mountain.jpg differ
diff --git a/wp-content/uploads/pfg-backups/.htaccess b/wp-content/uploads/pfg-backups/.htaccess
new file mode 100644
index 0000000..3418e55
--- /dev/null
+++ b/wp-content/uploads/pfg-backups/.htaccess
@@ -0,0 +1 @@
+deny from all
\ No newline at end of file
diff --git a/wp-content/uploads/pfg-backups/backup-2026-01-23-164344.json b/wp-content/uploads/pfg-backups/backup-2026-01-23-164344.json
new file mode 100644
index 0000000..6a9b537
--- /dev/null
+++ b/wp-content/uploads/pfg-backups/backup-2026-01-23-164344.json
@@ -0,0 +1,6 @@
+{
+ "version": "1.0.0",
+ "timestamp": "2026-01-23 16:43:44",
+ "galleries": [],
+ "filters": []
+}
\ No newline at end of file
diff --git a/wp-content/uploads/pfg-backups/index.php b/wp-content/uploads/pfg-backups/index.php
new file mode 100644
index 0000000..e71af0e
--- /dev/null
+++ b/wp-content/uploads/pfg-backups/index.php
@@ -0,0 +1 @@
+