[sobriodigitalParticipant]

Hello, I’m wondering how I can customize the portfolio item slider options.
I upload the files, set the Media type to Gallery and I have the slider, but it is not in autoplay and it has a fade transition.
The slides in the portfolio item page slider should run in autoplay with a slide transition.
How can I perform this task?
Thank you very much for your help.

[John EzraMember]

Hi there,

Thanks for writing in. You did not provide a link to your site so I can’t really give you a tailored solution. Also I am not sure which stack you are using, which version of WP, X theme, X-shortcoedes and other things. But Assuming everything is the latest and you are using ethos stack since you are asking about the post-slider. Here’s what you need to do, but before that I must mention that we can’t provide custom development, and this is leaning towards that. I just want to give you a heads up that we may not be able to assist you further down this path.

Having said that because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After setting that up you will need to find the “_post-slider.php“, it’s found here:

/wp-content/themes/x/framework/views/ethos/_post-slider.php

Then you will need to copy this file and paste it in the exact path in your child directory like so:

/wp-content/themes/x-child-ethos/framework/views/ethos/_post-slider.php

Within the this duplicate file in the child directory you will need to find the jQuery Script towards the bottom, it should be between lines 92 through 104 in between <script></script> tags.

You need to set the animation setting to 'slide' instead of 'fade', and the slideshow setting to true instead of false.

That should get you what you wanted. If you then wanted to control how long the slide stays before it moves to the next, and also how fast it animates you would need to add the following two lines. Their values are in milliseconds.

slideshowSpeed: 7000,
animationSpeed: 600

Note: don’t forget to put a comma after slideshow setting (only the last setting is without a comma)

the final script code would look something like this:

    <script>
      jQuery(window).load(function() {
        jQuery('.x-post-slider').flexslider({
          controlNav   : false,
          selector     : '.x-slides > li',
          prevText     : '<i class="x-icon-chevron-left"></i>',
          nextText     : '<i class="x-icon-chevron-right"></i>',
          animation    : 'slide',
          smoothHeight : true,
          slideshow    : true,
          slideshowSpeed: 7000,
          animationSpeed: 600
        });
      });
    </script>

You can change the value in milliseconds as you see fit.

Hope this helps!

[sobriodigitalParticipant]

I’m sorry, you are totally right. I wrote a earlier post in wich i wrote all the informations about the site and i assumed you had it, but I was wrong.

Unfortunately I can’t test your solution because I’m not using the ethos stack.

The website is built in WordPress 4.1, with the Integrity stack.
Here’s the link I’m looking to change the slider into
http://xilema.sobriodesign.com/xilema-portfolio/banca-dello-stato/

I need to have this sliders change with a slide transition instead of a fade one, and that it starts with an autoplay.
Thank you very much for your help and sorry again for the missing information, sorry I wasted your time.

[RadModerator]

Hi there,

In that case, please add this code at your child theme’s functions.php

// Featured Gallery
// =============================================================================

if ( ! function_exists( 'x_featured_gallery' ) ) :
  function x_featured_gallery() {

    $stack     = x_get_stack();
    $thumb     = get_post_thumbnail_id( get_the_ID() );
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    $args = array(
      'order'          => 'ASC',
      'orderby'        => 'menu_order',
      'post_parent'    => get_the_ID(),
      'post_type'      => 'attachment',
      'post_mime_type' => 'image',
      'post_status'    => null,
      'numberposts'    => -1,
      'exclude'        => $thumb
    );
    
    $setting = x_generate_data_attributes( 'slider', array(

      'animation'   => 'slide',
      'slideTime'   => 7000,
      'slideSpeed'  => 600,
      'controlNav'  => true,
      'prevNextNav' => true,
      'slideshow'   => true,
      'random'      => false,

    ) );

    $attachments = get_posts( $args );

    if ( $attachments ) {
      echo '<div class="x-flexslider x-flexslider-featured-gallery man" '.$setting.'><ul class="x-slides">';
        foreach ( $attachments as $attachment ) {
          echo '<li class="x-slide">';
            if ( $fullwidth ) {
              echo wp_get_attachment_image( $attachment->ID, 'entry-fullwidth', false, false );
            } else {
              echo wp_get_attachment_image( $attachment->ID, 'entry', false, false );
            }
          echo '</li>';
        }
      echo '</ul></div>';
    }

  }
