Import images from JSON which lack coordinates into sidebar

[jywarren]

Here, we skip over images which haven't been placed, when importing from a JSON file:

Leaflet.DistortableImage/examples/js/archive.js

Lines 328 to 334 in 4d6e626

	if (imageObj.nodes.length > 0) {
	options = {
	tooltipText: imageObj.tooltipText,
	corners: imageObj.nodes,
	};
	placeImage(imageURL, options, false);
	}

But, we could collect those images and add them to the sidebar, so people can continue to place them?

This isn't a priority or anything, just an idea!

[7malikk]

Hello, @jywarren I took a look into implementing this suggestion, and here's my result:

In the above GIF, I was able to load the two images that had no values in the nodes array

I extracted a part of the renderImages() making it reusable for both scenarios (i.e to display images from the regular IA URL and also from a legacy JSON file)

renderImages() now looks like this

renderImages = (args) => {
   args.forEach((file) => {
      renderAnImage(file, url)
   }
)}

where renderAnImage() handles the rendering of a single image on the sidebar

Observations

• If you take a look at the pagination, it reads 0 of 0 - 0 which is its default value, this is because I did not tamper with the paginator class to create this, which leads to my next point
• for a smoother/elegant display, considering a scenario where there are many images without node values, the paginator class would need to undergo a not-so-minimal refactor

What are your thoughts? @jywarren

[jywarren]

Hi, this looks great, and I want to say I think due to the way mapknitter had worked, I don't think there will be too many images for each map, and we can leave pagination out for this use case. But thank you for carefully considering it!

…

On Mon, Feb 27, 2023, 11:34 AM Malik ***@***.***> wrote: Hello, @jywarren <https://github.com/jywarren> I took a look into implementing this suggestion, and here's my result: [image: loadLegacyInSidebar] <https://user-images.githubusercontent.com/75104021/221619606-a3bf1ce0-7ec1-4271-a5a9-784a489c9e6a.gif> In the above GIF, I was able to load the two images that had no values in the nodes array I extracted a part of the renderImages() making it reusable for both scenarios (i.e to display images from the regular IA URL and also from a legacy JSON file) renderImages() now looks like this renderImages = (args) => { args.forEach((file) => { renderAnImage(file, url) })} where renderAnImage() handles the rendering of a single image on the sidebar Observations - If you take a look at the pagination, it reads 0 of 0 - 0 which is its default value, this is because I did not tamper with the paginator class to create this, which leads to my next point - for a smoother/elegant display, considering a scenario where there are many images without node values, the paginator class would need to undergo a not-so-minimal refactor What are your thoughts? @jywarren <https://github.com/jywarren> — Reply to this email directly, view it on GitHub <#1363 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J7DSFZJRZORKGWIF53WZTJQPANCNFSM6AAAAAAVFELNRM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[7malikk]

Hi, this looks great, and I want to say I think due to the way mapknitter had worked, I don't think there will be too many images for each map, and we can leave pagination out for this use case. But thank you for carefully considering it!

Alright sounds great, will make a PR on it as soon as we finish up on the other one. Thanks!