- Site Template
- WordPress Theme
- Blogging Theme
- CMS Theme
- Marketing Template
- eCommerce Theme
- Forum Theme
- Flash Template
- PSD Web Template
- .NET Script
- PHP Script
- HTML5 Code
- CSS Style
- Edge Animate Template
- Muse Template
- TypeEngine Theme
- Static Site Generator
- Sketch Template
CodeCanyon Image HD Retina & Android Image Enhancer 4030026
Mobile \ Retina \ Xhdpi \ Images \ HDPI \ Android \ Droid
This is just a simple script to replace your standard resolution images with higher res (retina, hdpi, etc.) images based on the platform and screen resolution. I’ve seen lots of solutions for handling retina images, but little to nothing about serving the nice crisp images to the higher density Android devices, so I thought I’d write something to handle both.
It’s pretty plug & play, but I’d also tried to make super configurable. By default, you just have to add ImageHD.run() on page load, and it will update all of the images with a higher resolution version on any devices that support it, based on the default file structure.
image.png (original image)
[email protected] (retina image)
hdpi/image.png (hdpi image)
You can easily configure it to either grab a new image by appending the type to the original image (i.e. image.png becomes [email protected] for retina) or grab an image with the same name from a different directory (i.e. image.png becomes xhdpi/image.png for XHDPI android devices). You can also tell it to always replace all images, or only replace images with a given class name.
It’s not fully tested yet, so there may still be some issues, but so far it seems to work well. But, let me know if you find any bugs, or have any suggestions for improvements.
- Replace Images with proper resolution
All you need to do to replace all your images with nice retina/hdpi version is load the script and run this line of code.
See below for configuration options
- Naming conventions
This script assume a few standard file naming conventions, but if that’s not how you roll, you can update it in the config. Assuming you have a file “logo.png” that you load by default, the script will load “[email protected]” for retina devices, “drawable-hdpi/logo.png” for HDPI Android devices, “drawable-xhdpi/logo.png” for XHDPI Android devices, etc.
- Get current screen density
If you would like to get the current screen density, it’s as simple as.
- Replace images with correct resolution
Let’s say you’ve coded your site for MDPI devices, but want to serve HDPI images to higher density devices. Simply add a class of ’.android-dpi’ to any images you want to update, and the script will take care of
the rest. The only rquirement is that the images should have the dpi in the name so it knows what images to use. For example name your logo “site-logo-mdpi.png” and it will be replaced with “site-logo-hdpi.png” on hdpi device, “site-logo-xhdpi.png” on XHDPI devices, and so on.
- CONFIG OPTIONS
This allows you to only update images with a certain class name. Set to false to replace all images
‘dir’ => get same image name from this dir | ‘append’ => append to image name in same dir || ‘auto’ => uses dir for android & append for ios
This will set an explicit width/height on all updated images to prevent image enlargement on any images that don’t have dimensions set.
By default, the script will check for a directory with the same name as the current density, for example it will check “hdpi/image.png” on hdpi devices. If you want to prepend a value to that (for example if you’re dropping in drawables from an android project) you can can set this to “drawble-” and it will load “drawable-hdpi/image.png”.
It’s less likely that you will want to change this, but this has the same functionality as android_dir_append, but targeted at ios devices.
A JSON object of android screen densities you want to target. If theres a density you don’t want to update, set it to false (by default, we assume you’re using mdpi as a baseline and only replace hdpi & xhdpi images)
If want to serve the same iOS @2x images to XHDPI devices, set this to true.
Set this to true and ImageHD will auto run once the dom has loaded, without the need to explicitly call ImageHD.run
set true to log what’s happening in the console.
PHP Map + Location Plugin; PHP Video Plugin; PHP Twitter Plugin; PHP Image Plugin; PHP Bit.ly Plugin; Dweamer - Dreamweaver Theme Builder.
Keywords: 2x, HDPI, android, droid, hd, images, ios, mac, mobile, mobile web, retina, web, xhdpi.
Android, Builder, Business, Clean, Corporate, Creative, Design, Ecommerce, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest Andromeda Coming Soon PSD Template 18944606
- ThemeForest Pustaka WooCommerce Theme For Book Store 18632697
- ThemeForest DJ Night Event DJ Party Music Club PSD Template 18953541
- ThemeForest The Company Ultimate Business Template for Any Niche 19000918
- ThemeForest Molly Multipurpose Responsive Shopify Themes 18974581
- ThemeForest Good Food HTML Template for Cafe Bar and Restaurant 18977189
- ThemeForest Vina Dazzi VirtueMart Template for Watches Store 18730828
- ThemeForest OnePlus Responsive Material Design Template 18935996
- ThemeForest Onset Multipurpose HTML5 Template 18603360
- ThemeForest thEye Multi-Purpose PSD Template 18841640