endif;

Thanks!

[sobriodigitalParticipant]

I get this error

Fatal error: Call to undefined function x_generate_data_attributes() in /xxxxxxxxxxx/wp-content/themes/x-child/functions.php on line 116

[sobriodigitalParticipant]

I deployed the code you sent me changing this

$setting = x_generate_data_attributes( 'slider', array(

      'animation'   => 'slide',
      'slideTime'   => 5000,
      'slideSpeed'  => 600,
      'controlNav'  => true,
      'prevNextNav' => true,
      'slideshow'   => true,
      'random'      => false,

    ) );

with this

$setting = 'data-x-params="{"animation":"slide","slideTime":"5000","slideSpeed":"600","controlNav":true,"prevNextNav":true,"slideshow":true,"random":false}"';

the slider works but it seems ti doesn’t read the new params and it still work as the default, even if the parameter is correctly inserted in the code.

http://xilema.sobriodesign.com/xilema-portfolio/casa-gianinazzi/

[sobriodigitalParticipant]

This is the last code i deployed, unfortunately the slider is still having the default behaviour

if ( ! function_exists( 'x_featured_gallery' ) ) :
  function x_featured_gallery() {

    $stack     = x_get_stack();
    $thumb     = get_post_thumbnail_id( get_the_ID() );
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    $args = array(
      'order'          => 'ASC',
      'orderby'        => 'menu_order',
      'post_parent'    => get_the_ID(),
      'post_type'      => 'attachment',
      'post_mime_type' => 'image',
      'post_status'    => null,
      'numberposts'    => -1,
      'exclude'        => $thumb
    );
 
    /*$setting = x_generate_data_attributes( 'slider', array(

      'animation'   => 'slide',
      'slideTime'   => 5000,
      'slideSpeed'  => 600,
      'controlNav'  => true,
      'prevNextNav' => true,
      'slideshow'   => true,
      'random'      => false,

    ) ); */
    $setting = 'data-x-element="slider" data-x-params="{"animation":"slide","slideTime":"5000","slideSpeed":"600","controlNav":true,"prevNextNav":true,"slideshow":true,"random":false}"';
  
    $attachments = get_posts( $args );

    if ( $attachments ) {
      echo '<div class="x-flexslider x-flexslider-featured-gallery man" '.$setting.'><ul class="x-slides">';
        foreach ( $attachments as $attachment ) {
          echo '<li class="x-slide">';
            if ( $fullwidth ) {
              echo wp_get_attachment_image( $attachment->ID, 'entry-fullwidth', false, false );
            } else {
              echo wp_get_attachment_image( $attachment->ID, 'entry', false, false );
            }
          echo '</li>';
        }
      echo '</ul></div>';
    }

  }
endif;

http://xilema.sobriodesign.com/xilema-portfolio/casa-gianinazzi/

[ChristopherModerator]

Hi there, please use the same code given for integrity originally but instead of adding it inside functions.php do as follows:

copy file below:

wp-content/themes/x/framework/functions/global/featured.php

ro:

wp-content/themes/YOURCHILDTHEMENAME/framework/functions/global/featured.php

and add the given code to newly copied file instead of line 70 to 108

Thank you.

[sobriodigitalParticipant]

I copied the featured.php file from
wp-content/themes/x/framework/functions/global/featured.php

and pasted into
wp-content/themes/x-child/framework/functions/global/featured.php

and edited the x_featured_gallery() function by adding the settings as you told me

