Support » Plugin: ImageMapper » Image stretched on mobile, with no links.

  • Greetings,

    Im using WordPress 4.0.1. I created an image map that looks and works perfect on the computer in chrome and fire fix. However on mobile devices the image is stretched, and the links do not work. When the picture is clicked it just zooms in on the picture. I’ve tried it on tablets, phones, and an iPod all with the same result.

    Also, is there a way to make the link pop up in a new tab? I tried to new pop-up layout, but I don’t if thats what that feature is for. However it did not work.

    https://wordpress.org/plugins/imagemapper/

Viewing 9 replies - 1 through 9 (of 9 total)
  • Same Problem here. Any solution? i tried to find an answer in FAQ but there is unfortunately no FAQ ^^’ Hope to see someone who’ll be able to help us 🙂
    BTW thx for this plugin!

    Hi again! So i tried to modify the imgmap_style.css file to resolve the streched problem first.

    #imagemap-image{max-width:100%; height:auto;} here i added the Height:auto

    canvas{max-width:100% !important;width:100%;height:auto} here the height was 100% modified to auto

    The size of the image is now good, however, i didn’t found for the areas to work. I’ll try to find out but i’m not a dev, just a guy who tries to do things .

    p.s: sorry for my english

    sorry my bad, the script did NOT work. i’ll continue to try to find a solution…

    this one “works” on my android phone and on ipad, however , you are only able to point on an area but nothing happens…

    <script>{
    $(function(){
       $('area').each(function(){
          var coord_vals = $(this).attr('coords').split(',');
          var new_vals;
          for(var i=0; i<coord_vals.length; i++) {
              new_vals[i] = coord_vals[i] / 2;
          }
          new_vals = new_vals.join(",");
          $(this).attr('coords').val(new_vals);
       });
    });
    </script>

    Plugin Author Tarmo Toikkanen

    (@tatti)

    Is this issue still relevant, or have the recent fixes by forum members fixed this as well?

    nope there is still a problem. explanation: on laptop the event is onMouseover, but on mobile devices there is no such event as far as i know. if you have the equivalent event for mobile devices it “pretty easy”

    On all sites that use image maps (not just via this plugin) there needs to be a non-graphical way to access the same information. See the “Countries” page and the drop-down selector at https://arbitrationinafrica.com/

    You will need to create a template called ‘single-imagemap_area.php’ in your theme folder, something like:

    <?php
    /**
     * The Template for displaying imagemap_area posts.
     * @package big-brother
     */
    
    get_header(); ?>
    	<?php if( function_exists( 'big_brother_the_breadcrumbs' ) ) : ?>
    		<div class="breadcrumbs">
    			<?php big_brother_the_breadcrumbs(); ?>
    		</div>
    	<?php endif; ?>
    	<div class="primary content-area">
    		<main id="main" class="site-main" role="main">
    		<?php while ( have_posts() ) : the_post(); ?>
    			<div class="article-wrapper">
    				<?php get_template_part( 'content', 'single' ); ?>
    			</div>
    
    			<?php // big_brother_content_nav( 'nav-below' ); ?>
    
    			<?php
    				// If comments are open or we have at least one comment, load up the comment template
    				if ( comments_open() || '0' != get_comments_number() )
    					comments_template();
    		?>
    		<?php endwhile; // end of the loop. ?>
    		</main><!-- #main -->
    	</div><!-- #primary -->
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    I am using a theme called “Big Brother” – your template will need to be changed to work with your theme (use your theme’s ‘single.php’ as a starting point).

    I *think* I had to make another tweak to make those pages displayable… (perhaps in response to some change in the plugin?)

    The drop-down selector was created with the “Shortcodes UI” plugin.

    Plugin Author Tarmo Toikkanen

    (@tatti)

    The plugin can display all hotspots as regular links. In Image maps -> Image map settings make sure that “Fallback links for areas” is turned on. And in the link shown by Samatva, the links are accessible right below the image itself.

    I am sure people have similar problem where image stretches to full width even on desktop.

    open:

    –imgmap_style.css

    edit below to auto; and image is no longer stretched.
    –canvas{max-width:100% !important;width:100%;height:auto}

    Maybe in next release you guys could add image resize within wordpress.

    awesome plug-in guys !!!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Image stretched on mobile, with no links.’ is closed to new replies.