Joomla Templates Club 406,261 posts

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#182511

Ok guys, here are my findings so far.
With a little help from more experienced guys or maybe the devs .. we can find a stable solution for running ads inside the wall grid.

Any contribution to this topic will be great. So, if you have any javascript knowledge, idea or just want to help … feel free to post any suggestion or code improvement.

For weeks i was scratching my head on how in the world i will be able to “place” some advertisment blocks inside the wall grid and make them “blend” with the wall items really nice.

In my searches i found that masonry developer (David Desandro) released several months ago a nice mod that will allow us to “stamp” a div inside the wall grid and “blend” it with the rest of the content.

This mod is called “corner-stamp” , more info below :

http://masonry.desandro.com/demos/corner-stamp.html

So far so good. Now, i was researching a way to implement this into my grid, i will post my progress so far below

A. Go to your template folder: /ja_wall/html/com_content/category and open blog.php

1. First, we need to create the javascript code that will “stamp” our ads div in the wall grid.
Inside blog.php file, right after the following code

<?php

defined('_JEXEC') or die('Restricted access');

// define this is grid view

define ('_IS_GRID_VIEW', true);

JHtml::addIncludePath(JPATH_COMPONENT.'/helpers');

?>

i added the javascript code for corner-stamp function

<script type="text/javascript">
$.Mason.prototype.resize = function() {
this._getColumns();
this._reLayout();
};

$.Mason.prototype._reLayout = function( callback ) {
var freeCols = this.cols;
if ( this.options.cornerStampSelector ) {
var $cornerStamp = this.element.find( this.options.cornerStampSelector ),
cornerStampX = $cornerStamp.offset().left -
( this.element.offset().left + this.offset.x + parseInt($cornerStamp.css('marginLeft')) );
freeCols = Math.floor( cornerStampX / this.columnWidth );
}

var i = this.cols;
this.colYs = [];
while (i--) {
this.colYs.push( this.offset.y );
}

for ( i = freeCols; i < this.cols; i++ ) {
this.colYs = this.offset.y + $cornerStamp.outerHeight(true);
}

this.layout( this.$bricks, callback );
};

$(document).ready(function(){
sortWithMasonry();
});

var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();

$(window).resize(function(){
delay(function(){
sortWithMasonry();
}, 500);
});

function sortWithMasonry() {
var $container = $('#masonry-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 300,
isFitWidth: true,
cornerStampSelector: '.corner-stamp'
});
});
}
</script>

2. Now we need to define the <div> that will be “stamped” inside the wall.

In the same blog.php file , right after the opening tag for masonry grid

<div id="masonry-container" class="clearfix">

i added my “corner-stamp” div that will run the ads.

<div class="item grid-double corner-stamp" style="height:350px; margin-top:10px;margin-bottom:12px;">
<?php
//$document = &JFactory::getDocument();
//$renderer = $document->loadRenderer('modules');
//$options = array('style'=>'xhtml');
//echo $renderer->render('ads_wall',$options,null);
?>
</div>

You noticed above that my ads div is configured as “grid-double” item (this will allow me to run bigger ad sizes than the actual article items blocks)

Also inside that corner-stamp div you noticed the code shown below

<?php
//$document = &JFactory::getDocument();
//$renderer = $document->loadRenderer('modules');
//$options = array('style'=>'xhtml');
//echo $renderer->render('ads_wall',$options,null);
?>

This is a joomla “call” for a module assigned to position “ads_wall”. Basically this will render any module assigned to “ads_wall” position. So go in your backend and “manually” assign a module to this position (just enter “ads_wall” into the module position box and save it) .. then publish it.

* You can use any banner inside this module.
* You can use any joomla adserver for managing campaigns and serving ads into this module (just make sure you set-up the zone or the adserver component to show ads on “ads_wall” module position)

Last thing to do is to define a css class for this corner-stamp div. I defined the one below

.corner-stamp {
background:none repeat scroll 0 0 #ffffff
box-shadow:2px 2px 3px rgba(0, 0, 0, 0.2);
}

Place this in your template css file and adjust as needed

Now, here comes the 2 tricky issues, maybe together with some help from the devs we can figure it out.

A. Biggest enemy – Google Adsense

If you will try to publish some adsense code into the “stamped” module you will notice that adsense will load only on first ad block and as you use infinite scroll, ads will not load anymore into aditional stamped divs.

There is also a debate about refreshing ads via javascript and many say that this breaks Adsense TOS.

But when i look to the website below, they use adsense inside the masonry grid just fine …

http://boxnutt.com/
* although as far as i observed – they are loading 2 or 3 ads and just replicating them inside the grid as you scroll down (ads are not refreshing while you scroll, same ones are displayed over and over again if i am not mistaken)

We need to find a viable solution for running adsense into our walls.

B. Stop “corner-stamp” when you reach the end of the page (“no more post to show”)

As of now, the above solution will load that “corner-stamp” div additional times after you reach the wall end. We need to find a way to stop the loading at that point.

I would really love your input and help on this.

2 users say Thank You to internetix for this useful post

1. JA Developer
2. vineyardseashell

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#474235

I made a mistake above on joomla code used to render a module (i forgot to uncomment the php lines :laugh: )
So , the correct one is below

<?php
$document = &JFactory::getDocument();
$renderer = $document->loadRenderer('modules');
$options = array('style'=>'xhtml');
echo $renderer->render('ads_wall',$options,null);
?>

