Описание

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.

Documentation

Available shortcodes

[device][/device]
[browser][/browser]

Device Attributes

type: imac|iphone6|iphone6-plus|iphone5s|iphone5|s3|lumia920|ipad|nexus7|surface
color: black|white|gold|silver
orientation: portrait|landscape
stacked: open|closed
position: left|right
ссылка
width: (px or %)
hide: left|right
scroll: false
gallery: false

Browser Attributes

type: chrome|firefox|safari
ссылка
width: (px or %)
gallery: false

Creating a Gallery

Add gallery=»true» to your device|browser shortcode
Add your images within your device
Add a <div> around each image within the device

I’m working to simplify this process but for now, this will get your galleries working.

See Gallery Slider

Recommended Image Sizes

iPhone 6 – 1334×750
iPhone 6 Plus – 1920×1080
iPhone 5s – 1136×640
iPhone 5 – 640×1136
iPad – 2048×1536
iMac – 1920×1200
Macbook Pro – 1440×900
Galaxy S3 – 720×1280
Nexus 7 – 1920×1200
Surface – 1920×1080
Lumia 920 – 768×1280
Chrome – 1440×900
Firefox – 1440×900
Safari – 1440×900

Bugs:

Report an issue

Questions/Comments

https://byjust.in/contact/

Скриншоты

Приборы
Stacking
Браузеры

Установка

Upload the plugin files to the /wp-content/plugins/device-mockups directory, or install the plugin through the WordPress plugins screen directly.
Активируйте плагин через меню «Плагины» в WordPress.

Часто задаваемые вопросы

Installation Instructions

Upload the plugin files to the /wp-content/plugins/device-mockups directory, or install the plugin through the WordPress plugins screen directly.
Активируйте плагин через меню «Плагины» в WordPress.

Отзывы

mommaroodle 16.06.2017

Excellent Plugin — works great

Посмотреть все 8 отзывов

Участники и разработчики

«Device Mockups» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Перевести «Device Mockups» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

Журнал изменений

1.8.2

added filters back to fix the gallery

1.8.1

Added composer to grab latest wpcs and phpcs
Removed shortcode filter
More code optimization to meet WordPress Coding Standards

1.8.0

Removed [dm-gallery] shortcode and replaced it with a simpler way to create a gallery
Simplified CSS by using @extend
More code optimization

1.7.0

updated code to reflect WordPress Coding Standards
optimized images to help save on loading time
this release is mainly to clean up code so that I can start working on future updates

1.6.0

adding ability to scroll within the device
cleaned up code
added support for jetpack videos

1.5.2

optimized output to work better with other shortcodes i.e. page builders
removed conditional statements to check for if shortcode is used to enqueue and moved enqueue within the shortcode function
shortcodes will work within widgets now

1.5.0

semi-major update
re-wrote entire code base
styles and scripts only enqueue when shortcodes are used
re-organized tinymce button
switched to slick.js for gallery slider
added internalization

1.4.2

pull request from @irazasyed to fix the custom url to the plugin dir
removed README.md

1.4.0

added FlexSlider
fixed a CSS issues with iPhone 6
fixed stacking button in editor
reverted to node-sass
updated file structure

1.3.1

URL fix in the readme.txt
image optimization

1.3.0

added iPhone 6, iPhone 6 Plus, and iPhone 5s
added an attribute to hide the left or right of the device (currently doesn’t work with stacking) — idea credit to @raphaelkross
added browsers (chrome, firefox, and safari)
added hiding but currently in beta
added documentation link to plugin
and much more

1.2.1

added icons to support WP 4.0 installer (Created by @timm3h)
added more browser prefixes

1.1.9

fixed a bug reported by Barn2Media

1.1.8

added width attribute. (Example width=»80%» or width=»400px»)
note that width isn’t for overall width of stacked devices. I suggest wrapping the stacked items in a div and applying a max-width

1.1.7

added the ability to wrap a link around a device screen

1.1.4

added missing styles for stacked devices

1.1.3

added the unminified CSS file and removed Neat
added conditionals for data attributes
added screenshot for shortcodes button
added version string to CSS

1.1.1

fixed a conditional statement that was outputting classes that weren’t needed

1.1

added TinyMCE button for predefined shortcodes

1.0.2

formatting fixes for readme.txt 🙂

1.0.1

readme.txt fixes

1.0

Initial commit