Programmatically render blocks generated by MDSlider

gumdal's picture
gumdal
Wed, 08/10/2016 - 09:42
#1
Programmatically render blocks generated by MDSlider
up vote0down votefavorite

I am finding some difficulty in what seems to be an easy task, I need to render a block which is generated by module MDSlider. I have gone through all the posts and I have tried the following:

Referring this post: https://www.drupal.org/node/26502 Code tried:

$block = module_invoke('md_slider', 'block_view', 'home-page-main-slider');
$output = render($block['content']);

What I am trying to do is to render this particular block into a jQuery colorbox when the site loads. I am not getting the exact result which I am trying for:

Image titleThis is how it is supposed to render with slides rolling one after other: 

Image title
You can see this slider by visiting the site: http://indiansnakes.org/homepage

I have checked the URL scheme and I believe I am extracting the module name and the block delta properly as required by the API:

http://localhost/indiansnakes/admin/structure/block/manage/md_slider/hom...

Module name: md_slider
Block delta: home-page-main-slider
These 4 lines are missed when I am trying to render the block programmatically (Referring to the annotated part in the image attached):

<div class="md-slide-wrap md-slide-responsive md-slide-fullwidth md-slide-bullet-2" >
   <div class="md-item-wrap">
      <div class="md-slide-wrap md-slide-responsive md-slide-fullwidth md-slide-bullet-2" >
         <div class="md-item-wrap">
            <div id="md-slider-4-block" class="md-slide-items" data-thumb-width="100" data-thumb-height="75" data-thmr="thmr_3">

The $output from above source code is fetching result from 5th line onwards. This is the reason why the slides are not properly rendered. But I don't understand why module_invoke is not rendering the whole wrapper contents too. I tried to see how this module (block) is being rendered in homepage but I got lost in the code and I was not able to trace it out.

The question is already posted in Drupal StackExchange here: http://drupal.stackexchange.com/questions/210927/programmatically-render...

However, the reason for posting it here is some further discovery which I made. As you can see with Theme developer, everywhere 'content' will contain only from the md-slider-4-block but not the slide wrap and item wrap divs above it. Here is the image which shows Theme developer's output:

ThemeDeveloper output

I think there is something different going on here when it comes to rendering logic of MD Slider. Please shed some light here so that I can render this slider object into my colorbox.

phuonght's picture
phuonght
Wed, 08/10/2016 - 23:26

Hi,

We check and can see code render block still work well. Block md_slider follows Drupal standard.

Missing div tag that you mentioned is not rendered by php but added by js, you can please view page source to check. In this case, we recommend you can try to use colorbox inline.

gumdal's picture
gumdal
Thu, 08/11/2016 - 02:25

Instead of replying to your comment I replied to the thread. Hope you got notified about the update, just wanted to make sure you won't miss it out :)

gumdal's picture
gumdal
Thu, 08/11/2016 - 01:25

Thanks for the quick reply!

Yes, I have made sure that I am rendering the colorbox as inline only, check the code here:

<script type="text/javascript">

jQuery(document).ready(function(){
if ("development.indiansnakes.org" === document.location.hostname)
{
jQuery.colorbox({href:'#block-in-colorbox', inline:true, width:600});
}
});
</script>

You can have a look at my development website which displays the colorbox as soon as homepage is loaded:

http://development.indiansnakes.org

phuonght's picture
phuonght
Thu, 08/11/2016 - 04:02

Sorry, we can not access your website. However, we think using colorbox inline is the best way at the moment. you can please take a look at our demo too: http://demo.megadrupal.com/d7/md-avendor/node/167.

gumdal's picture
gumdal
Thu, 08/11/2016 - 04:37

Thanks for the link, that is very encouraging that it is possible to achieve! However, please let me know how the colorbox is initiated. I have done almost the same thing, I would need to check with your help on how to link up the javascript with colorbox. Any leads in this direction would be highly appreciated!

It would be great if you can tell me the following:

1. How the div is rendered which is supposed to be displayed inside colorbox.

2. What is explicitly done so that the javascript will induce the missing divs which I had mentioned earlier in my post.

The website is accessible, I am not sure why you are not getting the website to load(?). Please give it sometime for the website to load. It should be working.

I have a custom module and I am introducing a new variable in preprocess hook:

function block_in_color_box_preprocess_page(&$vars) {

  global $user;

    $vars['block_in_colorbox'] = "<div >" ;

    $vars['block_in_colorbox'] .= "<div >" ;

  $block = module_invoke('md_slider', 'block_view', 'home-page-main-slider');

  $output = render($block['content']);

    $vars['block_in_colorbox'] .= $output;

    $vars['block_in_colorbox'] .= "</div>";

    $vars['block_in_colorbox'] .= "</div>";

}


And then I am rendering it in a custom template:

  <?php 

  print ($block_in_colorbox); 

  ?>

  <script type="text/javascript">

jQuery(document).ready(function(){

    jQuery.colorbox({href:'#block-in-colorbox', inline:true, width:600});

    });

    jQuery(window).load(function(){

        jQuery(window).trigger('resize');

      });

</script>


But I am not able to get the desired result.

phuonght's picture
phuonght
Thu, 08/11/2016 - 05:02

You can please add js colorbox by adding in theme or install module colorbox:

- render slider in template

- add js call colorbox

Aslo, please follow code at http://codepaste.net/tyqfzt

gumdal's picture
gumdal
Thu, 08/11/2016 - 07:54

Got it! Apparently there is a problem in MegaSlider. If the same slider is running in the background and if we try to render it in the colorbox on the same page it will not render properly. I had to create a new slider and test it out. It would be great if this problem is fixed in Mega Slider module.

You can check the page now: http://indiansnakes.org

phuonght's picture
phuonght
Fri, 08/12/2016 - 00:00

Sorry,

Do not know why but we still can not access. We always get error "This site can't be reached".

About problem, it is not from md_slider. If we have 2 similar blocks in a page, page can not validate html. You can validate hmtl at https://validator.w3.org/#validate_by_uri.

Because one slider is assigned as a block so your slider can not work.
Base on our policy, we will not support your problem in this case. If you would not like to clone slider, please take a look at patch
http://codepaste.net/ssvafj to customize/ edit.

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.