How to show a block thumbnail? about phpagebuilder HOT 10 CLOSED

In this specific screenshot I am using PHPageBuilder in combination with Laravel which runs a scheduled task every minute which renders missing/updated blocks using https://github.com/spatie/browsershot.

This is however difficult to integrate into the PHPageBuilder core, which I try to keep as basic as possible. However there is a button on the settings page (/admin?route=settings) which uses iframes, html5 canvas and an ajax request to render the blocks. These are not exactly the same as actual screenshots, but at the moment the best I can do with the least amount of code (I am of course open to other suggestions).

As soon as possible I will create a much more thorough documentation and also reference the exact code I used to generate the screenshots in Laravel. If you are interested I can already share a pastebin.

from phpagebuilder.

Can this solution work? - https://github.com/niklasvh/html2canvas/

from phpagebuilder.

As an option, if the engine will show the: blocks/name/thumb.jpg if it exists. This allows to add a screenshot yourself and it will load automatically.

from phpagebuilder.

I did it like this:

    // ThemeBlock.php  line 151
    public function getThumbPathImg(){
        return $this->theme->getFolder() . '/public/block-thumbs/' . $this->blockSlug . '.jpg';
    }
    
    public function getThumbUrlImg(){
        return phpb_theme_asset('public/block-thumbs/' . $this->blockSlug . '.jpg');
    }

        //BlockAdapter.php line 92
        if (file_exists( $this->block->getThumbPathImg() )){
            $img = '<div class="block-thumb"><img src="' . $this->block->getThumbUrlImg() . '"></div>';
        }

It works. But what is your decision and thoughts about this?

from phpagebuilder.

Can this solution work? - https://github.com/niklasvh/html2canvas/
I realized that this is already present.

from phpagebuilder.

In this specific screenshot I am using PHPageBuilder in combination with Laravel which runs a scheduled task every minute which renders missing/updated blocks using https://github.com/spatie/browsershot.

This is however difficult to integrate into the PHPageBuilder core, which I try to keep as basic as possible. However there is a button on the settings page (/admin?route=settings) which uses iframes, html5 canvas and an ajax request to render the blocks. These are not exactly the same as actual screenshots, but at the moment the best I can do with the least amount of code (I am of course open to other suggestions).

As soon as possible I will create a much more thorough documentation and also reference the exact code I used to generate the screenshots in Laravel. If you are interested I can already share a pastebin.

Yes, I'm definitely interested.

from phpagebuilder.

As an option, if the engine will show the: blocks/name/thumb.jpg if it exists. This allows to add a screenshot yourself and it will load automatically.

Yes I was thinking about that as well. I started off with icons, but after 10 blocks I noticed spending more time scrolling through icon lists than building blocks (icons still work btw). And to me it would be really great to be able to build websites as quickly as: buying a html5 theme, cutting it in pieces (blocks), dragging a few blocks on pages, sending login credentials to a friend/customer, done. Also creating manual screenshots is a time overhead (especially if you change the blocks from time to time). Currently the image path contains a hash of the block's content. So any time the block view file changes, it now knows it needs a new image. However, we can use a hybrid solution that first checks whether a thumb.jpg exists and if not it checks for the screenshot based on view file contents.

from phpagebuilder.

Yes, I'm definitely interested.

Since it requires code in multiple files, I added them to this repo: https://github.com/HansSchouten/PHPageBuilder-Laravel-Screenshots

from phpagebuilder.

Thanks! I'll watch it

from phpagebuilder.

You're welcome

from phpagebuilder.