[clac1]

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.

[candidexmedia]

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.

[clac1]

Thanks for your help.

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

[candidexmedia]

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.

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.

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

 

[clac1]

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.

[candidexmedia]

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

[clac1]

It seems to be the picture size.

[Author]

Posts