Skip to content

Commit

Permalink
feat: adds generic lazyload placeholder option as a setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@selul
selul committed Jul 16, 2019
1 parent 572c0f8 commit 43b33fb
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 57 deletions.
74 changes: 74 additions & 0 deletions assets/vue/components/lazyload.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template>
<div :class="{ 'saving--option' : this.$store.state.loading }">
<div class="field columns">
<label class="label column has-text-grey-dark">
{{strings.enable_lazyload_placeholder_title}}
<p class="is-italic has-text-weight-normal">
{{strings.enable_lazyload_placeholder_desc}}
</p>
</label>
<div class="column is-3">
<toggle-button :class="'has-text-dark'"
v-model="lazyloadPlaceholder"
:disabled="this.$store.state.loading"
:labels="{checked: strings.enabled, unchecked: strings.disabled}"
:width="80"
:height="25"
color="#008ec2"></toggle-button>
</div>

</div>
<div class="field is-fullwidth columns ">
<div class="column is-left">
<button @click="saveChanges()" class="button is-success is-small "
:class="this.$store.state.loading ? 'is-loading' : '' " :disabled="!showSave">
{{strings.save_changes}}
</button>
</div>
</div>

</div>
</template>

<script>
export default {
name: "lazyload",
data() {
return {
strings: optimoleDashboardApp.strings.options_strings,
all_strings: optimoleDashboardApp.strings,
showSave: false,
new_data: {},
}
},
mounted: function () {
},
methods: {
saveChanges: function () {
this.$store.dispatch('saveSettings', {
settings: this.new_data
});
},
},
computed: {
site_settings() {
return this.$store.state.site_settings;
},
lazyloadPlaceholder: {
set: function (value) {
this.showSave = true;
this.new_data.lazyload_placeholder = value ? 'enabled' : 'disabled';
},
get: function () {
return !(this.site_settings.lazyload_placeholder === 'disabled');
}
}
}
}
</script>

