{"id":10920,"date":"2014-12-06T05:06:04","date_gmt":"2014-12-05T18:06:04","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10920"},"modified":"2014-12-06T05:06:04","modified_gmt":"2014-12-05T18:06:04","slug":"wordpress-blog-custom-header-image-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-custom-header-image-primer-tutorial\/","title":{"rendered":"WordPress Blog Custom Header Image Primer Tutorial"},"content":{"rendered":"
\"Wordpress<\/a>

Wordpress Blog Custom Header Image Primer Tutorial<\/p><\/div>\n

The HTML5 specification allows for the display of 2D-graphics via SVG HTML tags<\/a> which use graphical applications in XML and the XML is then rendered by an SVG viewer. SVG stands for Scalable Vector Graphics.<\/p>\n

Those SVG shapes can be used as a mask for an HTML image img<\/i> element as we do, for our WordPress blog title image, at least for the Firefox browser … you guessed it … a cross-browser (browser age) issue. For the non-Firefox browser we try to hook into the bold parts of the changes to the WordPress header.php<\/i> PHP code snippet 2 of 3 below:<\/p>\n

echo \"n\" . '<style>#mytopimage {<\/b> mask: url(#m1); -webkit-border-bottom-left-radius: 200px; -webkit-border-bottom-right-radius: 200px; background-color: #fffff0; }<\/style><\/b><\/code><\/p>\n

… the non-bold bit is a Firefox SVG mask parameter as with the right hand part of the tutorial image<\/a> here today.<\/p>\n

Up the top of header.php<\/i> we apply a SVG mask or rounded border to the new photos we have recently introduced into the “mix”<\/i> of random photos presented … and why do we do this? … well, these photos don’t always suit the dimensional perspective of this area, and with some photos it is more important to keep their dimensional perspective than try to fit a round peg into a square hole … so if this is the case what is a way to merge it in a bit more naturally? … find, myself, some masking or border interest fits this “bill”<\/i>, but this is definitely a subjective matter. Here is that 1 of 3 code (where $myr is stored up to be used as an index to a random suffix part to a header image name of interest in the 3 of 3 bit … if this corresponds to one of the aspect ratios not suiting the “presentation area”<\/i> we prepare for SVG functionality requirement possibilities (with how we define the HTML environment)) …<\/p>\n


\n$myr = rand(24, 43);
\nif ($myr <= 41) {\nif (($myr >= 36 && $myr < 40) || ($myr >= 32 && $myr < 33) || ($myr >= 29 && $myr < 30) || ($myr >= 40 && $myr < 42)) {\n echo \"<!DOCTYPE html>n<html \";\n language_attributes();\n echo ' xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" ' . \"n\" . ' xmlns:svg=\"http:\/\/www.w3.org\/2000\/svg\">' . \"n\";\n} else {\n echo \"<!DOCTYPE html>n<html \";\n language_attributes();\n echo \">n\";\n}\n} else {\n echo \"<!DOCTYPE html>n<html \";\n language_attributes();\n echo \">n\";\n}\n<\/code><\/p>\n

... and so we come to code snippet 3 of 3 in header.php<\/i>:<\/p>\n


\n<?php<\/b>
\n \/\/$myr = rand(24, 43);
\n if ($myr <= 41) {
\n if (1 == 6)<\/b> echo \"<\" . \"script\" . \" type='text\/javascript'> var oim=document.getElementById('mytopimage'); oim.src='http:\/\/www.rjmprogramming.com.au\/wordpress\/wp\" . $myr . \".jpg'; <\/\" . \"script\" . \">\" . \"n\";
\n\t if (($myr >= 36 && $myr < 40) || ($myr >= 32 && $myr < 33) || ($myr >= 29 && $myr < 30) || ($myr >= 40 && $myr < 42)) {
\n\t echo \"n\" . '<style>#mytopimage { mask: url(#m1); -webkit-border-bottom-left-radius: 200px; -webkit-border-bottom-right-radius: 200px; background-color: #fffff0; }<\/style>
\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" height=\"0\">
\n <mask id=\"m1\" maskUnits=\"objectBoundingBox\" maskContentUnits=\"objectBoundingBox\">
\n <!--linearGradient id=\"g\" gradientUnits=\"objectBoundingBox\" x2=\"0\" y2=\"1\">
\n <stop stop-color=\"#fffff0\" offset=\"0\"\/>
\n <stop stop-color=\"#fffff0\" stop-opacity=\"0\" offset=\"1\"\/>
\n <\/linearGradient-->
\n <circle cx=\"0.50\" cy=\"0.55\" r=\"0.45\" id=\"circle\" fill=\"#fffff0\"\/>
\n <!--rect x=\"0.5\" y=\"0.2\" width=\"0.5\" height=\"0.8\" fill=\"url(#g)\"\/-->
\n <\/mask>
\n<\/svg>' . \"n\";
\n\t }
\n }
\n?><\/b>
\n<\/code><\/p>\n

There are great links for this topic area, but don't want to swamp you, so here is a good starting link<\/a> regarding this topic.<\/p>\n

We last talked about SVG with PHP\/Javascript SVG Primer Tutorial<\/a> as shown below.<\/p>\n

This tutorial has a \"resonance\"<\/i> with the \"reveal\"<\/i> themed HTML\/Javascript Reveal Image Behind Image Primer Tutorial<\/a>.<\/p>\n

Finally, as far as Ajax contextual help goes, the recent wajax.js<\/i> changed as per the bold code below, last talked about with WordPress Ajax Mobile Friendly Primer Tutorial<\/a>:<\/p>\n


\n
\nfunction getSVG(evt) {
\n bpost = 10920;
\n if ((wisiPad || wisTouch)) {
\n if (mtimer) clearInterval(mtimer);
\n tickcnt = 0;
\n mtimer = setInterval(mchecker, 1000);
\n } else {
\n setTimeout(xget, 8000);
\n }
\n}
\n<\/b>
\nfunction winit() {
\n var allPs;
\n zhr = null;
\n zok = 1;
\n if ((wisiPad || wisTouch) || 1 == 1) {
\n var mybased = document.getElementById('site-description');
\n if (mybased.innerHTML.indexOf(\"Long \") == -1) {
\n if ((wisiPad || wisTouch)) {
\n mybased.innerHTML = mybased.innerHTML.replace(\")\", \") <br><a onclick=' alert(wadvice); ' href='#' title='Long touch contextual help'>Long touch help available.<\/a>\");
\n } else {
\n mybased.innerHTML = mybased.innerHTML.replace(\")\", \") <br><a onclick=' alert(wadvice.replace(\"touch on\",\"hover over\")); ' href='#' title='Long hover contextual help'>Long hover help available.<\/a>\");
\n }
\n }
\n }
\n
\n if (navigator.userAgent.toLowerCase().indexOf(\"ie\") != (0 - 1)) {
\n allPs = document.getElementsByTagName('img');
\n } else {
\n allPs= document.getElementsByTagName('img');
\n }
\n for (var j=0; j < allPs.length; j++) {
\n if (allPs[j].id == \"mytopimage\") {
\n if ((wisiPad || wisTouch)) {
\n allPs[j].ontouchstart = getSVG;
\n allPs[j].ontouchend = yehBut;
\n } else {
\n allPs[j].onmouseover = getSVG; \/\/ 10920
\n if (allPs[j].title.indexOf(\" ...\") == -1) {
\n allPs[j].title = allPs[j].title + \" ... welcome to the long hover functionality that shows Blog Post regarding SVG Mask\";
\n }
\n allPs[j].onmouseout = yehBut;
\n }
\n }
\n }
\n<\/b>
\n<\/code><\/p>\n

... to become wajax.js<\/a><\/p>\n

\n

Previous relevant PHP\/Javascript SVG Primer Tutorial<\/a> is shown below.<\/p>\n

\"PHP\/Javascript<\/a>

PHP\/Javascript SVG Primer Tutorial<\/p><\/div>\n

The HTML5 specification allows for the display of 2D-graphics via SVG HTML tags<\/a> which use graphical applications in XML and the XML is then rendered by an SVG viewer. SVG stands for Scalable Vector Graphics.<\/p>\n

We've talked about the HTML canvas element as another means to come to this end, but the SVG methods are more straightforward in their creation.<\/p>\n

For today's tutorial we follow the advice at this wonderful tutorial<\/a> and wrap it in PHP, so that you can specify your own parameters. Hope you find it very useful, and easy.<\/p>\n

This demonstrates to you that if you have some great static HTML you can keep that great static content and present a dynamic version the user can play around with, and learn from, by adding that PHP server-side content. For today's PHP interface we got the HTML to use an HTML form of the relevant shape's characteristics and post<\/i> this data back to the same PHP webpage, analyzing the $_POST[] data to fill in the static HTML parameter values with user-defined parameter alternatives.<\/p>\n

Today we have PHP and Javascript programmable source code you could call SVG_Primer.php<\/a> and here is its live run<\/a>.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n