__( 'Images', 'equaframe' ), 'layout' => __( 'Layout', 'equaframe' ), 'spacing' => __( 'Size & spacing', 'equaframe' ), 'appearance' => __( 'Appearance', 'equaframe' ), 'lightbox' => __( 'Lightbox', 'equaframe' ), 'styles' => __( 'Styles & CSS', 'equaframe' ), ); // phpcs:ignore WordPress.Security.NonceVerification $current_tab = isset( $_GET['tab'] ) ? sanitize_key( $_GET['tab'] ) : 'images'; if ( ! isset( $tabs[ $current_tab ] ) ) { $current_tab = 'images'; } $shortcode = EquaFrame_Admin::shortcode( $gallery_id ); $hero = $images ? wp_get_attachment_image_url( $images[0]['id'], 'medium' ) : ''; ?>

post_title ); ?>

$label ) : ?>
>

>

>

$layout ) { $layout_options[ $slug ] = $layout['label'] . ' — ' . $layout['desc']; } EquaFrame_Fields::radios( 'layout', __( 'Layout style', 'equaframe' ), $layout_options ); ?>

array( 'grid' ) ) ); EquaFrame_Fields::number( 'mosaic_row', __( 'Row height', 'equaframe' ), 60, 500, 'px', __( 'Height of one mosaic row on a large screen; it shrinks on smaller screens. Larger tiles span several rows and columns.', 'equaframe' ), array( 'layouts' => array( 'mosaic' ), 'slider' => true ) ); ?>

__( 'Full image view with arrows and/or dots', 'equaframe' ), 'filmstrip' => __( 'Large image with a scrollable film strip of thumbnails', 'equaframe' ), ) ); EquaFrame_Fields::select( 'ss_ratio', __( 'Large image shape', 'equaframe' ), EquaFrame_Settings::ratios(), __( 'A fixed shape stops the page from jumping as slides change.', 'equaframe' ) ); EquaFrame_Fields::select( 'ss_fit', __( 'Fit', 'equaframe' ), array( 'contain' => __( 'Show the whole image (may leave empty bars)', 'equaframe' ), 'cover' => __( 'Fill the area (crops the edges)', 'equaframe' ) ) ); EquaFrame_Fields::checkbox( 'ss_arrows', __( 'Show previous / next arrows', 'equaframe' ) ); EquaFrame_Fields::checkbox( 'ss_dots', __( 'Show navigation dots', 'equaframe' ), '', array( 'requires' => 'ss_mode=single' ) ); EquaFrame_Fields::checkbox( 'ss_loop', __( 'Loop from the last slide back to the first', 'equaframe' ) ); EquaFrame_Fields::select( 'ss_caption', __( 'Text over the image', 'equaframe' ), array( 'none' => __( 'None', 'equaframe' ), 'title' => __( 'Title', 'equaframe' ), 'caption' => __( 'Caption', 'equaframe' ), 'both' => __( 'Title and caption', 'equaframe' ), ) ); EquaFrame_Fields::group_open( array( 'requires' => 'ss_mode=filmstrip' ), 'eqfr-subsection' ); echo '

' . esc_html__( 'Film strip', 'equaframe' ) . '

'; EquaFrame_Fields::select( 'ss_strip_pos', __( 'Thumbnails position', 'equaframe' ), array( 'bottom' => __( 'Below the large image', 'equaframe' ), 'top' => __( 'Above the large image', 'equaframe' ), 'left' => __( 'Left of the large image', 'equaframe' ), 'right' => __( 'Right of the large image', 'equaframe' ), ), __( 'On phones, a left strip moves above the image and a right strip moves below it.', 'equaframe' ) ); EquaFrame_Fields::number( 'ss_strip_visible', __( 'Thumbnails visible at once (tablet and desktop)', 'equaframe' ), 1, 12, '', __( 'The rest are reached by scrolling the strip or tabbing to them.', 'equaframe' ) ); EquaFrame_Fields::number( 'ss_strip_visible_mobile', __( 'Thumbnails visible at once (phone)', 'equaframe' ), 1, 6 ); EquaFrame_Fields::group_close(); ?>
>

