This is really neat!
Kind words from WordPress.com VIP‘s rock star team after deploying our new ad integration extension to Jetpack’s Carousel. Built for 9to5mac.com, this extension appends a custom image to the full screen carousel modal. We’re excited to share it with the WordPress community, along with a few cautions and insights.
Rules are rules: no AdSense
If you were hoping to inject AdSense ads, we’re sorry to disappoint: AdSense policies clearly stipulate that an ad may not be “Displayed in pop-ups or pop-unders.” You may, of course, be able to leverage our approach for other, more forgiving ad networks. We envision the typical use case will involve an internal “house” ad image.
jp_carousel.beforeClose. We hooked into afterOpen – which fires every time the carousel is generated – on line 14 of carousel-ads.js:
$( document.body ).on( 'jp_carousel.afterOpen', SELF.insertAd );
Defining parameters for the image
In order to make sure that our image is aligned correctly and responds with the rest of the carousel, we needed to add several data attributes to the container on line 79.
var $ad = $( container).data('title', '') .data('desc', '') .data('caption', '') .data('attachment-id', '') .data('orig-size', '300, 250') .data('comments-opened', 0) .data('image-meta', '') .data('medium-file', '') .data('large-file', '') .data('orig-file', '');
While these are mostly null attributes, the orig-size element is important for positioning inside the carousel.
To see this code in action, hop on over to 9to5mac.com and check out any one of the carousels (like this one).