Advanced Image Styles - Version 0.1

Version Description

Initial Version.

Download this release

Release Info

Developer gcorne
Plugin Icon wp plugin Advanced Image Styles
Version 0.1
Comparing to
See all releases

Version 0.1

Files changed (6) hide show
  1. _inc/advanced-image-styles-tmpl.php +32 -0
  2. advanced-image-styles.php +48 -0
  3. css/advanced-image-styles.css +40 -0
  4. js/advanced-image-styles.js +86 -0
  5. languages/advanced-image-styles.pot +62 -0
  6. readme.txt +19 -0
_inc/advanced-image-styles-tmpl.php ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script type="text/html" id="tmpl-advanced-image-styles">
2
+ <span class="group-label"><?php esc_html_e( 'Image Border', 'advanced-image-styles' ); ?></span>
3
+ <div class="image-settings-group">
4
+ <label class="border-width">
5
+ <span><?php esc_html_e( 'Width', 'advanced-image-styles' ); ?></span>
6
+ <input type="text" data-setting="borderWidth" value="{{ data.borderWidth }}" />
7
+ </label>
8
+ <label class="border-color">
9
+ <span><?php esc_html_e( 'Color', 'advanced-image-styles' ); ?></span>
10
+ <input type="text" data-setting="borderColor" value="{{ data.borderColor }}" />
11
+ </label>
12
+ </div>
13
+ <span class="group-label"><?php esc_html_e( 'Image Margins', 'advanced-image-styles' ); ?></span>
14
+ <div class="image-settings-group margins">
15
+ <label class="left">
16
+ <span><?php esc_html_e( 'Left', 'advanced-image-styles' ); ?></span>
17
+ <input type="text" data-setting="marginLeft" value="{{ data.marginLeft }}" />
18
+ </label>
19
+ <label class="top">
20
+ <span><?php esc_html_e( 'Top', 'advanced-image-styles' ); ?></span>
21
+ <input type="text" data-setting="marginTop" value="{{ data.marginTop }}" />
22
+ </label>
23
+ <label class="right">
24
+ <span><?php esc_html_e( 'Right', 'advanced-image-styles' ); ?></span>
25
+ <input type="text" data-setting="marginRight" value="{{ data.marginRight }}" />
26
+ </label>
27
+ <label class="bottom">
28
+ <span><?php esc_html_e( 'Bottom', 'advanced-image-styles' ); ?></span>
29
+ <input type="text" data-setting="marginBottom" value="{{ data.marginBottom }}" />
30
+ </label>
31
+ </div>
32
+ </script>
advanced-image-styles.php ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ /**
4
+ * Plugin Name: Advanced Image Styles
5
+ * Author: Gregory Cornelius
6
+ * Author URI: http://gregorycornelius.com
7
+ * Description: Adjust an image's margins and border with ease in the Visual
8
+ * editor.
9
+ * Version: 0.1
10
+ * License: GPL2+
11
+ * Text Domain: advanced-image-styles
12
+ * Domain Path: /languages/
13
+ *
14
+ */
15
+
16
+ class Advanced_Image_Styles {
17
+
18
+ const VERSION = '0.1';
19
+
20
+ public static function init() {
21
+ add_action( 'wp_enqueue_editor', array( __CLASS__, 'enqueue' ), 10, 1 );
22
+ add_action( 'print_media_templates', array( __CLASS__, 'template' ) );
23
+ }
24
+
25
+ public static function load_textdomain() {
26
+ load_plugin_textdomain( 'jetpack', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
27
+ }
28
+
29
+ public static function enqueue( $options ) {
30
+
31
+ if ( $options['tinymce'] ) {
32
+ // Note: An additional dependency "media-views" is not listed below
33
+ // because in some cases such as /wp-admin/press-this.php the media
34
+ // library isn't enqueued and shouldn't be. The script includes
35
+ // safeguards to avoid errors in this situation
36
+ wp_enqueue_script( 'advanced-image-styles', plugins_url( 'js/advanced-image-styles.js', __FILE__ ), array( 'jquery' ), self::VERSION, true );
37
+ wp_enqueue_style( 'advanced-image-styles', plugins_url( 'css/advanced-image-styles.css', __FILE__ ), array(), self::VERSION );
38
+ }
39
+ }
40
+
41
+ public static function template() {
42
+ include dirname( __FILE__ ) . '/_inc/advanced-image-styles-tmpl.php';
43
+ }
44
+
45
+ }
46
+
47
+ add_action( 'init', array( 'Advanced_Image_Styles', 'init' ) );
48
+ add_action( 'plugins_loaded', array( 'Advanced_Image_Styles', 'load_textdomain' ) );
css/advanced-image-styles.css ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .image-details .advanced-image-styles {
2
+ clear: both;
3
+ margin-top: -8px;
4
+ }
5
+
6
+ .image-details .image-settings-group {
7
+ float: left;
8
+ width: 70%;
9
+ margin-top: 8px;
10
+ }
11
+
12
+ .image-details .advanced-image-styles::after {
13
+ content: '';
14
+ display: table;
15
+ clear: both;
16
+ }
17
+
18
+ .image-details .advanced-image-styles .group-label {
19
+ float: left;
20
+ width: 25%;
21
+ text-align: right;
22
+ margin: 32px 1% 0 1%;
23
+ line-height: 1.1;
24
+ font-size: 13px;
25
+ color: #666;
26
+ }
27
+
28
+ .image-details .advanced-image-styles label {
29
+ display: block;
30
+ float: left;
31
+ }
32
+
33
+ .image-details .advanced-image-styles label span {
34
+ display: block;
35
+ }
36
+
37
+ .image-details .advanced-image-styles input[type="text"] {
38
+ width: 5em;
39
+ }
40
+
js/advanced-image-styles.js ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function( $, wp, _ ) {
2
+ var AdvancedImageStylesView, frame;
3
+
4
+ if ( ! wp.media.events ) {
5
+ return;
6
+ }
7
+
8
+ function addAdvancedStylesView( view ) {
9
+ var advancedView;
10
+
11
+ advancedView = new AdvancedImageStylesView( { model: view.model } );
12
+
13
+ view.on( 'post-render', function() {
14
+ view.views.insert( view.$el.find('.advanced-image'), advancedView.render().el );
15
+ } );
16
+ }
17
+
18
+ wp.media.events.on( 'editor:image-edit', function( options ) {
19
+ var dom = options.editor.dom,
20
+ image = options.image,
21
+ attributes;
22
+
23
+ attributes = {
24
+ borderWidth: dom.getStyle( image, 'borderWidth' ),
25
+ marginTop: dom.getStyle( image, 'marginTop' ),
26
+ marginLeft: dom.getStyle( image, 'marginLeft' ),
27
+ marginRight: dom.getStyle( image, 'marginRight' ),
28
+ marginBottom: dom.getStyle( image, 'marginBottom' )
29
+ };
30
+
31
+ _.each( attributes, function( val, key ) {
32
+ if ( /\./.test( val ) ) {
33
+ val = parseFloat( val, 10 );
34
+ } else {
35
+ val = parseInt( val, 10 );
36
+ }
37
+
38
+ attributes[ key ] = _.isNaN( val ) ? 0 : val;
39
+ } );
40
+
41
+ attributes.borderColor = dom.toHex( dom.getStyle( image, 'borderColor' ) );
42
+ options.metadata = _.extend( options.metadata, attributes );
43
+ } );
44
+
45
+ wp.media.events.on( 'editor:frame-create', function( options ) {
46
+ frame = options.frame;
47
+ frame.on( 'content:render:image-details', addAdvancedStylesView );
48
+ } );
49
+
50
+ wp.media.events.on( 'editor:image-update', function( options ) {
51
+ var editor = options.editor,
52
+ dom = editor.dom,
53
+ image = options.image,
54
+ model = frame.content.get().model,
55
+ border, marginTop, marginLeft, marginRight, marginBottom;
56
+
57
+ if ( model.get('borderWidth') && model.get('borderWidth') !== '0' ) {
58
+ border = model.get('borderWidth') + 'px solid ';
59
+ border += model.get('borderColor') ? model.get('borderColor' ) : '#000';
60
+ dom.setStyle( image, 'border', border );
61
+ } else {
62
+ dom.setStyle( image, 'border', '' );
63
+ }
64
+
65
+ marginTop = model.get( 'marginTop' ) ? model.get( 'marginTop' ) + 'px' : '';
66
+ marginBottom = model.get( 'marginBottom' ) ? model.get( 'marginBottom' ) + 'px' : '';
67
+ marginLeft = model.get( 'marginLeft' ) ? model.get( 'marginLeft' ) + 'px' : '';
68
+ marginRight = model.get( 'marginRight' ) ? model.get( 'marginRight' ) + 'px' : '';
69
+
70
+ dom.setStyle( image, 'marginTop', marginTop );
71
+ dom.setStyle( image, 'marginBottom', marginBottom );
72
+ dom.setStyle( image, 'marginLeft', marginLeft );
73
+ dom.setStyle( image, 'marginRight', marginRight );
74
+
75
+ } );
76
+
77
+ AdvancedImageStylesView = wp.Backbone.View.extend( {
78
+ className: 'advanced-image-styles',
79
+ template: wp.media.template('advanced-image-styles'),
80
+
81
+ prepare: function() {
82
+ return this.model.toJSON();
83
+ }
84
+ } );
85
+
86
+ })( jQuery, wp, _ );
languages/advanced-image-styles.pot ADDED
@@ -0,0 +1,62 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Copyright (C) 2014 Advanced Image Styles
2
+ # This file is distributed under the same license as the Advanced Image Styles package.
3
+ msgid ""
4
+ msgstr ""
5
+ "Project-Id-Version: Advanced Image Styles 0.1\n"
6
+ "Report-Msgid-Bugs-To: http://wordpress.org/support/plugin/advanced-image-"
7
+ "styles\n"
8
+ "POT-Creation-Date: 2014-04-17 04:12:02+00:00\n"
9
+ "MIME-Version: 1.0\n"
10
+ "Content-Type: text/plain; charset=UTF-8\n"
11
+ "Content-Transfer-Encoding: 8bit\n"
12
+ "PO-Revision-Date: 2014-MO-DA HO:MI+ZONE\n"
13
+ "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
14
+ "Language-Team: LANGUAGE <LL@li.org>\n"
15
+
16
+ #: _inc/advanced-image-styles-tmpl.php:2
17
+ msgid "Image Border"
18
+ msgstr ""
19
+
20
+ #: _inc/advanced-image-styles-tmpl.php:5
21
+ msgid "Width"
22
+ msgstr ""
23
+
24
+ #: _inc/advanced-image-styles-tmpl.php:9
25
+ msgid "Color"
26
+ msgstr ""
27
+
28
+ #: _inc/advanced-image-styles-tmpl.php:13
29
+ msgid "Image Margins"
30
+ msgstr ""
31
+
32
+ #: _inc/advanced-image-styles-tmpl.php:16
33
+ msgid "Left"
34
+ msgstr ""
35
+
36
+ #: _inc/advanced-image-styles-tmpl.php:20
37
+ msgid "Top"
38
+ msgstr ""
39
+
40
+ #: _inc/advanced-image-styles-tmpl.php:24
41
+ msgid "Right"
42
+ msgstr ""
43
+
44
+ #: _inc/advanced-image-styles-tmpl.php:28
45
+ msgid "Bottom"
46
+ msgstr ""
47
+
48
+ #. Plugin Name of the plugin/theme
49
+ msgid "Advanced Image Styles"
50
+ msgstr ""
51
+
52
+ #. Description of the plugin/theme
53
+ msgid "Adjust an image's margins and border with ease in the Visual"
54
+ msgstr ""
55
+
56
+ #. Author of the plugin/theme
57
+ msgid "Gregory Cornelius"
58
+ msgstr ""
59
+
60
+ #. Author URI of the plugin/theme
61
+ msgid "http://gregorycornelius.com"
62
+ msgstr ""
readme.txt ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Advanced Image Styles ===
2
+ Contributors: gcorne
3
+ Tags: image, editor, formatting, photo, TinyMCE
4
+ Tested up to: 3.9
5
+ Requires at least: 3.9
6
+ tag: tags
7
+ License: GPLv2 or later
8
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
+
10
+ == Description ==
11
+
12
+ Adjust an image's margins and border with ease in the Visual editor.
13
+
14
+ == Changelog ==
15
+
16
+ = 0.1 =
17
+ Initial Version.
18
+
19
+