array( 'key' => 'max_width_unit', 'label' => __( 'Maximum gallery width unit', 'equaframe' ), 'options' => array( 'px' => 'px', '%' => '%' ), ), ) ); ?> __( 'Left', 'equaframe' ), 'center' => __( 'Center', 'equaframe' ), 'right' => __( 'Right', 'equaframe' ), ), __( 'Applies when the maximum width is narrower than the space available.', 'equaframe' ) ); EquaFrame_Fields::number( 'gap', __( 'Space between images (desktop)', 'equaframe' ), 0, 80, 'px', __( 'This is the spacing on a large screen. It shrinks smoothly as the screen gets smaller.', 'equaframe' ), array( 'slider' => true ) ); EquaFrame_Fields::number( 'gap_min', __( 'Smallest space between images', 'equaframe' ), 0, 40, 'px', __( 'The spacing never drops below this on small screens.', 'equaframe' ), array( 'slider' => true ) ); EquaFrame_Fields::color( 'bg_color', __( 'Background color (shows between images)', 'equaframe' ), __( 'Leave empty for a transparent background. Use the Clear button in the picker to empty it.', 'equaframe' ) ); EquaFrame_Fields::checkbox( 'outer_pad', __( 'Add the same spacing around the outside edge of the gallery', 'equaframe' ), __( 'Makes the background color frame the images.', 'equaframe' ) ); EquaFrame_Fields::select( 'image_size', __( 'Image file size used in the gallery', 'equaframe' ), EquaFrame_Settings::image_sizes(), __( 'WordPress also supplies smaller versions automatically so phones download less. A smaller size here makes pages faster.', 'equaframe' ) ); EquaFrame_Fields::select( 'lb_image_size', __( 'Image file size used in the lightbox', 'equaframe' ), EquaFrame_Settings::image_sizes(), '', array( 'requires' => 'lb_on' ) ); ?>
>

'radius_on' ), 'eqfr-inline' ); EquaFrame_Fields::number( 'radius', __( 'Corner radius', 'equaframe' ), 0, 200, '', '', array( 'slider' => true ) ); EquaFrame_Fields::select( 'radius_unit', __( 'Unit', 'equaframe' ), array( 'px' => __( 'Pixels (px)', 'equaframe' ), '%' => __( 'Percent (%) — 50% makes circles on square tiles', 'equaframe' ) ) ); EquaFrame_Fields::group_close(); ?>
'border_on' ) ); EquaFrame_Fields::number( 'border_width', __( 'Thickness', 'equaframe' ), 1, 20, 'px', '', array( 'slider' => true ) ); EquaFrame_Fields::select( 'border_style', __( 'Line style', 'equaframe' ), array( 'solid' => __( 'Solid', 'equaframe' ), 'dashed' => __( 'Dashed', 'equaframe' ), 'dotted' => __( 'Dotted', 'equaframe' ), 'double' => __( 'Double', 'equaframe' ), 'groove' => __( 'Groove', 'equaframe' ), 'ridge' => __( 'Ridge', 'equaframe' ), 'inset' => __( 'Inset', 'equaframe' ), 'outset' => __( 'Outset', 'equaframe' ), ) ); EquaFrame_Fields::color( 'border_color', __( 'Color', 'equaframe' ) ); EquaFrame_Fields::group_close(); ?>
'shadow_on' ) ); EquaFrame_Fields::number( 'shadow_x', __( 'Horizontal offset', 'equaframe' ), -60, 60, 'px', '', array( 'slider' => true ) ); EquaFrame_Fields::number( 'shadow_y', __( 'Vertical offset', 'equaframe' ), -60, 60, 'px', '', array( 'slider' => true ) ); EquaFrame_Fields::number( 'shadow_blur', __( 'Blur', 'equaframe' ), 0, 100, 'px', '', array( 'slider' => true ) ); EquaFrame_Fields::number( 'shadow_spread', __( 'Size (spread)', 'equaframe' ), -30, 50, 'px', '', array( 'slider' => true ) ); EquaFrame_Fields::number( 'shadow_opacity', __( 'Opacity', 'equaframe' ), 0, 100, '%', '', array( 'slider' => true ) ); EquaFrame_Fields::color( 'shadow_color', __( 'Color', 'equaframe' ) ); EquaFrame_Fields::group_close(); ?>
'zoom_on', 'slider' => true ) ); ?>

