[CSS] Tooltip without Javascript!

Hi,

today another code snippet for the daily usage :)
As mentioned already in the subject, it’s about a tooltip without Javascript. Everybody know this small windows (or also known as speech bubble) which open when you dwell on an object. If they show information or a small help… it can be used in many ways.

Mostly this windows will be initiated with Javascript. But that can also occur problems. Like I had to realize now. I wanted to run in this Jacascript bubble another Javascript… not possible. It is also helpful if the user has Javascript deaktivated. And it doesn’t look worse with CSS.

This code sniped is not from me this time. It can be found at: Trent Richardson

Have fun with it ;)

Best regards
Gordon

[PHP] Check if eMail address is correct / validation

Hello together,

on almost every webpage is a field where the user have to enter his email address. Doesn’t matter if it is a contact form, the registration form for a newsletter or the registration for a member area.

We need to check in every case the email address. If the structure is correct (not that the user accidentally entered the URL of his homepage) and we can check if the domain exist. But unfortunately we can’t check spelling mistakes… or just with an effort which wouldn’t be worthwhile anymore.

Here the simple function to check the email address:

 
function mailCheck($email) { 
	return preg_match("/^[_a-zA-Z0-9-]+(.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-.]+.([a-zA-Z]{2,4})$/", $email); 
} 

This function will just check if the structure of the email address is correct. It means if the „@“ sign is on the right position and if a TLD is in the string. It will not check if the domain (TLD) exist or not.

And here the extended function:

 
function mailcheckDNS($mail) { 
	$email = htmlspecialchars($mail); 
	$r = false; 
	if(preg_match('/(.*?)@(.*?).(w){2,6}/i', $email)) { 
		$split = explode('@', $email); 
		$split2 = explode('.', $split[1]); 
		if(preg_match('/([a-z]){3,64}/i', $split2[0])) { 
			if(preg_match('/([a-z0-9!"$&/()?~#+.:_-]+){1,64}[^@]/i', $split[0])) { 
				$MXCheck = getmxrr($split[1], $mxhosts); 
				if(!empty($MXCheck)) { 
					$r = true; 
				} 
			} 
		} 
	} 
	return $r; 
} 

This function checks now also if the domain exist, with trying to reach it. If it is possible then the result will be positive, if not negative.

There is no 100% sure email check, but what we can check, we should check. Spelling mistakes can’t be checked. But therefore we could let the user enter his email address a second time, to make sure it’s correct.

Best regards
Gordon


Attention: Using my code snippets at your own risk! I assume no warranty for functionality (each server is configured differently. If you have problems then you can leave a comment and we look for a solution.;)

Nextgen Gallery – Resizing images according to the aspect ratio

Soooo… after postponing it for quite a while… I sat down and solved finally the aspect ratio problem when Nextgen Gallery shall resize/shrink an image.

The problem is… If I set as picture size e.g. 800×600 px (width x height), then Nextgen Gallery resizes a picture from e.g. 1024x768px to this format. All good. But if the original picture is 768x1024px then the result is not a picture with 600x800px, no, it will be a picture of 450x600px. And that is not what we want. (Isn’t it?)

So, I sat down today and checked the sources. Actually its simple. The picture will be uploaded and checked on its size. The values will be re-calculated be the settings and the aspect ratio should be checked as well. They just forgot to adjust the settings. We’ll do that now…

Open the file „/wp-content/plugins/nextgen-gallery/admin/wp25/functions.php“ in an editor and search for the function „function resizeImages()“. Here you’ll see:

