We’ve already presented a case study for the Show Orchard website focusing on migrating an Orchard 1 DotNest website to Orchard Core with content migration using the Orchard 1 Recipe Migration feature; you can read that here. Now, the GPU Day website is very similar except the content migration was simplified and we didn’t overhaul the website markup and styling. It’s a great example of how you can easily transition to Orchard Core keeping everything as is if you don’t have the time or budget to modernize every area of the site. As most of what we at Lombiq do, this project is also open-source. If you’d like to follow along, you can have a look at the theme’s source code here. This is a post by Márk Bartha, software engineer at Lombiq. Introduction GPU Day is a conference organized by the Wigner Scientific Computational Laboratory that focuses on massively parallel computing, visualization, and data analysis in both scientific and industrial applications. We also presented our Hastlayer .NET hardware accelerator project many times there too. The website serves as an information hub for these annual conferences. It was initially running on Orchard 1 DotNest, but now it was time to migrate it to Orchard Core. While these migrations always come with certain challenges due to the new features introduced in Orchard Core, we tried to keep things easy by not changing the frontend of the site, even though it's somewhat outdated. Rethinking content types Each GPU Day event needed to display various types of information, such as the schedule, speakers, and location details. Previously, with Orchard 1, this process required creating separate content items for each type of information and then linking them using the Projection or Content Elements in the Layouts editor. However, Orchard Core offered a more streamlined approach and we could simplify it. First, there was no real need for the option to organize the elements' position, so we didn’t just replace it with FlowPart. We used content fields instead, for example, the "About GPU Day" section is now just an HtmlField instead of a separate content item. For organizing the event schedule, we introduced an Event Day content type to represent each day of the event, capturing its title and date. Additionally, we created an Event content type for each specific activity, detailing its time and other relevant information. There’s another content type called Event with their details along with the date and time of it. With all this information we were able to add a BagPart called Schedule to the GPU Day type and let the admins add Event Day items. Then, there was a query responsible for fetching all the Event items where their day matches with the one set to the Event Day item. The Speaker items, similarly to the Event items, are managed separately, but we also use a Taxonomy called Year. It’s the same implementation we had on the Orchard 1 site: if the Year value matches with the one selected in the Year TaxonomyField on the GPUDay type, then a query can fetch the related speakers. Migrating the old events While we didn't utilize the migration utility, we still needed to transfer all the past events. Although there weren't many content items, recreating the events manually would have required us to also create all the speakers and scheduled programs, and there were around a hundred of them. Considering these events are already in the past, the easiest solution was to create a content type called Old GPU Day with an HtmlBodyPart and simply grab the markup from the live site. The only adjustments needed were to the image URLs. The relative paths were fine since we copied the entire media library, but in the old system, they were prefixed with "https://dotneststatic.com/”. We had to replace this with a Liquid media filter (e.g., https://dotneststatic.com/media/images/wigner-logo.png became {{ "~/mediatheme/images/wigner-logo.png" | href }}). Finally, we ensured that these are rendered exactly the same as the normal GPU Day items and that the queries listing the old events capture both the old and new ones, ensuring that a visitor won’t notice any discrepancies. Keeping the original styling completely Back then, the theme was originally built on a third-party template. We implemented multiple shape templates where the markup followed the original design. With the migration, we didn’t aim to overhaul or modernize the styling. We still wanted to use our NodeJS Extensions for asset compilation, though. So, we simply copied over the old .scss files along with the third-party assets and ensured they compiled, resulting in the same styling. It was more or less straightforward; however, we had to fix a few breaking changes with the new compiler, such as using math.div() instead of a slash (see more about this here). To keep the markup as it was, we copied the original Liquid code into their corresponding templates. The Liquid code had to be modified since it is not entirely compatible with Orchard Core, which uses a different library and set of filters. For example, the {% Href "~/Themes/GpuDay.Theme/Images/wigner-logo.png" %} code was changed to {{ "~/mediatheme/images/wigner-logo.png" | href }}. Lombiq modules and utilities involved During development, the NodeJS Extensions utility proved invaluable, as it automatically compiles all assets during the build process. The Lombiq Media Theme is an ideal choice for developing a media theme for DotNest, compiling your templates and assets into a deployable package; refer to the documentation for further details. Lastly, we used the Lombiq Privacy module to ensure GDPR compliance. Summary Migrating old websites from Orchard to Orchard Core doesn’t have to be a huge hassle if you're willing to make some compromises. We were content to use the old markup and assets, and we managed to store the entire HTML markup of the old events in an HtmlField to keep the process simple and less labor-intensive. Ultimately, the admins can now enjoy the more user-friendly content editing capabilities of Orchard Core to create this year's GPU Day event – see what Balázs Kacskovics told us about it: Our work became much easier with the new admin panel. With fewer menu items, it became much more transparent and intuitive than before. Now, finding the relevant options and content items is a simple task. Also, fewer content types mean less hassle for us, e.g. the editing of the new GPUDay content item is more efficient and less time-consuming, also we can make fewer mistakes with the new frame. If you're considering migrating your Orchard 1 website to DotNest Core, this is an excellent time. Should you have any questions or encounter challenges don’t hesitate to reach out to us. We're always ready to bring our expertise to your unique project needs. Get in touch with us today, and let's start making your Orchard Core website even better!

