Pinegrow Community Support Forum

130 Blocks for Pinegrow - Loads like Bootstrap Blocks for Pinegrow

HEY!!! , now its THAT TUNE!

the ubiquitous WHISTLE tune!
you can’t go wrong with that one… unless you get screwed for copyright infringement :slight_smile:

1 Like

@benhanna downloaded the preview and in terms of presentation, your blocks visually look more professional without the original photos, much like the original music wasn’t doing you any favours! so as @schpengle mentioned, well done for dropping the photos!

A few minor spelling mistakes, such as Feautures recive Want to join ou team - may seem nit-picking again but worth correcting.

@simmo @schpengle

Its possible to get the blocks working in another project, though this is not ideal at moment with pinegrow. This is because of code bloat and possible conflicts with code. For example you could end up with a lot of duplicate classes etc like lots of h1, h2, h3 tags when editing CSS. if you are careful this won’t be a problem but will mean some manual editing of Style sheets to keep things clean and organised.

To load the blocks into another project (there are actually a couple of ways to do this in PG, this is my preferred way):

Copy the files from chocka blocks folder over into your project or vice versa. You might need to rename some files like stylesheet or main javascript file name to avoid conflicts. Obviously you don’t need to copy files like bootstrap files or FA, or you could overwrite these.

Now all files are in the existing project you have 2 options.

1 Manually add the important CSS and JS scripts

Use a web editor like Atom or notepad to Manually copy and paste the Header and footer scripts (CSS and JS ) over into your existing projects pages header and footer from components.html (or blank.html) Remember to change if you renamed any of these css or js files.You could also do this inside pinegrow using the the code editor.

This for me is the easiest way to load blocks into existing PG projects I just did this and took less than a minute to add them and all working fine.

2 Add the CSS and JS in pinegrow:

first click file>manage stylesheets and add the stylesheets you copied from chocka blocks

go to PRJ>right click on the page you are working on and click add resources…then add in the js files you added

Notes

Sound like you already tried the second one so if first does not work (works for me) consider:

If you have issues check where you added the stylesheets in header. Maybe move down below main stylesheet etc.

Pay attention to structure, add css to css folder and js to js folder, ideally it will have same folder structure and naming as chocka blocks to quickly get things working.

If things still look broke check order stylesheets are in.

Try refreshing or reloading project if you have PG open if still looks broke also

If you still have issues I can do a video showing how I quickly do this (complete with whistling tune ha) , hopefully PG gets a bit smarter at adding component libraries

@Jack_Clarity Thanks, I notice the spelling issues, to be honest I am thinking of replacing all text with Lorem ipsum as this is better for me when prototyping and most users will likely change the text when presenting design to client. I regretted adding the english stuff and wanted to change this before releasing the blocks but I ran out of time and wanted to just get them out there to see how things went,

@benhanna believe me, I understand! When you start selling your product, you always make silly little errors, I’ve been there before in my previous line of work and regarding the photos, if you use the wrong image, you look cheap, if you use the right image, you look classy and elegant.

Even if the code is the same behind the images and I’m learning this myself from what clients like. SImple, Classy and Polished, which actually means less work for us developers and designers.

Looks like your product is selling, so you’re now a professional block kit seller :sunglasses:

Cheers @benhanna, I think there is a bug in PG with regards Using Projects as a library and adding/ resources to the library.

Ive followed the docs here
http://docs.pinegrow.com/pinegrow-pro/components/libraries
and in the second part, where it explains how to add the assets to Project A so you can use in Project B
well, it doenst seem to work as

It maps all the assets to the
/css
/images
/js
directories,

NOT to
/components/cards/css
/components/cards/images
/components/cards/js
directories,

I will mail this or stick it in the Bugs section now or both.
so EVEN AFTER following the instructions, you then have to add
/components/cards
to the Path of each image in your cards blocks, by either navigating to the specified block on your page and checking its Prop value and selecting the correct /components/cards/images/THE ONE I WANT.jpg

