Michelanglo — Image to NGL

Construction of a pretty picture that turns into a NGL view


The logic is simple: images get made in PyMol and then heavily photoshopped or powerpoint-shopped and there is no way to have that level of annotation without making the editor become a god of PyMol or NGL. In fact, arrows are not a default feature in PyMOL and few know how to use them. This way, the editor gets both the simplicity of making powerpoint annotated PDB images and allows the users to play with their protein.


  • make sure that the image is added with only a <img src="…" …> tag, without a wrapping anchor element or positioning div as happens in the WordPress editor
  • The viewer will have the same dimensions as the image —the example has width='100%' attribute to rescale the image to occupy the available space to it.
  • The user needs to know that it can be clicked adding the attribute style='cursor: pointer', will change the cursor to a pointer
  • The viewport div can be activated without JS by using the role='NGL' attribute or by using the multiLoader (see markup). Example of the former is <div role="NGL" data-load="1gfl" data-view="[3.14, &hellip]"><img src="gfp.jpg" width="100%" style="cursor: pointer"><div>

This is an image that was annotated. Clicking will switch it to NGL.