PHP-Function: Create slugs from string

Every website needs to implement readable URLs for internal linking. When you are using a blogging tool like WordPress or a CMS like Typo3, you automatically get the URL slug generator built in.

But sometimes, you are developing your own software and are in need of a function that simply generates a slug for you.

Search no more, because here it is: the PHP function to generate slugs for you.

function slugify($input, $word_delimiter='-') {
	$slug = iconv('UTF-8', 'ASCII//TRANSLIT', $input);
	$slug = preg_replace("/[^a-zA-Z0-9\/_|+ -]/", '', $slug);
	$slug = strtolower(trim($slug, '-'));
	$slug = preg_replace("/[\/_|+ -]+/", $word_delimiter, $slug);
	return $slug;
}

$slugString = slugify("This is just a small test for a slug creation");
echo $slugString;
// returns : this-is-just-a-small-test-for-a-slug-creation

This PHP function takes a simple string as first parameter, which will be turned into your slug. In this example, we are using the string This is just a small test for a slug creation .

The function slugify  then returns a nice, readable slug for you.

this-is-just-a-small-test-for-a-slug-creation

If you want to use another delimiter, simply pass it as the second parameter to the function.

 

jsPDF / html2pdf: add header and footer text to each page

In a recent project I needed to add header and footer text (like page count) to every single generated html2pdf / jsPDF page.

There are a lot of instructions on the web, but none of those are really doing what I wanted.

Basically, I needed to use the callback  function of html2pdf to loop over the total pages, and then access that single page to add text to it.

html2PDF: Add a header and footer to every page

So the first step is to use the callback  function of html2pdf :

html2pdf(content, {
    margin: 10,
    filename: "my.pdf",
    image: {type: 'jpeg', quality: 1},
    html2canvas: {dpi: 72, letterRendering: true},
    jsPDF: {unit: 'mm', format: 'a4', orientation: 'landscape'},
    pdfCallback: pdfCallback
})

And within the callback function, I am looping over the pages of the generated document. You can find the total number of pages within the returned jsPDF-Object  which is called pdfObject in my example.

function pdfCallback(pdfObject) {
    var number_of_pages = pdfObject.internal.getNumberOfPages()
    var pdf_pages = pdfObject.internal.pages
    var myFooter = "Footer info"
    for (var i = 1; i < pdf_pages.length; i++) {
        // We are telling our pdfObject that we are now working on this page
        pdfObject.setPage(i)
        // The 10,200 value is only for A4 landscape. You need to define your own for other page sizes
        pdfObject.text(myFooter, 10, 200)
    }
}

Using this code you can simply add a header and a footer text to each page of the generated PDF document.

To add a header text, you can simply add the following line to the above code.

pdfObject.text("my header text", 10, 10)

This will add the text „my header text“ at the position x = 10, y = 10 to every page of your PDF document.

Solved: html2pdf / jsPDF elements are cut off in the PDF

So I am using some JavaScript libraries in my Apache Cordova app to save some HTML to a PDF file, which can then be shared via email and social.
The problem was that the rendered content of the HTML element is only as wide as the parent element, which caused me some headaches as the content of the PDF (like the tables and text) were cut off at the width of the parent element.

The parent element was – in my case – simpy as wide as the browser’s viewport, which is kind of bad on a mobile device. So I tried several things – without much success. At last, I have had to use a dirtly little hack to make the canvas/render area wider.

I simply inserted a div with a fixed width of – in this case – 1500px. That fixed it for me.

Surely it is not nice code, and there may must be a way to do it within the JavaScript, but until I find out how, I will resort to this solution.