<style scoped>
</style>
8 changes: 4 additions & 4 deletions assets/vue/components/main.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,16 +185,16 @@
let message = '';
if (this.step_no === 0) {
message = strings.options_strings.connect_step_0;
message = this.strings.options_strings.connect_step_0;
}
if (this.step_no === 1) {
message = strings.options_strings.connect_step_1;
message = this.strings.options_strings.connect_step_1;
}
if (this.step_no === 2) {
message = strings.options_strings.connect_step_2;
message = this.strings.options_strings.connect_step_2;
}
if (this.step_no === 3) {
message = strings.options_strings.connect_step_3;
message = this.strings.options_strings.connect_step_3;
}
return `${message} (${this.loading_percent}%)`
Expand Down
8 changes: 7 additions & 1 deletion assets/vue/components/options.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
:class="tab === 'resize' ? 'is-active' : ''"
:title="all_strings.settings_resize_menu_item+' '+all_strings.settings_menu_item">{{all_strings.settings_resize_menu_item}}</a>
</li>
<li><a @click="changeTab('lazyload')" href="#"
:class="tab === 'lazyload' ? 'is-active' : ''"
:title="all_strings.lazyload_settings_menu_item+' '+all_strings.lazyload_settings_menu_item">{{all_strings.lazyload_settings_menu_item}}</a>
</li>
<li><a href="#"
@click="changeTab('exclusions')" href="#"
:class="tab === 'exclusions' ? 'is-active' : ''"
Expand All @@ -42,6 +46,7 @@
<Compression v-if="tab === 'compression' "></Compression>
<Watermarks v-if="tab ==='watermark'"></Watermarks>
<Resize v-if="tab ==='resize'"></Resize>
<Lazyload v-if="tab ==='lazyload'"></Lazyload>
<Exclusions v-if="tab ==='exclusions'"></Exclusions>
</div>
</div>
Expand All @@ -54,10 +59,11 @@
import Watermarks from "./watermarks.vue";
import Resize from "./resize.vue";
import Exclusions from "./exclusions.vue";
import Lazyload from "./lazyload.vue";
export default {
name: "options",
components: {Exclusions, Resize, Watermarks, Compression, General},
components: {Lazyload, Exclusions, Resize, Watermarks, Compression, General},
data() {
return {
strings: optimoleDashboardApp.strings.options_strings,
Expand Down
99 changes: 51 additions & 48 deletions inc/admin.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,6 +527,7 @@ private function get_dashboard_strings() {
'settings_compression_menu_item' => __( 'Compression', 'optimole-wp' ),
'advanced_settings_menu_item' => __( 'Advanced', 'optimole-wp' ),
'general_settings_menu_item' => __( 'General', 'optimole-wp' ),
'lazyload_settings_menu_item' => __( 'Lazyload', 'optimole-wp' ),
'watermarks_menu_item' => __( 'Watermark', 'optimole-wp' ),
'conflicts_menu_item' => __( 'Possible issues', 'optimole-wp' ),
'conflicts' => array(
Expand All @@ -544,54 +545,56 @@ private function get_dashboard_strings() {
'cta' => __( 'View plans', 'optimole-wp' ),
),
'options_strings' => array(
'toggle_ab_item' => __( 'Admin bar status', 'optimole-wp' ),
'toggle_lazyload' => __( 'Scale images & Lazy load', 'optimole-wp' ),
'enable_image_replace' => __( 'Enable image replacement', 'optimole-wp' ),
'enable_network_opt_title' => __( 'Enable network based optimizations', 'optimole-wp' ),
'enable_resize_smart_title' => __( 'Enable Smart Cropping', 'optimole-wp' ),
'show' => __( 'Show', 'optimole-wp' ),
'filter_operator_contains' => __( 'contains', 'optimole-wp' ),
'filter_operator_is' => __( 'is', 'optimole-wp' ),
'filter_filename' => __( 'Image filename', 'optimole-wp' ),
'filter_url' => __( 'Page URL', 'optimole-wp' ),
'filter_ext' => __( 'Image extension', 'optimole-wp' ),
'exclude_title_optimize' => __( 'Don\'t optimize images if', 'optimole-wp' ),
'exclude_title_lazyload' => __( 'Don\'t lazyload images if', 'optimole-wp' ),
'exclude_filename_desc' => __( 'Image filename contains', 'optimole-wp' ),
'exclude_url_desc' => __( 'Page url contains', 'optimole-wp' ),
'exclude_ext_desc' => __( 'Image extension is', 'optimole-wp' ),
'hide' => __( 'Hide', 'optimole-wp' ),
'high_q_title' => __( 'High', 'optimole-wp' ),
'medium_q_title' => __( 'Medium', 'optimole-wp' ),
'size_title' => __( 'Resize large images.', 'optimole-wp' ),
'size_desc' => __( 'We will resize all images with sizes greater than this values.', 'optimole-wp' ),
'width_field' => __( 'Width', 'optimole-wp' ),
'height_field' => __( 'Height', 'optimole-wp' ),
'low_q_title' => __( 'Low', 'optimole-wp' ),
'auto_q_title' => __( 'Auto', 'optimole-wp' ),
'connect_step_0' => __( 'Connecting your site to the Optimole service.', 'optimole-wp' ),
'connect_step_1' => __( 'Checking for possible conflicts.', 'optimole-wp' ),
'connect_step_2' => __( 'Inspecting the images from your site.', 'optimole-wp' ),
'connect_step_3' => __( 'All done, Optimole is currently optimizing your site.', 'optimole-wp' ),
'quality_title' => __( 'Compression level', 'optimole-wp' ),
'quality_desc' => __( 'A higher compression might result in a small loss of image quality. Select the most appropriate value for your images.', 'optimole-wp' ),
'enabled' => __( 'Enabled', 'optimole-wp' ),
'option_saved' => __( 'Option saved.', 'optimole-wp' ),
'disabled' => __( 'Disabled', 'optimole-wp' ),
'image_1_label' => __( 'Original', 'optimole-wp' ),
'image_2_label' => __( 'Optimized', 'optimole-wp' ),
'save_changes' => __( 'Save changes', 'optimole-wp' ),
'add_filter' => __( 'Add filter', 'optimole-wp' ),
'view_sample_image' => __( 'View sample image', 'optimole-wp' ),
'quality_selected_value' => __( 'Selected value', 'optimole-wp' ),
'sample_image_loading' => __( 'Loading a sample image. ', 'optimole-wp' ),
'no_images_found' => __( 'You dont have any images in your Media Library. Add one and check how the Optimole will perform.', 'optimole-wp' ),
'quality_slider_desc' => __( 'See one sample image which will help you choose the right quality of the compression.', 'optimole-wp' ),
'replacer_desc' => __( 'Replace all the image urls from your website with the ones optimized by Optimole.', 'optimole-wp' ),
'admin_bar_desc' => __( 'Show in the WordPress admin bar the available quota from Optimole service.', 'optimole-wp' ),
'enable_network_opt_desc' => __( 'Optimole provides an option to automatically downgrade the image quality when it detects a slower network.', 'optimole-wp' ),
'enable_resize_smart_desc' => __( 'Detects the most interesting section of the image and considers it as the center of the resulting image.', 'optimole-wp' ),
'lazyload_desc' => __( 'We will generate images size based on your visitor\'s screen using javascript and render them without blocking the page execution via lazyload.', 'optimole-wp' ),
'toggle_ab_item' => __( 'Admin bar status', 'optimole-wp' ),
'toggle_lazyload' => __( 'Scale images & Lazy load', 'optimole-wp' ),
'enable_image_replace' => __( 'Enable image replacement', 'optimole-wp' ),
'enable_network_opt_title' => __( 'Enable network based optimizations', 'optimole-wp' ),
'enable_resize_smart_title' => __( 'Enable Smart Cropping', 'optimole-wp' ),
'enable_lazyload_placeholder_title' => __( 'Enable generic lazyload placeholder', 'optimole-wp' ),
'enable_lazyload_placeholder_desc' => __( 'Optimole will use a generic lazyload placeholder instead of the low quality version of your image when doing the lazyload.', 'optimole-wp' ),
'show' => __( 'Show', 'optimole-wp' ),
'filter_operator_contains' => __( 'contains', 'optimole-wp' ),
'filter_operator_is' => __( 'is', 'optimole-wp' ),
'filter_filename' => __( 'Image filename', 'optimole-wp' ),
'filter_url' => __( 'Page URL', 'optimole-wp' ),
'filter_ext' => __( 'Image extension', 'optimole-wp' ),
'exclude_title_optimize' => __( 'Don\'t optimize images if', 'optimole-wp' ),
'exclude_title_lazyload' => __( 'Don\'t lazyload images if', 'optimole-wp' ),
'exclude_filename_desc' => __( 'Image filename contains', 'optimole-wp' ),
'exclude_url_desc' => __( 'Page url contains', 'optimole-wp' ),
'exclude_ext_desc' => __( 'Image extension is', 'optimole-wp' ),
'hide' => __( 'Hide', 'optimole-wp' ),
'high_q_title' => __( 'High', 'optimole-wp' ),
'medium_q_title' => __( 'Medium', 'optimole-wp' ),
'size_title' => __( 'Resize large images.', 'optimole-wp' ),
'size_desc' => __( 'We will resize all images with sizes greater than this values.', 'optimole-wp' ),
'width_field' => __( 'Width', 'optimole-wp' ),
'height_field' => __( 'Height', 'optimole-wp' ),
'low_q_title' => __( 'Low', 'optimole-wp' ),
'auto_q_title' => __( 'Auto', 'optimole-wp' ),
'connect_step_0' => __( 'Connecting your site to the Optimole service.', 'optimole-wp' ),
'connect_step_1' => __( 'Checking for possible conflicts.', 'optimole-wp' ),
'connect_step_2' => __( 'Inspecting the images from your site.', 'optimole-wp' ),
'connect_step_3' => __( 'All done, Optimole is currently optimizing your site.', 'optimole-wp' ),
'quality_title' => __( 'Compression level', 'optimole-wp' ),
'quality_desc' => __( 'A higher compression might result in a small loss of image quality. Select the most appropriate value for your images.', 'optimole-wp' ),
'enabled' => __( 'Enabled', 'optimole-wp' ),
'option_saved' => __( 'Option saved.', 'optimole-wp' ),
'disabled' => __( 'Disabled', 'optimole-wp' ),
'image_1_label' => __( 'Original', 'optimole-wp' ),
'image_2_label' => __( 'Optimized', 'optimole-wp' ),
'save_changes' => __( 'Save changes', 'optimole-wp' ),
'add_filter' => __( 'Add filter', 'optimole-wp' ),
'view_sample_image' => __( 'View sample image', 'optimole-wp' ),
'quality_selected_value' => __( 'Selected value', 'optimole-wp' ),
'sample_image_loading' => __( 'Loading a sample image. ', 'optimole-wp' ),
'no_images_found' => __( 'You dont have any images in your Media Library. Add one and check how the Optimole will perform.', 'optimole-wp' ),
'quality_slider_desc' => __( 'See one sample image which will help you choose the right quality of the compression.', 'optimole-wp' ),
'replacer_desc' => __( 'Replace all the image urls from your website with the ones optimized by Optimole.', 'optimole-wp' ),
'admin_bar_desc' => __( 'Show in the WordPress admin bar the available quota from Optimole service.', 'optimole-wp' ),
'enable_network_opt_desc' => __( 'Optimole provides an option to automatically downgrade the image quality when it detects a slower network.', 'optimole-wp' ),
'enable_resize_smart_desc' => __( 'Detects the most interesting section of the image and considers it as the center of the resulting image.', 'optimole-wp' ),
'lazyload_desc' => __( 'We will generate images size based on your visitor\'s screen using javascript and render them without blocking the page execution via lazyload.', 'optimole-wp' ),
),
'watermarks' => array(
'image' => __( 'Image', 'optimole-wp' ),
Expand Down
48 changes: 44 additions & 4 deletions inc/lazyload_replacer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ final class Optml_Lazyload_Replacer extends Optml_App_Replacer {
* @var array Lazyload classes.
*/
private static $lazyload_watcher_classes = null;
/**
* Should we use the generic placeholder?
*
* @var bool Lazyload placeholder flag.
*/
private static $is_lazyload_placeholder = false;

/**
* Class instance method.
Expand All @@ -48,6 +54,7 @@ public static function instance() {
if ( null === self::$instance ) {
self::$instance = new self();
add_action( 'optml_replacer_setup', array( self::$instance, 'init' ) );
self::$is_lazyload_placeholder = self::$instance->settings->get( 'lazyload_placeholder' ) === 'enabled';
}

return self::$instance;
Expand Down Expand Up @@ -126,11 +133,18 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
if ( ! $this->can_lazyload_for( $original_url, $full_tag ) ) {
return Optml_Tag_Replacer::instance()->regular_tag_replace( $new_tag, $original_url, $new_url, $optml_args, $is_slashed );
}
$optml_args['quality'] = 'eco';
$optml_args['resize'] = [];
if ( ! self::$is_lazyload_placeholder ) {
$optml_args['quality'] = 'eco';
$optml_args['resize'] = [];
$low_url = apply_filters( 'optml_content_url', $is_slashed ? stripslashes( $original_url ) : $original_url, $optml_args );
$low_url = $is_slashed ? addcslashes( $low_url, '/' ) : $low_url;
} else {
$low_url = self::get_svg_for(
isset( $optml_args['width'] ) ? $optml_args['width'] : '100%',
isset( $optml_args['height'] ) ? $optml_args['height'] : '100%'
);
}

$low_url = apply_filters( 'optml_content_url', $is_slashed ? stripslashes( $original_url ) : $original_url, $optml_args );
$low_url = $is_slashed ? addcslashes( $low_url, '/' ) : $low_url;
$opt_format = '';

if ( $this->should_add_data_tag( $full_tag ) ) {
Expand Down Expand Up @@ -224,6 +238,32 @@ public function should_add_data_tag( $tag ) {
return true;
}

/**
* Get SVG markup with specific width/height.
*
* @param int $width Markup Width.
* @param int $height Markup Height.
*
* @return string SVG code.
*/
public static function get_svg_for( $width, $height ) {
$width = ! is_numeric( $width ) ? '100%' : $width;
$height = ! is_numeric( $height ) ? '100%' : $height;

static $SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="#width#" height="#height#" style=""> <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="#FFFFFF" stroke="none"/> <g style="" class="currentLayer"> <rect fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-linejoin="round" stroke-dashoffset="" fill-rule="nonzero" style="color: rgb(0, 0, 0);" class="selected" stroke-opacity="1" fill-opacity="1"/></g></svg>';

return 'data:image/svg+xml,' . rawurlencode(
str_replace(
[ '#width#', '#height#' ],
[
$width,
$height,
],
$SVG
)
);
}

/**
* Check if we should add the noscript tag.
*
Expand Down
4 changes: 4 additions & 0 deletions inc/settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ class Optml_Settings {
'admin_bar_item' => 'enabled',
'lazyload' => 'disabled',
'network_optimization' => 'disabled',
'lazyload_placeholder' => 'disabled',
'resize_smart' => 'disabled',
'filters' => [],
'quality' => 'auto',
Expand Down Expand Up @@ -87,6 +88,7 @@ public function get_filters() {
$filters[ $filter_key ][ self::FILTER_URL ] = [];
}
}

return $filters;
}

Expand All @@ -105,6 +107,7 @@ public function parse_settings( $new_settings ) {
case 'lazyload':
case 'image_replacer':
case 'network_optimization':
case 'lazyload_placeholder':
case 'resize_smart':
$sanitized_value = $this->to_map_values( $value, array( 'enabled', 'disabled' ), 'enabled' );
break;
Expand Down Expand Up @@ -251,6 +254,7 @@ public function get_site_settings() {
'admin_bar_item' => $this->get( 'admin_bar_item' ),
'lazyload' => $this->get( 'lazyload' ),
'network_optimization' => $this->get( 'network_optimization' ),
'lazyload_placeholder' => $this->get( 'lazyload_placeholder' ),
'resize_smart' => $this->get( 'resize_smart' ),
'image_replacer' => $this->get( 'image_replacer' ),
'max_width' => $this->get( 'max_width' ),
Expand Down

0 comments on commit 43b33fb

Please sign in to comment.