Hello @frank6tg
The easiest way to achieve this is to add the following code in your child theme’s or theme’s functions.php file:
add_filter( ‘modula_shortcode_item_data’, ‘modula_image_add_tabindex’ );
function modula_image_add_tabindex( $item_data ) {
$item_data[‘item_attributes’][‘tabindex’] = ‘0’;
return $item_data;
}
After that, you can easily add your own CSS like you already did, for example:
.modula-item:focus {
outline: 2px solid #0073aa;
outline-offset: 2px;
}
Warm regards,
Teo
OK I’ve tested this and it is very interesting, The Tab Order is not in order of the images as displayed. I’d expect tabbing through to go across one row, then the next etc.
See video: https://screenrec.com/share/ovcKTAqYin
Hello @frank6tg
For the tabbing focus, please use the following CSS rule and remove the previously added PHP script:
.modula.modula-gallery .modula-item-link:focus {
border: 2px solid #f00 !important;
}
The selection order follows the order of the items (images) in the HTML. When using the Masonry gallery type, images are absolutely positioned to best fit the available space. I recommend one of the following:
- Use the Custom size, enable Crop, and set a specific width and height for your images.
- Use the Custom Grid gallery type and design the gallery layout and order manually.
- Ensure all uploaded images have the same aspect ratio (for example, your first image has 90:47 and your second 45:19) so that the masonry layout behaves predictably.
Warm regards,
Teo
Custom with crop helped but looks like hell. Not all of my images are the same size. ALSO with Custom the tab order works but there is an extra between each item.
Sorry but I’m going to do this another way. Have a great day.
