Hãy nhìn lại lối sống của bạn.

How can display 2 images side by side at related post on mobile

4 53.214

- Advertisement -

Soledad – Multi-Concept Blog/Magazine WordPress Theme …. New WordPress theme PenNews released. So, how can display 2 images side by side at related post on mobile ? Here is how you do it.

1. Edit the Javascript file of theme

If you want to do that, please open soledad/js/main.js and on line 265, search this code:

/* Owl Slider General
     ---------------------------------------------------------------*/
    PENCI.owl_slider = function () {
        if ( $().owlCarousel ) {
            $( '.penci-owl-carousel-slider' ).each( function () {
                var $this = $( this ),
                    $auto = true,
                    $dots = false,
                    $nav = true,
                    $loop = true,
                    $rtl = false
                    $dataauto = $this.data( 'auto' ),
                    $items_desktop = 1,
                    $items_tablet = 1,
                    $items_tabsmall = 1,
                    $speed = 600,
                    $item = 1,
                    $autotime = 5000,
                    $datalazy = false;
                if( $('html').attr('dir') === 'rtl' ) {
                    $rtl = true;
                }
                if ( $this.attr('data-dots') ) {
                    $dots = true;
                }
                if ( $this.attr('data-loop') ) {
                    $loop = false;
                }
                if ( $this.attr('data-nav') ) {
                    $nav = false;
                }
                if ( $this.attr('data-desktop'
                    $items_desktop = parseInt( $this.data('desktop') );
                }
                if ( $this.attr('data-tablet') ) {
                    $items_tablet = parseInt( $this.data('tablet') );
                }
                if ( $this.attr('data-tabsmall') ) {
                    $items_tabsmall = parseInt( $this.data('tabsmall') );
                }
                if ( $this.attr('data-speed'
                    $speed = parseInt( $this.data('speed') );
                }
                if ( $this.attr('data-autotime') ) {
                    $autotime = parseInt( $this.data('autotime') );
                }
                if ( $this.attr('data-item') ) {
                    $item = parseInt( $this.data('item') );
                }
                if ( $this.attr('data-lazy') ) {
                    $datalazy = true;
                }
                var'<i class="fa fa-angle-right"></i>'
                    autoplay          : $dataauto,
                    autoplayTimeout   : $autotime,
                    autoHeight        : true,
                    autoplayHoverPause: true,
                    autoplaySpeed     : $speed,
                    responsive        : {
                        0   : {
                            items  : 1,
                            slideBy: 1
                        },
                        480
                        },
                        768 : {
                            items  : $items_tablet,
                            slideBy: $items_tablet
                        },
                        1170: {
                            items  : $items_desktop,
                            slideBy: $items_desktop
                        }
                    }
                };
                if ( $this.hasClass( 'penci-headline-posts' ) ) {
                    owl_args['animateOut'] = 'slideOutUp';
                    owl_args['animateIn'] = 'slideInUp';
                }
                $this.imagesLoaded( function() { $this.owlCarousel( owl_args ); } );
                $this.on('changed.owl.carousel', function(event) {
                    $this.find( '.penci-lazy' ).Lazy( {
                        effect: 'fadeIn',
                        effectTime: 300,
                        scrollDirection: 'both'
                    } );
                });
            } );
        }    // if owlcarousel
    }

Replace it to:

