It's always great to see when the technologies developed by us are serving scientific research, something we at Lombiq are quite keen on. This time Orchard and DotNest proved to be useful for the Virtual Photonics Technology Initiative, who work on open-source computational (virtual) technologies for the Biomedical Optics community. So let's see what they have built!

This is a guest post by Lisa Malenfant, Specialist at the Beckman Laser Institute and Medical Clinic, who developed the original and the new DotNest sites as well.

The Virtual Photonics project website is a portal into our resources. We manage Open Source software that is hosted on GitHub and distributed via NuGet. We have several applications that use our core library, which are also available on GitHub. We have extensive documentation for using the software and the applications. Every year, we host a short course and after the event we make the education materials available online.

The Virtual Photonics Technology Initiative was established in April 2008 and the first project website was created and launched in 2009 using one of the first versions of Orchard CMS. We customized one of the basic themes and created a simple website that served us well for the past 10 years. We discovered DotNest while searching for a replacement solution for our WikiMedia based education site that had become difficult to maintain.

We created a site on DotNest and selected the PJS.ReTouch theme. We then started to migrate the content from the existing site: We had 9 years of content from 3 workshops and 6 short courses that we have hosted over the past 10 years. Although the migration was a manual process, we were able to simply cut and paste the content over to new pages created in Orchard. The theme was responsive and clean, but it was very different from the theme on our project site.

We were initially only looking to find hosting for our education site but since the process was so straight-forward and our existing site was already using Orchard CMS, we wanted to see what it would take to migrate our project site to DotNest also. We created a second DotNest site and then researched how to customize existing themes. All that was needed to create an identical Orchard site was to enable the “Theme Override” module, select the empty theme, add all the image assets and then drop the stylesheet into the style section of the Theme Override Settings. The stylesheet needed updating with the new image paths but that was the only required change.

Our existing project site was not responsive so once we had recreated the existing design we worked on making our site responsive. We added jQuery to the Head script URLs section of the Theme Override Settings and created a jQuery and CSS hamburger menu for small screens. We placed the JQuery code in the Custom head script section along with code to add a meta tag to enable responsive behavior:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');

Our project site does not have many pages, so we decided to recreate the content manually to allow us to update all links and content. Once the project site was built, we were able to take the styles, hamburger code, and images and create an identical looking education site. Although our site looks like a single website it is 2 sites working seamlessly together.

Are you working in academia as well, and are looking to host course or research group websites? Create one on DotNest and let us know if you miss something!

1 Comment

• Anita said 4 years ago

  This very interesting and quite informative.