true ) ); ?>

>

'lb_backdrop' ) ); EquaFrame_Fields::color( 'lb_backdrop_color', __( 'Backdrop color', 'equaframe' ) ); EquaFrame_Fields::number( 'lb_backdrop_opacity', __( 'Backdrop opacity', 'equaframe' ), 0, 100, '%', '', array( 'slider' => true ) ); EquaFrame_Fields::group_close(); ?>

__( 'Round button', 'equaframe' ), 'square' => __( 'Square button', 'equaframe' ), 'plain' => __( 'Icon only, no background', 'equaframe' ), ), __( 'With “icon only”, the background color is not used, so make sure the icon color stands out against your backdrop.', 'equaframe' ) ); ?>

__( 'Top right', 'equaframe' ), 'top-left' => __( 'Top left', 'equaframe' ), 'bottom-right' => __( 'Bottom right', 'equaframe' ), 'bottom-left' => __( 'Bottom left', 'equaframe' ), ) ); ?>

__( 'In a panel below the image', 'equaframe' ), 'overlay' => __( 'Over the bottom of the image', 'equaframe' ), ), __( 'Text colors are set on the Appearance tab.', 'equaframe' ) ); ?>

__( 'Alt text (recommended)', 'equaframe' ), 'title' => __( 'Image title', 'equaframe' ), 'caption' => __( 'Image caption', 'equaframe' ), ), __( 'Visitors who use a screen reader, such as JAWS, NVDA or VoiceOver, hear this after the position, for example “Image 3 of 12: Couple on the dock”. It is spoken only and is never shown on the page. Alt text describes what is in the picture, so it is usually the best choice. If the one you pick is empty for an image, the alt text, then the title, then the caption is used instead.', 'equaframe' ) ); ?>
>

Appearance → Customize → Additional CSS (in a block theme, Appearance → Editor → Styles, then the three-dot menu and Additional CSS).', 'equaframe' ), array( 'strong' => array() ) ); ?>

  • .eqfr-gallery-' . (int) $gallery_id . '' ), array( 'code' => array() ) ); ?>
  • class="home-hero", which you can then style the same way.', 'equaframe' ), array( 'code' => array() ) ); ?>

$el ) { $grouped[ $el['group'] ][ $key ] = $el; } $open = true; foreach ( $grouped as $group => $elements ) : ?>
> $el ) : $scoped = '.eqfr-gallery-' . (int) $gallery_id . ( '.eqfr-gallery' === $el['class'] ? '' : ' ' . $el['class'] ); /* translators: %s: CSS selector */ $copy_label = sprintf( __( 'Copy %s', 'equaframe' ), $scoped ); ?>

CSS ID on the Images tab. The ID is placed on the image’s tile (.eqfr-item), so you can style it with a rule such as #sunset img { filter: sepia(.4); }.', 'equaframe' ), array( 'strong' => array(), 'code' => array() ) ); ?>

$image ) { if ( '' !== $image['css_id'] ) { /* translators: 1: CSS ID, 2: image number */ $used[] = sprintf( __( '#%1$s (image %2$d)', 'equaframe' ), $image['css_id'], $i + 1 ); } } ?>

' . esc_html( implode( ', ', $used ) ) . '' : esc_html__( 'No image IDs set yet.', 'equaframe' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>

>