Image Image Image Image Image
Scroll to Top

To Top

News Articles

04

Apr
2015

News Articles

Permalink

By admin404

CropRefine WordPress Plugin

April 4, 2015 - News Articles

When an article is published in WordPress, it could likely appear across several of the internal templates, besides just the single post page. For example, you may see “Recent Articles” on the home page sidebar or footer, “Related Articles” at the bottom of other posts, and “Search Results” may show excerpts with thumbnails to help readers to quickly find relevant results. These other applications of featured images not only direct readers to the freshest content, but they also notify search indexers of changes to a WordPress sitemap. This boosts the credibility of the site and its author by showing that the site is maintained and current, and offering cross-links to promote relevance.

 

Why CropRefine?

When content creators select a featured image for these articles, WordPress’s media manager is suitably adept at uploading the image and preparing several sizes for placement into the various templates. When the theme is built, the designer and developer pre-set these image sizes. WordPress quickly scales each uploaded image to serve only as large of an image as is needed—whether it be a thumbnail in a sidebar or a full-page poster. Typically, you have two options: crop or resize (and sometimes distort) to the new dimensions.

CropRefine: Overcoming WordPress Media Manager's Limitations

But site owners that wish to have greater control have suffered this shortcoming of the media manager: There was no tool provided to refine how the image was to be cropped at these individual crop sizes.

 

How It Works

CropRefine: Media Manager ButtonCropRefine is the latest WordPress plugin by ERA404, developed to solve this shortcoming by giving the control back to the more graphically inclined content creator. It extends the native media manager by adding a new button below each uploaded image called “Refine.”

CropRefine: Re-CropClicking this button presents a toolbox for reviewing each of the prepared image sizes for that asset, and provides an interface for individual adjustment. There are two options, currently: re-crop, and replace.

CropRefine: Re-crop ImageRe-crop allows the site owner to choose which section of the originally uploaded image to be used for that particular image size. If it’s a thumbnail that’s being refined, they are now able to zero-in on the most iconic piece of the larger image, one that best represents the image at a smaller size. Once this crop has been personalized, it will replace all instances of that size image in whichever template it’s used on the site.

CropRefine: ReplaceReplace is used when a new crop isn’t personalized enough for that image size, but an author wishes to upload a new image altogether, to be used in its place. In these circumstances, a quick-upload field is provided to replace that image size, but leave the other sizes unchanged.
After all of the sizes have been refined, users can efficiently hover to review the changes that were made. Future releases of the CropRefine plugin will provide an iterative rollback feature, to restore earlier crops and uploads for each image that’s been refined.

Install ERA404 CropRefine WordPress Plugin (wordpress.org)


Other Plugins by ERA404

ERA404 WordPress Plugins

ImageMeta, by ERA404 Creative Group StaffList, by ERA404 Creative Group FoundationTables, by ERA404 Creative Group

StaffList

Stafflist, by ERA404 Creative GroupCorporate communications can be routed via subject or department in the out-of-the-box contact form feature of a public web presense. On the internal side, where phone extensions, department heads, technical facilities or email addresses may be referenced for daily business interactions, wouldn’t it be handy to have a means of maintaining a staff directory without revising and republishing a full table of contact records?

StaffList is described on WordPress Plugins as: a very light-weight plugin, designed to easily create and manage a staff directory on your WordPress theme. Backend management for add/edit/remove staff records, and front end table with sort by Last Name, First Name, or Directory. Table is paginated and searchable. If this plugin will enhance your own intranet or cut way back on the time required to manage this directory, give StaffList a try.

 

ImageMeta

ImageMeta, by ERA404 Creative GroupSearch Engine Optimization (or SEO), has been a heavily scrutinized task by individuals responsible for marketing, brand awareness, and sales departements. It is one of the answers to the question ‘How do my buyers find my product?’, and an often challenging task among a world wide web of billions of sites. A large component of SEO success is attributed to Metadata (or ‘data about data,’ as it’s described by Wikipedia). Attributing additional properties to your website imagery (such as titles, captions or descriptions), even if they’re unseen by your site visitors, can be an upperhand in your search engine ranking.