If you're looking to migrate an Orchard 1 website along with its content items to Orchard Core, whether on DotNest or any other Orchard Core website, the DotNest Core SDK and Orchard 1 Recipe Migration feature make the process straightforward. The Show Orchard website is a practical example of this, what we just migrated to Orchard Core. This is a post by Márk Bartha, software engineer at Lombiq. Introduction Show Orchard is an Orchard CMS showcase, displaying only the best Orchard Core and Orchard 1.x powered sites from around the web. It was started by Ryan Drew Burnett, now maintained by Lombiq Technologies. When we took over the project, we already implemented it on DotNest, but at that time it was an Orchard 1 site. Since DotNest fully supports Orchard Core, it was time to migrate it. However, since a lot has changed since Orchard 1, it required us to rethink a few widgets here and there, and also we had to take care of the existing content items. Do you want to jump right into the code? You're lucky since the Media Theme-based theme of Show Orchard is open-source and available here! Preparations Creating a DotNest site is most efficiently done by utilizing the DotNest Core SDK. The SDK is an actual Orchard Core website that comes equipped with a preset of features and themes that are already available on DotNest. It also activates the Media Theme feature, a tool used for hosting your theme assets and templates conveniently in the Media Library. There’s also a handy utility known as the Media Theme Deployer that takes your Liquid templates from the Views folder and assets from the wwwroot folder, packaging them into a Media Theme recipe ready for import on DotNest. We used a fork of this SDK repository for our own DotNest sites and started to develop the theme as if it were a typical Orchard Core site, always mindful of the limitations. Content types and UI components The websites and their data (e.g., URL, developer name and contact, image, category) are stored using the Website content type. The AutoroutePart is attached for the friendly URL, and the HtmlBodyPart is included for the optional interview with the developer. The configuration of this content type, including the category taxonomy, aligns with the Orchard 1 version of the content type. The header and the footer are implemented directly in the Layout.liquid file for simplicity. This approach has been effective, as it hasn’t required editing for years; if it did, we would have used a widget. The menu is implemented utilizing the Menu feature and is displayed with the Menu shape. There is a specialized Categories menu that requires additional implementation. This menu lists all the terms from the Category taxonomy, each linking to a page displaying the corresponding content items. To accomplish this, we created a new menu item content type (the stereotype being MenuItem). We then used a Query to retrieve the Category taxonomy in the menu item's shape override, displaying the term items' display link. The Queries feature proved invaluable for other components as well. For instance, the stepper on the Website content item detail pages and the listing of related Website items both leverage this feature to fetch the necessary content items. Automated styling compilation The original styling of the Show Orchard site was outdated. It was built on an old version of Bootstrap, utilized LESS for styling, and the classes didn’t follow our favored BEM conventions. To modernize and enhance the styling, we shifted to Bootstrap 5 and adopted Sass for styling. Lombiq’s Orchard Base Theme served as the foundation for the theme, offering helpful shapes, including the GoogleTag shape designed specifically for Google Analytics integration. Compilation of the assets was efficiently handled by Lombiq's Node.js Extensions utility. Migrating Orchard 1 content items to Orchard Core The Orchard 1 Recipe Migration feature in the Helpful Extensions module proved to be extremely useful for this task. It’s a feature that adds a page to your Orchard Core website where you can import an Orchard 1 recipe, converting it into an Orchard Core recipe. However, there were a few challenges encountered. We had to create IOrchardContentConverter and IOrchardExportConverter implementations to address specific data needs. These providers are designed to extend the recipe converter logic with custom logic, either per imported content or after the whole export, to carry out additional tasks. For us, it was essential to ensure the Category taxonomy terms were imported accurately, and their IDs were correctly assigned to the Category taxonomy fields. We also faced a task with the exported Media; in Orchard 1, Image and other content types represented a media item and had their ID referenced in Media Fields. In Orchard Core, it’s directly associated with a relative path to the media file. To address this, we used an IOrchardExportConverter to map the legacy IDs to the media paths and assign them to the new media fields. We decided against including the actual images with the media recipe step in the recipe, as it would result in a massive file size and a potential timeout. Uploading them manually to the appropriate Media Library folder wasn't a significant issue. Conclusion Though the Show Orchard website is simplistic in its design, migrating data and re-implementing various elements presented its own set of challenges. Nonetheless, we are pleased to announce that the site is now seamlessly operating on DotNest Core. Our next step is to transition all of our remaining DotNest sites to Core as well. If you're considering migrating your Orchard 1 website to DotNest Core, this is an excellent time. Should you have any questions or encounter challenges don’t hesitate to reach out to us. We're always ready to bring our expertise to your unique project needs. Get in touch with us today, and let's start making your Orchard Core website even better!

