Page MenuHomePhabricator

Image viewer for article images
Open, Needs TriagePublic

Description

Technologies needed: JS, wikicode, Vue, MediaWiki REST API

The goal is to allow viewing any article image in large size. When a Wikidocumentaries page article is expanded, the images in the article could open into full-screen when clicked, similar to this: https://fat.github.io/zoom.js/. Such code exists also for Vue, for example https://github.com/francoischalifour/medium-zoom

Details from @Susannaanas: I have been thinking about zooming the images in the article flow, once you have opened the article from the “expand” button and are viewing it with the images left to the text flow. The idea would be to enlarge an image by clicking on it. Currently, the link on the image leads [to its page on Wikipedia]. One of the problems is that the image on the page is low-res, and the image needed for the bigger view needs to be a different one.

Current behavior: The wikipedia page of this image is opened when clicked. This behavior should be overrided when the image is clicked to open into full-screen instead.

Event Timeline

@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?

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.

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.

  1. Would it be nice to show the image metadata? (In the PR for now, it's hidden and empty.)
  1. 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)?
  1. @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:

@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:

@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?

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.