// Featured Gallery
// =============================================================================

if ( ! function_exists( 'x_featured_gallery' ) ) :
  function x_featured_gallery() {

    $stack     = x_get_stack();
    $thumb     = get_post_thumbnail_id( get_the_ID() );
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    $args = array(
      'order'          => 'ASC',
      'orderby'        => 'menu_order',
      'post_parent'    => get_the_ID(),
      'post_type'      => 'attachment',
      'post_mime_type' => 'image',
      'post_status'    => null,
      'numberposts'    => -1,
      'exclude'        => $thumb
    );
    
    $setting = x_generate_data_attributes( 'slider', array(

      'animation'   => 'slide',
      'slideTime'   => 7000,
      'slideSpeed'  => 600,
      'controlNav'  => true,
      'prevNextNav' => true,
      'slideshow'   => true,
      'random'      => false,

    ) );

    $attachments = get_posts( $args );

    if ( $attachments ) {
      echo '<div class="x-flexslider x-flexslider-featured-gallery man '.$setting.'"><ul class="x-slides">';
        foreach ( $attachments as $attachment ) {
          echo '<li class="x-slide">';
            if ( $fullwidth ) {
              echo wp_get_attachment_image( $attachment->ID, 'entry-fullwidth', false, false );
            } else {
              echo wp_get_attachment_image( $attachment->ID, 'entry', false, false );
            }
          echo '</li>';
        }
      echo '</ul></div>';
    }

  }
endif;

Unfortunately now the slider works but the settings are still the same.
Plus: modifying the function in the function.php child them at least added the settings paramters in the code, even if they weren’t working. Modifying the fucntion in the functions/global folder doesn’t add the slider parameters at all in the code.

I’m sorry i know i’m really bothering you but I really need it, my client asked for this feature, but I cannot find a solution for it.
Thank you very much for your help.

[John EzraMember]

Hi there,

Thanks for updating the post. I just want to check, did you create a custom child theme or did you use one that was supplied by us via this link https://theme.co/x/member/child-themes/

I checked your link above it says x-child.

wp-content/themes/x-child/framework/functions/global/featured.php

none of our child themes are labled with that folder name, for integrity light it should be x-child-integrity-light:

wp-content/themes/x-child-integrity-light/framework/functions/global/featured.php

This maybe the reason why it is not reading the file (depending on how you set it up).

Please checking the above and let us know how that goes. If that doesn’t work, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[sobriodigitalParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

I’ve added following code in your Customizer under Custom > JavaScript, this should enable the auto sliding functionality of your portfolio gallery slider.

jQuery('.x-flexslider-featured-gallery').flexslider({
    controlNav   : false,
    selector     : '.x-slides > li',
    prevText     : '<i class="x-icon-chevron-left"></i>',
    nextText     : '<i class="x-icon-chevron-right"></i>',
    animation    : 'fade',
    easing       : 'easeInOutExpo',
    smoothHeight : true,
    slideshow    : true
});

Hope this helps. 🙂

Thank you.

[sobriodigitalParticipant]

Now it works 🙂 Thanks a lot

[allantibbittParticipant]

Hello There,

Is there a way I can either completely remove the Portfolio option, or make it into a Categories section instead?

Oh and by the way I am fairly green with this theme so any advice or help would be greatly appreciated.

Thank you ahead of time….

[ZeshanMember]

Hi Sobriodigital,

Glad to hear that! And you are most welcome! 🙂

To Allantibbitt: You could unregister portfolio post type by using following code in your child theme. Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that add following code in your child theme’s functions.php file:

add_action( 'after_setup_theme','remove_portfolio_cpt', 100 );

function remove_portfolio_cpt() {   
    remove_action( 'init', 'x_portfolio_init');    
}

Creating custom post types for each category is outside the scope, but there is no need to unregister the portfolio since you can sort the portfolio by category and then show an index page for each individual category.

Cheers!

[Author]

Posts