Migrating the content of an old version of an Orchard Core website with a custom theme and with modifications in the business logic of the Orchard Core Commerce module to DotNest? Yes, it is possible! This case study explores how we achieved this with Ik wil een taart, a confectionery in the Netherlands, by migrating the content of the website running on the RC2 version of Orchard Core to the latest one, on DotNest. The site is a client of Princen group, which is a Dutch company, specialized in web development since 1992, offering secure, user-friendly, and scalable digital solutions. This is a post by Krisztián Németh, software engineer at Lombiq and project leader of DotNest. Theme Conversion Initially, the site had a custom theme written in the Liquid templating language and several templates added via the admin UI too. Our primary objective was to transform this into a Media Theme. First, we focused on maintaining the theme without altering the unique business logic derived from custom modifications in the Orchard Core Commerce source code. Commerce Features Enhancement As stewards for the Orchard Core Commerce project, we saw this migration as a perfect opportunity to enhance the product based on real-world feedback. We added local tax calculations, net-gross prices, integrated Stripe payments, and made other minor adjustments. These improvements and many more led to the release of versions 1.0.0 and 1.1.0 of Orchard Core Commerce. You can explore the changes and releases here. Like many other projects of ours Orchard Core Commerce also uses Node.js Extensions to handle assets, and Helpful Libraries to reduce boilerplate. And of course, as this site will be part of DotNest it uses the Privacy module also. Adding the Commerce Feature on DotNest DotNest Tenants Core didn't have the Commerce feature, so we added it and deployed it to be available for everyone who wants to create a custom site on DotNest with an Orchard Core tenant. So, feel free to do it, it's there, ready to use! Adjustments and Additions After the Media Theme was ready and the new Commerce features were implemented, it was time to adjust the view logic in the Liquid files, leading to some small modifications in the Commerce module. This was exactly the moment where it came in handy that we had a live scenario, so the Commerce module could be enhanced in a very close and fast feedback loop. The biggest challenge was to have the new Stripe payments feature included in the site's custom theme and also because of the changed business logic on how prices were calculated we had to adjust the view logic where it was needed to show prices, sum prices, and tax sums. This was done in three different areas: On the cart summary page, on the successful order page, and in the email template which is being sent after a successful order by a workflow. Content Migration Next, we moved the old content and data to the new system. We did it by exporting everything via recipes from the old site and then importing them to the new site locally. Changed some content type and content part-related settings and fields due to the fact that the old site had a bit different structure for products than we have now in Commerce. We used Helpful Extensions for the Page content type, which includes a Title Part, Autoroute Part, and Flow Part. We also used the Helpful Widgets from Helpful Extensions for its Liquid Widget and Html Widget content types. After everything was set a final export was done to be able to deploy that data to the staging environment of DotNest. Localization Finally, due to changes in shapes and the addition of parts and view elements in the Commerce module, we had to add Dutch translation to the site using PO files with the help of OrchardCoreContrib.PoExtractor and the Orchard Core documentation about localization. Conclusion All in all, the project stands as a successful case of website migration and customization, meeting unique demands. Feeling inspired by the transformation of "Ik wil een taart" and ready to take your own Orchard Core website to the next level? You're in the right place! Try out the improved Orchard Core Commerce feature on a DotNest site today! And, if you have any questions or are facing challenges similar to those we tackled in this project, don't hesitate to get in touch with us. We're always ready to bring our expertise to your unique project needs. Contact us today and let's start making your Orchard Core website even better!