Managing your metadata for all of your site’s media can be an arduous task, as the core offers a catalog of images, but requires grooming these properties one-by-one. ImageMeta was developed to condense this task into a single repository whereby all values can be articulated, cleaned, and refined. ImageMeta also optimizes this task by giving controls to duplicate these values to other related meta elements for each image, cutting down the repetition, and making the undertaking a little less daunting. Among the newer features of this plugin, was one for house-keeping: ImageMeta also provides visual indicators of images that may be outdated or no longer necessary, easily linking users to pages where they’re featured or embedded, or to the WordPress media manager, for images that are no longer in use.

 

FoundationTables

FoundationTables, by ERA404 Creative GroupSucceeding the popularity of Zurb’s famous framework, FoundationTables is a WordPress plugin written by ERA404 to harness the responsiveness the framework provides, and extend the WordPress page editor with a new toolset to easily insert, edit, style and delete Foundation-ready tables.

ERA404 encoders and developers wrote the plugin after several clients with WordPress sites requested easily editable tabled data. Previously, no core toolset existed to both build these collections of information and publish them responsively. With theFoundationTables plugin, users can now take advantage of Foundation’s responsiveness for different screen sizes and devices, such as stacking data to fit the width of the narrower window of a mobile phone. FoundationTables comes pre-packaged withseveral design styles, but a separate CSS is also included for unobstructed custom theming. If your website uses a Foundation template, consider FoundationTables to be your solution for quickly and customarily inserting your tabled information.

 


Further Reading

 

Giving Back to WordPress

ERA404 has been working with WordPress since its beginnings. We recognized this potential not only by tech-savvy contributive network and platform flexibility, but judged purely by prospect inquiry alone. The awareness of WordPress’s ease of use and diverse application has paved the way for it to be the preferred platform for site upgrades and new builds, alike.
Read more…

 

WordPress: not just for blogging anymore

For the last decade, ERA404 has been developing comprehensive Content Management Systems (CMS) for clients seeking the ability to easily and regularly manage their own site content, without developer intervention or maintenance contracts. Over the past five years, however, our recommendations have leaned more and more toward WordPress, the free, open-source blogging system that has competed against Google’s Blogger, SquareSpace and Moveable Type. In fact, ERA404 even retired our own home-grown ERA404 CMS product, which couldn’t compete with the thousands of free, user-submitted enhancement plug-ins and templates from the WordPress development community.
Read more…

Tags | blog, croprefine, distort, era404, featured image, fix, limitation, plugin, recrop, refine, shortcoming, thumbnail, upload, wordpress

27

May
2014

News Articles

Permalink

By admin404

Mobile Apps and Chunk Uploads

May 27, 2014 - News Articles

Higher camera resolutions, retina pixel densities and broader bandwidth have given us the web with greater, more beautiful detail. And the HTML5 canvas element now gives us the ability to manipulate imagery armed with nothing more than Javascript. But, as with all growth, there are growing pains, and this one can be found in the

Error Code 413:

Request Entity Too Large.

Mozilla’s error code detail says: “Request entity is larger than limits defined by server; the server might close the connection or return an Retry-After header field.”

https://developer.mozilla.org/en-US/docs/Web/HTTP/Response_codes

Essentially, you’re transmitting the decoded pixel information, 4 bytes at a time (1 byte for each, RGB and Alpha). A byte is hardly going to bust the server limits, but for even a 1-megapixel photo (1200×900), this amounts to 4,320,000 bytes. Most digital phone cameras have capabilities much higher, so you can see how this issue might suddenly become a big possibility in your own web or mobile application.

But if you don’t have access to change some of these server directives, and if you’re working with canvas elements and wish to transmit some very high-resolution pixel data, using toDataUrl(), for example, you might be bumping into this grumpy error code often.

With toDataURL, you can pass an optional argument to prepare the canvas pixel data as a JPEG file, which is generally much smaller than the default PNG format. But not all browsers and phones support this enhancement, such as a Samsung Galaxy SIII, so you now you’ve got to plan for this liability.

 

