User Tools

Site Tools


phplugins_responsive_issuu

Responsive Issuu Embeds

With Issuu, you can publish your own digital magazine. Once published, you may embed that magazine into your site. But Issuu's embed is not responsive, and we see that as a problem. So let's fix it.

You can go hands-on with our solution on our blog: check it out.

Viewing a magazine on Issuu's website, whether your own or someone else's, you have the option to Share.

Click Share, and then you have several sharing options, one of which is Embed.

Click Embed. A modal window will appear, presenting you styling options and a code snippet that you can copy-and-paste to embed the magazine in your site. There's also an important checkbox here:

Use on Tumblr or other blog

Enable this checkbox, and the code snippet will change to an alternative format.

As an example, let's use Russ Widstrand's Conversations. The embed code for this publication is:

<iframe width="525" height="268" src="//e.issuu.com/embed.html#0/8735834" frameborder="0" allowfullscreen></iframe>

The first thing we should do is update that snippet to include a class. Add this class to any and every Issuu embed that you use:

<iframe class="issuu" width="525" height="268" src="//e.issuu.com/embed.html#0/8735834" frameborder="0" allowfullscreen></iframe>

Now that the iframe has a class, we can target it using Javascript. The Javascript we're going to use is as follows:

<script>
$(document).ready(function(){
	function issuu(){
		var issue = $(".issuu");
		issue.attr({
			"width"  : issue.parent().innerWidth(),
			"height" : issue.parent().innerWidth() * .5625
		});
	}
	$(function() {
		issuu();
		$(window).resize( jQuery.debounce( 150, false, function(e){
			issuu();
		}));
	});
});
</script>

This is pretty basic stuff. We target elements with the “issuu” class, then set their width and height to that of the parent element. On resize, we check the width and height again, then update the iframe, resizing the iframe to fit the resized viewport, in effect making it responsive.

You will want to adjust the number .5625 to create the desired aspect ratio. Don't neglect the decimal point.

We can inject our Javascript into CE4 using PHPlugins, with the ttg_body_bottom hook probably being the most appropriate insertion point.

For example, if we will only be embedding Issuu publications into WordPress posts, then we can apply the script only to WordPress:

function ttg_body_bottom( $style, $path ) {
	if (G_STYLE == 'CE4-WORDPRESS') {
		echo '
 
		<script>
		$(document).ready(function(){
			function issuu(){
				var issue = $(".issuu");
				issue.attr({
					"width"  : issue.parent().innerWidth(),
					"height" : issue.parent().innerWidth() * .5625
				});
			}
			$(function() {
				issuu();
				$(window).resize( jQuery.debounce( 150, false, function(e){
					issuu();
				}));
			});
		});
		</script>
 
		';
		return false;
	}
	return true;
} // END

Alternatively, you might opt to embed your publications into CE4 Stage pages. If using CE4 Publisher to manage those pages, then you would probably want to adjust the function conditions to target a specific publisher template.

phplugins_responsive_issuu.txt · Last modified: 2014/07/26 14:17 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.