Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

map tag

  • #9716
    Avatar photo[anonymous]

    Is it possible to use the map tag with Publii?
    I did a test and I encounter two difficulties:
    1/ the generated html code indicates an erroneous path for the photo on which the map tag is applied: two / after the post number:

    <figure class="post__image post__image--full"></figure>

    2/ the coordinates I measured on the picture are totally shifted after synchronization.

    I manually corrected the path, the result is visible here : https://collection.click-clack.fr/les-salons/

    Any help will be greatly appreciated. Thanks in advance.

    #9719
    Avatar photo[anonymous]

    Salut!

    Which post editor are you using, and could you sure the full map code that you’re inserting? I’d recommend pasting the code snippet into Pastebin or Gist since this forum isn’t idea for code sharing.

    #9720
    Avatar photo[anonymous]

    Thanks for your help.

    I’m using WYSIWYG editor. And you can see the full code here : https://privatebin.net/?2d2af07f9cb32a08#9q4UrTvP6VbkGnhc9Wd7zDzEGbyeKcvGq6jyYnTo4Esn

    #9721
    Avatar photo[anonymous]

    Issue 1: File path error

    I’m not sure why the file path is erroneous, but I replaced the file paths in your pastebin with the image sources in your website, and it worked fine. If you’re still having issues, try hosting your image on a media management service like Cloudinary and using that link as the source to see if you’re still having issues?

    Issue 2: Incorrect dimensions

    The first thing that struck me is that because there’s the “post__image post__image–full” classes, the width and height you set for the image are ignored. Instead, the full image CSS class sets the image to the full width of the page.

    full-width-image

    To fix this, set your image class to “None” in the Insert/Edit Image dialog and ensure that the dimension are correct. I think “Centered Image” should work as well.

    no-image-class

    Double-check the Source code to make sure your usemap attribute is still there.

    #9724
    Avatar photo[anonymous]

    The path problem seems to be solved after deleting and putting the photo back in the post.
    Regarding the problem of the coordinates shift, I used the “None” class on the photo. Its size indicated in Insert/Edit Image dialog is the real size of the photo. But the coordinates still shift.

    #9732
    Avatar photo[anonymous]

    Use the Inspect Tools in your browser to check what size your image is being displayed in.

    #9733
    Avatar photo[anonymous]

    Capture-decran-2023-03-29-072624

    It seems to be the picture size.