Sign in

map tag

  • This topic has 6 replies, 2 voices, and was last updated 8 months, 1 week ago by .
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #9716
    Avatar photoclac1

    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 photocandidexmedia

    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 photoclac1

    Thanks for your help.

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

    #9721
    Avatar photocandidexmedia

    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 photoclac1

    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 photocandidexmedia

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

    #9733
    Avatar photoclac1

    Capture-decran-2023-03-29-072624

    It seems to be the picture size.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.