Support » Plugin: HMS Testimonials » How to format size and placement of photos

  • Resolved DaveKinskey

    (@davekinskey)


    I am working on building a testimonials page at but I cannot get the photos to format properly, plus have some layout questions. By the way, at first I couldn’t get the photos to appear because I didn’t see anything in the documentation that mentioned I needed to build my own template to include images, not just upload them and check the box that says “display” (My template is: Photo / Subject / Testimonial).

    Photo sizes and aspect ratios: I’m having problems with the photo sizes. I use a responsive format on my site, and I’d like the photos to show as their actual size in pixels when viewed on a full screen, then shrink proportionally for smaller view screens. I have many photos of different widths and heights from testimonials that I’m recreating in WordPress from my old html page. Is the percentage only to set the photo width to be a set percentage of the page or column width? That’s what it seems to be. I thought 100% would display the photos as 100% of their actual pixel dimensions. Is there a solution?

    Layout: Ideally, I’d also like to float the photos to the left side of the quotes so there’s not a lot of white space and excessive scrolling required. Is there a way to do that?

    Secondary question: Is it possible to not allow people to submit testimonials online? I didn’t see where to choose that as an option to display or not display it either way. Thanks.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Jeff K

    (@kreitje)

    Hey Dave,

    1. You have to add it to a template. Templates allow you to hide or show different parts of a testimonial. Images are not enabled by default.

    Navigate to Testimonials -> Templates. Assuming you aren’t changing the template id, click “Edit” on the row with an id of 1. Drag “Image (System)” from the Unused Items to the Active Items column.

    2. Visitors cannot submit testimonials unless you added the shortcode to a page or post.

    To disable logged in users from submitting testimonials go to Testimonials -> Advanced. Make sure option #2 (“Minimum role to add/edit testimonials”) is set to Administrator.

    Let me know if this is what you are looking for.

    Jeff

    Thread Starter DaveKinskey

    (@davekinskey)

    Hi, Jeff. WOW! You’re so fast in responding! 🙂 After submitting my origianl post, I had discovered the need for a new template and edited my original post with different questions. Lo and behold, you already answered the original post by the time I finished my revisions! THANKS.

    Could you please read the edited version with the new questions about photo sizes and layout? Thanks so much. The page is http://locatehome.com/home-buyer-testimonials/

    Right now I have photos set to 10%.

    Plugin Author Jeff K

    (@kreitje)

    It adds the height and width to the image. If you set both width and height to 0 in the settings you can control the width and height with your regular CSS. You will probably want to go this route since you are using a responsive theme.

    Jeff

    Thread Starter DaveKinskey

    (@davekinskey)

    WOW! Again, blazingly fast support from you! 🙂 Setting image size to 0% did the trick for sizing.

    Is there a way to float the testimonials to the right of the photos, to avoid the large amount of white space to the right of photos on full screen displays? It looks okay on my iPhone since it pushes the quotes under each photo and the amount of white space isn’t bothersome.

    I’m loving your plug-in and I’m amazed by how fast you respond to questions! You’re a great developer. Thanks so much!

    Plugin Author Jeff K

    (@kreitje)

    Thanks for the compliments.

    Each testimonial is wrapped inside a div with a class of .hms-testimonial-container. Each item except for the image is wrapped in a container class as well to give you a lot of leeway with your styling. Therefore you can do something like below in your themes style.css file.

    .hms-testimonial-container .testimonial {
    float:right;
    }

    Depending on your setup, you might have to the float the image as well. You mileage may vary.

    /** Yes the image for your testimonial has an image class. This is in case your actual testimonial has an image inside it. **/
    .hms-testimonial-container .image {
    display:block;
    float:left;
    }
    .hms-testimonial-container .testimonial {
    float:left;
    }
    Thread Starter DaveKinskey

    (@davekinskey)

    I greatly appreciate your continued help, Jeff. 🙂 Unfortunately, keeping the image outside of the actual testimonial, and using a template in the order Image / Source / Testimonial, I still cannot get the testimonials to float to the right of the image and author when using in my child them the custom CSS you suggested.

    .hms-testimonial-container .testimonial {
    float:right;
    }

    The testimonials still push underneath the photo and author in full screen, with white space in the rest of the width to right of the photo and author.

    Plugin Author Jeff K

    (@kreitje)

    Here is what I suggest.

    In the template, move source to below the testimonial. Next float only the image to the left. I would add a margin-right to the image as well so the text isn’t right up next to the image.

    This will get you:

    — image — Testimonial content here
    — image — Author here

    You will have to update your CSS to clear the floating issue that will happen with the image though.

    Thread Starter DaveKinskey

    (@davekinskey)

    Hi, Jeff. I’m certainly not a CSS expert and it must be that I need a refresher course on basic floats, because I still wasn’t able to achieve having the image on the left, the source (author) directly below it, and the testimonial text floated completely to the right or wrapping around both the image and the source (author). For anyone else with similar limitations in CSS training, this is the work-around that seems to work out fine for me. 🙂

    I made a template in HMS Testimonials with only the image and then the testimonial text. I included the author simply as text, within the testimonial … at the end, in bold italics (I gave up on putting the author name directly under the image, with the testimonial text completely to the right or wrapping around both the image and the source (author). For anyone else with similar limitations in CSS coding, this was my work-around in the custom CSS for my child theme (Note: I added a light yellow background color to the testimonial text):

    .hms-testimonial-container {
    float:right;
    }
    .hms-testimonial-container .image {
    float:left;
    margin-right:15px;
    margin-bottom:5px;
    margin-top:10px;
    }
    .hms-testimonial-container .testimonial {
    background-color:#FDFDDF;
    }

    Jeff, I would like to thank you profusely for all of your help and your exceptionally quick responses to my support questions. You are an awesome developer and a great person! Thank you again! 🙂

    Plugin Author Jeff K

    (@kreitje)

    Hey Dave,

    I am glad to see you found a suitable solution for you. Thank you for sharing how you fixed it. I try to allow as much control over the design with CSS and templates which bites me from time to time.

    I didn’t look to see if you added in any additional CSS for the responsive portion but it looks good all the way down to a mobile size.

    Thanks for the compliments and the review.
    Jeff

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to format size and placement of photos’ is closed to new replies.