/* Owl Slider General
     ---------------------------------------------------------------*/
    PENCI.owl_slider = function () {
        if ( $().owlCarousel ) {
            $( '.penci-owl-carousel-slider' ).each( function () {
                var $this = $( this ),
                    $auto = true,
                    $dots = false,
                    $nav = true,
                    $loop = true,
                    $rtl = false,
                    $dataauto = $this.data( 'auto' ),
                    $items_desktop = 1,
                    $items_tablet = 1,
                    $items_tabsmall = 1,
                    $items_mobile = 1,
                    $speed = 600,
                    $item = 1,
                    $autotime = 5000,
                    $datalazy = false;
                if( $('html').attr('dir') === 'rtl' ) {
                    $rtl = true;
                }
                if ( $this.attr('data-dots') ) {
                    $dots = true;
                }
                if ( $this.attr('data-loop') ) {
                    $loop = false;
                }
                if ( $this.attr('data-nav') ) {
                    $nav = false;
                }
                if ( $this.attr('data-desktop') ) {
                    $items_desktop = parseInt( $this.data('desktop') );
                }
                if ( $this.attr('data-tablet') ) {
                    $items_tablet = parseInt( $this.data('tablet') );
                }
                if ( $this.attr('data-tabsmall') ) {
                    $items_tabsmall = parseInt( $this.data('tabsmall') );
                }
                if ( $this.attr('data-mobile') ) {
                    $items_mobile = parseInt( $this.data('mobile') );
                }
                if ( $this.attr('data-speed') ) {
                    $speed = parseInt( $this.data('speed') );
                }
                if ( $this.attr('data-autotime') ) {
                    $autotime = parseInt( $this.data('autotime') );
                }
                if ( $this.attr('data-item') ) {
                    $item = parseInt( $this.data('item') );
                }
                if ( $this.attr('data-lazy') ) {
                    $datalazy = true;
                }
                var owl_args = {
                    loop              : $loop,
                    rtl               : $rtl,
                    margin            : 0,
                    items             : $item,
                    slideBy           : $item,
                    lazyLoad          : $datalazy,
                    navSpeed          : $speed,
                    dotsSpeed         : $speed,
                    nav               : $nav,
                    dots              : $dots,
                    navText           : ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
                    autoplay          : $dataauto,
                    autoplayTimeout   : $autotime,
                    autoHeight        : true,
                    autoplayHoverPause: true,
                    autoplaySpeed     : $speed,
                    responsive        : {
                        0   : {
                            items  : $items_mobile,
                            slideBy: $items_mobile
                        },
                        480 : {
                            items  : $items_tabsmall,
                            slideBy: $items_tabsmall
                        },
                        768 : {
                            items  : $items_tablet,
                            slideBy: $items_tablet
                        },
                        1170: {
                            items  : $items_desktop,
                            slideBy: $items_desktop
                        }
                    }
                };
                if ( $this.hasClass( 'penci-headline-posts' ) ) {
                    owl_args['animateOut'] = 'slideOutUp';
                    owl_args['animateIn'] = 'slideInUp';
                }
                $this.imagesLoaded( function() { $this.owlCarousel( owl_args ); } );
                $this.on('changed.owl.carousel', function(event) {
                    $this.find( '.penci-lazy' ).Lazy( {
                        effect: 'fadeIn',
                        effectTime: 300,
                        scrollDirection: 'both'
                    } );
                });
            } );
        }    // if owlcarousel
    }

Save it, so you’re done step one.

2. Edit the file related_posts.php

After completing step one, you go to soledad/templates/related_posts.php. Open related_posts.php file and add more  data-mobile=”2″   like on this image:

soledad theme related posts mobile

Save and done! Enjoys =)

More for you: Related posts – Code hiển thị bài viết liên quan trong wordpress

- Advertisement -

Để lại bình luận

Địa chỉ email của bạn sẽ không được công bố.

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

4 bình luận
  1. Automatic Wine Opener Nói

    I’m gone to say to my little brother, that he should
    also pay a visit this blog on regular basis to get updated
    from latest gossip.

  2. Jimmy Nói

    I just could not leave your web site before
    suggesting that I really loved the usual info a person supply for your guests?

    Is going to be again incessantly in order to check up on new
    posts Hey there would you mind sharing which blog platform you’re working with?
    I’m planning to start my own blog in the near future but
    I’m having a difficult time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your layout seems different then most blogs
    and I’m looking for something unique. P.S Sorry for being off-topic but I had to
    ask! Woah! I’m really digging the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s tough to get that “perfect balance” between usability and appearance.
    I must say you have done a very good job with this. Additionally,
    the blog loads very fast for me on Safari. Superb Blog! http://vans.com

  3. xoso888 Nói

    Hello, Neat post. There is an issue along with your site
    in web explorer, may test this? IE nonetheless
    is the market chief and a good component to other people will omit your magnificent writing due to this problem.

  4. Consultant Nói

    Howdy! This post could not be written any better! Reading through this post reminds
    me of my previous room mate! He always kept chatting about this.
    I will forward this page to him. Pretty sure he will have a good read.
    Thank you for sharing!