Blog

Blog

Usable Image with Different Size in WordPress

Usable Image with Different Size in WordPress

I was trying to find out the available pictures for same image in WordPress to enable fast download of small pictures in same page.

There are many pictures in different size, they can be found in WordPress html folder. Depending on the media configuration, maybe in different location. Here, only lists default location.

Location

The resized images files are in html/wp-content/uploads/<year>/<month> directory as the format of <picture_name>-<width>x<height>.jpg.

URL

Original image

Can be found at bottom Edit Media page as <picture_name>.jpg.

Scaled image

Can be found in text box File URL as <picture_name>-scaled.jpg

Other size images

Can change the scaled image URL to <picture_name>-<width>x<height>.jpg

Migrate USB boot TrueNAS to Proxmox VM

Migrate USB boot TrueNAS to Proxmox VM

After Proxmox installed, I also migrate TrueNAS to Proxmox as VM

Create disk image

Use dd command to copy USB drive to a disk file

dd if=/dev/sdi of=/tmp/truenas.raw bs=10m

Create Proxmox VM

  • Create a VM with SeaBIOS

  • Remove VM disk

  • Use following command to import disk

qm importdisk <vm_id> <raw_file> <storage_id>

For example

qm importdisk 100 vm.raw ds1812-vm_nfs1
  • Go to VM hardware page

  • Select unused disk and click Add button to add disk into VM

  • Select Options => Boot Order to check the iscsi controller

  • List all disks and find out the disks like to passthru

lsblk -o +MODEL,SERIAL,VENDOR
  • Find out device path