Also, it might be an idea, for the future, with your blocks/cards resources to follow the instructions on the above link, in order to add all your resources (pics,css etc) to the LIbrary Resources so that, when this bug is fixed, people can THEN just use your project as a library.

as it was I had to manually go in, follow the above link, add the resources to its library Resources so that they would THEN be copied over to /components/cards/images or css or whatever/ in my project.

However!

Pinegrow then ignores this when it goes to use your cards!
meh!

here you go, Ive posted a bug report on our forum in what looks like the same topic with regards blocks and broken links

I get your work around and it works, however every time you update one of your components or an image, you will have to manually copy across all the relevant CSS/ JS, code, and images to EVERY single project that has ever used your components/cards/carrots, whatever.

the PG way
here
http://docs.pinegrow.com/pinegrow-pro/components/libraries
is Scaleable!
and every time you update the original project you just have to go to others that use it and click on update library resources in the Components menu.

job done!

however, it doesnt seem to work correctly, so I think the correct way is to follow their way,
and then manually edit the paths to add
/components/cards
for the time being, until this bug is addressed

or whatever the library or project library resources are in after setting them up in the original project your cards for instance and then Add Project as a Library

or , I could be wrong :wink:

mmm, also, what is the difference between these being added as a project library or as a plugin?
I find the whole, undocumented just look at these other 3 plugins and work it out philosophy a little scary :smiley:

@schpengle hopefully @MhdAljuboori @matjaz & @earnoud have fixed this for the upcoming 3.0 release! it’s definitely an issue, especially if developers are going to offer block kits, without having to release a 100 page instruction manual explaining the workaround to load project as library lol

@Jack_Clarity

Indeed it would be great if this is made easier in future updates

@schpengle I see what you mean, the way the blocks and file structure is set up is ideal for creating a new project to go live. I will def look at adding another folder in the download for adding components to another project in a more structured way, so it makes both easier.

I should probably note the blocks mentioned above are very straightforward for creating a new project, just download, unzip and open the folder as a project and start dragging in desired blocks.

An example of the difference between a plugin and library would be if you check out the kelvin plugin or grayscales.

You can use components in a plugin and can also set them up for added functionality, for example click on the header and you have an option to make small or full screen, add overlay etc…I am looking at developing a kit with this kind of functionality on a larger scale than the above plugins.

@Jack_Clarity

Sounds good look forward to seeing it

I added a demo with most but not all of the blocks. I stuffed the CSS with a lot of junk so its unsuable to
prevent any piracy, so its much much larger than the real one, so ignore the slow load time

http://chocka-blocks.webgurus.ie/

hee hee hee… and, just what IS a Brith?
:smiley: hee hee

1 Like

I updated this plugin so it loads just like the bootstrap blocks plugin that comes with Pinegrow. You can now easily add it to any project as some people were struggling with the previous version.

Will add an updated demo version above when its ready.

It also has a few extras like one click parallax from prop panel. Another huge update coming soon also!

2 Likes

Download the new demo which loads just like the Pinegrow blocks installed with pinegrow here

1 Like

70 new blocks added with more to come soon

2 Likes

40 More Blocks added, over 240, now, I haven’t offically released this version yet but you can login and download if you have already purchased

oops, I just tried to get the 25 blocks @benhanna, and I seemed to add them to the cart, hit the download button and

BOOSH!

Fatal error: Call to undefined function wp_affiliate_log_debug() in /home2/digital8/public_html/pluginsforpinegrow.com/wp-content/plugins/edd-and-wp-affiliate-integration/wp-aff-edd-integration.php on line 15*

ah! but, in my feeding frenzy, I appear to have…er, possibly, already downloaded them before…
umm… possibly twice…
oops.
and sorry Ive not been around, run out of mobile data.

I should be back online again tomorrow (some time) but _ I will then also be away , in a field, with a caravan, doing a show with

http://wellbeingesseces.com !!

so catch you all again shortly :slight_smile:

@schpengle Thanks fir heads up, fixed

Ha! my Bug Busting Empire continues to spread its infectious ways :smiley:

1 Like