Chunk Uploading

The traditional solution for sending any payload without reaching a limit is to break it down into parts, and transmit in sequence. It’s how space stations, carnivals, and even the Statue of Liberty was transported. In our mobile apps, we can do it with jQuery, just like this:

var can = document.getElementById("canvas");
var imagedata = can.toDataURL("image/jpeg"); //this will still be a PNG on some phones/browsers
var hash = [any unique id here];
//break the image up into chunks
function chunkup(imagedata, hash){
	var chunks = imagedata.match(/.{1,500000}/g); //break the imagedata into manageable parts
	for (part in chunks){
		var islast = ((part-0)+1 >= chunks.length ? 1 : 0);
		chunkupload(part, chunks[part], hash, islast); //send the chunks, one at a time
	}
}
//transmit each, one at a time
function chunkupload(part, chunk, hash, last) {
    var data = {"chunk": chunk, "hash": hash, "part": part, "last": last};
    $.ajax({
        type: "POST",
        url: "http://path/to/your/server/script.php",
        data: data,
        dataType: "JSON",
        timeout: 60 * 1000,
        async: false
    }).done(function (data) {
		return;
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert("Error: "+errorThrown);
    });
}

You can run this function synchronously, but you might also be pushing another limit for maximum simultaneous requests. So even if it’s slower, it might be worth your while to perform these uploads in sequence, instead.

On the server side, we’re getting image data “chunks” fired at us, so our script must be smart enough to store these chunks temporarily for later reassembly. PHP is terrific for reading and writing to the file system. So here’s an example of how this is done in PHP:

header('Content-type: application/json');
if(!empty($_POST)){
	if(isset($_POST['chunk']) && isset($_POST['hash']) && isset($_POST['part'])) {
		$hash = (string) trim($_POST['hash']);
		$part = (integer) trim($_POST['part']);
		$last = (boolean) trim($_POST['last']);
		//save the data to temporary sequential files on the filesystem
		$filename = "tmp/chunk/{$hash}.{$part}";
		if($fp = fopen($filename,"w"))
		{	$contents = fwrite($fp, (string) trim($_POST['chunk']));
			fclose($fp);
		}
		//if all of the parts have been received, let’s reassemble
		if($last){
			$composite = ""; $chunk = 0;
			while($chunk <= $part){
				if(file_exists("tmp/chunk/{$hash}.{$chunk}")){
					$composite .= trim(implode("",file("tmp/chunk/{$hash}.{$chunk}")));
					//we don’t need the chunk file anymore
					unlink("tmp/chunk/{$hash}.{$chunk}");
				}
				$chunk+=1;
			}
			$filename = "tmp/{$hash}.jpg";
			//strip out the imagetype header
			preg_match("/data\:image\/([png|jpeg]*)\;base64\,(.*)/", $composite, $img);
			if(count($img)==3){
				$rawdata = imagecreatefromstring(base64_decode($img[2]));
				imagejpeg($rawdata, $filename);
			}
			//send the good news, your image has been transmitted!
			if(file_exists($filename)) die( json_encode( array("filename" => $hash) ));
		}
	}
}
//let AJAX know you got the chunk
die( json_encode( array("1") ));

That’s all there is to it!

There are countless mods (sanitizing, security, accounts, filetype handlers, etc.) that can be worked into this workflow, but now you can concentrate on your customizations and not have to worry about error code 413.

Tags | chunk upload, hi-rez, high resolution, information, javascript, jpeg, jpg, jquery, megabytes, megapixels, mozilla, pixel, png, request entity, retry-after, todataurl

15

Jan
2014

News Articles

Permalink

By admin404

FoundationTables WordPress Plugin

January 15, 2014 - News Articles

Succeeding the popularity of Zurb’s famous framework, FoundationTables is a WordPress plugin written by ERA404 to harness the responsiveness the framework provides, and extend the WordPress page editor with a new toolset to easily insert, edit, style and delete Foundation-ready tables.

