I can’t stop myself from playing with photography and some other tricks from web 2.0 on this WordPress website with lots of custom development tips and php programing functions to bring you some humor :)

Photo_Retouching_Batucada_Bridge

 

You don’t need a plugin, or template to add your custom error page. WordPress already gave you a nice (still buggy) WYSIWYG editor, and many other tools to make pages useful (more…)

This animation DOESN’T use Rotatation at all. Nor 3D/2D transformations.

Why aren’t there yet “animator” apps or online tools to animate objects along a path without canvas or JS?

Time ago I contacted a few key people, those who take good ideas, make an API or mixin for others to enjoy it, enjoy the fame themselves and don’t try to make money with it.

None of them even responded. I wonder whether they are building their own app/script?

How can it be possible with pure CSS?

If you convert hand-drawn strokes or any other curve into 2-node bezier curves, and extract separate x and y translation-over-time curves, you can make them into easing functions, getting a tranlation across the screen using just timeframes.

If you’ve ever seen a vinil router, the head only moves in the x axis – it would make the x easing –  and the roll only moves back and forth – making the y easing. Bot move in their own axis, and yet they draw CURVES, without rotating the media, just by accelerating and descelerating over time.

Those movements can be separated into easing functions, like an image is traced, and each curve can made into a bezier easing function.

The technology to convert curves into vectors is open source. The technology to split them into 2-node bezier exists too. What are we wating for?

Sometimes it’s not enough a simple “text-decoration”, specially in the new kind of text-only giant hero ass message that the trend bootstrap implanted in our brains (I hope it passes soon!).

In those cases, an extra decoration could be used. In this case, ellegantly called with a .runaround class.

Havent’ you ever wished to be able to use user-uploaded images (not carefully chosen with extra background) as the backdrop for their titles, and yet make the text on top READABLE?… NOT using tex-shadow or a hard box? Not even a blurry box or gradient?…

What about a progressive blurry background like Photoshop’s lens blur, that is less-blurry on the outside but blurrier in the inside, right under the text, so the blurred part doesn’t mix with the straight edges but rather makes a nice bokeh…

What about making it animated on hover?

As usual, without extra markup (or I could make the blur even more subtle on the outer area where it merges with the un-blurred image) and without JS or SVG. Pure webkit and flex boxes, or you could do it with tables and inline-block, but I guess IE will hate that. Bleep IE though.

Try it at full screen, because the hover is on the whole row (it needs to affect the overlay too. Unless you want to US JS to affect the parent style/class when the text is hovered).

A few tips – so you don’t think it was easy:

  • There were needed two blurred images. So the large blurred is not merged directly with sharp edges, which makes it ugly.
  • The blur areas could be extended with ems, so it would change on window-resize, but since my image box is fixed height, I used pixels.
  • Resizing text with vw units will fail in pixel densities other than 1:1 if you don’t provide a reduction to compensate it for EACH existing screen density out there (Remember: 50%% of an iPhone screen is 320px, which in CSS will fill the screen!)
  • Each blurred image has its own overlay as an extra background-image gradient.
  • Each transition requires different delay and easing to ensure you won’t get a black blurry patch. Remember: except in linear transitions (too robotic to look smooth) 50% into the animation, no object is at 50% opacity, and the average between them PLUS the black overlays, gives unexpected results. It’s like video/audio mixer console faders: they transition with a smooth curve, but never linear, because the average of 50% + 50% is a washed out tone in video or too loud in audio.

Thanks to this guy, I was able to reduce website load, and stop wasting bandwidth in unnecessary quality our eyes can’t see.