Do you have a simple static website that you want to spice up with proper content management? Orchard Core is a CMS that you can quickly migrate to, and DotNest can host it with two clicks. This is what we did for Xero4PowerBI too! This is a post by Krisztián Németh, software engineer at Lombiq and project leader of DotNest. Introduction Xero is an excellent financial management system; however, providing access to your Xero data is difficult. Xero4PowerBI, developed by Paradigm BI, a boutique business intelligence studio, offers a cost-effective multiplatform reporting system that enables fast-paced reporting on your financial status. Paradigm BI specializes in creating insightful business intelligence tailored to your needs, making your Power BI dashboards and paginated reports work for you. Xero4PowerBI is Paradigm BI's tool that facilitates sharing financial information across your organization using bookmarks and alerts on desktop and mobile devices, creating datasets that Excel users can easily use in pivot tables and charts. The Challenge The original website of Xero4PowerBI was a simple 4-page HTML site that needed to be migrated to DotNest and Orchard Core. The goal was to create a modern, flexible, and easy-to-maintain website while preserving the existing design and functionality. The Solution Our team at Lombiq migrated the website to Orchard Core by creating the pages and templates, maintaining the original design while slightly modifying it to fit the new Orchard Core Media Theme. This allowed for a better and easier structure of zones, and we also added a simple footer. The site now can be viewed at https://xero4powerbi.com/. We set it up using the Blank Orchard Core recipe and enabled various features that were needed for the site using a predefined recipe. Mainly Lombiq Helpful Extensions were utilized for creating the Page content type, consisting of a Title Part, Autoroute Part, and Flow Part. We also used the Lombiq Helpful Extensions - Helpful Widgets feature for Liquid Widget and Html Widget functionalities. In addition to the existing site, we implemented a blog using the Orchard Core The Blog Theme as a template for blog-related content definitions. The Media Theme was exported via a zip file, created by the Media Theme deployer dotnet tool. The Media Theme, a feature developed by Lombiq, allows developers to host their themes in the Orchard Core Media Library, including templates and assets. This feature is especially useful in SaaS scenarios where full Orchard theming cannot be provided to every user, yet the theming experience must remain available. Thus, this was our go-to solution for creating a custom theme and hosting the site on our Orchard Core SaaS DotNest. The Results The successful migration to DotNest Orchard Core provided Xero4PowerBI with a modern, easy-to-use website that met their requirements. The site now offers improved functionality, flexibility, and maintainability. Mike Allen, Principal Consultant at Paradigm BI, shared his positive experience working with Lombiq for the migration: In the past I have used WordPress, Blog Engine, and hybrid .NET Razor and Blog Engine. I selected Orchard Core as my new CMS as I wanted a modern .NET platform that incorporated a blog. Creating a theme seemed difficult, so I asked Lombiq for some help, and as they say, the rest is history. I wanted a mixture of different types of widgets so that I could do HTML or Markup and the flexibility to add new features to the website. Mike Allen Services trades as Paradigm BI, a registered business name in Australia. Paradigm BI has developed Xero4PowerBI and initially had an Azure Static website. Paradigm BI is a boutique business intelligence ISV located in Brisbane, Queensland, Australia. Are you considering migrating your website to Orchard Core or looking to enhance your site's features? Don't hesitate to get in touch with us and let our expertise work for you!

You have quite a lot of options if you want to start a personal website, or something like a blog nowadays. You can use services like Medium or Substack, but my problem with those is that ultimately, you don't have complete control over how your content is published and how people may consume it. Monetization wasn't my concern either. I wanted something simple, where I can be sure that people will be able to read my quips without any of the contemporary online marketing tools intruding (hello, profiling and soft paywalls!). Having been an Orchard developer for more than a decade, perhaps let's just use Orchard Core for this too? So, I quickly created a DotNest site and got going. This is a post by Zoltán Lehóczky from Lombiq, but about his personal website. I'll spare you the suspense, here's my site if you'd like to check it out: https://lettersfromfiume.com/. As you can see, it's a blog with an About page, a search feature, and that's it. Exactly what I needed! After creating the site, I've set it up with Orchard's built-in Blog recipe. Initially, I didn't actually want to customize anything. But then I started to fiddle around, because of course I couldn't resist adjusting some things: By default, blog posts use Markdown for their editor. While I like Markdown, I thought that I'll publish more than simple text, what may necessitate adding some HTML to your Markdown anyway, so let's just start with a full HTML editor. Thus, I've added HTML Body Part to the Blog Post content type. This change required me to override the Content__BlogPost and Content_Summary__BlogPost shapes to display the text, so I did that with the Templates module from the admin. Now I wanted to add a favicon instead of the default one with the Orchard Core logo, and also add a tiny bit of CSS... At this point, things were starting to get a bit messy on the admin, and I figured that if I'm writing code, I might as well write it properly, in an IDE. So, I thought I'll utilize the recently available Media Theme approach. I followed the instructions in the DotNest Core SDK, ending up with a GitHub repository that contained an Orchard Core app with which I could run my site locally and create a proper Orchard Core theme for it. The theme is nothing too special, it used TheBlogTheme as its base theme, and contains a couple of shape overrides, a CSS file, and some graphic files. It also has a setup recipe with a snapshot of my site's content, so with the help of Orchard's Auto Setup feature, the site runs right away if I hit F5 in Visual Studio. One particularly cool feature of the whole development story is that it also uses a GitHub Actions workflow from Media Theme to automatically deploy the theme if I push to the repository. The changes are out on the production site less than 30s after I've pushed! The code is fully open-source, and you can check it out here for some inspiration. Later, I also added a search feature with Elasticsearch. This was just a matter of running Orchard's built-in "Blog - Elasticsearch Search" recipe. Overall, this was pretty straightforward. I quite enjoyed getting this little site up and running and customizing it here and there. Of course, it just scratches the surface of what DotNest can do, but this is what I needed. You can also have your own Orchard Core site running hassle-free on DotNest, create one here!

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!

