diff --git a/.editorconfig b/.editorconfig
index 381830fa4..7b393707d 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -7,6 +7,7 @@ end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
+indent_size = 4
[*.{yml,json}]
indent_style = space
diff --git a/css/cloudinary.css b/css/cloudinary.css
index 819de5bd0..d3607546e 100644
--- a/css/cloudinary.css
+++ b/css/cloudinary.css
@@ -1 +1 @@
-@font-face{font-family:cloudinary;src:url(../css/fonts/cloudinary.7e6e75b25255a2b3b6e7ced1092c210c.eot);src:url(../css/fonts/cloudinary.7e6e75b25255a2b3b6e7ced1092c210c.eot#iefix) format("embedded-opentype"),url(../css/fonts/cloudinary.c2afda9d25532c03cd41beb20a1ce439.ttf) format("truetype"),url(../css/fonts/cloudinary.34cb260ad722325c597cdc3a3e7584d8.woff) format("woff"),url(../css/cloudinary.svg#cloudinary) format("svg");font-weight:500;font-style:normal}.dashicons-cloudinary{speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dashicons-cloudinary:before{font-family:cloudinary,monospace!important;content:"\e900"}.dashicons-cloudinary.success{color:#558b2f}.dashicons-cloudinary.error{color:#dd2c00}.dashicons-cloudinary.error:before{content:"\e901"}.dashicons-cloudinary.uploading{color:#fd9d2c}.dashicons-cloudinary.uploading:before{content:"\e902"}.dashicons-cloudinary.info{color:#0071ba}.dashicons-cloudinary.downloading:before{content:"\e903"}.dashicons-cloudinary.syncing:before{content:"\e904"}.column-cld_status{width:5.5em}.column-cld_status .dashicons-cloudinary{display:inline-block}.column-cld_status .dashicons-cloudinary:before{font-size:1.8rem}.form-field .error-notice,.form-table .error-notice{display:none;color:#dd2c00}.form-field input.cld-field:invalid,.form-table input.cld-field:invalid{border-color:#dd2c00}.form-field input.cld-field:invalid+.error-notice,.form-table input.cld-field:invalid+.error-notice{display:inline-block}.cloudinary-welcome{background-image:url(../css/logo.svg);background-repeat:no-repeat;background-size:153px;background-position:top 12px right 20px}.cloudinary-stats{display:inline-block;margin-left:25px}.cloudinary-stat{cursor:help}.cloudinary-percent{font-size:.8em;vertical-align:top;color:#0071ba}.settings-image{max-width:100%;padding-top:5px}.settings-tabs>li{display:inline-block}.settings-tabs>li a{padding:.6em}.settings-tabs>li a.active{background-color:#fff}.settings-tab-section{padding:20px 0 0;max-width:1030px;position:relative}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard{display:flex;align-items:flex-start;align-content:flex-start;margin-top:40px}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard-description{width:55%;margin:0 auto 0 0}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard-content{width:35%;margin:0 auto}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard-content .dashicons{color:#9ea3a8}.settings-tab-section.cloudinary-welcome .settings-tab-section-card{margin-top:0}.settings-tab-section-fields .field-heading th{display:block;width:auto;color:#23282d;font-size:1.1em;margin:1em 0}.settings-tab-section-fields .field-heading td{display:none;visibility:hidden}.settings-tab-section-fields .regular-textarea{width:100%;height:60px}.settings-tab-section-fields .dashicons{text-decoration:none;vertical-align:middle}.settings-tab-section-fields a .dashicons{color:#5f5f5f}.settings-tab-section-fields-dashboard-error{font-size:1.2em;color:#5f5f5f}.settings-tab-section-fields-dashboard-error.expanded{padding-top:40px;margin-bottom:25px}.settings-tab-section-fields-dashboard-error .dashicons{color:#ac0000}.settings-tab-section-fields-dashboard-error .button{font-size:1.1em;height:40px;line-height:40px;padding-right:40px;padding-left:40px}.settings-tab-section-fields-dashboard-success{font-size:1.2em;color:#23282d}.settings-tab-section-fields-dashboard-success.expanded{padding-top:40px;margin-bottom:25px}.settings-tab-section-fields-dashboard-success .dashicons{color:#4fb651}.settings-tab-section-fields-dashboard-success .button{font-size:1.1em;height:40px;line-height:40px;padding-right:40px;padding-left:40px}.settings-tab-section-fields-dashboard-success .description{color:#5f5f5f;font-weight:400;margin-top:12px}.settings-tab-section-card{box-sizing:border-box;border:1px solid #e5e5e5;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.07);padding:20px 23px;margin-top:12px}.settings-tab-section-card .dashicons{font-size:1.4em}.settings-tab-section-card h2{font-size:1.8em;font-weight:400;margin-top:0}.settings-tab-section-card.pull-right{width:450px;padding:12px;float:right;position:relative;z-index:10}.settings-tab-section-card.pull-right img.settings-image{box-shadow:0 2px 4px 0 rgba(0,0,0,.5);border:1px solid #979797;margin-top:12px}.settings-tab-section-card.pull-right h3,.settings-tab-section-card.pull-right h4{margin-top:0}.settings-tab-section .field-row-cloudinary_url,.settings-tab-section .field-row-signup{display:block}.settings-tab-section .field-row-cloudinary_url td,.settings-tab-section .field-row-cloudinary_url th,.settings-tab-section .field-row-signup td,.settings-tab-section .field-row-signup th{display:block;width:auto;padding:10px 0 0}.settings-tab-section .field-row-cloudinary_url td .sign-up,.settings-tab-section .field-row-cloudinary_url th .sign-up,.settings-tab-section .field-row-signup td .sign-up,.settings-tab-section .field-row-signup th .sign-up{vertical-align:baseline}.settings-tab-section.connect .form-table{display:inline-block;width:auto;max-width:580px}.settings-valid{color:#558b2f;font-size:30px}.settings-valid-field{border-color:#558b2f!important}.settings-invalid-field{border-color:#dd2c00!important}.settings-alert{display:inline-block;padding:5px 7px;box-shadow:0 1px 1px rgba(0,0,0,.04)}.settings-alert-info{background-color:#e9faff;border:1px solid #ccd0d4;border-left:4px solid #00a0d2}.settings-alert-warning{background-color:#fff5e9;border:1px solid #f6e7b6;border-left:4px solid #e3be38}.settings-alert-error{background-color:#ffe9e9;border:1px solid #d4cccc;border-left:4px solid #d20000}.field-radio input[type=radio].cld-field{margin:0 5px 0 0}.field-radio label{margin-right:10px}.settings-tab-section h2{margin:0}.cloudinary-collapsible{width:95%;padding:10px;margin:20px 0;background-color:#fff;border:1px solid #ccd0d4;box-shadow:0 1px 1px rgba(0,0,0,.04);box-sizing:border-box}.cloudinary-collapsible__toggle{cursor:pointer;display:flex;justify-content:space-between}.cloudinary-collapsible__toggle h2{margin:0!important}.cloudinary-collapsible__toggle button{border:none;margin:0;padding:0;width:auto;background-color:inherit;cursor:pointer}.cloudinary-deactivation .more{display:none}.cloudinary-deactivation input[type=radio]:checked~.more{color:#32373c;display:block;line-height:2;margin-left:2em;margin-top:.5em}.cloudinary-deactivation .modal-footer{background-color:#fcfcfc;border-top:1px solid #ddd;bottom:0;margin:0 -15px;padding:1em;position:absolute;width:calc(100% - 2em)}.cloudinary-deactivation .modal-footer .button-link{float:right}.cloudinary-deactivation .modal-footer .button-link:hover{background:transparent}.cloudinary-deactivation textarea{resize:none}.sync .spinner{display:inline-block;visibility:visible;float:none;margin:0 5px 0 0}.sync-media,.sync-media-progress{display:none}.sync-media-progress-outer{height:20px;margin:20px 0 10px;width:500px;background-color:#e5e5e5;position:relative}.sync-media-progress-outer .progress-bar{width:0;height:20px;background-color:#558b2f;transition:width .25s}.sync-media-progress-notice{color:#dd2c00}.sync-media-resource{width:100px;display:inline-block}.sync-media-error{color:#dd2c00}.sync-count{font-weight:700}.sync-details{margin-top:10px}.sync .button.start-sync,.sync .button.stop-sync{display:none;padding:0 16px}.sync .button.start-sync .dashicons,.sync .button.stop-sync .dashicons{line-height:2.2}.sync .progress-text{padding:12px 4px 12px 12px;display:inline-block;font-weight:700}.sync .completed{max-width:300px;display:none}.sync-status-disabled{color:#dd2c00}.sync-status-enabled{color:#558b2f}.sync-status-button.button{vertical-align:baseline}.cloudinary-widget{height:100%}.cloudinary-widget-wrapper{height:100%;overflow:hidden;background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iLTQgLTQgMTUxIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+QGtleWZyYW1lcyBjb2xvcnN7MCUsdG97c3Ryb2tlOiMwMDc4ZmZ9NTAle3N0cm9rZTojMGUyZjVhfX1Aa2V5ZnJhbWVzIGRhc2h7MCUsdG97c3Ryb2tlLWRhc2hvZmZzZXQ6NTYwfTUwJXtzdHJva2UtZGFzaG9mZnNldDowfX1ALXdlYmtpdC1rZXlmcmFtZXMgY29sb3JzezAlLHRve3N0cm9rZTojMDA3OGZmfTUwJXtzdHJva2U6IzBlMmY1YX19QC13ZWJraXQta2V5ZnJhbWVzIGRhc2h7MCUsdG97c3Ryb2tlLWRhc2hvZmZzZXQ6NTYwfTUwJXtzdHJva2UtZGFzaG9mZnNldDowfX08L3N0eWxlPjxwYXRoIGQ9Ik0xMjEuNjYzIDkwLjYzOGMtMS43OTYgMC05OS4zMy0uNDk4LTEwMS40NzQtMS40NzhDOC42ODUgODMuODc3IDEuMjUgNzIuMTk2IDEuMjUgNTkuMzk2YzAtMTYuNjU2IDEyLjc5Ny0zMC42MSAyOS4wNTItMzIuMzIzIDcuNDktMTUuNzA2IDIzLjE4Ni0yNS43MDcgNDAuNzE0LTI1LjcwNyAyMC45OCAwIDM5LjIxNSAxNC43NTIgNDMuOTQ1IDM0LjkwNyAxNS4wOS4yNDUgMjcuMjkgMTIuNjMgMjcuMjkgMjcuODIyIDAgMTEuOTY4LTcuNzM4IDIyLjU1LTE5LjI1NiAyNi4zMyIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9InRyYW5zZm9ybS1vcmlnaW46Y2VudGVyOy13ZWJraXQtYW5pbWF0aW9uOmRhc2ggMnMgZWFzZS1pbi1vdXQgaW5maW5pdGUsY29sb3JzIDhzIGVhc2UtaW4tb3V0IGluZmluaXRlO2FuaW1hdGlvbjpkYXNoIDJzIGVhc2UtaW4tb3V0IGluZmluaXRlLGNvbG9ycyA4cyBlYXNlLWluLW91dCBpbmZpbml0ZSIgc3Ryb2tlLWRhc2hhcnJheT0iMjgwIi8+PC9zdmc+);background-repeat:no-repeat;background-position:50%;background-size:150px}.attachment-actions .button.edit-attachment,.attachment-info .edit-attachment{display:none}.global-transformations-preview{position:relative;max-width:600px}.global-transformations-spinner{display:none}.global-transformations-button.button-primary{display:none;position:absolute;z-index:100}.global-transformations-url{margin-bottom:5px;margin-top:5px}.global-transformations-url-transformation{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:#51a3ff}.global-transformations-url-file{color:#f2d864}.global-transformations-url-link{display:block;padding:16px;background-color:#262c35;text-decoration:none;color:#fff;border-radius:6px;overflow:hidden;text-overflow:ellipsis}.global-transformations-url-link:hover{color:#888;text-decoration:underline}.cld-tax-order-list-item{border:1px solid #efefef;padding:4px;margin:0 0 -1px;background-color:#fff}.cld-tax-order-list-item.no-items{color:#888;text-align:center;display:none}.cld-tax-order-list-item.no-items:last-child{display:block}.cld-tax-order-list-item.ui-sortable-helper{box-shadow:0 2px 5px rgba(0,0,0,.2)}.cld-tax-order-list-item-placeholder{background-color:#efefef;height:45px;margin:0}.cld-tax-order-list-item-handle{cursor:grab;margin-right:4px;color:#999}.cld-tax-order-list-type{display:inline-block;margin-right:8px}.cld-tax-order-list-type input{margin-right:4px!important}.cloudinary-media-library{position:relative;margin-left:-20px}@media screen and (max-width:782px){.cloudinary-media-library{margin-left:-10px}}.cld-ui-collapse{align-self:center;padding:0 .45rem;cursor:pointer}.cld-ui-title.collapsible{cursor:pointer}.cld-ui-conditional.closed,.cld-ui-wrap.closed{display:none}.cld-page-header{padding:1.2rem;align-items:center}.cld-page-header,.cld-page-tabs{background-color:#fff;display:flex;margin-left:-20px}.cld-page-tabs{border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding:0 1rem;margin-top:0}.cld-page-tabs-tab{list-style:none;text-indent:0;margin-bottom:0}.cld-page-tabs-tab a{display:block;padding:1rem 2rem;text-decoration:none;font-weight:500;color:#000001;text-align:center;white-space:nowrap}.cld-page-tabs-tab.is-active a{color:#3273ab;border-bottom:2px solid #3273ab}.cld-group hr{border-top:1px solid #e5e5e5;margin:1.5rem 0}.cld-group:last-child hr{display:none}.cld-group-heading{display:flex}.cld-group-heading h3{font-size:.9rem}.cld-input{margin-bottom:1.4rem;display:block}.cld-input-label{font-weight:700;display:block}.cld-input .regular-number,.cld-input .regular-text{display:block;border:1px solid #d0d0d0;border-radius:3px;padding:.1rem .5rem}.cld-input .regular-number-small,.cld-input .regular-text-small{width:40%}.cld-input .regular-select{margin-top:.6rem;display:block;appearance:none;width:100%;border:1px solid #d0d0d0;border-radius:3px;padding:.1rem .5rem}.cld-input-on-off{display:flex;align-items:center}.cld-input-on-off-control{position:relative;display:inline-block;width:43px;height:24px;margin-right:.4rem}.cld-input-on-off-control input{opacity:0;width:0;height:0}.cld-input-on-off-control-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#90a0b3;-webkit-transition:.4s;transition:.3s;border-radius:34px}input:checked+.cld-input-on-off-control-slider{background-color:#2a0}.cld-input-on-off-control-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.2s;transition:.2s;border-radius:50%}input:checked+.cld-input-on-off-control-slider:before{-webkit-transform:translateX(19px);-ms-transform:translateX(19px);transform:translateX(19px)}.cld-input-checkbox-label,.cld-input-radio-label{display:block;margin-bottom:.4rem}.cld-input-checkbox-label.list-inline,.cld-input-radio-label.list-inline{display:inline-block;margin-right:.4rem}.cld-panel{background-color:#fff;border:1px solid #e5e5e5;padding:.5rem 1.75rem .4rem;width:60%;margin-top:1rem}@media only screen and (max-width:992px){.cld-panel{width:100%}}@media only screen and (min-width:993px) and (max-width:1200px){.cld-panel{width:80%}}.cld-panel-inner{padding:1.3rem;margin:1em 0;background-color:hsla(0,0%,86.3%,.2);border:1px solid #e5e5e5}.cld-panel-inner h2{color:#3273ab}.cld-panel .cld-input-label{margin-bottom:.6rem}.cld-panel.has-heading{margin-top:0}.cld-panel-heading{display:flex;background-color:#fff;border:1px solid #e5e5e5;border-bottom:0;padding:.4rem 1.75rem .2rem;width:60%;margin-top:1rem}.cld-panel-heading img{margin-right:.6rem}@media only screen and (max-width:992px){.cld-panel-heading{width:100%}}@media only screen and (min-width:993px) and (max-width:1200px){.cld-panel-heading{width:80%}}.cld-panel .notification-success{background-color:rgba(32,184,50,.2);border:2px solid #20b832;font-weight:700;padding:1.5rem;display:inline-flex}.cld-panel .notification-success:before{color:#20b832;margin-right:.5em}.cld-panel .img-connection-string{max-width:607px}.cld-panel .connection-string{max-width:40em;width:100%}.cld-submit.cld-ui-wrap,.cld-switch-cloud.cld-ui-wrap{background-color:#fff;border:1px solid #e5e5e5;border-top:0;padding:1.2rem 1.75rem;width:60%}@media only screen and (max-width:992px){.cld-submit.cld-ui-wrap,.cld-switch-cloud.cld-ui-wrap{width:100%}}@media only screen and (min-width:993px) and (max-width:1200px){.cld-submit.cld-ui-wrap,.cld-switch-cloud.cld-ui-wrap{width:80%}}
\ No newline at end of file
+@font-face{font-family:cloudinary;src:url(../css/fonts/cloudinary.7e6e75b25255a2b3b6e7ced1092c210c.eot);src:url(../css/fonts/cloudinary.7e6e75b25255a2b3b6e7ced1092c210c.eot#iefix) format("embedded-opentype"),url(../css/fonts/cloudinary.c2afda9d25532c03cd41beb20a1ce439.ttf) format("truetype"),url(../css/fonts/cloudinary.34cb260ad722325c597cdc3a3e7584d8.woff) format("woff"),url(../css/cloudinary.svg#cloudinary) format("svg");font-weight:500;font-style:normal}.dashicons-cloudinary{speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dashicons-cloudinary:before{font-family:cloudinary,monospace!important;content:"\e900"}.dashicons-cloudinary.success{color:#558b2f}.dashicons-cloudinary.error{color:#dd2c00}.dashicons-cloudinary.error:before{content:"\e901"}.dashicons-cloudinary.uploading{color:#fd9d2c}.dashicons-cloudinary.uploading:before{content:"\e902"}.dashicons-cloudinary.info{color:#0071ba}.dashicons-cloudinary.downloading:before{content:"\e903"}.dashicons-cloudinary.syncing:before{content:"\e904"}.column-cld_status{width:5.5em}.column-cld_status .dashicons-cloudinary{display:inline-block}.column-cld_status .dashicons-cloudinary:before{font-size:1.8rem}.form-field .error-notice,.form-table .error-notice{display:none;color:#dd2c00}.form-field input.cld-field:invalid,.form-table input.cld-field:invalid{border-color:#dd2c00}.form-field input.cld-field:invalid+.error-notice,.form-table input.cld-field:invalid+.error-notice{display:inline-block}.cloudinary-welcome{background-image:url(../css/logo.svg);background-repeat:no-repeat;background-size:153px;background-position:top 12px right 20px}.cloudinary-stats{display:inline-block;margin-left:25px}.cloudinary-stat{cursor:help}.cloudinary-percent{font-size:.8em;vertical-align:top;color:#0071ba}.settings-image{max-width:100%;padding-top:5px}.settings-tabs>li{display:inline-block}.settings-tabs>li a{padding:.6em}.settings-tabs>li a.active{background-color:#fff}.settings-tab-section{padding:20px 0 0;max-width:1030px;position:relative}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard{display:flex;align-items:flex-start;align-content:flex-start;margin-top:40px}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard-description{width:55%;margin:0 auto 0 0}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard-content{width:35%;margin:0 auto}.settings-tab-section.cloudinary-welcome .settings-tab-section-fields-dashboard-content .dashicons{color:#9ea3a8}.settings-tab-section.cloudinary-welcome .settings-tab-section-card{margin-top:0}.settings-tab-section-fields .field-heading th{display:block;width:auto;color:#23282d;font-size:1.1em;margin:1em 0}.settings-tab-section-fields .field-heading td{display:none;visibility:hidden}.settings-tab-section-fields .regular-textarea{width:100%;height:60px}.settings-tab-section-fields .dashicons{text-decoration:none;vertical-align:middle}.settings-tab-section-fields a .dashicons{color:#5f5f5f}.settings-tab-section-fields-dashboard-error{font-size:1.2em;color:#5f5f5f}.settings-tab-section-fields-dashboard-error.expanded{padding-top:40px;margin-bottom:25px}.settings-tab-section-fields-dashboard-error .dashicons{color:#ac0000}.settings-tab-section-fields-dashboard-error .button{font-size:1.1em;height:40px;line-height:40px;padding-right:40px;padding-left:40px}.settings-tab-section-fields-dashboard-success{font-size:1.2em;color:#23282d}.settings-tab-section-fields-dashboard-success.expanded{padding-top:40px;margin-bottom:25px}.settings-tab-section-fields-dashboard-success .dashicons{color:#4fb651}.settings-tab-section-fields-dashboard-success .button{font-size:1.1em;height:40px;line-height:40px;padding-right:40px;padding-left:40px}.settings-tab-section-fields-dashboard-success .description{color:#5f5f5f;font-weight:400;margin-top:12px}.settings-tab-section-card{box-sizing:border-box;border:1px solid #e5e5e5;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.07);padding:20px 23px;margin-top:12px}.settings-tab-section-card .dashicons{font-size:1.4em}.settings-tab-section-card h2{font-size:1.8em;font-weight:400;margin-top:0}.settings-tab-section-card.pull-right{width:450px;padding:12px;float:right;position:relative;z-index:10}.settings-tab-section-card.pull-right img.settings-image{box-shadow:0 2px 4px 0 rgba(0,0,0,.5);border:1px solid #979797;margin-top:12px}.settings-tab-section-card.pull-right h3,.settings-tab-section-card.pull-right h4{margin-top:0}.settings-tab-section .field-row-cloudinary_url,.settings-tab-section .field-row-signup{display:block}.settings-tab-section .field-row-cloudinary_url td,.settings-tab-section .field-row-cloudinary_url th,.settings-tab-section .field-row-signup td,.settings-tab-section .field-row-signup th{display:block;width:auto;padding:10px 0 0}.settings-tab-section .field-row-cloudinary_url td .sign-up,.settings-tab-section .field-row-cloudinary_url th .sign-up,.settings-tab-section .field-row-signup td .sign-up,.settings-tab-section .field-row-signup th .sign-up{vertical-align:baseline}.settings-tab-section.connect .form-table{display:inline-block;width:auto;max-width:580px}.settings-valid{color:#558b2f;font-size:30px}.settings-valid-field{border-color:#558b2f!important}.settings-invalid-field{border-color:#dd2c00!important}.settings-alert{display:inline-block;padding:5px 7px;box-shadow:0 1px 1px rgba(0,0,0,.04)}.settings-alert-info{background-color:#e9faff;border:1px solid #ccd0d4;border-left:4px solid #00a0d2}.settings-alert-warning{background-color:#fff5e9;border:1px solid #f6e7b6;border-left:4px solid #e3be38}.settings-alert-error{background-color:#ffe9e9;border:1px solid #d4cccc;border-left:4px solid #d20000}.field-radio input[type=radio].cld-field{margin:0 5px 0 0}.field-radio label{margin-right:10px}.settings-tab-section h2{margin:0}.cloudinary-collapsible{width:95%;padding:10px;margin:20px 0;background-color:#fff;border:1px solid #ccd0d4;box-shadow:0 1px 1px rgba(0,0,0,.04);box-sizing:border-box}.cloudinary-collapsible__toggle{cursor:pointer;display:flex;justify-content:space-between}.cloudinary-collapsible__toggle h2{margin:0!important}.cloudinary-collapsible__toggle button{border:none;margin:0;padding:0;width:auto;background-color:inherit;cursor:pointer}.cloudinary-deactivation .more{display:none}.cloudinary-deactivation input[type=radio]:checked~.more{color:#32373c;display:block;line-height:2;margin-left:2em;margin-top:.5em}.cloudinary-deactivation .modal-footer{background-color:#fcfcfc;border-top:1px solid #ddd;bottom:0;margin:0 -15px;padding:1em;position:absolute;width:calc(100% - 2em)}.cloudinary-deactivation .modal-footer .button-link{float:right}.cloudinary-deactivation .modal-footer .button-link:hover{background:transparent}.cloudinary-deactivation textarea{resize:none}.sync .spinner{display:inline-block;visibility:visible;float:none;margin:0 5px 0 0}.sync-media,.sync-media-progress{display:none}.sync-media-progress-outer{height:20px;margin:20px 0 10px;width:500px;background-color:#e5e5e5;position:relative}.sync-media-progress-outer .progress-bar{width:0;height:20px;background-color:#558b2f;transition:width .25s}.sync-media-progress-notice{color:#dd2c00}.sync-media-resource{width:100px;display:inline-block}.sync-media-error{color:#dd2c00}.sync-count{font-weight:700}.sync-details{margin-top:10px}.sync .button.start-sync,.sync .button.stop-sync{display:none;padding:0 16px}.sync .button.start-sync .dashicons,.sync .button.stop-sync .dashicons{line-height:2.2}.sync .progress-text{padding:12px 4px 12px 12px;display:inline-block;font-weight:700}.sync .completed{max-width:300px;display:none}.sync-status-disabled{color:#dd2c00}.sync-status-enabled{color:#558b2f}.sync-status-button.button{vertical-align:baseline}.cloudinary-widget{height:100%}.cloudinary-widget-wrapper{height:100%;overflow:hidden;background-image:url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Bpbm5lciIgdmlld0JveD0iLTQgLTQgMTUxIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48c3R5bGU+QGtleWZyYW1lcyBjb2xvcnN7MCUsdG97c3Ryb2tlOiMwMDc4ZmZ9NTAle3N0cm9rZTojMGUyZjVhfX1Aa2V5ZnJhbWVzIGRhc2h7MCUsdG97c3Ryb2tlLWRhc2hvZmZzZXQ6NTYwfTUwJXtzdHJva2UtZGFzaG9mZnNldDowfX1ALXdlYmtpdC1rZXlmcmFtZXMgY29sb3JzezAlLHRve3N0cm9rZTojMDA3OGZmfTUwJXtzdHJva2U6IzBlMmY1YX19QC13ZWJraXQta2V5ZnJhbWVzIGRhc2h7MCUsdG97c3Ryb2tlLWRhc2hvZmZzZXQ6NTYwfTUwJXtzdHJva2UtZGFzaG9mZnNldDowfX08L3N0eWxlPjxwYXRoIGQ9Ik0xMjEuNjYzIDkwLjYzOGMtMS43OTYgMC05OS4zMy0uNDk4LTEwMS40NzQtMS40NzhDOC42ODUgODMuODc3IDEuMjUgNzIuMTk2IDEuMjUgNTkuMzk2YzAtMTYuNjU2IDEyLjc5Ny0zMC42MSAyOS4wNTItMzIuMzIzIDcuNDktMTUuNzA2IDIzLjE4Ni0yNS43MDcgNDAuNzE0LTI1LjcwNyAyMC45OCAwIDM5LjIxNSAxNC43NTIgNDMuOTQ1IDM0LjkwNyAxNS4wOS4yNDUgMjcuMjkgMTIuNjMgMjcuMjkgMjcuODIyIDAgMTEuOTY4LTcuNzM4IDIyLjU1LTE5LjI1NiAyNi4zMyIgc3Ryb2tlLXdpZHRoPSI5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3R5bGU9InRyYW5zZm9ybS1vcmlnaW46Y2VudGVyOy13ZWJraXQtYW5pbWF0aW9uOmRhc2ggMnMgZWFzZS1pbi1vdXQgaW5maW5pdGUsY29sb3JzIDhzIGVhc2UtaW4tb3V0IGluZmluaXRlO2FuaW1hdGlvbjpkYXNoIDJzIGVhc2UtaW4tb3V0IGluZmluaXRlLGNvbG9ycyA4cyBlYXNlLWluLW91dCBpbmZpbml0ZSIgc3Ryb2tlLWRhc2hhcnJheT0iMjgwIi8+PC9zdmc+);background-repeat:no-repeat;background-position:50%;background-size:150px}.attachment-actions .button.edit-attachment,.attachment-info .edit-attachment{display:none}.global-transformations-preview{position:relative;max-width:600px}.global-transformations-spinner{display:none}.global-transformations-button.button-primary{display:none;position:absolute;z-index:100}.global-transformations-url{margin-bottom:5px;margin-top:5px}.global-transformations-url-transformation{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:#51a3ff}.global-transformations-url-file{color:#f2d864}.global-transformations-url-link{display:block;padding:16px;background-color:#262c35;text-decoration:none;color:#fff;border-radius:6px;overflow:hidden;text-overflow:ellipsis}.global-transformations-url-link:hover{color:#888;text-decoration:underline}.cld-tax-order-list-item{border:1px solid #efefef;padding:4px;margin:0 0 -1px;background-color:#fff}.cld-tax-order-list-item.no-items{color:#888;text-align:center;display:none}.cld-tax-order-list-item.no-items:last-child{display:block}.cld-tax-order-list-item.ui-sortable-helper{box-shadow:0 2px 5px rgba(0,0,0,.2)}.cld-tax-order-list-item-placeholder{background-color:#efefef;height:45px;margin:0}.cld-tax-order-list-item-handle{cursor:grab;margin-right:4px;color:#999}.cld-tax-order-list-type{display:inline-block;margin-right:8px}.cld-tax-order-list-type input{margin-right:4px!important}.cloudinary-media-library{position:relative;margin-left:-20px}@media screen and (max-width:782px){.cloudinary-media-library{margin-left:-10px}}.cld-ui-collapse{align-self:center;padding:0 .45rem;cursor:pointer}.cld-ui-title.collapsible{cursor:pointer}.cld-ui-conditional.closed,.cld-ui-wrap.closed{display:none}.cld-page-header{padding:1.2rem;align-items:center}.cld-page-header,.cld-page-tabs{background-color:#fff;display:flex;margin-left:-20px}.cld-page-tabs{border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;padding:0 1rem;margin-top:0}.cld-page-tabs-tab{list-style:none;text-indent:0;margin-bottom:0}.cld-page-tabs-tab a{display:block;padding:1rem 2rem;text-decoration:none;font-weight:500;color:#000001;text-align:center;white-space:nowrap}.cld-page-tabs-tab.is-active a{color:#3273ab;border-bottom:2px solid #3273ab}.cld-group hr{border-top:1px solid #e5e5e5;margin:1.5rem 0}.cld-group:last-child hr{display:none}.cld-group-heading{display:flex}.cld-group-heading h3{font-size:.9rem}.cld-input{margin-bottom:1.4rem;display:block}.cld-input-label{font-weight:700;display:block}.cld-input .regular-number,.cld-input .regular-text{display:block;border:1px solid #d0d0d0;border-radius:3px;padding:.1rem .5rem}.cld-input .regular-number-small,.cld-input .regular-text-small{width:40%}.cld-input .regular-select{margin-top:.6rem;display:block;appearance:none;width:100%;border:1px solid #d0d0d0;border-radius:3px;padding:.1rem .5rem}.cld-input-on-off{display:flex;align-items:center}.cld-input-on-off-control{position:relative;display:inline-block;width:43px;height:24px;margin-right:.4rem}.cld-input-on-off-control input{opacity:0;width:0;height:0}.cld-input-on-off-control-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#90a0b3;-webkit-transition:.4s;transition:.3s;border-radius:34px}input:checked+.cld-input-on-off-control-slider{background-color:#2a0}.cld-input-on-off-control-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.2s;transition:.2s;border-radius:50%}input:checked+.cld-input-on-off-control-slider:before{-webkit-transform:translateX(19px);-ms-transform:translateX(19px);transform:translateX(19px)}.cld-input-checkbox-label,.cld-input-radio-label{display:block;margin-bottom:.4rem}.cld-input-checkbox-label.list-inline,.cld-input-radio-label.list-inline{display:inline-block;margin-right:.4rem}.cld-panel{background-color:#fff;border:1px solid #e5e5e5;padding:.5rem 1.75rem 2rem;margin-top:1rem;margin-right:1rem}@media only screen and (min-width:993px){.cld-panel{max-width:900px}}.cld-panel-inner{padding:1.3rem;margin:1em 0;background-color:hsla(0,0%,86.3%,.2);border:1px solid #e5e5e5}.cld-panel-inner h2{color:#3273ab}.cld-panel .cld-input-label{margin-bottom:.6rem}.cld-panel.has-heading{margin-top:0}.cld-panel-heading{display:flex;background-color:#fff;border:1px solid #e5e5e5;border-bottom:0;padding:.4rem 1.75rem .2rem;width:60%;margin-top:1rem}.cld-panel-heading img{margin-right:.6rem}@media only screen and (max-width:992px){.cld-panel-heading{width:100%}}@media only screen and (min-width:993px) and (max-width:1200px){.cld-panel-heading{width:80%}}.cld-panel ul{padding:0 3em;list-style:initial}.cld-panel .cld-plan{color:#3273ab;font-weight:700;font-size:1.5em}.cld-panel .stat-boxes{border:1px solid #e5e5e5;font-size:1.2em}.cld-panel .stat-boxes .box{border-bottom:1px solid #e5e5e5;padding:2rem;text-align:center}.cld-panel .stat-boxes .box:last-of-type{border-bottom:none}.cld-panel .stat-boxes .icon{height:50px;margin-right:.5em;width:50px}.cld-panel .stat-boxes h3{margin-bottom:1.5rem;margin-top:2.4rem}.cld-panel .stat-boxes .limit{font-size:2em;font-weight:700;margin-right:.5em;white-space:nowrap}.cld-panel .stat-boxes .usage{color:#3273ab;font-size:1.5em;font-weight:400}@media only screen and (min-width:783px){.cld-panel .stat-boxes{display:flex;flex-wrap:nowrap;font-size:1em}.cld-panel .stat-boxes .box{border-bottom:none;border-right:1px solid #e5e5e5;flex-grow:1}.cld-panel .stat-boxes .box:last-of-type{border-right:none}}@media only screen and (min-width:1200px){.cld-panel .stat-boxes{font-size:1.2em}}.cld-panel .notification-success{background-color:rgba(32,184,50,.2);border:2px solid #20b832;font-weight:700;padding:1.5rem;display:inline-flex}.cld-panel .notification-success:before{color:#20b832;margin-right:.5em}.cld-panel .img-connection-string{max-width:607px}.cld-panel .connection-string{max-width:40em;width:100%}.cld-submit.cld-ui-wrap,.cld-switch-cloud.cld-ui-wrap{background-color:#fff;border:1px solid #e5e5e5;border-top:0;padding:1.2rem 1.75rem;width:60%}@media only screen and (max-width:992px){.cld-submit.cld-ui-wrap,.cld-switch-cloud.cld-ui-wrap{width:100%}}@media only screen and (min-width:993px) and (max-width:1200px){.cld-submit.cld-ui-wrap,.cld-switch-cloud.cld-ui-wrap{width:80%}}
\ No newline at end of file
diff --git a/css/src/components/_ui.scss b/css/src/components/_ui.scss
index 756721ce3..8324f124d 100644
--- a/css/src/components/_ui.scss
+++ b/css/src/components/_ui.scss
@@ -203,22 +203,16 @@
}
}
-
&-panel {
background-color: #fff;
border: 1px solid $color-light-grey;
- padding: 0.5rem 1.75rem 0.4rem;
- width: 60%;
+ padding: 0.5rem 1.75rem 2rem;
margin-top: 1rem;
-
- /* Small devices */
- @media only screen and (max-width: 992px) {
- width: 100%;
- }
+ margin-right: 1rem;
/* Medium devices until large */
- @media only screen and (min-width: 993px) and (max-width: 1200px) {
- width: 80%;
+ @media only screen and (min-width: 993px) {
+ max-width: 900px;
}
&-inner {
@@ -270,6 +264,76 @@
}
}
+ ul {
+ padding: 0 3em;
+ list-style: initial;
+ }
+
+ .cld-plan {
+ color: $color-wp-blue;
+ font-weight: 700;
+ font-size: 1.5em;
+ }
+
+ .stat-boxes {
+ border: 1px solid $color-light-grey;
+ font-size: 1.2em;
+
+ .box {
+ border-bottom: 1px solid $color-light-grey;
+ padding: 2rem;
+ text-align: center;
+
+ &:last-of-type {
+ border-bottom: none;
+ }
+ }
+
+ .icon {
+ height: 50px;
+ margin-right: 0.5em;
+ width: 50px;
+ }
+
+ h3 {
+ margin-bottom: 1.5rem;
+ margin-top: 2.4rem;
+ }
+
+ .limit {
+ font-size: 2em;
+ font-weight: 700;
+ margin-right: 0.5em;
+ white-space: nowrap;
+ }
+
+ .usage {
+ color: $color-wp-blue;
+ font-size: 1.5em;
+ font-weight: 400;
+ }
+
+ @media only screen and (min-width: 783px) {
+ display: flex;
+ flex-wrap: nowrap;
+ font-size: 1em;
+
+ .box {
+ border-bottom: none;
+ border-right: 1px solid $color-light-grey;
+ flex-grow: 1;
+
+ &:last-of-type {
+ border-right: none;
+ }
+ }
+ }
+
+ @media only screen and (min-width: 1200px) {
+ font-size: 1.2em;
+ }
+ }
+
.notification-success {
background-color: transparentize($color-notification-success, 0.8);
border: 2px solid $color-notification-success;
diff --git a/php/class-plugin.php b/php/class-plugin.php
index 7a8cf08ef..82ba2e1a1 100644
--- a/php/class-plugin.php
+++ b/php/class-plugin.php
@@ -175,15 +175,15 @@ private function get_settings_page_structure() {
'icon' => 'dashicons-cloudinary',
'option_name' => $this->slug,
'page_header' => array(
- 'content' => '
Need help?
',
+ 'content' => ' . 'css/logo.svg)
' . esc_html__( 'Need help?', 'cloudinary' ) . '
',
),
'page_footer' => array(
'content' => __( 'Thanks for using Cloudinary, please take a minute to rate our plugin.', 'cloudinary' ),
),
'pages' => array(
$this->slug => array(
- 'page_title' => __( 'Dashboard', 'cloudinary' ),
- 'menu_title' => __( 'Cloudinary', 'cloudinary' ),
+ 'page_title' => __( 'Cloudinary Dashboard', 'cloudinary' ),
+ 'menu_title' => __( 'Dashboard', 'cloudinary' ),
array(
'type' => 'panel',
array(
@@ -192,10 +192,17 @@ private function get_settings_page_structure() {
),
array(
'type' => 'link',
- 'url' => '#',
+ 'url' => 'https://cloudinary.com/console/lui/upgrade_options',
'content' => __( 'Upgrade Plan', 'cloudinary' ),
),
),
+ array(
+ 'type' => 'panel',
+ array(
+ 'type' => 'plan_status',
+ 'title' => __( 'Your Plan Status', 'cloudinary' ),
+ ),
+ ),
),
),
);
diff --git a/php/ui/component/class-plan-status.php b/php/ui/component/class-plan-status.php
new file mode 100644
index 000000000..b6971024e
--- /dev/null
+++ b/php/ui/component/class-plan-status.php
@@ -0,0 +1,215 @@
+connection = $plugin->get_component( 'connect' );
+ $this->dir_url = $plugin->dir_url;
+
+ parent::__construct( $setting );
+ }
+
+ /**
+ * Setup action before rendering.
+ */
+ protected function pre_render() {
+ $this->setting->set_param( 'plan_heading', $this->connection->get_usage_stat( 'plan' ) );
+ }
+
+ /**
+ * Filter the title parts structure.
+ *
+ * @param array $struct The array structure.
+ *
+ * @return array
+ */
+ protected function title( $struct ) {
+ $struct['element'] = 'h2';
+
+ return parent::title( $struct );
+ }
+
+ /**
+ * Filter the plan box parts structure.
+ *
+ * @param array $struct The array structure.
+ *
+ * @return array
+ */
+ protected function stat_boxes( $struct ) {
+ $struct['element'] = 'div';
+ $struct['attributes']['class'] = array(
+ 'stat-boxes',
+ );
+
+ return $struct;
+ }
+
+ /**
+ * Box Storage structure.
+ *
+ * @param array $struct The array structure.
+ *
+ * @return array
+ */
+ protected function box_storage( array $struct ) {
+ $title = $this->get_part( 'h3' );
+ $title['content'] = __( 'Storage', 'cloudinary' );
+
+ $icon = $this->get_part( 'icon' );
+ $icon['element'] = 'img';
+ $icon['attributes']['src'] = $this->dir_url . 'css/cloud.svg';
+ $icon['render'] = true;
+
+ $limit = $this->get_part( 'span' );
+ $limit['attributes']['class'] = array(
+ 'limit',
+ );
+ $limit['content'] = size_format( $this->connection->get_usage_stat( 'storage', 'limit' ) );
+
+ $usage = $this->get_part( 'span' );
+ $usage['attributes']['class'] = array(
+ 'usage',
+ );
+ $usage['content'] = $this->connection->get_usage_stat( 'storage', 'used_percent' ) . '%';
+
+
+ $struct = $this->get_struct( $struct, $icon, $title, $limit, $usage );
+
+ return $struct;
+ }
+
+ /**
+ * Box Transformations structure.
+ *
+ * @param array $struct The array structure.
+ *
+ * @return array
+ */
+ protected function box_transformations( array $struct ) {
+ $title = $this->get_part( 'h3' );
+ $title['content'] = __( 'Transformations', 'cloudinary' );
+
+ $icon = $this->get_part( 'icon' );
+ $icon['element'] = 'img';
+ $icon['attributes']['src'] = $this->dir_url . 'css/transformation.svg';
+ $icon['render'] = true;
+
+ $limit = $this->get_part( 'span' );
+ $limit['attributes']['class'] = array(
+ 'limit',
+ );
+ $limit['content'] = number_format_i18n( $this->connection->get_usage_stat( 'transformations', 'limit' ) );
+
+ $usage = $this->get_part( 'span' );
+ $usage['attributes']['class'] = array(
+ 'usage',
+ );
+ $usage['content'] = $this->connection->get_usage_stat( 'transformations', 'used_percent' ) . '%';
+
+ $struct = $this->get_struct( $struct, $icon, $title, $limit, $usage );
+
+ return $struct;
+ }
+
+ /**
+ * Box Bandwidth structure.
+ *
+ * @param array $struct The array structure.
+ *
+ * @return array
+ */
+ protected function box_bandwidth( array $struct ) {
+ $title = $this->get_part( 'h3' );
+ $title['content'] = __( 'Bandwidth', 'cloudinary' );
+
+ $icon = $this->get_part( 'icon' );
+ $icon['element'] = 'img';
+ $icon['attributes']['src'] = $this->dir_url . 'css/bandwidth.svg';
+ $icon['render'] = true;
+
+ $limit = $this->get_part( 'span' );
+ $limit['attributes']['class'] = array(
+ 'limit',
+ );
+ $limit['content'] = size_format( $this->connection->get_usage_stat( 'bandwidth', 'limit' ) );
+
+ $usage = $this->get_part( 'span' );
+ $usage['attributes']['class'] = array(
+ 'usage',
+ );
+ $usage['content'] = $this->connection->get_usage_stat( 'bandwidth', 'used_percent' ) . '%';
+
+ $struct = $this->get_struct( $struct, $icon, $title, $limit, $usage );
+
+ return $struct;
+ }
+
+ /**
+ * Get the box struct.
+ *
+ * @param array $struct The array structure.
+ * @param array $icon The icon URL.
+ * @param array $title The title.
+ * @param array $limit The limit.
+ * @param array $usage The usage.
+ *
+ * @return array
+ */
+ protected function get_struct( array $struct, array $icon, array $title, array $limit, array $usage ) {
+ $struct['element'] = 'div';
+ $struct['attributes']['class'] = array(
+ 'box',
+ );
+ $struct['children']['icon'] = $icon;
+ $struct['children']['title'] = $title;
+ $struct['children']['limit'] = $limit;
+ $struct['children']['usage'] = $usage;
+
+ return $struct;
+ }
+}
diff --git a/php/ui/component/class-plan.php b/php/ui/component/class-plan.php
index 1feeea7b9..4dde03b98 100644
--- a/php/ui/component/class-plan.php
+++ b/php/ui/component/class-plan.php
@@ -9,6 +9,8 @@
use function Cloudinary\get_plugin_instance;
use Cloudinary\UI\Component;
+use Cloudinary\Settings\Setting;
+use Cloudinary\Connect;
/**
* Plan Component to render plan status.
@@ -24,12 +26,29 @@ class Plan extends Component {
*/
protected $blueprint = 'title/|plan_box|plan_heading/|plan_summary/|/plan_box';
+ /**
+ * Holder the Connect object.
+ *
+ * @var Connect
+ */
+ protected $connection;
+
+ /**
+ * Plan constructor.
+ *
+ * @param Setting $setting The parent Setting.
+ */
+ public function __construct( $setting ) {
+ $this->connection = get_plugin_instance()->get_component( 'connect' );
+
+ parent::__construct( $setting );
+ }
+
/**
* Setup action before rendering.
*/
protected function pre_render() {
- $connection = get_plugin_instance()->get_component( 'connect' );
- $this->setting->set_param( 'plan_heading', $connection->get_usage_stat( 'plan' ) );
+ $this->setting->set_param( 'plan_heading', $this->connection->get_usage_stat( 'plan' ) );
}
/**
@@ -62,6 +81,22 @@ protected function plan_box( $struct ) {
return $struct;
}
+ /**
+ * Filter the plan heading structure.
+ *
+ * @param array $struct The array structure.
+ *
+ * @return array
+ */
+ protected function plan_heading( array $struct ) {
+ $struct['element'] = 'h3';
+ $struct['attributes']['class'] = array(
+ 'cld-plan',
+ );
+
+ return $struct;
+ }
+
/**
* Filter the plan summary parts structure.
*
@@ -72,20 +107,15 @@ protected function plan_box( $struct ) {
protected function plan_summary( $struct ) {
$summary = $this->get_part( 'h4' );
- $summary['content'] = $this->setting->get_param( 'plan_heading', __( '25 Monthly Credits', 'cloudinary' ) );
-
- $another = $this->get_part( 'h4' );
- $another['content'] = 'nice';
+ $summary['content'] = $this->get_plan_description();
$detail = $this->get_part( 'span' );
$detail['content'] = __( '1 Credit =', 'cloudinary' );
-
- $struct['children']['title'] = $summary;
- $struct['children']['more'] = $another;
- $struct['children']['span'] = $detail;
- $struct['children']['ul'] = $this->content();
- $struct['element'] = 'div';
+ $struct['children']['title'] = $summary;
+ $struct['children']['span'] = $detail;
+ $struct['children']['ul'] = $this->credits_content();
+ $struct['element'] = 'div';
return $struct;
}
@@ -106,12 +136,28 @@ protected function plan_wrap( $struct ) {
return $struct;
}
+ /**
+ * Get plan description.
+ *
+ * @return string
+ */
+ protected function get_plan_description() {
+ $description = __( 'Pay as you go', 'cloudinary' );
+ $limit = $this->connection->get_usage_stat( 'credits', 'limit' );
+ if ( $limit ) {
+ // translators: The number of monthly credits.
+ $description = sprintf( _n( '%d Monthly Credit', '%d Monthly Credits', $limit, 'cloudinary' ), $limit );
+ }
+
+ return $description;
+ }
+
/**
* Creates the bullet points of the plan.
*
* @return array
*/
- protected function content() {
+ protected function credits_content() {
$points = $this->get_part( 'ul' );
$items = array(