WordPress.org

Forums

GC Testimonials
Display in 2 columns rather than 1 (22 posts)

  1. ozitsupport
    Member
    Posted 1 year ago #

    Love this plugin, would love to be able to split the display of the testimonials into 2 columns on a page rather than 1 single column.

    Can this be done and if so how would this be done?

    Thanks!

    https://wordpress.org/plugins/gc-testimonials/

  2. Chris Dillon
    Member
    Posted 1 year ago #

    That would happen in your theme, not the plugin.

  3. Tech-NO-Babble
    Member
    Posted 1 year ago #

    Chris, I know you have given great advice on this plugin, but I don't follow how my theme is responsible for displaying the testimonials into 2 columns. If I am missing the obvious, please let me know what I am missing. I was happy with the format the plugin uses, but one of my clients wants to see two columns of testimonials.

  4. Chris Dillon
    Member
    Posted 1 year ago #

    Challenge accepted! I will have a tutorial ready in a few days.

  5. Tech-NO-Babble
    Member
    Posted 1 year ago #

    I look forward to it!

  6. Tech-NO-Babble
    Member
    Posted 1 year ago #

    Chris,

    I have seen you post more about this plugin than the author. Have you considered forking it and calling it CD Testimonials?

  7. Chris Dillon
    Member
    Posted 1 year ago #

    It's been on my project list since December :)

    It occurred to me that saying "that would happen in the theme" may have been misleading. Obviously, your theme, unless customized, would have no idea what plugins are installed. And definitely the plugin could be modified to display two columns and other templates, for that matter.

    But for most cases, some simple CSS tweaks can do the job. And the best place for that is in the theme, especially with this plugin.

    So here's the start of a tutorial on displaying two columns:
    http://www.wpmission.com/tutorials/two-columns-in-gc-testimonials/

    Comments and feedback are always welcome.

  8. Tech-NO-Babble
    Member
    Posted 1 year ago #

    Fantastic support!

    Of course reading your tutorial, I realized the error of my ways, I was reading through the testimonial.php and thought the layout was in tables.

    Your approach to this seeming simple fix via CSS was very professional and I appreciated the lack of "talking down" that happens often on WordPress support website.

    Thanks again for your fantastic support.

    FYI, great to know it has been on your project list. I would like signup for beta testing or a specific newsletter/mailing list for this project.

    Alex

  9. Chris Dillon
    Member
    Posted 1 year ago #

    Thanks Alex! Always nice to hear when I've been able to help.

    In case you read the tutorial last night, I did update it this morning.

    I really appreciate your interest in my fork of this. I will let you know as I get the ball rolling.

  10. Tech-NO-Babble
    Member
    Posted 1 year ago #

    I read it this morning and I clipped it to my EverNote for future reference!

  11. ozitsupport
    Member
    Posted 1 year ago #

    Chris,

    You are a legend!! Works like a charm. Will have a little play and expand the width of the testimonials container, but that is just magical!

    Thanks again, really appreciate it!

    Rob

  12. Chris Dillon
    Member
    Posted 1 year ago #

    Thanks Rob! You're too kind.

    We should thank Alex for presenting the challenge. I didn't think two columns would look good but now I like it. Keep those ideas coming.

  13. Tech-NO-Babble
    Member
    Posted 1 year ago #

    Chris, that is funny. While I was waiting for your tutorial, I thought about how the testimonials would look and 2 columns and told my client, we are waiting on the programmer and BTW we don't think it will look good, might be too busy.

    Then I saw your tutorial, and was like..damn...that looks fantastic! So I snipped part of the page and sent it as an image to him. Waiting to see what he says to do next.

    Imagine my surprise, I had never setup the form page, so I didn't know about the web links or the images!

  14. Chris Dillon
    Member
    Posted 1 year ago #

    That's the exact gap I aim to fill with WP Mission: plugin demos that let you explore all the possibilities the developer imagined and some they didn't. And I think some "Challenge Accepted" tutorials will be fun.

  15. Tech-NO-Babble
    Member
    Posted 1 year ago #

    OK I have new Challenges for you. Contact me for details. Contact link on website, technobabble.us

    Thanks Chris

  16. ozitsupport
    Member
    Posted 1 year ago #

    Here is a challenge,

    Based on the css mod you suggested, my client wanted the testimonials in 3 columns all on 1 page (so tweaked it and all working perfectly).

    However, the responsiveness of the testimonials displayed on iPhones etc, its all squished.

    Challenge is what do I need to tweak to ensure the responsiveness remains?

    Cheers, link to the testimonials page below so you can see what I mean.

    http://jesign.com.au/testimonials/

  17. Chris Dillon
    Member
    Posted 1 year ago #

    Magazine testimonials! That looks really nice. And it gives me a lot of ideas for new layouts and effects.

    Challenge accepted! However, to maintain readability as we work down to the smallest screen, at some point 3 columns will have to give way to 2 columns which will have to give way to 1 column. Would you agree?

  18. ozitsupport
    Member
    Posted 1 year ago #

    HAHAHAHA!!!

    Yep, sounds perfect! I would definitely agree with that!

    Glad there are some more ideas floating around now, should enhance it nicely!

  19. Tech-NO-Babble
    Member
    Posted 1 year ago #

    Using the Responsive Theme (cyberchimps) I could add the included grid css to allow the columns and the columns I believe would have dropped below each other as the media screen got smaller.

    When I was using 2011 I think, there was a plugin that did columns/grids. Something else to look at.

  20. Chris Dillon
    Member
    Posted 1 year ago #

    Design is not my strong suit and I definitely have a ton to learn about responsive so if someone more skilled wants to help, please jump in!

    If using CSS columns, here is a quick-n-simple approach that solves the immediate problem of squished columns.

    /* Responsive */
    @media only screen and (min-width: 768px) {
    	/* tablets and desktop */
    	#testimonials_container {
    		-moz-column-count: 3;
    		-moz-column-gap: 0px;
    		-webkit-column-count: 3;
    		-webkit-column-gap: 0px;
    		column-count: 3;
    		column-gap: 0px;
    	}
    }
    
    @media only screen and (max-width: 767px) {
    	/* phones */
    	#testimonials_container {
    		-moz-column-count: 2;
    		-moz-column-gap: 0px;
    		-webkit-column-count: 2;
    		-webkit-column-gap: 0px;
    		column-count: 2;
    		column-gap: 0px;
    	}
    }
    
    @media only screen and (max-width: 767px) and (orientation: portrait) {
    	/* portrait phones */
    	#testimonials_container {
    		-moz-column-count: 1;
    		-moz-column-gap: 0px;
    		-webkit-column-count: 1;
    		-webkit-column-gap: 0px;
    		column-count: 1;
    		column-gap: 0px;
    	}
    }

    This snippet from CSS Tricks provides some deeper coverage but I agree with this layout-focused approach.

    I may work this into the tutorial at some point but I'm actually working on a fork of GCT at the moment and I would rather build this capability into my version.

  21. ozitsupport
    Member
    Posted 1 year ago #

    Hey Chris,

    Wonderful, thank you for that.

    I found that it was still displaying 3 columns on iPad, not dropping to 2 (portrait, landscape still shows 3 which is fine as the screen width is big enough), so decided to tweak a little to make it work 2 columns in portrait, and also a tweak for iPhone.

    /* Responsive */
    @media only screen and (min-width: 769px {
    	/* tablets and desktop */
    	#testimonials_container {
    		-moz-column-count: 3;
    		-moz-column-gap: 0px;
    		-webkit-column-count: 3;
    		-webkit-column-gap: 0px;
    		column-count: 3;
    		column-gap: 0px;
    	}
    }
    
    @media only screen and (max-width: 768px) {
    	/* phones */
    	#testimonials_container {
    		-moz-column-count: 2;
    		-moz-column-gap: 0px;
    		-webkit-column-count: 2;
    		-webkit-column-gap: 0px;
    		column-count: 2;
    		column-gap: 0px;
    	}
    }
    
    @media only screen and (max-width: 640px) and (orientation: portrait) {
    	/* portrait phones */
    	#testimonials_container {
    		-moz-column-count: 1;
    		-moz-column-gap: 0px;
    		-webkit-column-count: 1;
    		-webkit-column-gap: 0px;
    		column-count: 1;
    		column-gap: 0px;
    	}
    }
    
    #testimonials_container .result {
    	display: inline-block;
    }

    Hope you don't mind me posting!

  22. Chris Dillon
    Member
    Posted 1 year ago #

    Of course I don't mind, it's your thread after all!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • GC Testimonials
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.