function resizeImages($gallery_absfolder, $pictures) {
// ** $gallery_absfolder must contain abspath !!

if(! class_exists(’ngg_Thumbnail‘))
require_once(NGGALLERY_ABSPATH.’/lib/thumbnail.inc.php‘);

$ngg_options = get_option(’ngg_options‘);

if (is_array($pictures)) {

$bar = new wpProgressBar(__(‚Running… Please wait‘,’nggallery‘));
$bar->setHeader(__(‚Resize images‘,’nggallery‘));
//total number of elements to process
$elements = count($pictures);
// wait a little bit after finished
if ($elements > 5) $bar->setSleepOnFinish(2);
//print the empty bar
$bar->initialize($elements);

foreach($pictures as $picture) {

if (!is_writable($gallery_absfolder.“/“.$picture)) {
$messagetext .= $gallery_absfolder.“/“.$picture.“<br />“;
$bar->increase();
continue;
}

$thumb = new ngg_Thumbnail($gallery_absfolder.“/“.$picture, TRUE);
// echo $thumb->errmsg;
// skip if file is not there
if (!$thumb->error) {
$thumb->resize($ngg_options[‚imgWidth‘],$ngg_options[‚imgHeight‘], $ngg_options[‚imgResampleMode‘]);
if ( $thumb->save($gallery_absfolder.“/“.$picture,$ngg_options[‚imgQuality‘]) ) {
// do not flush the buffer with useless messages
if ($elements < 100)
$bar->addNote($picture. __(‚ : Image resized…‘,’nggallery‘));
} else
$bar->addNote($picture . “ : Error : <strong>“.$thumb->errmsg.“</strong>“);
$bar->increase();
}
$thumb->destruct();
}
}

if(!empty($messagetext)) nggallery::show_error(‚<strong>‘.__(‚Some pictures are not writeable :‘,’nggallery‘).'</strong><br /><ul>‘.$messagetext.'</ul>‘);
return;
}

This is the function which resizes our original pictures. We’ll replace this function now with this modified one:

function resizeImages($gallery_absfolder, $pictures) {
// ** $gallery_absfolder must contain abspath !!

if(! class_exists(’ngg_Thumbnail‘))
require_once(NGGALLERY_ABSPATH.’/lib/thumbnail.inc.php‘);

$ngg_options = get_option(’ngg_options‘);

if (is_array($pictures)) {

$bar = new wpProgressBar(__(‚Running… Please wait‘,’nggallery‘));
$bar->setHeader(__(‚Resize images‘,’nggallery‘));
//total number of elements to process
$elements = count($pictures);
// wait a little bit after finished
if ($elements > 5) $bar->setSleepOnFinish(2);
//print the empty bar
$bar->initialize($elements);

foreach($pictures as $picture) {

if (!is_writable($gallery_absfolder.“/“.$picture)) {
$messagetext .= $gallery_absfolder.“/“.$picture.“<br />“;
$bar->increase();
continue;
}

$thumb = new ngg_Thumbnail($gallery_absfolder.“/“.$picture, TRUE);
// echo $thumb->errmsg;
// skip if file is not there

if (!$thumb->error) {
//$thumb->resize($ngg_options[‚imgWidth‘], $ngg_options[‚imgHeight‘], $ngg_options[‚imgResampleMode‘]);

if ($thumb->currentDimensions[‚height‘] > $ngg_options[‚imgHeight‘] || $thumb->currentDimensions[‚width‘] > $ngg_options[‚imgWidth‘]) {

// check for portrait format
if ($thumb->currentDimensions[‚height‘] > $thumb->currentDimensions[‚width‘]) {
//vorgaben checken
if ($ngg_options[‚imgWidth‘] > $ngg_options[‚imgHeight‘]) {
$y = $ngg_options[‚imgWidth‘];
$x = $ngg_options[‚imgHeight‘];
} else {
$y = $ngg_options[‚imgHeight‘];
$x = $ngg_options[‚imgWidth‘];
}
$thumb->resize($x, 0, $ngg_options[‚imgResampleMode‘]);
// get optimal y startpos
$ypos = ($thumb->currentDimensions[‚height‘] – $y) / 2;
$thumb->crop(0, $ypos, $x,$y,$ngg_options[‚imgResampleMode‘]);
} else {
//vorgaben checken
if ($ngg_options[‚imgWidth‘] < $ngg_options[‚imgHeight‘]) {
$y = $ngg_options[‚imgWidth‘];
$x = $ngg_options[‚imgHeight‘];
} else {
$y = $ngg_options[‚imgHeight‘];
$x = $ngg_options[‚imgWidth‘];
}
$thumb->resize(0,$y,$ngg_options[‚imgResampleMode‘]);
// get optimal x startpos
$xpos = ($thumb->currentDimensions[‚width‘] – $x) / 2;
$thumb->crop($xpos, 0, $x,$y,$ngg_options[‚imgResampleMode‘]);
}

} else {
$thumb->resize($ngg_options[‚imgWidth‘], $ngg_options[‚imgHeight‘], $ngg_options[‚imgResampleMode‘]);
}

if ( $thumb->save($gallery_absfolder.“/“.$picture,$ngg_options[‚imgQuality‘]) ) {
// do not flush the buffer with useless messages
if ($elements < 100)
$bar->addNote($picture. __(‚ : Image resized…‘,’nggallery‘));
} else
$bar->addNote($picture . “ : Error : <strong>“.$thumb->errmsg.“</strong>“);
$bar->increase();
}
$thumb->destruct();
}
}

if(!empty($messagetext)) nggallery::show_error(‚<strong>‘.__(‚Some pictures are not writeable :‘,’nggallery‘).'</strong><br /><ul>‘.$messagetext.'</ul>‘);
return;
}