The GPU Day conference series organized by the Wigner Research Centre for Physics of the Hungarian Academy of Sciences is dedicated to the fields of parallel and high-performance computing, visualization and data analysis in scientific and industrial applications. On the last three conferences Lombiq presented its cutting edge technology, called Hastlayer. The conference site was developed by Gábor Domonkos from Lombiq here on DotNest which is a great proof of how far you can get using only the built-in DotNest features and Media Theme for theming. This is a guest post by Gábor Domonkos, software engineer at Lombiq. Click here to open the repository page of the theme project. Requirements The goal was to have a website for the organizers of the GPU Day, that can be used to easily manage the content of the conference and list the details of every conference in the series. GPU Day requires responsive website for the attendees to be able to view it from mobile devices. Let's see what features are implemented on this site hosted on DotNest Find and apply a responsive theme for the site Create speakers Create talks and assign speaker(s) to the talks Be able to show the abstract of every talk in a modal window Have a modal window where users can watch the recorded videos of the talks using an embedded YouTube player Have a skeleton content type for every GPU Day that can be easily customized and filled with data Have an embedded Google Maps Create a contact us form where users can send message to the organizers via email Add reCAPTCHA for the contact us form Some of these features are pretty trivial to achieve in Orchard. To keep this case study exciting only the most interesting implementations will be described in-depth. Find and apply a responsive theme You can find various websites that works as a marketplace for themes and templates. GPU Day uses the Simple - Multipurpose template from WrapBootstrap.com, which is compatible with Bootstrap 3.3.x. As you can read the hints of Media Theme Deployment Configuration on the Orchard dashboard, the maximal size of the package can be 25MB and can only contain at most 250 deployable files (if you just want to store some files in the package but don't want to deploy them then put them into folders called "NotDeployed" anywhere, you can even use multiple such folders; files in there won't count). So the files of the purchased theme have to go under the NotDeployed folder, as you can see in the theme's repository. You can import the necessary third-party scripts and css files for your theme using the Layout.liquid file in the following way: {% Script "https://code.jquery.com/jquery-3.2.1.min.js" %} {% Style "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" %} {% Script "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" %} {% StyleRequire "FontAwesome" %} From now the classes predefined by the theme and other third-party libraries can be easily added to the HTML tags in the liquid files. For instance, the site can show the URL of the LinkedIn profile of the speaker, if we set up the value of this field using the Orchard dashboard. Here the social-icon class from the SimpleTemplate and the fa fa-linkedin classes from Font Awesome has been added to the <a> and <i> tags. {% if Model.ContentItem.SpeakerPart.SpeakerLinkedInProfile.Value != null %} <a href="{{ Model.ContentItem.SpeakerPart.SpeakerLinkedInProfile.Value }}" target="_blank" class="social-icon" title="LinkedIn"><i class="fa fa-linkedin"></i></a> {% endif %} Creating speakers Speakers are content types, that represent the performers of the conference and can be assigned to talks. Every speaker must have a title (which is the name of the person), a photo, a company/institute and a year. The value of the year field will be used in the projection widgets to show in which year(s) the speaker has given a presentation. Users can also add the e-mail address of the speakers. To prevent showing the original e-mail address in the front-end, the Content-Speaker.Summary.liquid file replaces the @ sign in the entered address to (_at_) text. When the user clicks on the e-mail address, the main.js file reverts this change and then the user can send the message to the valid address. Masking the addresses in the HTML is necessary to prevent the spambots to collect the e-mail addresses and send mails to the speakers. Creating talks and assigning speaker(s) to talks The talk content part has several fields attached to it. The most important is the title of the talk and the speaker(s) of the talk. Using content picker fields and set up to only pick from Speaker content types makes easier to connect talks and speakers. Showing the abstract of every talk in a modal window By clicking on the title of the talk, users can read the abstracts in a modal window. For that, the organizers can set the text of the abstract when creating the talk using an WYSIWYG HTML editor. This piece of liquid markup from the Content-Talk.Summary.liquid file shows how to open a Bootstrap modal in a liquid file. {% if Model.ContentItem.TalkPart.AbstractText.Value != null %} <a href="#" data-toggle="modal" data-target=".bs-modal-lg-{{ Model.ContentItem.TalkPart.Id }}">{{ Model.ContentItem.TitlePart.Title }}</a> {% else %} {{ Model.ContentItem.TitlePart.Title }} {% endif %} The main thing here is data-target attribute. Every conference has multiple talks, and therefore multiple modal windows. The value of this attribute shows which window has to be open when the user clicks on the title of the talk. So when defining the template of the modal window the class referenced in the data-target attribute has to be the same. <div class="modal fade bs-modal-lg-{{ Model.ContentItem.TalkPart.Id }}" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h2 class="modal-title">Abstract</h2> </div> <div class="modal-body"> {{ Model.ContentItem.TalkPart.AbstractText.Value }} </div> </div> </div> </div> Embedded YouTube videos in a Bootstrap modal window The main goal was to set the YouTube URL as easy as possible from the dashboard, so the organizers can set the value of the video in the common format, like: https://www.youtube.com/watch?v=mu_VWWEi-GI They no need to bother with the embedded format. If the video URL is set, the site will show a little icon, same with the abstract. {% if Model.ContentItem.TalkPart.Recording.Value != null %} <a href="#" id="video" data-id="{{ Model.ContentItem.TalkPart.Recording.Value }}" data-toggle="modal" data-target=".bs-modal-lg-{{ Model.ContentItem.TalkPart.Id }}-video"><i class="fa fa-youtube-play" aria-hidden="true"></i></a> {% endif %} When showing the embedded YouTube video we construct the modal window in the same way, but the content of the window is slightly different. <div class="modal fade bs-modal-lg-{{ Model.ContentItem.TalkPart.Id }}-video embedYouTubeModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h2 class="modal-title">Recording</h2> </div> <div class="modal-body"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item"></iframe> </div> </div> </div> </div> </div> Because of the value of the recording here could be in a common YouTube video URL format, it may be necessary to convert it to be usable in an embedded way and set that value to the <iframe>. convertYouTubeUrlToEmbedMarkup: function () { $(".event-part").find("#video").on("click", function () { var youTubeUrl = $(this).data("id"); var modalWindowId = $(this).data("target"); modalWindowId = modalWindowId.substring(1, modalWindowId.length); var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; var match = youTubeUrl.match(regExp); if (match && match[2].length == 11) { $("." + modalWindowId).find(".embed-responsive-item").prop("src", "https://www.youtube.com/embed/" + match[2]); } }); } GPU Day skeleton content type To create a new page for the upcoming conference, the organizers have to add a new GPU Day content item. Here they can set the title, subtitle, date and many other options to fill the details of the new event. The Layout editor of this content type comes with a prefilled content. The different layout elements need to be in a given order and have different CSS classes to display in the front-end in the proper way. Therefore the organizers do not need to bother with aligning the elements and adding the necessary classes to them. They just need to select the content items and create widgets that will render content and publish their work without building the layout from scratch. Have an embedded Google Maps The Google Maps content type has an APIKey textfield which stores the Google API key. To use the Maps JavaScript API you must register your app project on the Google Cloud Platform Console, and get a Google API key which you can add to your app. The following liquid code adds the API key to the application: <div id="map" class="mb0" style="position: relative; overflow: hidden;"></div> <script src="https://maps.googleapis.com/maps/api/js?key={{ Model.ContentItem.GoogleMapsPart.APIKey.Value }}"></script> Now - by using the Google Map api v3 - it is possible to customize the embedded Google Maps. The following adds a map with a marker on it. Without going into details: new google.maps.Map() creates a new Google maps object. The center property tells the API where to center the map. The map coordinates are set in the following order: latitude, longitude. Defining a new marker with the new google.maps.Marker() puts a marker on the map. The position property sets the position of the marker. if (document.getElementById("map") && typeof google === "object") { // Map pin coordinates and content of pin box var locations = [ [ "<address><strong>Address:</strong> 29-33, Konkoly-Thege Miklos u, 1121 - Budapest, Hungary</address>", 47.487416, 18.954929 ] ]; var map = new google.maps.Map(document.getElementById("map"), { zoom: 14, center: new google.maps.LatLng(47.487416, 18.954929), // Map Center coordinates scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, animation: google.maps.Animation.DROP }); google.maps.event.addListener(marker, "click", (function (marker, i) { return function () { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } } Adding a contact us form The visitors on the site may want to send a message to the organizers. The Dynamic Forms feature is the best solution for this, since it has a Workflows activity that is fired after a dynamic form has been submitted. One can use this activity as a workflow trigger followed by an Email activity that can send the form values via email to the organizers. Adding reCAPTCHA for the contact us form Because any visitor can submit this form it's necessary to add a spam protection to it. By enabling the Anti-Spam Element feature, you have the ability to add a Re Captcha Element to the dynamic form. You can easily get a reCAPTCHA API key from Google that you can copy over to the Orchard dashboard in the form under the /Admin/Settings/Spam URL. If you liked this case study and realized how cool features you have to create a nice website, just create your own site on DotNest for free. If you have any questions, then leave a comment below.

