We are using Genesis and Dynamik (Cobaltapps). WordPress, themes, and all plugins are up to date. The plugin is placed on the homepage from widgets.
The problem is that code snippets are on the slider’s top and bottom.
At the top:
<section id=”t20_slider_widget-2″ class=”widget widget_t20_slider_widget”><div class=”widget-wrap”>
At the bottom:
</div></section>
Our WordPress managed hosting, Flywheel, also gives a warning about a security issue related to Twenty20 Image Before-After.
What would you suggest to solve the problem?
I’m using Elementor and I’ve added a code snippet on a template. This snippet loads multiple Before and After instances dynamically. If the fields are populated then one, two, three or four B/As will show. If none of them are populated then nothing shows. But we’re having an issue, if there are more than one B/A on a page the second through fourth don’t always show, not until the page is refreshed. This doesn’t happen all of the time, but often enough to be a problem. It doesn’t seem to be a browser issue, happens on Windows and Mac, Firefox and Safari.
Here is the code snippet if this helps, the snippet is added to the template page via a shortcode:
<?php
$before1 = get_field("before_image_1");
$after1 = get_field("after_image_1");
$before2 = get_field("before_image_2");
$after2 = get_field("after_image_2");
$before3 = get_field("before_image_3");
$after3 = get_field("after_image_3");
$before4 = get_field("before_image_4");
$after4 = get_field("after_image_4");
?>
<?php if (!empty($before1)) {
?>
<!-- <h2 style="color: white; background: #416BA9; font-size: 14.4px; line-height: 26px; font-family: 'Roboto'; font-weight: 500; letter-spacing: 2px; padding: 2px 2px 2px 10px;">BEFORE AND AFTER</h2> -->
[twenty20 img1="<?php echo $before1; ?>" img2="<?php echo $after1; ?>" offset="0.5"]
<?php } ?>
<?php if (!empty($before2)) {
?>
[twenty20 img1="<?php echo $before2; ?>" img2="<?php echo $after2; ?>" offset="0.5"]
<?php } ?>
<?php if (!empty($before3)) {
?>
[twenty20 img1="<?php echo $before3; ?>" img2="<?php echo $after3; ?>" offset="0.5"]
<?php } ?>
<?php if (!empty($before4)) {
?>
[twenty20 img1="<?php echo $before4; ?>" img2="<?php echo $after4; ?>" offset="0.5"]
<?php } ?>Thanks for any help you can lend.
]]>Hello,
the plugin stopped working in elementor since the last versions. I’ve currently updated to Version 1.7.5. and rolled back to the backup of Version 1.7.2 wich was the last one working fine.
I contacted elementor support and they kindly offered their help: “If they need any technical details regarding Elementor, they are free to open an issue on our Github page where our developers will be happy to collaborate directly with them.”
Kind regards
Hi,
the plugin stopped working, I’ve updated it but it is still not working.
Into the browser console I see this error: Uncaught TypeError: $(…).twentytwenty is not a function…
Thanks.
]]>Hello.
Thank you for this great plugin.
Can you provide more info how to add links for images and text ?
Also how Can we use external images for this ?
]]>I have a website built with Elementor. Everything is up to date. For some time now, the plugin Twenty20 Image Before-After, hasn’t been working.
In the widget, I see ‘select image,’ but I can’t upload a photo. Does anyone know how to fix this?
Hello.
How can we show text for each image always (to be visible not only on hover) ?
Also Is it possible to overlay image with some data from another shortcode (product price) ?
]]>I’m getting a “There has been a critical error on this website.” after updating the plugin, I’ve deactivated for now, just thought you’d want to know
]]>I updated my Twenty20 Image Before-After plugin to 1.7.4 and I noticed that it said it “Fixed the Elementor Widget”. However, when I try to preview a post I am preparing it creates and error stating “Fatal error: Uncaught Error: Class “Elementor\Plugin” not found” – I do not use Elementor. When I rollback to 1.7.3 the post preview works fine. Thanks for your help.
Here is the full error message:
Fatal error: Uncaught Error: Class "Elementor\Plugin" not found
in /home3/********/public_html/wp-content/plugins/twenty20/inc/enqueue.php on line 15
Call stack:
twenty20_zb_enqueue_script()
wp-includes/class-wp-hook.php:324
WP_Hook::apply_filters()
wp-includes/class-wp-hook.php:348
WP_Hook::do_action()
wp-includes/plugin.php:517
do_action()
wp-includes/script-loader.php:2263
wp_enqueue_scripts()
wp-includes/class-wp-hook.php:324
WP_Hook::apply_filters()
wp-includes/class-wp-hook.php:348
WP_Hook::do_action()
wp-includes/plugin.php:517
do_action()
wp-includes/general-template.php:3065
wp_head()
wp-content/themes/kadence/header.php:24
require_once()
wp-includes/template.php:810
load_template()
wp-includes/template.php:745
locate_template()
wp-includes/general-template.php:48
get_header()
wp-content/themes/kadence/single.php:14
include()
wp-includes/template-loader.php:106
require_once()
wp-blog-header.php:19
require()
index.php:17Hello,
I have been using the Twenty20 Image Before-After plugin for a few years, but for the past 15 days to 3 weeks, it has disappeared from Elementor. Instead of the plugin, I now see empty containers. Has anyone else encountered this problem? I have also contacted Elementor, but if anyone has a solution, I would appreciate your help!
Thank you!
]]>If you see div selectors displayed before and after the graphic like this:
<div id="t20_slider_widget-13" class="sidebar-box widget_t20_slider_widget amr_widget clr"><h4 class="widget-title">Lorem ipsum....</h4>
[image before-after]
</div>
You can fix this by modifying the file /inc/widget-twenty20.php
Correct form of this file (based on version 1.73) is:
<?php
//Widget Registration.
function twenty20_slider_widget_register() {
register_widget( 'twenty20_slider_widget' );
}
class twenty20_slider_widget extends WP_Widget {
// Widget Class Constructor
function __construct() {
parent::__construct(
't20_slider_widget',
__( 'Twenty20 Slider', 'zb_twenty20' ),
array( 'description' => __( 'Highlight the differences between two images.', 'zb_twenty20' ), )
);
add_action('adminesc_html_enqueue_scripts', array(&$this, 'mac_admin_scripts'));
}
function mac_admin_scripts($hook) {
if ($hook != 'widgets.php')
return;
wpesc_html_enqueue_media();
wp_register_style( 'mac_style', ZB_T20_URL . '/assets/css/admin.css', false, ZB_T20_VER );
wpesc_html_enqueue_style( 'mac_style' );
wp_register_script('mac_widget_admin', ZB_T20_URL . '/assets/js/admin.js', array('jquery'), ZB_T20_VER, true);
wp_register_script('mac_widget_img', ZB_T20_URL . '/assets/js/image-uploader.js', array('jquery'), ZB_T20_VER, true);
wpesc_html_enqueue_script('mac_widget_admin');
wpesc_html_enqueue_script('mac_widget_img');
}
public function widget( $args, $instance ) {
// Wy?wietlanie HTML widgetu
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . esc_html( apply_filters( 'widget_title', $instance['title'] ) ) . $args['after_title'];
}
?>
<div class="mac-wrap">
<?php
$t20ID = esc_attr( $args['widget_id'] );
$isVertical = '';
if ( isset($instance['is_vertical']) && $instance['is_vertical'] == true ) {
$isVertical = ' data-orientation="vertical"';
}
$isHover = '';
if ( isset($instance['t20_widget_hover']) && $instance['t20_widget_hover'] === 'true' ) {
$isHover = ',move_slider_on_hover: true';
}
?>
<?php if ( !empty($instance['t20_img_before']) && !empty($instance['t20_img_after']) ): ?>
<div class="twenty20">
<div class="twentytwenty-container <?php echo esc_attr( $t20ID ); ?>"<?php echo $isVertical; ?>>
<img src="<?php echo esc_url($instance['t20_img_before']); ?>" alt="Before Image">
<img src="<?php echo esc_url($instance['t20_img_after']); ?>" alt="After Image">
</div>
<script>
jQuery(window).on("load", function(){
<?php if (isset($instance['is_vertical']) && $instance['is_vertical'] == true) { ?>
jQuery(".twentytwenty-container.<?php echo esc_js($t20ID); ?>[data-orientation='vertical']").twentytwenty({default_offset_pct: <?php echo esc_js($instance['t20_widget_offset']); ?>, orientation: 'vertical' <?php echo esc_js($isHover); ?>});
<?php } else { ?>
jQuery(".twentytwenty-container.<?php echo esc_js($t20ID); ?>[data-orientation!='vertical']").twentytwenty({default_offset_pct: <?php echo esc_js($instance['t20_widget_offset']); ?> <?php echo esc_js($isHover); ?>});
<?php } ?>
<?php if (!empty($instance['t20_widget_before'])) { ?>
jQuery(".<?php echo esc_js($t20ID); ?> .twentytwenty-before-label").html("<?php echo esc_js($instance['t20_widget_before']); ?>");
<?php } else { ?>
jQuery(".<?php echo esc_js($t20ID); ?> .twentytwenty-before-label").hide();
<?php } ?>
<?php if (!empty($instance['t20_widget_after'])) { ?>
jQuery(".<?php echo esc_js($t20ID); ?> .twentytwenty-after-label").html("<?php echo esc_js($instance['t20_widget_after']); ?>");
<?php } else { ?>
jQuery(".<?php echo esc_js($t20ID); ?> .twentytwenty-after-label").hide();
<?php } ?>
});
</script>
</div>
<?php endif; ?>
</div>
<?php
echo $args['after_widget'];}
// Widget Layout
public function form( $instance ) {
$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
$t20_widget_before = isset($instance['t20_widget_before']) ? esc_attr($instance['t20_widget_before']) : '';
$t20_widget_after = isset($instance['t20_widget_after']) ? esc_attr($instance['t20_widget_after']) : '';
$t20_img_before = isset($instance['t20_img_before']) ? esc_url($instance['t20_img_before']) : '';
$t20_img_after = isset($instance['t20_img_after']) ? esc_url($instance['t20_img_after']) : '';
$is_vertical = isset($instance['is_vertical']) ? (bool) $instance['is_vertical'] : false;
$t20_widget_offset = isset($instance['t20_widget_offset']) ? esc_attr($instance['t20_widget_offset']) : '0.5';
$t20_widget_hover = isset($instance['t20_widget_hover']) ? esc_attr($instance['t20_widget_hover']) : 'false';
?>
<div class="mac_options_form">
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_html_e( 'Title:', 'zb_twenty20' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p class="check">
<label for="<?php echo esc_attr( $this->get_field_id("is_vertical") ); ?>" />
<input type="checkbox" class="checkbox" id="<?php echo esc_attr( $this->get_field_name("is_vertical") ); ?>" name="<?php echo esc_attr( $this->get_field_name("is_vertical") ); ?>" value="1" <?php checked( 1, isset($instance['is_vertical']), true ); ?> />
<strong><label for="<?php echo esc_attr( $this->get_field_name("is_vertical") ); ?>"><?php esc_html_e( 'Set Vertical direction', 'zb_twenty20'); ?></label></strong>
</label>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 't20_widget_before' ) ); ?>"><?php esc_html_e( 'Before:', 'zb_twenty20' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 't20_widget_before' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 't20_widget_before' ) ); ?>" type="text" value="<?php echo esc_attr( $t20_widget_before ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 't20_widget_after' ) ); ?>"><?php esc_html_e( 'After:', 'zb_twenty20' ); ?></label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 't20_widget_after' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 't20_widget_after' ) ); ?>" type="text" value="<?php echo esc_attr( $t20_widget_after ); ?>">
</p>
<p>
<strong><label for="<?php echo esc_attr( $this->get_field_id('t20_widget_offset') ); ?>"><?php esc_html_e('Offset:', 'zb_twenty20'); ?></label></strong>
<select id="<?php echo esc_attr( $this->get_field_id('t20_widget_offset') ); ?>" name="<?php echo esc_attr( $this->get_field_name('t20_widget_offset') ); ?>">
<option value=""><?php esc_html_e('Select offset value', 'zb_twenty20'); ?></option>
<option value="0.1" <?php selected($t20_widget_offset, '0.1', true); ?>><?php esc_html_e('0.1', 'zb_twenty20'); ?></option>
<option value="0.2" <?php selected($t20_widget_offset, '0.2', true); ?>><?php esc_html_e('0.2', 'zb_twenty20'); ?></option>
<option value="0.3" <?php selected($t20_widget_offset, '0.3', true); ?>><?php esc_html_e('0.3', 'zb_twenty20'); ?></option>
<option value="0.4" <?php selected($t20_widget_offset, '0.4', true); ?>><?php esc_html_e('0.4', 'zb_twenty20'); ?></option>
<option value="0.5" <?php selected($t20_widget_offset, '0.5', true); ?>><?php esc_html_e('0.5 (default)', 'zb_twenty20'); ?></option>
<option value="0.6" <?php selected($t20_widget_offset, '0.6', true); ?>><?php esc_html_e('0.6', 'zb_twenty20'); ?></option>
<option value="0.7" <?php selected($t20_widget_offset, '0.7', true); ?>><?php esc_html_e('0.7', 'zb_twenty20'); ?></option>
<option value="0.8" <?php selected($t20_widget_offset, '0.8', true); ?>><?php esc_html_e('0.8', 'zb_twenty20'); ?></option>
<option value="0.9" <?php selected($t20_widget_offset, '0.9', true); ?>><?php esc_html_e('0.9', 'zb_twenty20'); ?></option>
<option value="1" <?php selected($t20_widget_offset, '1', true); ?>><?php esc_html_e('1.0', 'zb_twenty20'); ?></option>
</select>
</p>
<p>
<strong><label for="<?php echo esc_attr( $this->get_field_id('t20_widget_hover') ); ?>"><?php esc_html_e('Mouse over:', 'zb_twenty20'); ?></label></strong>
<select id="<?php echo esc_attr( $this->get_field_id('t20_widget_hover') ); ?>" name="<?php echo esc_attr( $this->get_field_name('t20_widget_hover') ); ?>">
<option value="false" <?php selected($t20_widget_hover, 'false', true); ?>><?php esc_html_e('No', 'zb_twenty20'); ?></option>
<option value="true" <?php selected($t20_widget_hover, 'true', true); ?>><?php esc_html_e('Yes', 'zb_twenty20'); ?></option>
</select>
<br/><em>Move slider on mouse hover?</em>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 't20_img_before' ) ); ?>"><?php esc_html_e( 'Before Image:', 'zb_twenty20' ); ?> <span class="mac-info" title="<?php esc_html_e('Select t20_img_before or enter external image url.', 'zb_twenty20'); ?>"></span></label><br/>
<?php if(empty( $t20_img_before )){ $t20_img_before = ZB_T20_URL . '/assets/images/placeholder.png'; } ?>
<img src="<?php echo esc_url( $t20_img_before ); ?>" width="150px"/>
<input class="widefat mac-img-before" id="<?php echo esc_attr( $this->get_field_id( 't20_img_before' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 't20_img_before' ) ); ?>" type="hidden" value="<?php echo esc_attr( $t20_img_before ); ?>" />
<span class="submit">
<input type="button" data-t20="img-t20-before" name="submit" id="submit" class="button button-primary mac-upload_image_button" value="Select image">
<input type="button" name="submit" id="submit" class="button delete button-secondary mac-remove-image-before" value="X">
</span>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 't20_img_after' ) ); ?>"><?php esc_html_e( 'After Image:', 'zb_twenty20' ); ?> <span class="mac-info" title="<?php esc_html_e('Select Twenty20 Slider or enter external image url.', 'zb_twenty20'); ?>"></span></label><br/>
<?php if( empty( $t20_img_after )){ $t20_img_after = ZB_T20_URL . '/assets/images/placeholder.png';} ?>
<img src="<?php echo esc_url( $t20_img_after ); ?>" width="150px"/>
<input class="widefat mac-img-after" id="<?php echo esc_attr( $this->get_field_id( 't20_img_after' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 't20_img_after' ) ); ?>" type="hidden" value="<?php echo esc_attr( $t20_img_after ); ?>" />
<span class="submit">
<input type="button" data-t20="img-t20-after" name="submit" id="submit" class="button button-primary mac-upload_image_button" value="Select image">
<input type="button" name="submit" id="submit" class="button delete button-secondary mac-remove-image-after" value="X">
</span>
</p>
</div>
<?php
}
// Save Data
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? wp_strip_all_tags( $new_instance['title'] ) : '';
$instance['t20_img_before'] = ( ! empty( $new_instance['t20_img_before'] ) ) ? esc_url( wp_strip_all_tags( $new_instance['t20_img_before'] ) ) : '';
$instance['t20_img_after'] = ( ! empty( $new_instance['t20_img_after'] ) ) ? esc_url( wp_strip_all_tags( $new_instance['t20_img_after'] ) ) : '';
$instance['is_vertical'] = $new_instance['is_vertical'];
$instance['t20_widget_offset'] = $new_instance['t20_widget_offset'];
$instance['t20_widget_hover'] = $new_instance['t20_widget_hover'];
$instance['t20_widget_before'] = $new_instance['t20_widget_before'];
$instance['t20_widget_after'] = $new_instance['t20_widget_after'];
return $instance;
}
}
add_action( 'widgets_init', 'twenty20_slider_widget_register' );
Changes were made to funtion widget and function form.
]]>Hello,
I can’t access some back-office features, especially the Customize tab, because I have a fatal error caused by the Twenty20 extension:
Fatal error: Uncaught Error: Call to undefined function esc_htmlesc_html_e() in ……… /wp-content/plugins/twenty20/inc/widget-twenty20.php on line 101
Can you please help me solve this problem?
]]>Bonjour,
Depuis ce matin j’ai constaté que je n’avais plus aucunes images pour lesquelles j’ai utilisé Twenty20 Image Before-After.
J’utilise Elementor et le widget à carrément disparu. Dernière connexion vendredi et tout était ok.
J’ai vu qu’il y a eu une mise à jour.
Est-ce un problème de compatibilité entre le plugin et Elementor ? Ou, est-ce qu’il est définitivement plus accessible ?
Merci pour vos réponses.
<font _mstmutation=”1″></font>
]]>When enabling this plugin I get the notice: “Nonce verification failed”.
This notice happens also when I have this plugin activated and activating another plugin.
I have tripple checked that this plugin causes this issue. Would you please look into this issue?
]]>Images are being flagged as not Lazyloading, and I concur when looking at the code in the Console it says “skip-lazy”. Any reason why?
]]>On inc/enqueue.php change to ‘-script’ instead of ‘-style’ because it is a script and not a style (twenty20-script and twenty20-eventmove-script).
function twenty20_zb_enqueue_script() {
// Twenty20 Script
wp_enqueue_script( 'twenty20-script', ZB_T20_URL . '/assets/js/jquery.twenty20.js', array( 'jquery' ), ZB_T20_VER, true );
// Twenty20 Event Move Script
wp_enqueue_script( 'twenty20-eventmove-script', ZB_T20_URL . '/assets/js/jquery.event.move.js', array( 'jquery' ), ZB_T20_VER, true );}
On inc/twenty20-eventmove-script.php include the script in the right way, to get it work with all themes.
$script .= 'jQuery( document ).ready(function( $ ) {';
if($atts['direction'] == "vertical"){
$direc = "[data-orientation='vertical']";
$script .= '$(".twentytwenty-container.'.esc_js($t20ID). $direc . '").twentytwenty({default_offset_pct: ' . esc_js($atts['offset'] . $isHover) . $data_vertical . '});';
}else{
$direc = "[data-orientation!='vertical']";
$script .= '$(".twentytwenty-container.'.esc_js($t20ID).$direc.'").twentytwenty({default_offset_pct: '. esc_js($atts['offset'] . $isHover) .'});';
}
if($atts['before']){
$script .= '$(".' . twenty20_zb_sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-before-label").html("'. twenty20_zb_sanitize_xss_offset(esc_js($atts['before'])) .'");';
}else{
$script .= '$(".' . twenty20_zb_sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-overlay").hide();';
}
if($atts['after']){
$script .= '$(".' . twenty20_zb_sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-after-label").html("'. twenty20_zb_sanitize_xss_offset(esc_js($atts['after'])) .'");';
}else{
$script .= '$(".' . twenty20_zb_sanitize_xss_offset( esc_js($t20ID) ) . ' .twentytwenty-overlay").hide();';
}
$script .= '});';
wp_add_inline_script( 'twenty20-script', $script);
Hi, you have doubled the function esc_htmlesc_html_e
PHP Fatal error: Uncaught Error: Call to undefined function esc_htmlesc_html_e() in /home5/***/public_html/wp-content/plugins/twenty20/inc/widget-twenty20.php:101
Stack trace:
#0 /home5/***/public_html/wp-includes/class-wp-widget.php(535): twenty20_slider_widget->form()
#1 /home5/***/public_html/wp-admin/includes/widgets.php(276): WP_Widget->form_callback()Elementor account login not possible because I do not receive the verification code via email. Not even in spam. Tried several times. What can I do? My email-address and the password are correct!
]]>The plugin does not validate and escape some of its shortcode attributes before outputting them back in a page/post where the shortcode is embed, which could allow users with the contributor role and above to perform Stored Cross-Site Scripting attacks
https://wpscan.com/vulnerability/e54804c7-68a9-4c4c-94f9-1c3c9b97e8ca/
Bonjour à tous
J’espère que vous allez bien. Je fais face à des problèmes sur mon site, louis-xxi.com, et j’aurais besoin de votre assistance. Je précise que j’utilise la version 2.8.1 d’Ultimate Member.
Problème d’affichage reCaptcha :
Lorsque les utilisateurs tentent de se connecter, le formulaire leur demande de confirmer qu’ils ne sont pas un robot, mais aucun reCaptcha n’appara?t à l’écran. Il semble y avoir un problème d’affichage. J’ai déjà suivi les étapes recommandées, notamment en vérifiant et ajoutant correctement les clés de site et secrètes reCaptcha dans les paramètres d’Ultimate Member.
Problème d’accès au profil utilisateur :
Un autre problème majeur est que même lorsque les utilisateurs tentent de se connecter avec le mot de passe correct, l’interface de connexion indique toujours que le mot de passe est incorrect. En conséquence, les utilisateurs ne peuvent pas accéder à leur profil utilisateur. Cette situation est préoccupante, et je recherche des solutions pour la résoudre.
Détails de configuration :
- Version d’Ultimate Member : [version 2.8.1]
- Version de WordPress : [WordPress 6.4.2]
- Version de Elementor : [Elementor Pro v3.18.2]
- Thème en cours d’utilisation : [Hello Elementor]
- Autres plugins installés :
- Advanced Product Fields for WooCommerce
- Akismet Anti-spam: Spam Protection
- All In One WP Security
- Child Theme Configurator
- Cookie Notice & Compliance for GDPR / CCPA
- Duplicator
- Elementor
- Elementor Pro
- ELEX Choose Your Delivery Date
- Facebook for WooCommerce
- Google Listings and Ads
- IONOS Assistant
- Jetpack
- Points et récompenses pour WooCommerce
- TinyPNG
- Twenty20 Image Before-After
- Ultimate Member
- Ultimate Member – reCAPTCHA
- WooCommerce
- WooCommerce Custom Product Addons Free
- WooPayments
- WP Content Copy Protection (Lite)
- WP Super Cache
- WPS Hide Login
- WPS Limit Login
- Yoast SEO
étapes que j’ai déjà suivies :
- J’ai vérifié et ajouté correctement les clés de site et secrètes reCaptcha dans les paramètres d’Ultimate Member.
- J’ai testé le problème sur différents navigateurs, et le problème persiste.
- J’ai désactivé temporairement tous les plugins, sauf Ultimate Member, et utilisé le thème par défaut de WordPress, mais le problème persiste.
Demande d’aide : Pouvez-vous s’il vous pla?t m’aider à résoudre ces problèmes, en particulier l’affichage de reCaptcha sur le formulaire de connexion et le problème d’accès au profil utilisateur malgré un mot de passe correct ? Avez-vous des conseils spécifiques ou des étapes supplémentaires que je pourrais suivre pour résoudre ces problèmes ?
Je vous remercie d’avance pour votre assistance. N’hésitez pas à me demander des informations supplémentaires si nécessaire.
Cordialement,
Matthias Alphonse
Louis-xxi.com
Hi Zayed Baloch,
I have an issue in website with Before/After slider, you can check that I have added GRIDs and if you click on any GRID then popup modal will open but slider not showing, then you open inspect element then height will auto increase and before/after images will show.
]]>Contributor+ Stored XSS vulnerability discovered by Lana Codes in WorldPress Plugin Twenty20 Images Before-After (versions <=1.6.1)
]]>Hi, how can i make the hover text show on non hover too?
]]>Dear Zayed,
I tried your plugin on version 6.2.2 and it didn’t work, I checked the source and the generated code (I think due to some modification in wordpress) had errors. Anyway, manually fixed it worked great.
If the errors were caused by wordpress, perhaps using CDATA will protect the script from unwanted interventions.
https://stackoverflow.com/a/11462560/4279940
https://www.diffchecker.com/kMW9flLc/
(The example might be a lifeline for users of a newer version.)
This is not a support question, the plugin tested up to: 6.1.3, i try it on 6.2.2.
I hope it will work soon without special hacking ??
Well, that’s all for now.
You’ve all seen sometimes you load the page and the place where Twenty20 Image Before-After should be is empty.
If you resize the browser on desktop, it will appear again. It is very hard to reproduce the issue, happens more if there are many instances on a page and cache is empty.
This is because JS for that side-by-side image is probably not loading at the correct time. The file
!function(g){g.fn.twentytwenty=function(m){m=g.extend({default_offset_pct:.5,orientation:"horizontal",before_label:"Before",after_label:"After",no_overlay:!1,move_slider_on_hover:!1,move_with_handle_only:!0,click_to_move:!1},m);return this.each(function(){var e=m.default_offset_pct,s=g(this),r=m.orientation,t="vertical"===r?"down":"left",n="vertical"===r?"up":"right";s.wrap("<div class='twentytwenty-wrapper twentytwenty-"+r+"'></div>"),m.no_overlay||s.append("<div class='twentytwenty-overlay'></div>");var c=s.find("img:first"),d=s.find("img:last");s.append("<div class='twentytwenty-handle'></div>");var l=s.find(".twentytwenty-handle");l.append("<span class='twentytwenty-"+t+"-arrow'></span>"),l.append("<span class='twentytwenty-"+n+"-arrow'></span>"),s.addClass("twentytwenty-container"),c.addClass("twentytwenty-before"),d.addClass("twentytwenty-after");var i=s.find(".twentytwenty-overlay");i.append("<div class='twentytwenty-before-label'></div>"),i.append("<div class='twentytwenty-after-label'></div>");var a=function(t){var e,n,i,a,o=(e=t,n=c.width(),i=c.height(),{w:n+"px",h:i+"px",cw:e*n+"px",ch:e*i+"px"});l.css("vertical"===r?"top":"left","vertical"===r?o.ch:o.cw),a=o,"vertical"===r?(c.css("clip","rect(0,"+a.w+","+a.ch+",0)"),d.css("clip","rect("+a.ch+","+a.w+","+a.h+",0)")):(c.css("clip","rect(0,"+a.cw+","+a.h+",0)"),d.css("clip","rect(0,"+a.w+","+a.h+","+a.cw+")")),s.css("height",a.h)},o=function(t,e){var n,i,a;return n="vertical"===r?(e-v)/p:(t-w)/f,i=0,a=1,Math.max(i,Math.min(a,n))};g(window).on("resize.twentytwenty",function(t){a(e)});var w=0,v=0,f=0,p=0,y=function(t){(t.distX>t.distY&&t.distX<-t.distY||t.distX<t.distY&&t.distX>-t.distY)&&"vertical"!==r?t.preventDefault():(t.distX<t.distY&&t.distX<-t.distY||t.distX>t.distY&&t.distX>-t.distY)&&"vertical"===r&&t.preventDefault(),s.addClass("active"),w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height()},h=function(t){s.hasClass("active")&&(e=o(t.pageX,t.pageY),a(e))},u=function(){s.removeClass("active")},_=m.move_with_handle_only?l:s;_.on("movestart",y),_.on("move",h),_.on("moveend",u),m.move_slider_on_hover&&(s.on("mouseenter",y),s.on("mousemove",h),s.on("mouseleave",u)),l.on("touchmove",function(t){t.preventDefault()}),s.find("img").on("mousedown",function(t){t.preventDefault()}),m.click_to_move&&s.on("click",function(t){w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height(),e=o(t.pageX,t.pageY),a(e)}),g(window).trigger("resize.twentytwenty")})}}(jQuery)
;What we can see for sure is that JS isn’t doing its job on the first pass in the cases where the side-by-side comparison photos don’t appear after the page load. The twentytwenty-container doesn’t have a new height property applied, and the images within it also don’t have the clip property updated (with the image height).
Can the author fix the issue of this, or to try to load that script as late as possible?
]]>Login to view site is:
User: Demo
Pass: https://upvc.squareballoon.co.uk
I can see twenty20 in the source code, under the first image. But no images show and I don’t see the src showing.
https://snipboard.io/AHrKXh.jpg
I do see it in the back end.
https://snipboard.io/ilKcDH.jpg
Also when I press the button in the editor I only get a white screen, the same is true if I use the t20 help button.
]]>I would like to see some integration where we could specify which page(s) this should be included on.
As it stands, all JScripts for TwentyTwenty are included on all pages whether the shortcode is present on the page or not—even a simple check mark option in the settings for pages and posts would suffice.
These unnecessary JScripts increase download time, download size and the number of HTTP requests. These are all things that site developers are trying to reduce.
]]>Hey guys,
We receive the vulnerability report from Ithemes for your plugin “Twenty20 Image Before-After” for a handful of websites we manage for quite some time now, but there is no fix till today.
Will there be a fix soon?
Thanks and best regards
Thomas
]]>Hello,
We’re experiencing that sometimes our sliders are displayed correctly on our site, and occasionally, they are not. When they don’t display, we can still see the code in the Chrome debugger. However, the container height for these images is dynamically set to zero! This causes the images to fail to display:
<div class="twentytwenty-container twenty20-1" style="height: 0px;">
<img...>
<img...>
...
</div>Is this a known bug? Is this something can be fixed and released?
We’re running:
- WordPress v6.1.1
- Twenty20 Image Before-After v1.6.0
- We do not have JetPack Lazy Loading enabled.
- PHP v7.4
Thanks!
]]>Hi, for some reason the sliders don’t look the same, even they are on the same page.
They are using the same shortcode
SOLUTION:
We automated the instance creation process from the backend. We now allow users to sign up and explore the tool freely and provide them with an interactive onboarding experience to guide them through the platform. This approach saves time and resources while also making the platform more accessible to potential customers.
[twenty20 img1=”4628″ img2=”4464″ width=”100″ offset=”0.5″]
SOLUTION:
We consolidated related views into a single module called the Plan. This module offers a unified filter experience and allows users to easily switch between list, calendar, timeline, and kanban views. Users can also save their views and share them with their team members. This approach has greatly improved the user experience and reduced performance issues.
[twenty20 img1=”4484″ img2=”4652″ width=”100″ offset=”0.5″]
–