• Resolved Daniyal Ahmed (a11n)

    (@daniyalahmedk)


    Hey thanks for great plugin.
    I found two minor issues in this plugin when you use this shortcode :

    [sponsors images=”yes” style=”linear” size=”medium”]

    How it looks : https://prntscr.com/9dzyum

    So two fix this issue there are two steps (may be you should include it in next plugin update) ??

    1. As grid is of 5 columns there should be clearfix after 5 items – because when images are not equal it looks weird as in my case.

    I have edited the code in

    /plugins/wp-sponsors/includes/class-wp-sponsors-shortcode.php

    replace the code from line number 59 to :

    // If the style option is set to linear, this view will be used
                if($atts['style'] === "linear") { ?>
                    <div id="wp-sponsors" class="clearfix">
                      <?php $i=1; ?>
                        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                        <?php $link = get_post_meta( get_the_ID(), 'wp_sponsors_url', true ); ?>
                        <div class="sponsor-item <?php echo $size; ?>">
                            <?php if(!empty($link)) { ?><a href="<?php echo $link ?>" target="_blank"><?php }; ?>
                            <?php if($atts['image'] === "yes" OR $atts['images'] === "yes" ){ ?>
                                <img
                                    src="<?php echo get_post_meta( get_the_ID(), 'wp_sponsors_img', true ) ?>"
                                    alt="<?php the_title(); ?>"
                                    >
                            <?php } else { the_title(); } ?>
                            <?php if ( $atts['description'] === "yes" ) { ?> <p><?php echo get_post_meta( get_the_ID(), 'wp_sponsors_desc', true ); ?></p> <?php } ?>
                            <?php if(!empty($link)) { ?></a><?php }; ?>
                        </div>
                        <?php if($i%5==0){
                          ?>
                            <div class="clearfix"></div>
                          <?php
                        }
                        $i++;
                         ?>
                        <?php endwhile; return ob_get_clean(); ?>
                    </div>
            <?php };

    2. Now as you are using :

    #wp-sponsors div.sponsor-item.medium {
        max-width: 20%;
    }

    also :

    #wp-sponsors div.sponsor-item {
        margin: 0 20px 20px 0;
        float: left;
    }

    when creating a grid there should be no margin to out element wrapper otherwise it get out from grid as increased from 100% (because here we are using 20%) so there might be just padding to outter element wrapper, i have added this in my CSS

    #wp-sponsors div.sponsor-item {
        margin: 0 !important;
        padding: 20px !important;
    }

    That’s it ??
    Thank you.

    https://www.ads-software.com/plugins/wp-sponsors/

Viewing 1 replies (of 1 total)
  • Hey!

    There definitely are some issues with the shortcode and the grid layout and I haven’t found a good solution that is generic enough to work well in all themes and with all image sizes.

    Maybe I should ‘enforce’ a certain grid size (like 5 in your example). I’ll run this through some testing and if it all works out you can expect this in an update soon ??

    Cheers
    Jan

Viewing 1 replies (of 1 total)
  • The topic ‘Logo in linear not displaying correctly in grid’ is closed to new replies.