New to the community? Start here

Smartcrawl breaks masonary layout of GeneratePress theme

We use GeneratePress theme for all our sites as it’s a great starter framework. However, it has a great option to display blog posts as a ‘masonry’ layout and that works fine but as soon as we turn on SmartCrawl, the display breaks.

Wed, 27 Sep 2017 19:16:28

Oguz
- Recruit
- 661 pts: Hero points 8,233 pts: Rep. points LEVEL 26
Hey Steve ,

Hope you’re well.

We reported it to SLS team, someone from the SLS will review and reply as soon as possible, but please don’t forget because of they are working on complex problems getting answer can take more than regular time.

Cheers,

Oguz
Steve
- Design Lord, Child of Thor
- 193 pts: Hero points 69 pts: Rep. points LEVEL 3
Hi guys

Any news on this as we’ll have to abandon Smartcrawl at this rate!
Dimitris
- Support
- 2,964 pts: Hero points 17,181 pts: Rep. points LEVEL 29
Hello there Steve,

hope you’re doing good today and please excuse our delayed response on this.

I’ve already pinged the associated SLS developer of this task, to provide some feedback here. Please keep in mind that they’re handling all of their tasks from older to newer, so their response times are bit wider than ours here in forums. Your patience on this is highly appreciated!

Warm regards,

Dimitris
Lindeni Mahlalela
- Recruit
- 326 pts: Hero points 1,291 pts: Rep. points LEVEL 9
Hello Steve

I hope you are doing great today. I am sorry for the delayed response from our side this thread must have slipped away without us noticing. I remember I worked on this and I found that the issue was that there was a conflict on the CSS but I couldn’t trace the CSS class that was added, I could not find it defined anywhere in SmartCrawl. I still had to investigate other plugins to see if it was not a conflict between these two and another one.

In the mean time I found the CSS class ‘masonry-brick’ to have the potential to fix the issue. But I no longer see the masonry on your site so I can test this. To add the CSS class to the page to force the masonry, we can try this jQuery code addedd in “Appearance > GP Hooks” in the wp_head hook:
```
<script type="text/javascript">

jQuery(document).ready(function(e){

jQuery(".masonry-post").addClass("masonry-brick");

});

</script>
```
Alternatively, you can use the filters provided by generatepress in a custom mu-plugin. The filters are ‘generatepress_content_class’ and ‘generatepress_main_class’. If you copy the code below:
```
<?php



add_filter('generate_content_class', 'add_content_class', 10, 1 );

add_filter('generate_main_class', 'add_content_class', 10, 1 );



function add_content_class( $classes ) {

$classes[] = 'masonry-brick';

return $classes;

}



function generate_main_class( $classes ) {

$classes[] = 'masonry-brick';

return $classes;

}
```
and paste it in a new .php file and upload it to your website in the location

wp-content/mu-plugins/generatepress-masonry-classes.php

This will add the masonry -block class to the HTML to try and fix the issue. You can also add some custom CSS to force the masonry to be what it should look like by adding a function like this to the code above:
```
function generatepress_custom_masonry_css(){ <?php

<style type="text/css">

.masonry-fix{

//add rules here

}

</style>

}
```
Then in either ‘generatepress_content_class’ or ‘generatepress_main_class’ add the line of code before the ‘return $classes’ line:

$classes[] = 'masonry-fix';

Or in the jQuery code modify the line:

jQuery(".masonry-post").addClass("masonry-brick");

To

jQuery(".masonry-post").addClass("masonry-fix masonry-brick");

Please try those suggestions and see if it helps. Please let us know if you need any further assistance with regards to this. I also strongly suggest that you update WordPress and every Plugin and Theme to its latest version and see if the new versions play nicely together or not. We are always here to help if you need help.

Have a nice day

Mahlamusa
Lindeni Mahlalela
- Recruit
- 326 pts: Hero points 1,291 pts: Rep. points LEVEL 9
Hello again Steve

Sorry I made a mistake in the last function it should be like this:
```
function generatepress_custom_masonry_css(){ ?>

<style type="text/css">

.masonry-fix{

//add rules here

}

</style>

<?php }
```
Have a nice day.

Mahlamusa

Need help fast?

Smartcrawl breaks masonary layout of GeneratePress theme

Ready to get started?

Need help fast?

Ready to get started?

How do you rate me?

Thank you for rating your experience!