phikai

Justin Peacock

<p>Show your work in high resolution, responsive device mockups using only shortcodes. Wrap images, videos, or any other content within a few simple shortcodes to display them within any of the pre-packaged devices mockups, which are easily selectable from within the editor.</p>
<p><a href="https://devicemockupswp.com/" rel="nofollow ugc">Documentation</a></p>
<h4>Available shortcodes</h4>
<ul>
<li>[device][/device]</li>
<li>[browser][/browser]</li>
</ul>
<h4>Device Attributes</h4>
<ul>
<li>type: imac|iphone6|iphone6-plus|iphone5s|iphone5|s3|lumia920|ipad|nexus7|surface</li>
<li>color: black|white|gold|silver</li>
<li>orientation: portrait|landscape</li>
<li>stacked: open|closed</li>
<li>position: left|right</li>
<li>link</li>
<li>width: (px or %)</li>
<li>hide: left|right</li>
<li>scroll: false</li>
<li>gallery: false</li>
</ul>
<h4>Browser Attributes</h4>
<ul>
<li>type: chrome|firefox|safari</li>
<li>link</li>
<li>width: (px or %)</li>
<li>gallery: false</li>
</ul>
<h4>Creating a Gallery</h4>
<ul>
<li>Add gallery=”true” to your device|browser shortcode</li>
<li>Add your images within your device</li>
<li>Add a <code><div></code> around each image within the device</li>
</ul>
<p>I’m working to simplify this process but for now, this will get your galleries working.</p>
<p>See <a href="https://devicemockupswp.com/gallery-slider/" rel="nofollow ugc">Gallery Slider</a></p>
<h4>Recommended Image Sizes</h4>
<ul>
<li>iPhone 6 – 1334×750</li>
<li>iPhone 6 Plus – 1920×1080</li>
<li>iPhone 5s – 1136×640</li>
<li>iPhone 5 – 640×1136</li>
<li>iPad – 2048×1536</li>
<li>iMac – 1920×1200</li>
<li>Macbook Pro – 1440×900</li>
<li>Galaxy S3 – 720×1280</li>
<li>Nexus 7 – 1920×1200</li>
<li>Surface – 1920×1080</li>
<li>Lumia 920 – 768×1280</li>
<li>Chrome – 1440×900</li>
<li>Firefox – 1440×900</li>
<li>Safari – 1440×900</li>
</ul>
<h4>Bugs:</h4>
<ul>
<li><a href="https://wordpress.org/support/plugin/device-mockups" rel="ugc">Report an issue</a></li>
</ul>
<h4>Questions/Comments</h4>
<ul>
<li>https://byjust.in/contact/</li>
</ul>


Device Mockups

Show your work in high resolution, responsive device mockups using only shortcodes.

steve.barnett

<p><a href="http://detector.dmolsen.com/" rel="nofollow ugc">Detector</a> is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.</p>
<p>Also available on GitHub: <a href="https://github.com/SteveBarnett/Detector" rel="nofollow ugc">https://github.com/SteveBarnett/Detector</a>.</p>
<p>Full documentation is available at <a href="https://github.com/dmolsen/Detector/" rel="nofollow ugc">github / dmolsen / Detector</a>.</p>
<h3>To Do</h3>
<ul>
<li>Add some useful responsive image handling, in the style of <a href="https://github.com/scottjehl/picturefill/" rel="nofollow ugc">picturefill.js</a>. Based on families at first?</li>
<li>Add functions for conditional loading of content via JS, depending on screen size.</li>
<li>wp_enqueue_script for Modernizr</li>
<li>Check Modernizr version, custom</li>
<li>Add option to add own <a href="https://github.com/dmolsen/Detector/wiki/Detector-Test-Tutorial" rel="nofollow ugc">feature tests</a> from admin area?</li>
<li>Add option to add own <a href="https://github.com/dmolsen/Detector/wiki/Detector-Family-Tutorial" rel="nofollow ugc">families</a> from admin area?</li>
<li>Add shortcodes?</li>
</ul>


Detector

Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without …

Device Mockups vs Detector