ls /dev/disk/by-id/*<SERIAL_NUM>*
  • Import storage disks as passthru devices
qm set 100 -scsi2 <device>

Boot TrueNAS VM

Change network configuration

  • Interface with IP address
  • Bridge network interface

References

How to run TrueNAS on Proxmox?
Export Virtual Machine from TrueNAS and Import VM to Proxmox

Unable to boot from USB in VMware Fusion

Unable to boot from USB in VMware Fusion

Fusion reports error, and it can not connect to USB drive to boot.

Fusion does not support USB adapters for connecting displays to your virtual machines.

Note: I haven't tried to change UEFI mode to BIOS mode, maybe this is the cause.

References

Unable to connect a USB device to a virtual machine (2118442)
USB Device not detected by the virtual machine (57195)
Configuring the USB Controller and Connecting USB Devices

Resize bpool on ubuntu VM with zfs

Resize bpool on ubuntu VM with zfs

Got two kind of messages of disk space issue on bpool.

  • apt upgrade can not perform snapshot
ERROR couldn't save system state: Minimum free space to take a snapshot and preserve ZFS performance is 20%.
Free space on pool "bpool" is 19%.
  • do-release-upgrade can not be performed

Steps

  • Add iSCSI LUN

  • Change grub configuration

  • Partition iSCSI LUN

  • Attach partitions into zpool

  • Detach old partitions from zpool

  • Repartition rpool and bpool partition in old disk

  • Add back to the rpool and bpool

  • Run update-grub2

  • Detach iSCSI rpool and bpool

  • Run following command to set autoexpand

zpool set autoexpand=on bpool
  • Run partprobe or zfs online
zpool online -e bpool <partition_id>
  • Set autoexpand off
zpool set autoexpand=off bpool

Troubleshooting

Removed local boot partition

I also got unable to boot error due to removed local bpool, and grub can not find BOOT filesystem as it was in iSCSI LUN.

To fix this issue, use following steps

  • Boot from CDROM
  • Install open-iscsi package
  • Add iSCSI LUN
  • Use zfs import bpool to import bpool from iSCSI
  • Attach local boot partition back to bpool again
  • Reboot

Used sfdisk copy partition

This creates an issue, the two partitions has same blkid. After added the second iSCSI LUN.

References

HOWTO replace zfs bpool and rpool with larger disk - Ubuntu 20.04 (Virtualbox)
ZFS on Linux resize rpool

Learning Fat-Free PHP Framework

Learning Fat-Free PHP Framework

Fat-Free PHP Framework is used to create MVC application.

Make Fat-Free work

Install composer

  • Go to https://getcomposer.org

  • Select Installation => Globally

  • Download installer and run it using php, then composer.phar is created

  • Move composer.phar to system directory

mv composer.phar /usr/local/bin/composer

Install Fat-Free

  • Create a new project folder

  • Init composer, and answer some questions, then composer.json is created

composer init
  • Go to http://getcomposer.org, select Browse Packages, then go to https://packagist.org.

  • Search fatfree to find out package name, bcosca/fatfree

  • Install bcosca/fatfree

    • by editing composer.json file

    Add following lines

      "require": {
        "bcosca/fatfree": 3.5.0
      }
    }

    Run composer update, to install fatfree in vendor directory, and composer.lock is created

    • by command
    composer require bcosca/fatfree

Autoload

There is an autoload.php file in vendor/composer directory, this is to load packages

In base.php

  • Singleton Base class extends from abstract class Prefab

  • $hive has all configuration, context

  • Function set is to set variables

  • Function get is to read variables

  • Function run needs to be called to make F3 work and running

Create index.html

require_once("vendor/autoload.php");

$f3 = Base::instance();

$f3->route('GET /',
  function() {
    echo 'Hello, world!';
  }
);

...

$f3->run();

Note, if don't use composer, then will be like

$f3 = require('path/to/base.php');
...
$f3->run();

Launch PHP server

php -S localhost:8088 -t .

Config, Controller, View

Set/get global variables

$f3->set('message', 'Hello, World!');

$f3->route('GET /',
  function($f3) {
    echo $f3->get('message');
  }
);

Create route class

class MainController {
  function render() {
    echo 'Hello, World!';
  }
}

$f3->route('GET /', 'MainController->render');

beforeroute and afterroute function

Mainly for session management

class Controller {
  function beforeroute() {
    echo 'before';
  }

  function afterroute() {
    echo 'after';
  }
}

class MainController extends Controller {

}

configuration variables

  • DEBUG

  • AUTOLAD - to load a folder which contains the classes

  • CACHE

  • UI - location of UI templates, separate folders using delimiter

$f3->set('DEBUG', 1);

Create config.ini

In config.ini file

[globals]

DEBUG=1
messagehello=Hello hello!

In index.php

$f3->config('config.ini');

class MainController extends Controller {
  function render($f3) {
    echo $f3->get('messagehello');
  }
}

Create routes.ini

In routes.ini

[routes]

GET /=MainController->render
GET /hello=MainController->sayhello
GET /about=AboutPage->render

In index.php

$f3->config('routes.ini');

Templates

In normal php

<p>Hello, <?php echo $name; ?>!</p>

In F3

<p>Hello, {{ @name }}!</p>

In index.php

  function render($f3) {
    $f3 ->set('name', 'world');
    $template = new Template;
    echo $template->render('template.htm');
  }

Template file template.htm

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial page</title>
</head>
<body>
    <p>Hello, {{ @name }}!</p>
</body>
</html>

Create project structure

In project folder

project/index.php
project/config.ini
project/routes.ini
project/app
project/app/controllers
project/app/controllers/Controller.php
project/app/controllers/MainController.php
project/app/views
project/app/views/template.htm

In config.ini file

[globals]

DEBUG=3
UI=app/views/
AUTOLOAD=app/controllers/

In index.php file

<?php

require_once("vendor/autoload.php");

$f3 = Base::instance();

$f3->config('config.ini');
$f3->config('routes.ini');

$f3->run();

Model (database)

Create database

  • Install PHP development environment XAMPP or MAMP

  • Install MySQL workbench

apt install mysql-workbench
  • Create database

  • Create schema

database Connection

  • Update database info in config.ini
devdb = "mysql:host=127.0.0.1;port=3306;dbname=f3MVC"
devdbusername = "f3admin"
devdbpassword = "f3admin"

Update Controller class

class Controller {
    protected $f3;
    protected $db;

    function __construct() {
        $f3 = Base::instance();
        $this->f3 = $f3;

        $db = new DB\SQL(
            $f3->get('devdb'),
            $f3->get('devdbusename'),
            $f3->get('devdbpassword'),
            array( \PDO::ATTR_ERRMODE => \PDO::ERRMODE_EXCEPTION )
        );

        $this->db = $db;
    }
}

For other classes

$this->f3

Create project models

Create folder and a file project/models/Messages.php, which is reading all data from messages table, and then create objects.

<?php

class Messages extends DB\SQL\Mapper {
    public function __construct(DB\SQL $db) {
        parent::__construct($db, 'messages');
    }

    public function all() {
        $this->load();
        return $this->query;
    }
}

Update config.ini

AUTOLOAD=app/controllers/|app/models/

Update render function in MainController class

$messages = new Messages($this->db);
$msg = $messages->all()[0];

$f3->set('msg', $msg);

Update template.htm

<p>Hello, {{ @msg.message }}</p>

Standard implementation of model

<?php

class Messages extends DB\SQL\Mapper {
    public function __construct(DB\SQL $db) {
        parent::__construct($db, 'messages');
    }

    public function all() {
        $this->load();
        return $this->query;
    }

    public function getById($id) {
        $this->load(array('id=?', $id));
        return $this->query;
    }

    public function add() {
        $this->copyFrom('POST');
        $this->save();
    }

    public function edit() {
        $this->load(array('id=?', $id))
        $this->copyFrom('POST');
        $this->update();
    }

    public function delete($id) {
        $this->load(array('id=?', $id))
        $this->erase();
    }
}

Note: copyFrom also can do from hashmap

Save record

$message = new Messages($this->db);
$message->key = 'Secondmessage';
$message->message = 'This is the second message inserted from code.';
$message->save();

Change global to class protected variable

This allow all functions in the class do not need to pass f3 as parameter

class Controller {
    ...
    protected $f3;

    ...
}

class MainController extends Controller {
    function render() {         // Don't need f3 as parameter
        ...
        $this->f3->set('msg', $msg);
        ...
    }
}

getById

$msg = $messages->getById(8)[0];

References

Fatfree PHP Framework Tutorial - 1
Fatfree PHP Framework Tutorial - 2
Fatfree PHP Framework Tutorial - 3
Fatfree PHP Framework Tutorial - 4

JQuery retrieve page and display

JQuery retrieve page and display

Just completed the troubleshooting HTML + jQuery in Markdown, which is used in wordpress.

Script

<div><button id='related_posts_1853'>Display Learning Posts</button>

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $("#related_posts_1853").click(function(event) {
            el = $(document.getElementById( $(this).attr('id') ).parentElement);
            $.get("?p=1733", function(data, status) {
                el.html(/h2>References<\/h2>([\s\S]*?)<\/div>/.exec(data)[1]);
            });
        });
    });
}) (jQuery);
</script>
</div>

Note: Can not have empty line in script if it is embedded in Markdown lauguage, because there will be a <p> added.

Explanation

Following jQuery script is to do

  • Define a button in div

  • When button clicked, retrieve html page

  • Then filter information using regular expression

  • Then find out the div element using following script

  document.getElementById( $(this).attr('id') ).parentElement

Note: $(this).attr('id') is to get event element ID

<script>
$("button").click(function() {
    var t = $(this).attr('id');
    ...
});
</script>
  • Then replace the div html using retrieved info.

References

How to get the ID of the clicked button using JavaScript / jQuery ?
document.getElementById vs jQuery $()
Node.parentElement
Category: Selectors
.find()
How get body element from the html which one have as a string
How to get the html of a div from a different page with AJAX?

JQuery $ is not a function

JQuery $ is not a function

When adding JQuery script in WordPress, the error occurred as $ is not a function.

Fix

Add a function wrapping the $ function as below.

<script type="text/javascript">
    (function($) {
        // You pass-in jQuery and then alias it with the $-sign
        // So your internal code doesn't change
    }) (jQuery);
</script>

References

jquery - is not a function error

HP ProDesk Error – Not fully configured

HP ProDesk Error - Not fully configured

Error

Got following error when bios booting up.

warning your system is not fully configured please contact hp support

Fix

Download NbDmiFit-2.13.zip file from following website, unzip it, then run sssm.bat from command line in folder wndmifit.

https://www.finalfixer.com/2020/02/hp-dmi-tool-nbdmifit-wndmifit-all.html