There is a blog for the Hungarian Microsoft Student Partners developed by Márk Bartha and Dominik Földi here on DotNest which is a great proof of how far you can get using only the built-in DotNest features and Media Theme for theming. Microsoft Student Partners are a group of university students who are enthusiastic about Microsoft technologies, regularly organizing meetups and workshops in their country. This blog has been written in Hungarian but it's still a really good example of a nice and heavily customized DotNest website. This is a guest post by Márk Bartha, software engineer at Lombiq. Click here to open the repository page of the theme project. Requirements Authenticated users who are using the website are in different roles. For example, the Student Partner role makes the user able to create a blog post, however, they are unable to publish it. Student Partner Mentors are proofreading the blog posts and hit the Publish button. Also, there are the Administrators who are able to create static pages (e.g. about page), event announcements or forms for contacting student partners. Let's see what features are implemented on this site hosted on DotNest. Create blog posts by student partners Publish blog posts by student partner mentors Set the status of blog posts (e.g. "Done", "Proofreading" or "Editing") Highlight a blog post on the home page Set header images for blog posts Create user profile pages to let the authors introduce themselves Create and publish event announcements and static pages by administrators Send emails to the student partners if a comment has been added anywhere on the site Create a contact page where the users can send a message to the student partners via email Share the blog posts on Facebook, Twitter, and Google+ automatically after a blog post has been published Other stuff like listing the posts and events in widgets and also be fancy using a nice customized Bootstrap theme Some of these features are pretty trivial to achieve in Orchard. To keep this case study exciting only the most interesting implementations will be described in-depth. Creating and displaying blog posts with proofreading possibility Fields as placeholders First of all, the BlogPost content type has been updated with a few additional fields. Most of these fields are functioning as placeholders (ie. their shapes has been overridden to display some data). For example, there are social share buttons displayed on the blog post detail page. To achieve this, an InputField has been added and overridden in the theme in the Fields.Input-Social-ContentSharing.liquid file containing the various share buttons. There is another field to display the author's name and profile link on both summary and detail pages. This one is in the Fields.Input-AuthorPart-ContentAuthor.liquid file that contains this code: <span class="content-author {{ Model.ContentItem.ContentType }}-author"> <a href="{% Href "~/Profile", Model.ContentItem.CommonPart.Owner.UserName %}">{{ Model.ContentItem.CommonPart.Owner.ProfilePart.FullName.Value }}</a> </span> Note, that these fields are on custom content parts to be able to reuse them on the Event content type. Highlighting a blog post To make it possible a BooleanField has been added to the BlogPost content type. Using this, the editor or the mentor can mark the post highlighted. There is a Query that fetches the posts with this field set ON and orders them by CreateDateUtc descending. It's using an unordered HTML list with a custom display type to render the items. Finally, a ProjectionWidget using this Query has been placed into the BeforeMain zone (can be Featured zone or anything) and only the first item has been displayed. Proofreading blog posts As mentioned above, the student partners are not authorized to publish blog posts. They can mark a blog post as "Done" by updating an EnumerationField attached to the BlogPost content type. After a mentor has logged in they see these posts and can review their content and publish them. If the post is not ready, they can mark it as "To be fixed". But how can the users see what status has a blog post been set to? The display shape of this field has been overridden in the Fields.Enumeration-StatusPart-Status.liquid that has been made visible in the admin summary from Placement.info. Since the theme stylesheets have no impact on Dashboard pages, this shape contains a liquid switch for assigning a background color for the status text container. Note, that it is possible to include static resources using the Liquid Markup. The following code section has been updated to show English status descriptions. {% if Model.ContentItem.VersionRecord.Published == false %} {% case Model.ContentField.Value %} {% when "In progress" %} {% assign bgColor = "gray" %} {% when "Waiting for proofreading" %} {% assign bgColor = "#fa6800" %} {% when "Proofreading in progress" %} {% assign bgColor = "#6a00ff" %} {% when "Can be published" %} {% assign bgColor = "#008a00" %} {% when "Has to be fixed" %} {% assign bgColor = "red" %} {% else %} {% assign bgColor = "transparent" %} {% endcase %} <div style="padding: 5px; background-color: {{ bgColor }}; width: auto; display: table-cell; color: white; font-weight: bold; width: 110px; text-align: center;"> {{ Model.ContentField.Value }} </div> {% endif %} Using workflows to send emails After a user commented on a blog post or an event announcement the student partners need to be notified about it. There is a pretty easy solution for this by using a workflow that is triggered by the Created Comment content item and followed by an Email activity. The Email activity is using tokens to display the author and their email address of the comment and the text itself. The visitors on the site may want to send a message to the student partners. DynamicForms feature is the best solution for this since it has a Workflows activity that is fired after a dynamic form has been submitted. One can use this activity as a workflow trigger followed by an Email activity that can send the form values via email to the student partners. Managing and displaying user profiles The authors need to have a profile page where they can show a bio and other personal details like social profile links and their roles at Microsoft. Also, they want to list the posts they have already created on the site. The Contrib.Profile module provides two pages where the users can edit and view their profiles outside the Orchard Dashboard. The User needs to have a ProfilePart where some fields have been attached to like FullName, Email, Bio and the social profile URLs. To be able to list the blog posts created by the user a ProjectionWidget is used. The Query has a filter that selects the content items matched by a search query in a search index. The query string is a token which gets the username from the route: {Request.Route:username}. Sharing blog posts on the social networks automatically To reach the followers and notify them the posts has to be announced on Facebook and Twitter. To make this happen automatically the well-known IFTTT has been used. It polls the RSS feed of the blog, and if it detects a new content it shares a post on Facebook and Twitter using the title and the URL of the content. Nice and simple. If you liked this case study and realized how cool features you have to create a nice website, just create your own site on DotNest for free. If you have any questions, then leave a comment below.

