itzikbenh

/*
Create package.json and install all packages:

1. npm init
2. npm install -g gulp
3. npm install gulp gulp-babel babel-preset-es2015 gulp-concat gulp-csso gulp-rename gulp-sass gulp-uglify gulp-watch browser-sync --save-dev

Expected file structure:

./css/src/*.scss 

itzikbenh

<template>
    <div>
      <a href="#" @click.prevent="show" class="w-full">
          <img class="w-64" :src="thumbnail">
      </a>
      <div class="lightbox fixed pin z-50 flex justify-center items-center" v-if="visible" @click="hide">
          <div class="fixed pin-r pin-t text-white cursor-pointer text-4xl p-1 mr-2" @click.stop="hide">&times;</div>
          <div class="flex">
              <div class="cursor-pointer self-center px-8"
                   @click.stop="prev"

itzikbenh

//Get package
wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.4/wkhtmltox-0.12.4_linux-generic-amd64.tar.xz

sudo apt install wkhtmltopdf

//create symlink.
sudo ln -s /usr/bin/wkhtmltopdf /usr/local/bin/wkhtmltopdf

//At this point you can run this command to test that everything works.
/usr/local/bin/wkhtmltopdf google.com google.pdf

itzikbenh

import Vue from 'vue';
import posts from './components/posts.vue';

window.axios = require('axios');
window.Vue = Vue;

Vue.component('posts', posts);

const app = new Vue({
    el: '#app',

itzikbenh

<?php
use Illuminate\Pagination\Paginator;
//This example is a bit more comlex since I have columns that are foreign keys of the Ticket table. 
public function index(Request $request)
{
    if($request->ajax()) {
        $columns     = ['tickets.id', 'client_name', 'location', 'priority_name', 'status_name', 'date'];
        $draw        = $request->draw;
        $start       = $request->start; //Start is the offset
        $length      = $request->length; //How many records to show

itzikbenh

Before you go over the snippets I will summarize which functions are being used.

media_handle_upload('image', 0);

That's it! one function that would insert the image into the DB, create four copies with different sizes, and upload to the uploads directory. Regarding the arguments:

'image' is what holds all the data about the image. It comes from the POST request. In the JS file you will see what I mean.

'0' This is the $post_id. I set it to zero, because i'm not asigning this image to any post at the moment. In order for this function to work we need to add above it:

itzikbenh

//Just a random file for loading your posts to see that the infinite scroll works. 
<?php get_header(); ?>

<div class="col-md-6 col-md-offset-3">
	<div class="post-container">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			<div class="page-header post">
				<h1><?php the_title(); ?></h1>
				<p><?php the_excerpt(); ?></p>
			</div>

itzikbenh

function theme_styles()
{
    wp_enqueue_style( 'boostrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' );
    wp_enqueue_style( 'theme_css', get_template_directory_uri() . '/css/theme.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

function theme_js()
{

itzikbenh

<?php
/*
 * Disable Gutenberg globally 
 * use this if you prefer one-liner 
 * add_filter('use_block_editor_for_post', '__return_false');
 */
function _thz_filter_disable_block_editor(){
  return false;
}
add_filter( 'use_block_editor_for_post', '_thz_filter_disable_block_editor' );

itzikbenh

<div class="posts-container">
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <div>
            <?php
                //Here we group events by event_date and put the date at the top.
                $event_date =  get_post_meta( $post->ID, 'event_date', true );
                if ( $event_date != $date )
                {
                    $event_date_formatted = date( 'l, F jS, Y', strtotime( $event_date ) );
                    echo "<p class='page-header'><strong>$event_date_formatted</strong></p>";