Ok, what is this doing now?

if ($thumb->currentDimensions[‚height‘] > $ngg_options[‚imgHeight‘] || $thumb->currentDimensions[‚width‘] > $ngg_options[‚imgWidth‘]) {

First of all we check if the uploaded image is bigger then the settings. If not, then we don’t need to do anything anyway.

if ($thumb->currentDimensions[‚height‘] > $thumb->currentDimensions[‚width‘])

Here we check the aspect ratio… horizontal or vertical format.

if ($ngg_options[‚imgWidth‘] > $ngg_options[‚imgHeight‘]) {
$y = $ngg_options[‚imgWidth‘];
$x = $ngg_options[‚imgHeight‘];
} else {
$y = $ngg_options[‚imgHeight‘];
$x = $ngg_options[‚imgWidth‘];
}

And that is basically the new thing… after we know if we have a horizontal or vertical picture, we can adjust the setting values… like 800x600px or 600x800px (for my example).

And thats it already. Looks a lot, but its more explaining then anything else :)
Maybe that is not the best solution (especially it is not ‚update save‘), but it works for now. If you know a better solution, then let me have it in the comments. ;)

Please notice that all code snippets and examples on this page are on your own risk. I am not responsible for anything you do!

Cheers
Gordon

Image resize problem with the NextGEN Gallery plugin

Hi,

and I had a problem again. If you use WordPress with the „NextGEN Gallery“ plugin, then you may also stumble over this problem after some time.
In the options of the plugin you can set a picture size to shrink the pictures, in case they are to big.
I’ve added there the value of 640 x 480 px. Because to big pictures need too long to load and use unnecessarily much disk space. A few minutes ago I was wondering why the pictures still need ages to load and in the full screen mode I saw it … the pictures haven’t been resized by the plugin.

After a while consulting Google I found help.

Edit the file „/wp-content/plugins/nextgen-gallery/admin/wp25/functions.php“ and search the function „function upload_images()„. Scroll to the end of this function and search for:

//create thumbnails
nggAdmin::generatethumbnail(WINABSPATH.$gallerypath,$imageslist);

Write before this:

//create resized pictures
nggAdmin::resizeImages(WINABSPATH.$gallerypath,$imageslist);

Save it, upload the file to the web-space again and then it should work.

Source: http://wordpress.org/support/topic/177782

But something is still disturbing me. Wenn I set as size 640 x 480px then is it horizontal format. But the function doesn’t automatically recognize vertical format. I mean it recognize it of course… but the height is still 480px and the width will be calculated by the height. Like this the resulting image is a bit small then. Would be nice if the function would change the values according to the format of the picture.
Maybe I will check it next week. Then I’ll have more time. :)

[UPDATE] The article is ready, the problem is solved: To the article

Cheers
Gordon