Nowadays, screens have more resolution than you eye can catch, so you can increase the compression (reduce the quality) up to a point where you barely start noticing it (the only way to calculate it.

Copy this funciton in your functions.php file, and new photos saved by WordPress (thumbnails and intermediate sizes), will be created using your new settings.

// Changes compression for newly uploaded photos
add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Testing different compression settings using WordPress uploader is a slow process, so I recommend you to try it in PhotoShop or any online photo editor first, and then using the value that suits your eye in this function.

If you want to squeeze more juice from WordPress, optimizing the compression settings even more, try this other function to select different compression settings for different image sizes.

If you need to re-create the existing images, you can use the plugin Force Regenerate thumbnails

Loading speed is reflected in PageRank, and clients always want BIGGER images, and MORE animate slides.

If you want to compete with other websites in every aspect, page load if one of the most important features that Google and other search engines take into account at the time of assigning a PageRank to your website.

And if you use many images in a Giant image slider (A.K.A Hero box) you’ll need to save some Kb here and there.

Sliders could take a higher compression to prevent bloating your website with un-necessary weight.

In this code, you just replace the conditional to your image size names, and the amount of compression desired. In my case, I divided it in “slider” or everything else.

Code By Ahmad M.

// Different compression for each size
// Thanks to 
add_filter('jpeg_quality', create_function('$quality', 'return 100;'));

add_action('added_post_meta', 'ad_update_jpeg_quality', 10, 4);

function ad_update_jpeg_quality($meta_id, $attach_id, $meta_key, $attach_meta) {

    if ($meta_key == '_wp_attachment_metadata') {

        $post = get_post($attach_id);

        if ($post->post_mime_type == 'image/jpeg' && is_array($attach_meta['sizes'])) {

            $pathinfo = pathinfo($attach_meta['file']);
            $uploads = wp_upload_dir();
            $dir = $uploads['basedir'] . '/' . $pathinfo['dirname'];

            foreach ($attach_meta['sizes'] as $size => $value) {

                $image = $dir . '/' . $value['file'];
                $resource = imagecreatefromjpeg($image);

                if ($size == 'slider') {
                    // set the jpeg quality for 'slider' size
                    imagejpeg($resource, $image, 30);
                } else {
                    // set the jpeg quality for the rest of sizes
                    imagejpeg($resource, $image, 50);
                }
                imagedestroy($resource);
            }
        }
    }
}

This will only change the new photos upladed after installing it. If you need to re-create the existing images, you can use the plugin Force Regenerate thumbnails

If you don’t need different compression settings, you can just follow another other function, to change WordPress image compression settings.

If you are not proficient with photoshop like me, you probably upload your photos as-is and let WordPress to manage all the sizes.

That makes wordpress to take way more resources and time to load than if the images had been properly prepared for screen

Now, in order to limit WordPress image sizes to the “large” size, you will be left with just one size for your entry column. So you need a new image size for not messing with your existing sizes, as I explained in my post Make WordPress faster and fix duplicate content with one function

and combined with this other function, you can ensure

function limit_imagesizes( $orig_link, $post_id, $size, $permalink ) {

 // Only do this if we're getting the file URL
 if ($permalink) return $orig_link;

 $image = wp_get_attachment_image_src( $post_id, 'maximum' );
 $new_link = preg_replace('/href=\'(.*?)\'/', 'href=\'' . $image[0] . '\'', $orig_link );
 return $new_link;
}
add_filter('wp_get_attachment_link', 'limit_imagesizes', 10, 4);

And if you are an optimizer like me, you might want to compress the images a little more, considering modern screens have more resolution than before, making the JPEG artifacts harder to notice (they end up smaller, like the whole image)

…or learning how JPEG works or how to find the right compression settings.

Because your screen doesn’t need a 2100 px wide image! You are probably good to go with a 800 px wide image, or maybe 1024 px wide for a full-screen feature when using some “Lightbox” type of plugin.

There are functions for that out there, but I combined them with the other issue that could get you duplicate content I wrote about, here

For those old sites, and for any that you want to speed up, add this function to your functions.php file and it’ll take care of (more…)

Yes, the title was purposely on purpose.

You had the duplicate content issue tamed and suddenly Google reports tell you there are duplicate pages.

Due to the new media uploader, your theme could not be able to make an image to link to the original file, and now it links to a new page with the same content than the rest. You can see the bug track here Media uploader has issues with defaults for align/link/size (more…)

Ready to own a Social Blogsite?

Learn More