How to format size and placement of photos

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

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 https://locatehome.com/home-buyer-testimonials/

Right now I have photos set to 10%.

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

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!

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;
}

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.

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.

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! ??

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