ERA404 encoders and developers wrote the plugin after several clients with WordPress sites requested easily editable tabled data. Previously, no core toolset existed to both build these collections of information and publish them responsively. With the FoundationTables plugin, users can now take advantage of Foundation’s responsiveness for different screen sizes and devices, such as stacking data to fit the width of the narrower window of a mobile phone.

Edit Table Data

Managing table data can be tricky from the WordPress rich text editor as it provides only a small area to write in each table cell. The FoundationTables plugin enlarges each cell to offer users a larger window for editing copy, inserting imagery, and adding markup.

Insert Table into Page

Once the content is finalized, the table can be inserted anywhere within the page copy using a shortcode. Easier still, FoundationTables offers a new editor button to insert the preferred table at the cursor position. Because the plugin doesn’t limit the number of tables that can be created on each page, the table can be inserted anywhere in the content, in any order, and can be previewed directly from the back-end. Switching views from presentation to code, the table markup is collapsed to a single placeholder, increasing usability as users see page content without code clutter.

FoundationTables comes pre-packaged with several design styles, but a separate CSS is also included for unobstructed custom theming. The styles used in v0.1 (beta) are greyscale, but color can easily be added by quick adjustments to the CSS. These styles are:

Standard Grey Table with a Highlighted Header Row

FoundationTables default style: Standard Grey Table with a Highlighted Header Row

Standard Grey Table with a Highlighted First Column

FoundationTables default style: Standard Grey Table with a Highlighted First Column

Simple Grey Table

FoundationTables default style: Simple Grey Table

The FoundationTables plugin, which is now in beta, can be found in the WordPress plugins repository.
Other plugins developed by ERA404:
StaffList: Manage and insert searchable company directories
ImageMeta: Site-wide meta management for WordPress media library

Documentation about Foundation can be found here: http://foundation.zurb.com/learn/about.html

Tags | beautiful, blog, clean, foundation, foundationtables, html, layout, plugin, tables, tabular data, wordpress, zurb

02

Dec
2013

News Articles

Permalink

By admin404

The Ryanair of Design

December 2, 2013 - News Articles

For frugal latitudinarians, Ryanair is a blessing. You can find tickets for as little as €1 to whisk you off to a growing set of your favorite European cities. They truly are the GoDaddy of airlines, with an inexpensive base price, a million options for billable add-ons, and even their CEO, Michael O’Leary, projects a similar public persona to GoDaddy’s Bob Parsons.

The convenience of Ryanair is part of a growing trend to provide consumers with a competitive base price, tacking on inexpensive à la carte options for anything they need. With Amazon’s Longtail model and online service providers—think VistaPrint—offering LQLC (lower quality, lower cost) merchandise for pennies on the dollar, consumers have a broader and more diverse array of choices than ever before.. If cost is more important than quality, comfort, or customization, penny-savers, this new model of service is for you!

So what if ERA404 changed our business model to match Ryanair? Imagine you’re seeking a new identity for your business and have submitted an RFP to ten design firms, including ERA404.  When all proposals come in, you have a ballpark of $50,000 from nine studios and $15,000 from us. Your first thought was that ERA404 either provides offshore labor or maybe we missed a few pages in your RFP. But no, we reply, this is the price. One identity system: $15,000 (a total of $35,000 in savings over our competition).

It’s then that you take a look at the fine print. One (1) logo costs $15,000, but we’re happy to offer you some options. You can receive additional thumbnail sketches at $50/sketch, additional rough sketches for $100/rough, and additional refined logo concepts for $250/concept. Interested in seeing samples in different palettes or typefaces, that’ll only cost you $100/ea. Want variations of how the logo can be applied with and without a tagline? Stacked versus vertical? Simplified for clothing hangtags and favicons? Each modification will cost you, but you should still come out ahead since the base offering was massively discounted. Right?

And don’t forget about artwork provision by courier or digital transmission, we’ll need to get the files to you somehow and that won’t come cheap. Similar to Ryanair’s model, jokingly referred to as the Pay-Per-Pee airline, a $40 ticket actually costs something closer to $65, with a mandatory “convenient” online check-in fee imposed on every ticket. This is similar to a design firm telling you there is a fee each time they type up an invoice to bill you for the work they have have yet to perform.

