WordPress.org

Ready to get started?Download WordPress

Forums

Testimonials by Aihrus
[resolved] Image Position (11 posts)

  1. rboudwin
    Member
    Posted 1 year ago #

    How do I move the image to the left of the author's name? I have the premium version. Is there documentation for me to find this information? Thank you!

    http://wordpress.org/extend/plugins/testimonials-widget/

  2. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    In general, it's CSS. Have you tried…

    .testimonialswidget_testimonial .testimonialswidget_image {
        float: right;
    }

    Got a URL to view to help you?

  3. rboudwin
    Member
    Posted 1 year ago #

    I added the CSS that you recommended. Not sure why, but my changes sometimes take a while to reflect even though I refresh and clear the cache. So, it may have worked, and I just can't see the changes yet.

    I was looking to change the layout by placing the image to the bottom left of the author info, so there would need to be two div's (left image and right author). I'm having trouble finding the testimonials-widget.css file in the directory structure.

    Thank you!

  4. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    If your changes take a while to reflect, you might need to clear your browser cache to load the fresh files on the next page load.

    You might also try changing the CSS for the cite block to move it over.

    If you really want to redo your layout, see FAQ 51.

    Got a URL to view to help you?

  5. rboudwin
    Member
    Posted 1 year ago #

    Sorry, I meant to post the URL earlier. Here it is:
    http://Www.dragonflythinking.com

    Thank you!

  6. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    After looking and fiddling around with the CSS, if you're okay with the image and cite at top, you could float: right the q tag. Then restore the CSS for the image.

    Otherwise, I'm afraid you either need more CSS help than I can provide or to follow FAQ 51 in reorganizing the HTML layout.

  7. rboudwin
    Member
    Posted 1 year ago #

    Thank you. I was hoping I could make a simple modification to the file testimonials-widget.css (which I haven't been able to locate) or the <div>s in the html - nothing complicated since it should be a simple layout change. I'll research other options. Thanks so much for the time you've given me.

  8. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    I understand. Off the top of my head you could do something like the following, just add to your theme's functions.php file.

    add_filter( 'testimonials_widget_get_testimonial_html', 'my_testimonials_widget_get_testimonial_html', 10, 13 );
    
    function my_testimonials_widget_get_testimonial_html( $html, $testimonial, $atts, $is_list, $is_first, $widget_number, $div_open, $image, $quote, $cite, $extra, $bottom_text, $div_close ) {
        // do stuff… see Testimonials_Widget::get_testimonials_html for default processing
            $html                   = $div_open
                . $quote
                . $image
                . $cite
                . $extra
                . $bottom_text
                . $div_close;
            return $html;
    }
  9. rboudwin
    Member
    Posted 1 year ago #

    Wow, Michael! I didn't expect that from you. Thank you so much.

    I feel like my hands are tied behind my back, and I'm pecking out the keys with my teeth! That's how frustrated I am not knowing PHP. I'm a ColdFusion developer. I suppose I need to take the time to understand it if I'm going to be working with WordPress. I see that you're rearranging the order. How do I get the $cite to the right side of the $image? Is that any easy fix? I would think this would all be done in the div and css. I'm not understanding how this function overrides/controls the positioning.

  10. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    I'm decent with CSS, but I don't know of a way to drop the image downward while having the quote content flow correctly. As in the quote content covers up the space.

    The code above is a filter which allows you to change the layout. If you read the code in function my_testimonials_widget_get_testimonial_html, it'll even tell you what to look for in Testimonials Widget for what the original looks like and you can adjust HTML and CSS further.

    FYI - I fully understand shifting technologies. I'm having to pick up Drupal, OrangeHRM and TYPO3 Flow. Ugh… My brain hurts. :)

  11. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Oh, for the image and cite, float: left; and float: right respectively for each should work. Ask you designer for further help or Google about CSS float.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.