Issues with Essential Grid Saving

ruenel · May 10, 2019, 6:18pm

I have logged in to your site and just as I expected, your issue is coming from a custom PHP code in your child theme’s functions.php file. You are using this outdated code:

function x_shortcode_share_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'title'       => '',
    'share_title' => '',
    'facebook'    => '',
    'twitter'     => '',
    'google_plus' => '',
    'linkedin'    => '',
    'pinterest'   => '',
    'reddit'      => '',
    'email'       => '',
    'email_subject' => ''
  ), $atts, 'x_share' ) );

  $share_url        = urlencode( get_permalink() );

  if ( is_singular() ) {
    $share_url = urlencode( get_permalink() );
  } else {
    global $wp;
    $share_url = urlencode( home_url( ($wp->request) ? $wp->request : '' ) );
  }

  if ( is_singular() ) {
    $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( get_the_title() );
  } else {
    $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( apply_filters( 'the_title', get_page( get_option( 'page_for_posts' ) )->post_title) );
  }

  $share_source     = urlencode( get_bloginfo( 'name' ) );
  $share_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
  $share_image      = ( function_exists( 'x_get_featured_image_with_fallback_url' ) ) ? urlencode( x_get_featured_image_with_fallback_url() ) : urlencode( $share_image_info[0] );

  if ( $linkedin    == 'true' ) {
    $share_content    = urlencode( cs_get_raw_excerpt() );
  }

  $tooltip_attr = cs_generate_data_attributes_extra( 'tooltip', 'hover', 'bottom' );

  $id          = ( $id          != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class       = ( $class       != ''     ) ? 'x-entry-share ' . esc_attr( $class ) : 'x-entry-share';
  $style       = ( $style       != ''     ) ? 'style="' . $style . '"' : '';
  $title       = ( $title       != ''     ) ? $title : csi18n('shortcodes.share-title');
  $facebook    = ( $facebook    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-facebook') . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&amp;t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" data-x-icon=\"&#xf082;\"></i></a>" : '';
  $twitter     = ( $twitter     == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-twitter') . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&amp;url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" data-x-icon=\"&#xf081;\"></i></a>" : '';
  $google_plus = ( $google_plus == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-google-plus') . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" data-x-icon=\"&#xf0d4;\"></i></a>" : '';
  $linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-linkedin') . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&amp;url={$share_url}&amp;title={$share_title}&amp;summary={$share_content}&amp;source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"&#xf08c;\"></i></a>" : '';
  $pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-pinterest') . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&amp;media={$share_image}&amp;description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" data-x-icon=\"&#xf0d3;\"></i></a>" : '';
  $reddit      = ( $reddit      == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-reddit') . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"&#xf1a2;\"></i></a>" : '';
  $email_subject = ( $email_subject != '' ) ? esc_attr( $email_subject ) : csi18n('shortcodes.share-email-subject');
  $mail_to     =  "mailto:?subject=" . get_the_title() . "&body=" . $email_subject . " " . get_permalink() . "" ;
  $email       = ( $email       == 'true' ) ? "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . csi18n('shortcodes.share-email') . "\"><span><i class=\"x-icon-envelope-square\" data-x-icon=\"&#xf199;\"></i></span></a>" : '';


  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<!--TEST--><p>' . $title . '</p>'
            . '<div class="x-share-options">'
              . $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . $email
            . '</div>'
          . '</div>';

  return $output;
}

You will have to update the code using the code given by @Thai:

function x_shortcode_share_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'title'       => '',
    'share_title' => '',
    'facebook'    => '',
    'twitter'     => '',
    'google_plus' => '',
    'linkedin'    => '',
    'pinterest'   => '',
    'reddit'      => '',
    'email'       => '',
    'email_subject' => ''
  ), $atts, 'x_share' ) );

  $share_url        = urlencode( get_permalink() );

  if ( is_singular() ) {
    $share_url = urlencode( get_permalink() );
  } else {
    global $wp;
    $share_url = urlencode( home_url( ($wp->request) ? $wp->request : '' ) );
  }

  if ( is_singular() ) {
    $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( get_the_title() );
  } else {
    $share_title = ( $share_title    != '' ) ? esc_attr( $share_title ) : urlencode( apply_filters( 'the_title', get_page( get_option( 'page_for_posts' ) )->post_title) );
  }

  $share_source     = urlencode( get_bloginfo( 'name' ) );
  $share_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
  $share_image      = ( function_exists( 'x_get_featured_image_with_fallback_url' ) ) ? urlencode( x_get_featured_image_with_fallback_url() ) : urlencode( $share_image_info[0] );

  if ( $linkedin    == 'true' ) {
    $share_content    = urlencode( cs_get_raw_excerpt() );
  }

  $tooltip_attr = cs_generate_data_attributes_extra( 'tooltip', 'hover', 'bottom' );

  $id          = ( $id          != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class       = ( $class       != ''     ) ? 'x-entry-share ' . esc_attr( $class ) : 'x-entry-share';
  $style       = ( $style       != ''     ) ? 'style="' . $style . '"' : '';
  $title       = ( $title       != ''     ) ? $title : csi18n('shortcodes.share-title');
  $facebook    = ( $facebook    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-facebook') . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&amp;t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook-square\" " . fa_data_icon('facebook-square') . "></i></a>" : '';
  $twitter     = ( $twitter     == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-twitter') . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&amp;url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter-square\" " . fa_data_icon('twitter-square') . "></i></a>" : '';
  $google_plus = ( $google_plus == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-google-plus') . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus-square\" " . fa_data_icon('google-plus-square') . "></i></a>" : '';
  $linkedin    = ( $linkedin    == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-linkedin') . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&amp;url={$share_url}&amp;title={$share_title}&amp;summary={$share_content}&amp;source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" " . fa_data_icon('linkedin-square') . "></i></a>" : '';
  $pinterest   = ( $pinterest   == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-pinterest') . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&amp;media={$share_image}&amp;description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest-square\" " . fa_data_icon('pinterest-square') . "></i></a>" : '';
  $reddit      = ( $reddit      == 'true' ) ? "<a href=\"#share\" {$tooltip_attr} class=\"x-share\" title=\"" . csi18n('shortcodes.share-reddit') . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" " . fa_data_icon('reddit-square') . "></i></a>" : '';


  if ( $email       == 'true' ) {

    $email_subject = esc_attr( ( $email_subject != '' ) ? cs_decode_shortcode_attribute( $email_subject ) : csi18n('shortcodes.share-email-subject') );
    $mail_to_subject = esc_attr( $share_title );
    $mail_to_url = esc_url( get_permalink() );

    $mail_to = "mailto:?subject=$mail_to_subject&amp;body=$email_subject $mail_to_url";

    $email = "<a href=\"{$mail_to}\" {$tooltip_attr} class=\"x-share email\" title=\"" . csi18n('shortcodes.share-email') . "\"><span><i class=\"x-icon-envelope-square\" " . fa_data_icon('envelope-square') . "></i></span></a>";

  } else {
    $email = '';
  }



  $output = "<div {$id} class=\"{$class}\" {$style}>"
            . '<p>' . $title . '</p>'
            . '<div class="x-share-options">'
              . $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . $email
            . '</div>'
          . '</div>';

  return $output;
}

I tried updating the code myself but it does not allow me. You may need to update your child theme’s functions.php file manually through your FTP access.

Hope this helps. Please let us know how it goes.

Basstimg · May 10, 2019, 6:38pm

Says scrape nonce chck failed when i try to update the file

rad · May 10, 2019, 11:41pm

Hi @Basstimg,

The nonce is used to make sure the request is coming from your current session or action, as part of security. This only means the nonce could be invalid. Please check this https://wordpress.org/support/topic/scrape-nonce-check-failed-please-try-again/, ike one said, it could be DNS or CloudFlare related since the requests are passing through them. Perhaps your site has a setup similar to it?

Thanks!

Basstimg · May 11, 2019, 2:39am

Hi Rad I have contacred my host and there appears to be an isseu with updating php. in appearnace - editor etc I am workig wiht theme to find a resolution to the icons.

However there is still the issue with essential gird can you please assist with that ? I beleive everything is updated now which was what i was asked to do to get assiatnce.

Before theb update i was unabel to save any changes in essenital grid. This havs not changed i have incliuded pictures above about this. This is what is see

Also after the update i now also have no images on any of my video grids which are on most of my pages as i am a music agency.

Mobile grids don;t appear to be effected it is just on the deslktop screen size. Can you have a look please

Thanks in advance Tim

rad · May 11, 2019, 6:30am

Hi @Basstimg,

The cause of the issue for not saving is the PixelYourSite plugin, it blocks the save action. Please disable it if you wish to save changes within your grid.

About the missing video thumbnail, it appears to be Vimeo related issue and your site is unable to access them. Does this happen on the live site as well? I think this happens since you move to staging site with different URL, and some URLs are affected including font, images, and so on.

Could you try checking it on live site? I like to but the same credentials don’t work on a live one.

Thanks!

Basstimg · May 12, 2019, 7:03am

Hi Rad

Thank you so much I deactivated PixcelYour Site plugin and it worked I can now have to save function on it.

Will it be ok to reactivate when I have finished working on EG?

The images on my video grids have never been an issue and have been using it for a few years. It has only become an issue after I update Theme X.

Here is an image of the live site

And an image of the same page on the staging site after updating theme x

Thank you for all your support Rad you are very helpful and knowledgable

Best Tim

christian · May 12, 2019, 9:37am

Hey Tim,

To your question:

If the third-party plugin does not affect anything other than saving, you can enable it after working on your grid.

Regarding the Vimeo videos in your grid, it could be that the Vimeo API does not allow connection to your staging site or there’s a problem with your staging site connection to the Vimeo server.

I see your live site’s not updated yet. We need that you test updating everything in your live site also. But before that, please backup your site first so you can revert to a working state the issue will happen in your live site. Also, follow the best practices in updating your themes and plugins.

Doing that will answer Rad’s question and will provide us with more information which may lead us to the cause of the issue.

Please also contact your staging host to enable CORS because I see cross-site origin errors in the console which might be a factor which is causing the issue.

Thank you for your cooperation.

Basstimg · May 12, 2019, 3:04pm

Hi Christian

I have spoke to the host and CORS is now enabled. so hopefully the error should have gone.

Yes the same issue happens when i update my main site and is one of the reasons i have created the staging site. The behaviour is exactly the same. As it is the same on both sites and only happened after updating i am assuming that it is not an issue with the connection to vimeo. Am i correct ?

Is it essential to update my live site ? as the behviour is the same and the reason i was asked to create a stagingn site so it has minimal impact on ny business ?

Thanks

Tim

ruenel · May 12, 2019, 4:29pm

Hello Tim,

It is best that you fix all the issues in the staging site first. Once you have polished everything, then that’s the time that you can push your updates in the live site.

Hope this helps.

Basstimg · May 12, 2019, 6:31pm

Thank you yes it does. Does the team have any more info on the Essential Grid video image issue mentioned above ?

rad · May 12, 2019, 10:51pm

Hi @Basstimg,

It seems to be the thumbnails are displaying now after resaving, is there an active SG cache on your staging too? I also remember issues when moving to stage or moving back to love when it comes to SiteGround. Could you try checking it again? If it remains, I recommend setting up a staging outside your current host to make sure all URLs are updated.

Thanks!

Basstimg · May 13, 2019, 5:46am

Hi Rad thank you for message.

I am not noticing any difference with the thumbnail on video grids. Are you sure you looked ata video grid and not just a picture grid linking to a page?

This is the page i took screen shots of above:

http://www.staging1.elasticlounge.com/our-acts/top-uk-wedding-singer-jem

Is it now showing images on the video grid at your end ?

Also you mentioned earlier in this thread that the image was not being pulled from Vimeo and maybe not connecting. The image is ia cover mages taken from media gallery from within WP. I have just tried adding the same photo again to one item wiith the following grid:

After i add the photo and save the images appear for less than a second on the whole grid and then vanish again. Any thoughts?

Yes i do have SG caching but the grids were fine for a long time and this only happnes when i update. I have cleared all caches etc

Thanks Tim

christian · May 13, 2019, 9:03am

Hey Tim,

Please let me clarify first that, yes, it’s generally best to test in staging. But, API requests sometimes are restricted only to one domain and that is usually the live domain. That is why I asked to test the live site but keep a backup so you can revert to the working state. Thank you for confirming that the issue persists. That also answers Rad’s question. I’m also sorry if I missed that you already have tested previously. I got lost in the back and forth conversation here.

Now to the video thumbnail issue, I checked the URL you posted and the thumbnails weren’t loaded and the CORS issue wasn’t resolved as you can see in the screenshot below.

Aside from CORS, the play button you see missing is due to Hummingbird.

I’ve deactivated all third-party plugins in your test site and made a test page at http://www.staging1.elasticlounge.com/apex-support-test?avoid-minify=true and I see this.

There’s no video thumbnail but there are no more errors in the console.

Now that it’s clear, Ilve investigated further and I first tried setting the Vimeo thumbnail in your grid. Previously, you’ve set it to Featured Image. But, this didn’t resolve the issue.

It looks now that something has changed in the Essential Grid. The z-index of the poster image is now 0. Setting it to 1 resolves the issue. I’m still looking for the setting for this but for now, I’ve placed this CSS in Theme Options > CSS to override the display.

.esg-grid .esg-media-poster {
    z-index: 1 !important;
}

Video thumbnails now display. Please apply the CSS to your live site.

Hope that helps.

Basstimg · May 14, 2019, 5:41am

Hi Christian

Thank you so much for your hard work and very thorough reponse.

I have deactivateed all 3rd party plugins and updated my main site and have listed the outcome to weach issue below.

Social icons - custom PHP code updated in child theme’s functions.php file - NOW DISPLAYING CORRECTLY
Essential Grid Saving issue- The Pixel Plugin was deativated - RESOLVED
Essential Grid Video Thumbnail - I added the code you sent and the issue is NOT RESOLVED

Can you please take a look i wioll include login details for my live site below in secure note.

Now to the CORS issue i have contacted host support again and they said that everything is functioning ok at their end and asked you to clear your cache. I did mention that i am sure you would have done this and asked them to clear all caches associated with my site, whihc thye have done could you recheck please ?

Thank you for all the support it is verymuch appreciated.

thai · May 14, 2019, 8:12am

Hi Tim,

There was a syntax error in your custom CSS:

@media (max-width: 980px) {
   .x-sidebar {
    display: none !important;
	}


.esg-grid .esg-media-poster {
    z-index: 9 !important;
}

It should be:

@media (max-width: 980px) {
   .x-sidebar {
    display: none !important;
	}
}

.esg-grid .esg-media-poster {
    z-index: 9 !important;
}

I’ve already corrected it for you.

You can see the thumbnail images are loading fine now:

Cheers!

Basstimg · May 14, 2019, 8:15am

Fantastic thank you so much thai i actyaully believe everything is now ok and my sute is up to date. You cannot imagine the relief./ Thank you so much.

Can anyone chekc the CORS mentioned in the preious message as i want to keep on at my host to make sure everything is in place

Thank you again

paul.r · May 14, 2019, 8:37am

Hi @Basstimg,

To fix Cors, please change your wordpress and site url from http to https under Settings > General

For example,

Change http://www.elasticlounge.com to https://www.elasticlounge.com

Thanks

Basstimg · May 14, 2019, 8:41am

Hi Paul

Famtastic i have made the changes and am so pleased that my site is up to date and working fine

Thank you for everyones hard work and patience throughout resolving the issues. I won;t let them build up in future.

Thank you

paul.r · May 14, 2019, 8:50am

You’re most welcome @Basstimg !

system · May 24, 2019, 8:50am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.