So by the time the project is completed and all the add-on costs are tabulated, your $15,000 may be closer to $45,000 and CFOs will rejoice at the overall savings of $5,000 over the competing quotes. However the enjoyment of the experience, the satisfaction with the outcome, and the quality of the work performed would diminish greatly. Here’s why:

In the world of design, continuing with Identity Design as an example, the process grows organically. Pentagram partner and identity design extraordinaire, Paula Scher, may doodle an arch over the word Citi on a napkin in an introductory meeting with Traveler’s Bank. HermanMiller may spend a solid year and hundreds of millions of dollars churning out concepts for an updated brand that results in simply encapsulating the previous in a circle. Either way, the process can be planned, but organic design should never go according to plan. It can be organized and directed, but creative development isn’t something that follows a strictly controlled organization or direction. Restricting the number of sketches based on dollar amounts (or Pay-Per-Tweak) not only desiccates the fluidity of the process, but decimates the possibility of creativity. Read: you’ll arrive at your destination, but you won’t enjoy the voyage.

Services like air travel and digital printers and crowd-sourced identity design can survive because they cater to our frugal nature and provide services that don’t require innovation or artistry. They’re assembly line. They strip the experience of quality and luxury and fall back on banal consistency of their basic offering: a service, no more, no less.  Design, by nature, is the antithesis of this sort of factory labor, and could never survive if it were to adopt the Ryanair mentality. And for these customers, the luster of shaving a few dollars off their contracts will quickly fade when they’re left with a dismal outcome and a bag of peanuts.

 

Tags | artistry, assembly line, consistency, creativity, crowdsourced, factory, godaddy, industry, innovation, ryanair, vistaprint

23

Jul
2013

News Articles

Permalink

By admin404

StaffList WordPress Plugin

July 23, 2013 - News Articles

If you’re unfamiliar with WordPress, it’s a powerful, extensible blogging architecture that’s quickly spawned a massive contributor base for plugins. ERA404 developed ImageMeta, in 2012, a comprehensive tool for refining and grooming all linked and embedded imagery in your WordPress blog or website, for improved SEO and ultimately more precise/favored search engine ranking.

This summer, you can now download and install the new ERA404 WordPress plugin: StaffList, a super-simple, straight-forward company directory manager.

 

Features are:

  • Update five fields for each staff record (last name, first name, department, email, phone number)
  • Leave some fields blank for general department mailboxes or numbers
  • Updates are performed on-the-fly, so no delays from page-reloads
  • Presentation (front-end) styles are separated from core styles for ease of theming
  • No edit links or popups, just make your additions or changes in-line
  • Case-insensitive substring search, with highlighted matches on front-end presentation
  • Uses jQuery/AJAX for page handling, sorting & searching without page-load

 

Screenshots of the plugin:

StaffList - a WordPress Plugin by ERA404 (AJAX Inserts & Updates)

AJAX Inserts & Updates

StaffList - a WordPress Plugin by ERA404 (Dynamic Sort & Pagination)

Dynamic Sort & Pagination

StaffList - a WordPress Plugin by ERA404 (Real-time search)

Real-time search


 

 

 

 

Download the free plugin, here: http://wordpress.org/plugins/stafflist/

Tags | blog, ceo, directory, faculty, listing, plugin, staff, website, wordpress

28

Jan
2013

News Articles

Permalink

By admin404

The Creative Process

January 28, 2013 - News Articles

Oftentimes when approached by clients and agencies, we’re asked about our creative process at ERA404. While people can easily see a step-by-step diagram of our development process, broken down by time, cost and client interaction, we have never really outlined how the creative process works here. This is partially because development, which is creative in its own right, is considerably more objective, pragmatic, and analytical. The process is linear, relying on previous checkpoints to proceed to latter ones.

