Introduction

In this nifty guide, we’ll go over customizing with PHP snippets that will allow you to tailor your interactive images more to your liking.

Here is a handy guide on adding PHP filters.

PHP to Change the Thumbnail Image Size

The detail images for hotspots utilize the Thumbnail size, or if you’re using the Tooltip or Lightbox layout they use the Medium size. To use a larger or smaller version of the detail picture, you can use the following PHP snippet.

Start by using either the Headers & Footer or Code Snippets plugin to add in this snippet of PHP:

add_filter( 'da_detail_image_size', 'my_da_detail_image_size', 10, 4 );
function my_da_detail_image_size( $size, $hotspot, $img_post, $settings ) 
{ return 'full'; }

And, you can return one of the following image sizes:

• thumb: Thumbnail size (150 x 150 pixels)
• medium: Medium size (maximum 300 x 300 pixels)
• large: Large size (maximum 1024 x 1024 pixels)
• full: Full size (the original size of the uploaded image)

Customizing with PHP to Change H2s to H3s

While we don’t have a direct way to change the H2 headers to H3, we do have a PHP snippet we can offer to achieve this.

add_filter( 'drawattention_hotspot_title', 'drawattention_change_hotspot_heading_tags' );
function drawattention_change_hotspot_heading_tags( $title ) {
return str_replace( 'h2', 'h3', $title ); }

Before:

After:

Disable WP Image Scaling

WordPress issued a 2560px image threshold several years ago, meaning any image larger than this will be automatically resized.

But, the good news is that with the following filter, you can disable this threshold. After adding the filter, you should be able to upload images of any size without automatic scaling.

// Disable the WP 5.0.3 Big Image Enhancements Threshold feature: 
add_filter( 'big_image_size_threshold', '__return_false' );

Display Coordinates Field

While we don’t have an easy way to duplicate hotspots at the moment, we do have a filter we can offer that will enable the coordinates field in the hotspot editor. This filter will let you collect the coordinates from a hotspot and paste it into a new hotspot. Follow the instructions below to utilize this workaround:

1. Add the filter from below to the functions.php file in your theme. This will then enable the coordinates field.
2. Create your first hotspot.
3. Collect the coordinates from the first hotspot.
4. Create a new hotspot and draw it out.
5. Enter the coordinates from step 3 into the new second hotspot.
6. Repeat as necessary.

add_action('admin_head', 'DA_enable_coordinates');
function DA_enable_coordinates() {
    echo '<style>
        input[name$="[coordinates]"] {
            display: inline-block !important;
        }
        </style>';
}"

Related Guides

• 

  Enabling Hotspot Coordinates Field

• 

  Adding Custom Code

• 

  Styling with CSS

• 

  Importing and Exporting