NOTE: Please check with our support team before following this process as you may not need to use this!
Instructions for Use
Simple Code Snippets
Advanced Code Snippet (JavaScript Based Fullscreen)
By default, WordPress doesn't have any really easy way out-of-the-box to add the JavaScript code required for embedding a Zmags publication. Luckily, this is easily resolved by using one of the various "code embed" plugins available. The following tutorial demonstrates how to easily add publications to your WordPress site.
Instructions for Use
1) To begin with, this tutorial assumes you already have a WordPress site set up and know the basics of how to use it. If this is not the case, please see the following setup tutorial: Installing WordPress
2) Next, download and install the "Code Embed" plugin, available here.
3) Add a new page or post, or edit an existing one.
4) At the top-right corner, click "Screen Options", ensure "Custom Fields" is checked, and then click "Screen options" again to collapse the panel. (It should only be neccesary to do this once each for the first page and first post.)
5) In the text of the page or post, write %CODE1% where you would like the embedded publication to be inserted.
6) Under "Custom Fields", add a new field with the name CODE1 and prepare one of the below code snippets (see next section) for the value.
7) Click "Add Custom Field", wait a few seconds for it to be added, and then publish the page or post.
8) These code snippets are designed with the WordPress default theme "Twenty Fifteen" in mind. You may have to modify the style of the viewer div to fit your specific WordPress theme. To experiment with other code or styles, just modify the existing custom field's value, click 'Update' below the custom field's name, and then 'Update' in the Publish section..
Simple Code Snippets
The following code snippets are the two most basic options for embedding a publication in WordPress, but both have their drawbacks. (The next section has a more advanced example which provides a more ideal compromise between these two approaches.)
Full-screen publication, covers all other content:
This approach simply replaces an entire page of your WordPress site with a Zmags publication. Because the WordPress navigation and all other content will be covered, it is not recommended to use this approach with a post. Additionally, it is advised to provide one or more buttons and links in the publication itself which allow the reader to return to the rest of the site.
<div id="myViewerContent" style="position:fixed; top:0px; left:0px; height:100%; width:100%;"></div> <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script> <script> var viewer = new com.zmags.api.Viewer(); viewer.setPublicationID("YOUR_PUB_ID"); viewer.setParentElementID("myViewerContent"); viewer.show(); </script>
Preparing this code:
Replace YOUR_PUB_ID with the ID of the desired publication. This can be found by clicking on your publication's name in the "All Publications" list of the Zmags Publicator.
Partial-screen publication, fits within a post:
This approach fits the publication nicely within a WordPress post or page view, but can result in the content being displayed a bit small. Including a built-in fullscreen button can be helpful in this regard, but has certain limitations of its own (namely the fact that it does not play well with lightbox popups).
<div id="myViewerContent" style="height:400px; width:120%; margin-left:-10%"></div> <script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script> <script> var viewer = new com.zmags.api.Viewer(); viewer.setPublicationID("YOUR_PUB_ID"); viewer.setParentElementID("myViewerContent"); viewer.show(); </script>
Preparing this code:
1) Replace YOUR_PUB_ID with the ID of the desired publication. This can be found by clicking on your publication's name in the "All Publications" list of the Zmags Publicator.
2) If you will be using this code snippet with multiple posts, be sure to change myViewerContent so that it is a unique ID for each one. For example, something like viewer1, viewer2, viewer3. Please note that myViewerContent appears twice in the code, and both appearances should be swapped to the new ID.
Advanced Code Snippet (JavaScript Based Fullscreen)
While a little bit of shuffling around and reformatting is required, most of our other API examples can also be used with publications in WordPress. Generally, what's needed is to take the code from the <head> section of the example, place it below the code from the <body> section, and then toss out the rest of the HTML structure.
In the below code snippet, we demonstrate how this is done with our JavaScript Based Fullscreen example (a combination of approach 1 and 2). This is useful because it can fit nicely within a post, be expanded to fill the full window, and plays nicely with lightbox content in either view.
<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script> <script> var viewer = new com.zmags.api.Viewer(); viewer.setPublicationID("YOUR_PUB_ID"); viewer.setParentElementID("myViewerContent"); <!-- The next two lines are only needed for the Verge Viewer. --> viewer.setFullscreenMode(com.zmags.api.Viewer.FullscreenMode.API_ONLY); viewer.addEventListener(com.zmags.api.Viewer.TOOLBAR_BUTTON_ACTIVATE, function(event){if(event.buttonID==="fullscreen"){fullscreen_mode();}}); viewer.show(); var viewerStyle = ""; function fullscreen_mode(){ var viewerDiv = document.getElementById("myViewerContent"); if(viewerStyle == ""){ document.body.style.overflow = "hidden"; viewerStyle = viewerDiv.style.cssText; viewerDiv.style.cssText = "position:fixed;top:0px;left:0px;height:100%;width:100%;z-index:9001;"; } else{ document.body.style.overflow = "auto"; viewerDiv.style.cssText = viewerStyle; viewerStyle = ""; } try{ window.dispatchEvent(new Event('resize'), false); // Replacement for viewer.resize() } catch(e){ // Workaround for IE. window.resizeTo(screen.availWidth-1, screen.availHeight-1); setTimeout(function(){ window.resizeTo(screen.availWidth,screen.availHeight); }, 50); } } </script> <div id="myViewerContent" style="position:relative; height:400px; width:120%; margin-left:-10%"> <!-- Include the below line only for the Standard Viewer. --> <div onclick="fullscreen_mode();" style="position:absolute; bottom:5px; right:5px; background:rgba(255,255,255,0.5); border:solid black 1px; border-radius:5px; cursor:pointer;">Toggle<br>Fullscreen</div> </div>
Preparing this code:
1) Replace YOUR_PUB_ID with the ID of the desired publication. This can be found by clicking on your publication's name in the "All Publications" list of the Zmags Publicator.
2) If you will be using this code snippet with multiple posts, be sure to change myViewerContent so that it is a unique ID for each one. For example, something like viewer1, viewer2, viewer3. Please note that myViewerContent appears three times in the code, and all appearances should be swapped to the new ID.
3) Similarly, fullscreen_mode should be given a different function name for each post, and again this may consist of simply adding a number to the end, like fullscreen1, fullscreen2, etc. This appears three times as well, and all appearances should be swapped.
4) If you are using a Standard Viewer, remove the code near the start labeled "only needed for the Verge Viewer". It is also advisable to replace / restyle the provided Standard Viewer "toggle fullscreen" button with your own content.
5) If you are using a Verge Viewer, instead remove the code near the end labeled "only for the Standard Viewer".
Comments
0 comments
Please sign in to leave a comment.