Design, on the other hand, grows organically and chaotically. It pushes forward and outward in untraceable trajectories. If one thinks of development as a relay race with the baton being passed at regular relay points, design is more like a quixotic multi-player game of capture the flag. It’s undoubtedly the most challenging, gratifying (and possibly frustrating) part of our job here, riddled with stops, starts, reorientation, redirection, hidden doors, trap floors, exploration, and trial and error, relying purely on experience and gut instinct to reach the goal. And while the description above sounds daunting, it’s the primary reason we love our jobs so much.

So, depicting our creative process in a linear diagram like our development process is impossible. But each design roughly follows the same objectives along the uncharted path, which, coupled with client feedback and critiques, act as polestars in guiding us to their completion. Below are those objectives, distilled and organized as they would be in a perfect world, free of the organic and beautiful growth of real-world scenarios:

 

Defining the Problem

  1. Defining the Problem
    To maximize success we first define the problem we are trying to solve—we articulate it and give it boundaries (what’s part of the problem? what’s outside our control?). We call upon our designers to help cull, visualize, express that problem in human terms—looking at it from many different views.
  2. Envisioning the Desired End State (Knowing what victory looks like)
    (If you’ve ever been part of a team that seemed lost, it’s likely this step was skipped.) Knowing how to both characterize and recognize a victory will be vital when embarking on the journey of solving the problem. As designers, we can help prototype the end state (through scenarios, models, journey maps, etc.).
  3. Defining the Approach by Which Victory can be Achieved
    Once we know where we want to go, we need to create a map to get there. That map must be imprinted in the minds of every participant along the way, including clients and team members. We find it helps to draw an actual map with our clients, to assist them in visualizing the distance and milestones to the destination.
  4. Inciting Support—And Then Action
    In some cases, not everyone will want to make the journey. They’ll need to be inspired. Convinced. Reinforced. Educated. As designers, we call on our skills as communicators to help them see why they should come along.

Innovating

  1. Seeking Insight to Inform the Prototyping of the Solution
    After the team is assembled, in which the client plays an integral—if not central—role, the next task is to look at the work ahead and be smart about it. Often it pays to take pause and seek insight that will enable the team to prototype a solution. That means research. Our designers help structure that research, especially in reporting its findings.
  2. Prototyping Potential Solutions
    The prototype might might literally mean physically prototyping the solution: building it in miniature, or as a one-off, to see if it will work. Or, it might mean prototyping a new customer experience—a collection of moments that make up an experience. In either case, we play a critical role in communicating the vision to clients.
  3. Delineating the Tough Choices
    A good prototype (or prototypes) unearths all sorts of unexpected data and insight. And from that, tough choices emerge. Should we include this feature, or that? What if the solution costs more than clients have budgeted? Can the prototype be broken down into stages to make the objective more affordable and digestible? What if there are downsides? Together, with regular and consistent communication  we try to make the choices evident.
  4. Enabling the Team to Work as a Team
    And, when crucial to the project, we help the team work as a team: helping make choices, envisioning different outcomes, seeing the “whitespace” that connects divergent views and approaches.

Generating Value

  1. Choosing the Best Solution, Then Activating It
    This is the culmination of many steps of hard work. If we do our jobs right, we can often be the pivotal voice in this step, helping argue for the best overall solution—we can visualize the case, see different sides of the problem and lay out a path for making a commitment to the chosen solution.
  2. Making Sure People Know about our Solution
    Once a solution is chosen, the task becomes to ensure that people—customers, constituents, employees—know about it. In a traditional sense, this is about marketing the idea. In a deeper sense, it’s about empowering people to support/own/celebrate the solution.
  3. Selling the Solution
    In most cases, an exchange of money or time will be involved—between seller and buyer, creator and participant, sponsor and beneficiary. That process is generally helped by design, so that people know what they’re buying and what it’s worth.
  4. Rapidly Learning and Reorienting Based on your Successes and Failures
    The most effective projects are those in which we constantly learn, strive, and improve. Our job is to help take the team back through the journey, recounting the steps where good decisions were made and where the team could act differently next time.

Tags | checklist, creative process, creativity, design, development, diagram, flow chart, innovation, milestones, problem, prototyping, stepping stones