Change the infobox size


To change the infobox size, do the following:

  1. Edit your map.
  2. Click on the menu “Infobox settings”.
  3. Change the infobox width by changing the value in the field “Infobox width”.
  4. Change the infobox height by changing the value in the field “Infobox height”.

Change the infobox image size

By changing the infobox size, you may also need to change the image size. To do that, follow these steps:

  1. Open/edit the file “functions.php” of your theme/child theme.
  2. Copy/Paste the following PHP code to add a WordPress custom image size. Make sure to specify/change the image width and height (in pixels) from 300 to your desired dimensions.
    /**
     * Add new image size to use with "Progress Map" infoboxes.
     * Note: The first 300 is the width, the second is the height! */
    
    add_image_size('cspm-custom-infobox-img', 300, 300, true);
  3. Copy/Paste the following PHP code to replace the default infobox image.
    /**
     * Replace default infobox image */
     
    function cspm_custom_infobox_img($default_thumb, $post_id){
    	
    	$my_custom_img = get_the_post_thumbnail_url($post_id, 'cspm-custom-infobox-img');
    	
    	$infobox_thumbnail = !empty($my_custom_img) ? $my_custom_img : $default_thumb;
    	
    	return '<img src="'.$infobox_thumbnail.'" />';
    			
    }
    add_filter('cspm_infobox_thumb', 'cspm_custom_infobox_img', 10, 2);
  4. Regenerate your images using a plugin like “Regenerate thumbnails”.

In the same context