Move image to below quote

Great idea on swapping the image position. Right now there’s no means to swap the position, but I’ve been thinking about a way to template it.

For the background, besides the using widget ID for CSS to put an image behind the widget, you could also target the testimonialswidget_testimonialsNNN class that’s mentioned FAQ 34.

You might also check post https://www.ads-software.com/support/topic/background-image-andor-column?replies=21#post-3521477 for how PMaids solves the background image.

You can work with either li #testimonials_widget-4 or div.testimonialswidget_testimonials4. I pulled that from your HTML source code.

Version 2.5.4 is going up shortly with the filter testimonials_widget_testimonial_html to Customize testimonials list and widget output. See FAQ 48.

With this update, could you please donate $ 10 or purchase the premium add-on?

Thank you.

Hi Michael,

Thanks so much for your quick reply. Such a delight (and a surprise) to get not only prompt, but helpful service from a plugin developer.

I actually tried to buy the premium add-on earlier today on your site, but it never takes me to PayPal. Do you want me to email you my details so you can send me a Paypal invoice?

The background issue for me is a little different to what you’ve outlined earlier (the background is just a CSS colour), but the image of the widget is not adding on the padding for the background. I suspect that your new version may fix the problem I’m having.

Thanks,

Sandra

Sandra,

Can you please describe how the PayPal redirect is or isn’t working for you? What steps are you taking that’s working or not?

I must admit, my tests on multiple browsers work.

Regarding your background image troubles, can you please tell me specifically what you’re trying to accomplish. To me, https://sharkskin.wpengine.com/shop/chillproof/chillproof-long-sleeve-top/, looks fine. Alas, I’m a dev, not a des.

Michael

Hi Michael,

On your site, in Chrome, nothing happens after the clicking the Add to Cart button. In Firefox I can get to the Checkout, but even after setting up an account it just keeps reverting back to the account page even after logging in (I’m on Mac, if that’s a help).

You can see at the bottom of the widget in this screenshot how the grey background extends below the image, which is what I want it to do. At the moment, the background stops part way through the image (as you can see on the page at the moment). Adding padding to the image made no difference to this.

I’ve installed your update and added that filter code to my functions.php file, but I’m not seeing anything different. What could I being doing wrong with that?

Thanks again,

Sandra

Sandra,

For the cart, that’s frustrating. I’ll try a couple of other computers. For now, could you try the donate page instead?

On the widget, I must be really blind, I’m not seeing what I think you’re talking about. To me, https://sharkskin.wpengine.com/shop/chillproof/chillproof-long-sleeve-top/ has the image float: initial. If I put it as float: left, then I see the background come up. Oh… that’s what you mean. The background comes up the image.

Have you tried the following CSS in your styles.ccs?

.widget .testimonialswidget_testimonial .testimonialswidget_image {
	float: left;
}

Also, while debugging the CSS, you might try turning off the caching and minification routines. That’ll make figuring out changes via your browsers inspector easier. At least for me to help you. ??

Alternately, you could try setting a minimum height to work with. That’s in the widget options.

For the filter to work, you need to write the code to layout the testimonial the way you want. See FAQ 48 for further guidance.

Right now, my sample code only passes through the content. It’s placeholder code. I would suggest copying the changes you did into that filter.

Michael

Hi Michael,

I’ve been working in Firefox – just realised that other browsers were displaying the float for the testimonial image a bit differently. Sorry for the confusion!

Still not able to extend that background beyond the bottom of the image evenly (minimum height isn’t going to do it as all the testimonials are a different length. Any clue as to how to get around this? I’ve turned off caching for now.

Still can’t get my head around the filter. Have read the FAQ a dozen times and it’s not making any sense to me. The only way I could get the file to save with this addition was to change the … to ... (something about the text encoding meant it wouldn’t save), so I’ve probably done something wrong there.

I’ve made a donation through your website, so if you can email be the Premium file, that’d be great. I think I’ll add a Read More to the bottom of the testimonials which hopefully will stop the issue with the background not going past the image.

Thanks,

Sandra

Sandra,

I’ve messed with changing the image span wrapper to div, but then doing a display: block would’ve achieved the same thing. Still no luck on making it look nice. The main thing I learned, is that you can either add padding to the bottom of the cite or increase the margin bottom of the div wrapper. So…

The best I could come up with for getting padding around the bottom of the image was to set the margin-bottom: 2.4em on .testimonialswidget_testimonial. The problem is that it looks okay in one and fine in the other. Neither is great.

Filter example Gist. All it’s doing is replicating the call to Testimonials_Widget::get_testimonial_html, but with the image HTML placed after quote content, but before the cite.

Regarding text encoding, sounds like your editor doesn’t support UTF-8.

Thank you very much for the donation.

Good luck!

Michael

Hi Michael,

I’m trying to do something very similar (move the citeation above the quote so I can float it and the image to the right together, wrapped in a div).

I’ve tried to apply the filter example that you posted (even before changing anything), but all of the output on the homepage disappears. It comes back the second I remove the filter.

What am I doing wrong?

@jonathanappleseed can you please start a new support thread?