@Susannaanas I'm wondering if it wouldn't be even nicer to use our existing image viewer component? This way in the future, people could improve the tags of the article images as well.

@Susannaanas @Zexi_Gong Regarding the implementation, I think we should also compare with the image viewer at wikipedia.org. When I click an image, I can see the viewer makes a call to the MediaWiki API to get the file information for the high-resolution version.

@TuukkaH : I agree that using our image viewer would be ideal. The image viewer itself is not quite mature yet, but it does not need to be addressed for other aspects than what is needed for this task. There are also differences in user interaction between the zoom behaviour and our image viewer, namely the scroll in the viewer view. The solution needs to be negotiated between possible options.

@TuukkaH Currently the backend sends the entire html page as a string to the frontend. Since it is impossible to add the ImageViewer component at the backend, there is no direct way to implement the image viewer. We could break the html string and replace the figure components. Alternatively, we can move the parsing logic to the frontend so we could add the imageviewer component directly. It would be easier to implement other vue component with this change in the future. Am I in the right direction? Which approach do you prefer?

I think you shouldn't need to change the parsing logic in the backend. If needed, you can add any additional parsing logic to the frontend. I'm not sure how much work this would be, but I agree it would be interesting with future improvements in mind.

However, I think a more straightforward approach here would be to simply capture any click events that happen inside the article, check if a figure was clicked, and if so, open the image viewer as a modal popup.

I agree it is the most straightforward approach and I am working on this task with this approach now although it sounds very hacky to me. I found that medium-zoom does not support showing new images with higher resolution. As what we discussed earlier, I propose to use the existing ImageViewer component. However, it is hard to start using this component for me. Is there an existing webpage that uses the existing ImageViewer so I can play around with that?

In T330179#8636467, @TuukkaH wrote:

I think you shouldn't need to change the parsing logic in the backend. If needed, you can add any additional parsing logic to the frontend. I'm not sure how much work this would be, but I agree it would be interesting with future improvements in mind.

However, I think a more straightforward approach here would be to simply capture any click events that happen inside the article, check if a figure was clicked, and if so, open the image viewer as a modal popup.

Is there an existing webpage that uses the existing ImageViewer so I can play around with that?

When you click an image in the "Images from the archives" section, the popup is rendered by the ImageViewer component.

@TuukkaH https://github.com/Wikidocumentaries/wikidocumentaries-ui/pull/92

Now that @Zexi_Gong has a nice pull request, this got me thinking (perhaps for future tickets):

1. What did @Susannaanas actually mean in T330179#8635949 regarding the zoom and scroll behaviors? (In the PR for now, practically nothing happens if you try to zoom or scroll.)

There are also differences in user interaction between the zoom behaviour and our image viewer, namely the scroll in the viewer view. The solution needs to be negotiated between possible options.

2. Would it be nice to show the image metadata? (In the PR for now, it's hidden and empty.)

3. Would it be nice to have all the images of the Wikipedia article in a list (like we do in the "Images from the archives" section and like wikipedia.org does)?

4. @Zexi_Gong Did you have a look at the MediaWiki APIs and our backend yet, whether they could provide some useful image info? Neither of you has commented on this:

In T330179#8633584, @TuukkaH wrote:

@Susannaanas @Zexi_Gong Regarding the implementation, I think we should also compare with the image viewer at wikipedia.org. When I click an image, I can see the viewer makes a call to the MediaWiki API to get the file information for the high-resolution version.

4. @Zexi_Gong Did you have a look at the MediaWiki APIs and our backend yet, whether they could provide some useful image info? Neither of you has commented on this:

In T330179#8633584, @TuukkaH wrote:

@Susannaanas @Zexi_Gong Regarding the implementation, I think we should also compare with the image viewer at wikipedia.org. When I click an image, I can see the viewer makes a call to the MediaWiki API to get the file information for the high-resolution version.

There is a Wikipedia API that could provide all image info. It will be easy to do 2 & 3 with this API. Currently there is no such implementation at our backend. Would you like to add the API query function to our backend or our frontend?

In T330179#8651510, @Zexi_Gong wrote:

There is a Wikipedia API that could provide all image info. It will be easy to do 2 & 3 with this API. Currently there is no such implementation at our backend. Would you like to add the API query function to our backend or our frontend?

I think it would be nice as a new endpoint in the backend. Perhaps the same code that processes the response from Commons can be used? However, while most Wikipedia images are Commons images, some are not, so that may complicate something.

1. What did @Susannaanas actually mean in T330179#8635949 regarding the zoom and scroll behaviors? (In the PR for now, practically nothing happens if you try to zoom or scroll.)

Hi and sorry for the late reply!

With the scroll behaviour, I mean the behaviour in the "Medium" code, where the enlarged image disappears when the user scrolls further in the text. Our image viewer also has a bahaviour for scroll: It displays the metadata view below the image. We discussed with @TuukkaH that we could create a microtask for an additional step before opening the image viewer, where the user could scroll away from the image or choose to display the metadata and browse the article images.

@TuukkaH https://github.com/Wikidocumentaries/wikidocumentaries-ui/pull/92

• Added the new endpoint in the backend.
• Metadata shown in the image viewer (though not all fields are available).
• All the images of the Wikipedia article are in a list in the image viewer.

Hi , I am Vedant Pandey, as I am new to open source and interested in contributing in gsoc 2023, can I contribute using pure Javascript for image viewer and scroll behaviour? By adding an Event Listener to the images when clicked thus showing an enlarged view of the image and enabing zooming feature.Though I had to research more related to how to implement this feature, I would be grateful if I could use js for implemetation.

@Vedant_pandey2003 I created a new task T331229, where we can discuss that.

Dear sir,
This is to inform you that I vedant Pandey was trying to contribute to
microtask which you gave but unfortunately I made a blunder mistake by
making pull request due to which 250+ commits occurred.Although I had
changed nothing in the code but I take full responsibility for that mistake
and please forgive me for this mistake.I would be very grateful for this.
Yours faithfully
Vedant Pandey

Hi @Susannaanas, @TuukkaH. Could you review my pull request? https://github.com/Wikidocumentaries/wikidocumentaries-ui/pull/92
It has been more than two weeks. I would really like to do another microtask after finishing this one.