 Welcome everybody to my presentation, how to use Drupal as an editorial system for online and for print. I am Leif Henning. I work as a software developer at PBI Media for about three years. Some facts to PBI. PBI Media is a software company that produces software solutions for the print production for about 35 years. And let's start. In our project, we had some challenges we were facing and these challenges were when using Drupal for online and for print. And first, yeah, the problem was that separate post variants should be possible for online and for print that you can just make an online article and that you can create a print variant out of this online article and that you don't just have to copy and paste all the content. The next point was that we want print specific article modifications with Drupal so that if you're just making one online article and if you're making a print variant out of it that you don't, yeah, if you change some content for the print variant that the online article won't be affected. And so we also had some things during the connection from Drupal to InDesign for print. InDesign is very popular and you need to use it and so it should be possible to, yeah, make content in both systems and that you can also update the content in both systems. And you should also auto-lay out the article in Drupal. So if you are making an online article, making your print variant and you are making some formats, style formats, you don't want to do it in both systems for sure. You want, yeah, the formats to be also be affected in InDesign. And for our customers who also already had a Drupal system with a specific content type for all the online articles, we also want to make it easy to integrate our solution into their existing Drupal system. So you will all know that Drupal is very good for all the text images, videos and so on that you can just publish all the content into the digital channels. And yeah, it's very handsome and easy. And now we've looked into the possible solutions which were on the market and, yeah, we found some solutions but they were all unidirectional so that you can, yeah, just take the content from Drupal, move it to InDesign, sometimes also with copy-paste, which is very un-useful. And yeah, if you are making some changes in your Drupal system or in your InDesign for the content, it won't be updated. So we want to have some solution where you can make changes at both systems. So if you're making one article in Drupal and you want to use it for InDesign, you will also be able to make changes in InDesign for the content. So we are using the JSON API from Drupal and we want to have a bidirectional connection so updates are possible in both systems. And our solution is called Starlink. You can easily make magazines, e-papers, brochures, white papers and so on with it. Yeah, let's go on. Our solution, we had some specific steps we are facing. And the first step was to introduce a new content type for print. So like I've already said, many companies already have their content type for online and we want to make it very easy to, yeah, that they can also make the print content type out of the online content type. So we said that the online content type and the print content type would be basically, most fields would be the same. And for all the other stuff, we have a mapping introduced. I will explain it later what the mapping is good for and, yeah. And with this mapping, you can just say that the machine names can also be differently and that all the fields for print and online can also be very different differently. So I've done some demos. That's the first one. Yeah, here the DrupalCon. It's our content type. It's the online content type. Yeah, let's have a look at it. It's very easy. So we've just doing very easy content types here. So the body is text formatted here, our headline field. It's also text formatted. And, yeah, first of all, we are saying that we will just create the print content type here of the online content type and that we are just making the new print content type with all the specific fields for online. And later on, we can also remove all the fields we are not using, which were not necessary here for our picture. It's a content reference to the media type image here. And, yeah, that's basically the whole online content type. Like I've said, it's very easy content type here. And if we want to create the print content type, we have some configuration here for our PPI styling integration, it's called. So you can select which content type you have for online and just select this checkbox, create print content type out of selected online type. And it basically says what it's doing and you can just save it. And then we should see that here we will have a new content type for print. So we're having both, both content types are changed a bit, we will see. So also the online content type, we've added a new field belongs to. That's an entity reference and I will explain later what it's good for, why we need it. And, yeah, let's have a look at the new created print content type. So, yeah, basically, it of course has all the fields like the online content type. But it also has the article template ID. I will also explain later what it's good for. And we need it for the print integration, but only for the print one. And all the other fields should basically for start also be the same. So if we don't need any field, we can later on remove it. And for sure we can also have some really more complex content types for online and it will also work. Here you see the pictures also an entity reference and we also have tags here, but tags are not important for print. So, we can basically delete it. So, yeah, we can also delete the lead. We don't need a lead for print, but we have something else, what is similar. And basically the same, we could also rename it. But to make it a bit more clear, it's better to just create a new one. So we create a text formatted for our sub headline. And the sub headline, we want to map the lead to the sub headline. The lead is, yeah, basically the same for online. So, just save it. And, yeah, I've already created another content type to make it a bit more clear what we can all do. It's called Infobox, it's very easy. And, yeah, for print, we can also have some Infobox to show you later that we can also place this Infobox as a content reference in InDesign easily. So it's a content reference, like I've said, to a content type called Infobox. And, yeah, that's basically our whole print content type. So let's come to our mapping. Yeah, we have something else here in our PBR styling configuration. This mapping is necessary if we want to say, we want to map this type from online to this type from print, from our print article. And, yeah, the machine names can basically be totally different, but the types should have to match. So here, the body will be mapped to the body also. If we have a field, if we have the online article with the field body, we will take all the content and we will map it to the field body in our print article. And here, like I've said, we'll map the field lead to a field sub headline. And for the text, I've just selected none. So that means that we will just ignore the text for print. So if we are having an online article, create a print variant out of it and the text will just be ignored. So that's basically all for our mapping first. I think it will be a bit more clearer with an example. So we'll see it in the next step. The next step is use an online article as source for a print variant. So we are basically having one online article with all the fields already filled and we want to create a print variant or even more print variants out of it. This should also be possible with our solution, but without just copy-paste all the stuff because you can have very many fields and it would be a bit tricky to copy-paste all the stuff. But we also want to copy all the content but without copy-pasting. And we also want to enable the user to switch between the online and print variant of the article and it's easily because we are holding together all the different variants from one article. And it should be possible to create even more than the two connected variants. So you can have one online article, you can have two print variants and you can even have more or even more online variants. It should be all possible. So I have another demo. I hope it's not playing yet. Why it's not working? Ah, no, sorry. Here we have our DrupalCon 2022. It's our online article. You see it here for the content type DrupalCon and we will just have a look at it and edit it. So here you see we've already pre-filled all the different fields. DrupalCon 2022 for the title. Here's some headline. We have some lead which should be met to our sub-headline for print. We also have some body text and the body text is also with some style formats. Like you see here, some text is bold and yeah, there were some other styles but you will see later. And we have some image and the image is also with some caption and so on and here some text which should be, like I said, ignored for print. So on the right side here we have some styling integration sidebar and we have a section for all our variants and you see here that says online DrupalCon 2022. There is a list normally with all the different variants but for now we only having one. And you can also create another variant out of the current article and you can select if it should be an online article or an online variant or print one. So we will create a print variant and you see here in the URL that we will have a different ID. So it's a totally different article. So in the title you see you also have this print we always edit in the title and the headline is also the same for sure. And here the sub-headline it's the same content like we've already had it for our lead. So it's all working with our mapping. We also have our body with all the format styles and the picture should also be the same for sure with all the different fields here and we have the newly introduced info box for print and I've just created some content for this. It's just a content reference so we will see and we will say that we want to take the info box to you next year. So we have a title for sure and we have the info box headline and the info box body and this will be later interesting for our in-design integration because we can also handle all the stuff with content references and so on. So now we see here we have a new group and this group was our DrupalCon 2022 article and our DrupalCon 2022 print article. We are referencing with our field belongs to this same group so all the different variants are belonging together so that we can say we can also go from one variant to another variant of our article. So here in our variant section you now see we have one for print, one for online and let's just say we will create of our print article another one another print article. The ID in our URL will also change because it's a totally different article and we will add the prefix here or post-vac we have the same sub-headline and basically the fields should be all the same for sure. Like I've said, these are basically two different articles so if we are making some changes in one of them the other article shouldn't be affected so we are having two print variants if we are making some changes here for the newly created print variant the other one shouldn't be affected. Here you see we also have all the same content and let's make some changes here. I've added here in the headline with some changes as a text and then we can save the article and we will see how we can easily switch between the variants and that they won't be the same for the content. Here it's with some changes here and like I said here we see all the different variants and you can just click on the other variant to switch between them. Now we are on the first print variant and it's without these changes. So let's go on to the most interesting part to our InDesign and Drupal connection. What was our plan? We want to place Drupal articles in InDesign without the copy-paste way because it's not so handy. We want to have an automatic layout of the article so if you want to make some changes in your Drupal article you're making some styles like bold and so on you don't want to make the changes in both systems and like I said we want to modify the content in both systems it should be possible and you can synchronize the content so if you're making one change you can write it back into the other system so that's the B-directional connection and we want to make maximum support for the editor so that he can very easily create his content and that he also sees a preview of the print article how it would look like and some Overset I will explain later what Overset is you maybe don't know what an Overset is for online but for print it's important so let's start with the B-directional content editing here we have our three different variants one is our online variant and these are our print variants and now let's switch to InDesign here I've already made some document template and you see in InDesign our content search you can search for content from Drupal here in InDesign and you can filter for a specific title so we are searching for all the content with a title which contains the word DrupalCon and we are seeing all our three different variants so it's a bit more cool you can also see all the content of the different fields that's the body text you also see what you've already written into your Drupal system into the body text this should be placed here into this InDesign field it's the main content and we have some other fields you can just drag and drop every single field into the article it sometimes makes sense but you can also drag and drop the whole article to your InDesign document so all the fields will be mapped into the specific fields from InDesign so here for example we have our picture with our caption with the original image the caption should be placed here and the image here and we also have the info box it's also very interesting because it's a content reference and we can also just say that we are placing these different these different Drupal fields into specific InDesign field boxes so these should be placed into these info box so let's have a look how it works we can drag the whole article and place it here and you will see it will take some time but all the different fields will be just placed into the specific InDesign fields and also all the formats like you maybe see here will also be mapped so here you see some bold text and some different InDesign formats so let's make some changes here in InDesign we'll remove some text and we can replace here this DrupalCon I've written DrupalMember also and then you see that there are changes here and you can write all these changes back to the Drupal article here you see that there are changes and we have here this little icon if you click it you can write all the content back to your Drupal article so it takes also some time and you will see we can directly jump from InDesign to our Drupal article and all the changes should be affected here so in the subhead line you see we had this 2022 and I've removed it in InDesign so it also won't be here in Drupal anymore and we've done some changes for our body text and these changes will also be take place here so let's also make some changes in Drupal and let's have a look how it will look in InDesign we will remove this print we don't need it and we will make some changes let's remove the DrupalMember here and let's switch back to InDesign so back in InDesign you see that there are changes you can also search for specific changes here and you can synchronize it with this button and if you synchronize it you see all the changes were made here also in InDesign the 2022 was removed and you see for the title that the print was also removed here so that's the first step for our InDesign and Drupal connection and let's have a look at some other features for this we also have some support for the editor one of this is the Overset indication and you will maybe don't know what an Overset is and you have a limited amount of space what you can write and all the text should fit in these specific boxes and if the text won't fit in you will see that there is some Overset that you have to shorten the text a bit or that you just remove something that the text will fit in again so let's have a look it works so I've added some text here for our body text you can just see the Overset here also in InDesign later on when we have some now you see it the background of the specific field is colored red and the last word which should fit in is show so all the Overset indication in InDesign is also done with InDesign plugins so let's switch back to Drupal and we should also see the same Overset indication here and you see it here after the word show you will see it and if we remove some text the Overset indicator will disappear and if you write some text again it takes some time sometimes but the Overset indicator will be placed again that's basically one of our new features and we have some other features to support the editor we have a layout that we don't have to do layout changes in both systems and we want to have an article preview already shown in Drupal so that you can see how the article will look like when you place it on the specific InDesign document so it's our print article and here in our Starlink integration sidebar one of it is the content usage you see some metadata and some information which is interesting how the article status is and if you've already placed it and it's interesting if you want to publish a whole publication here you see it's placed on page one and this is our Planets one of our tools where you can see the whole publication and you will see all the metadata here like edition and our pub date when it should be published and that it's placed on the first page here and that we are all ready editing it we have some more information here another preview and you will see we will get a whole preview from our InDesign document how it would look like if you just publish it and you will also see here all the different styles layout formats will also be be affected in InDesign here we have some bold text and you should also see it's not so clear but I hope you will see it, it's also bold here in InDesign and this text is in our body text, the heading 3 and we will also map it to InDesign style which you hopefully see here that it's a bit other formatted so that's the whole InDesign thing and let's go to our last point I've already said that we can search for all the content in InDesign that we can search for all the Drupal content for all the Drupal articles in InDesign and now I will explain how we've realized it so we want to have the ability to search for the Drupal content in InDesign and it should be possible to configure all these different languages in Drupal directly so that we can say what we want to search for explicitly and it should be possible to filter the Drupal content because we don't want to see all these print articles for example we also want to just see some specific articles with a specific title or so on demo you've already seen that we can search for it's that articles here we've realized it with Drupal views so we have a view what we are searching for and this view is called articles and so we can say we want to filter all these articles for the word Drupalcon and here you see in our Drupal views that we have one view named articles I've just created an example that we can also search for all the print articles which will be interesting for our content editors and we will have to make it in REST export with a specific sub-path so we are all searching for all the views within REST export but we are also filtering it for the specific sub-path so we want to make the format JSON so that we are getting all the results as a JSON response and we want to do some filter criteria we want to search for a specific title so let's add the title criteria, filter criteria and we want to say we want to search for all print articles which contains a specific word so we will use the operator contains and the next filter criteria will be to use the specific content type because we only want to have all the print content types here so we will say let's search for content type and let's take some time let's say we want to have all the content types which is one of and we can say explicitly it's the Drupal print content type because we've said in our configuration that this is our specific one for print so if we want to have the ability to search for all the content in this new view we will have to restart InDesign for a short moment we've also selected that we will display all items and we don't want patch nation so now if we want to have all these views still in InDesign we have to restart InDesign client and just start it again take some time, sorry and now it should be possible to see here not only our articles we should also see our print articles and the difference is now if we search for the word Drupalcon as a filter criteria both of these articles which has the prefix print and if we search for all articles we will get all with content type Drupalcon and Drupalcon print so that's basically all these are the Drupal contributions and thank you very much so are there any questions? I think it's a dream to turn this into something that someone could use to, without having to open InDesign to just manage say an annual report on Drupal hit a button, see a PDF preview and it sort of does it all for them that way or is that, it seems like you've done an amazing job syncing the two applications together I've looked at things like InCopy and all sorts of stuff to do weird things like this but this seems really good we could make a multi-page, multi-content thing that we make the InDesign templates sync up the fields, come back with errors if text is too long and that sort of stuff and generate a report or something to a template could you use that to do this with a bit of work? I would say it would be very difficult because we need our InDesign server for sure for all the stuff because we also get the preview that we've seen from our InDesign server so I think... You could run one of those but it would be quite difficult to do Yeah, that's good Thanks Hey, two questions Question number one, which APIs do you use on the InDesign site? And question number two, how much of this is open source? Thank you We are using question two, sorry which of these are open source for now it's all experimental so we've just said that we will push it into the store, we are now really finished and we want to for sure make all the stuff with our variant concept also possible that everyone can use it but for some other stuff it's important to also use an InDesign server so you need the InDesign server for the whole ecosystem Not yet Which InDesign API? Could you repeat the question? Yeah, sorry The first question is how much of this is available on Drupal.org or will be available on Drupal.org and second question like which specific InDesign API would you use? Yeah, for the first question like I've said we will push it into Drupal.org, all of it but for the previous stuff you will have to need an InDesign server so you don't get the previous if you don't have the InDesign server And InDesign plugins, are they open source as well? I don't think so, okay, no Some more questions? What do I have to do to prepare the InDesign template for filling in the content stuff? You basically don't have to do so much for all the normal text fields and the picture for all the text fields you will get all the InDesign fields because we are all loading these fields over the JSON API Drupal JSON API and for some other more difficult fields you will have to configure some stuff I've not shown it yet because for some content references you also have to configure some stuff how the referencing field name is and then we are getting all the different fields into this content reference May I add a word, Leif? In InDesign you have to take the InDesign frames so each tag has to have a tag because this is a headline field, body text field and these tags will be used to map it to the Drupal fields to flow the content This part is outside Drupal Just following up on his question because I think I probably missed the API because I know he did ask what API and you said you need an InDesign server but in addition to that do you need something else or it's all custom build? We also have some background tasks but otherwise you basically don't only need the InDesign server Just maybe a last question but if I'm doing content moderation and I do and you have revisions of one of the articles if I refer back to a previous version of that does it take effect across all the items that are in that bundle and only be for that specific item that have reverted back? If you are making older revision if you take the revision back it should also take this revision because you are making changes for the article With that setting that layout that you showed with InDesign is that the default layout or how complex can you make it the InDesign layout? Yeah it can you make it more complex and then it will match them to the website so then technically do you have a sort of UX design? We have some basically predefined templates in InDesign so you can take all these predefined templates from InDesign You can't create your own You can also create your own and you can also change the current one you are using and just use it next time And that will automatically update onto the Drupal website If you are having these fields for sure, yeah Thank you Any more questions? Thank you very much