1

When exporting a webmap using qgis2web, the images I want to display are way to big and it makes very difficult to navigate through the map. Is there any way I can make them smaller and fit it to the pop up?

enter image description here

5
  • Maybe this could be help:gis.stackexchange.com/questions/296778/… Or you could resize your images for the popup: for example width: 300px. – Jürgen Dec 10 '20 at 8:04
  • I have already read this article you mention but it didnt realle help me because I didnt know where and how i should write the code he mentioned. Could you either clarify me that or show me where can i resize my images for the pop up? Thanks – Serggg182 Dec 10 '20 at 10:12
  • I guess the proposal to resize you images referred to resize them outside of QGIS in a regular image processing software like GIMP, Affinity Photo or Photoshop and than use this reduced files in your project. If you don't want to show your pictures in the full resolution, it makes no sense to have them embedded with that degree of detail, just to resize them on the map canvas: waste of resources – Babel Dec 10 '20 at 13:28
  • This solution could be great if the amount of images were small .. I would rather prefer to touch the code somehow into the html file (if possible) to make them smaller and able to fit in the pop up.. But 1. I dont know if this is possible and 2. I dont how – Serggg182 Dec 10 '20 at 14:06
  • With the free software photoscape photoscape.org/ps/main/download.php you can change the size of many images at once. And you can have the same or new file names. With the function batch processing for different image formats. – Jürgen Dec 11 '20 at 9:54
2
+50

As suggested, you can add a simple css rule to determine max width for the images.
The answer here won't work for you anymore since leaflet has changed the name of the popup content class.
There is also the problem where qgis2web uses a table inside its popups.

what you need to do, is open the index.html file and edit the ` tag.

instead of just:

<style>
  #map {
            width: 894px;
            height: 813px;
        }
</style>

add :

<style>
#map {
     width: 894px;
     height: 813px;
   }
 .leaflet-popup-content > table img {
    width: 300px;
   }
 .leaflet-popup-content > img { /*for other leaflet maps you can add rule as well*/
    width: 300px;
   }
</style>

you can change the number of pixels to match how you want you images to look.

1
  • That is exactly what I was looking for, thanks a lot #Dror Bogin, this code and your explanation has solved my problem perfectly. Thumbs up! – Serggg182 Dec 14 '20 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.