George Roubie, an Orchard developer from Greece runs his personal development blog on DotNest as Orchard Tricks. Now he has summarized how he has created his site in this detailed case study. Enjoy! This is a guest post by George Roubie. Choose a template You can create your custom theme from scratch and upload with the Media Theme Deployment. On the other hand, if you don’t want to write everything yourself, you can choose one theme from the built-in ones. In Orchard Tricks I am using the PJS.ReTouch. Basic customization of the template Theme Options Some themes like PJS.ReTouch or other PJS themes have their own settings so you can change the appearance as you like. Change the favicon After you change the options of your theme you should change the favicon of your blog. Upload your favicon in the media folder. Go to Theme Override Settings and add your favicon URL. Features Analytics Every site needs Google Analytics, so if you want to track your users you have to enable the Simple Analytics module. After this you need to go to Settings and add the code that Google gave to you. Contact form A contact form is required if you want to have some feedback from your users. You have to enable the Dynamic Forms module so you can create a form with drag-and-drop. If you want to prevent bots from submitting your contact form you have to add a Re-Captcha element to your form, but first you have to enable the Anti-Spam Elements feature. The problem at this point is that you have to sign in to the dashboard every day to check if someone has sent you a message. This problem is solved if you create a workflow that notifies you with an email on form submit. You have to enable the Email Messaging and the Email Workflow Activities features for this. You don’t need to fill the STMP settings because DotNest has already filled that for you. Your workflow will look like this: Search form Every site needs one and the installation is so easy. Go to Modules > Recipes > Search and click Execute. The Search is now working but you can go to content definition and add more content that will appear in the search results. The final step is to go to Widgets and add the Search Form Widget. Useful Widgets The most useful widgets for a blog are: Recent Blog Posts Tag Cloud These I also added on Orchard Tricks. Customize blog posts Styling You can easily overwrite the styling of the blog post, by enabling the Theme Override feature, then going to Theme Override Settings and adding your CSS to Styles > Custom Styles. This stylesheet will be included last, so you can override any styling. Comments I actually don’t like Orchard Comments and I always remove the Comment Part from Blog Posts. Instead I add Disqus comments. You will have to enable Liquid Markup Templates module so that you can override how Blog Posts are displayed. I prefer to add the comments after the Body so I am overriding the Blog Post Body Part. You have to create a template with the name Parts_Common_Body__BlogPost: Your template should look like this: Liquid Markup is very powerful and you can do a lot of content customization. You can check out the public blog at https://orchardtricks.dotnest.com/. Go ahead and create your DotNest site for free to build your own blog!

As announced recently a theme for Orchard community sites, as well as free custom domain usage for them is now available on DotNest. The first such community site to be moved to DotNest is the Orchard Project Indian Community website: Abhishek migrated the website from Azure to DotNest very quickly. You can read about his experiences in this blogpost!