So … does anybody have an idea how we can trick the mod from the first post to make it work with Google Adsense (without breaking their TOS of course)

Maybe if we can load a “batch” of let’s say 3 ads only once and then just replicating that already loaded ads across the entire wall grid.

I think google does not allow refreshing the ads by javascript. Which is very stupid for ajax powered sites -because we are not refreshing the ads “automatically” by javascript just to create false impressions .. we are loading them in response to user action -> scrolling down the grid -> loading new “pages” of content.

So , any help ? 🙂

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#475076

So, nobody wants to contribute to this ? :((

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#475087

I’m interested in your idea but I’m currently confused enough with Google & Bing being unable to index my JA Wall site without the help of sitemaps to test out your code.

Though if I’m not mistaken, your problem with ads not refreshing/appearing after on next page load is because the page is not refreshed due to ajax loading. So the way to go about this is to add a call to the java script function in wall.js so that it will reload the adsense script when loading the next page.

Regarding breaking adsense TOS when using javascript to reload ads, that should only applies to static ads and not in this case.

[vineyardseashell Friend vineyardseashellJoin date: March 2011Posts: 163Downloads:30Uploads:20 Thanks: 60 Thanked: 19 times in 1 posts]

#475346

@Iinternetix

That is a great tip! It works like a charm until, as you mentioned you get to this part:

<blockquote>B. Stop “corner-stamp” when you reach the end of the page (“no more post to show”)

As of now, the above solution will load that “corner-stamp” div additional times after you reach the wall end. We need to find a way to stop the loading at that point.

I would really love your input and help on this. </blockquote>

If anyone has a solution, I too would greatly appreciate it!!!

Thanks,
Vineyardseashell

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#475457

Hi internetiox, great work, this is of huge interest for me, …could you show me your site to see how it looks? thanks

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#475578

Thanks seaneo for the kind words.
My website is still under development on localhost and can’t show you anything “live” right now. :(( Sorry about that.

Basically the script will stamp a “div” that contains the ads module as first “item” , on each “page” load inside the grid wherever it finds the space available for it. The ads item is constantly changing position inside the grid, based on space “slot” available on each page load.

So think about it this way: If you have let’s say 20 items (articles) on each “page” – you will have one ads item every page load that’s basically every 20 items across the grid – with constantly changing the ads position based on empty space found by the masonry on each page load.

Hope i makes sense ! :laugh:

It works really well (except few things). We have to deal, as i said previously with 3 issues:

A. Stopping the “stamped” div when you reach the end of the page (no more post to show)
B. Somehow make adsense work with this solution. For me just first item show adsense, the other one does not load ads at all and i think we have to refresh somehow the ads with javascript.
C. If we refresh the adsense ads using javascript we have to be 100% precent SURE that WE DON’T BREAK ADSENSE TOS 🙂

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#475635

it’s like Chinese to me!:):)

the “picture is worth a thousand words” will take care of that:) – I look forward to your live site, I wish you the best of success, cheers

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#476127

Bump. @wall Crasher

I quote from another thread that you will try to look into the corner stamp ads. Well this is the original thread with regards to the usage of corner-stamp + Google AdSense. Could you offer your input and perhaps solution in this thread?

<blockquote>About the ads, I would take a look in detail what provider you are going to use. I am not sure that all ads provider code is compatible with AJAX (infinity scroll) but I will give a try.</blockquote>
Quoted from http://www.joomlart.com/forums/topic/disable-fb-comments-on-specific-content-pages/#post-476119

It would be a nice step forward for JA Wall to have this feature supported or implemented somehow, given that its impossible for us to create a new module position within masonry.

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#476283

Hi,

I would like to give a solutions for this but I need to know your context.
Please pm ftp/admin account for a site that have problem with Google Adsense or other Ads provider as well.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. vineyardseashell

[Honzazi Friend HonzaziJoin date: June 2006Posts: 63Downloads:1Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#476407

Hello everyone,

please, is there any update? Did you actually make it work?
Thanks a lot
Regards

[Honzazi Friend HonzaziJoin date: June 2006Posts: 63Downloads:1Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#476409

Totally forget to say massive thanks to internetix for sharing great work! Really appreciated!
Really hope there will be more solutions fixing the other issues soon 🙂
I’m not really good in coding, but will try my best to contribute 🙂

[Honzazi Friend HonzaziJoin date: June 2006Posts: 63Downloads:1Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#476571

Hi,

any news anyone?
I tested as you said… plaid with random article etc, but the ad still shows only once 🙁
Any ideas please?
Or if there is no idea, how to avoid more populating corner modules, so it’s only on the top?
Thank you!

[internetix Friend internetixJoin date: January 2012Posts: 27Downloads:0Uploads:0 Thanks: 5 Thanked: 4 times in 1 posts]

#476577

I am currently discussing on PM with Wall Crasher.

Hopefully we will find a stable solution on my project and after that i will share it with you guys.

Keep in touch !

[Honzazi Friend HonzaziJoin date: June 2006Posts: 63Downloads:1Uploads:0 Thanks: 5 Thanked: 1 times in 1 posts]

#476655

Thank you very much internetix!
Please, if you know how to limit the corner to just first one so it does not show any more than once please let me know… I would use it till you… clever minds don’t find the solution 🙂
Thank you very much

[Author]

Posts