WordPress.org

Ready to get started?Download WordPress

Forums

Portfolio Slideshow
[resolved] text does not wrap around slideshow (11 posts)

  1. michael@mccrystal.net
    Member
    Posted 2 years ago #

    Have inserted several slideshows into a page to compare functionality. Despite some other good features, this one does not allow text to wrap around the image which is a deal killer.

    Also I am not sure the author's use of the word "wrapping" is consistent... in some places "wrapping" seems to refer to what I normally think of as "looping" i.e. the last slide in a show is followed by a repeat cycle starting from the first slide.

    http://wordpress.org/extend/plugins/portfolio-slideshow/

  2. Dalton
    Member
    Plugin Contributor

    Posted 2 years ago #

    Hi Michael,
    If you'd like to wrap text around the slideshow, just apply some simple CSS:

    http://demo.madebyraygun.com/blog/2012/02/20/portfolio-slideshow-text-wrap/

    The code I used for this is

    .slideshow-wrapper {
    	width: 350px;
            float:left;
            display: inline;
    	margin-right: 20px;
    }

    The slideshow is a block level element, you can do absolutely anything you want with it using CSS.

    You might be right about the use of the word "wrap" to describe the looping behavior. I'll consider changing that in a future version.

    Cheers,
    Dalton

  3. rmgross1
    Member
    Posted 1 year ago #

    @michael -- yeah, it's a deal breaker for me, too. Otherwise, it's a nice slideshow... Have you found one that allows for text-wrapping? Please post if you have -- I'm still looking for one...

  4. Dalton
    Member
    Plugin Contributor

    Posted 1 year ago #

    What deal breaker? The slideshow can be floated, it's simple CSS.

  5. rmgross1
    Member
    Posted 1 year ago #

    Yes, but I want to use the same slideshow in different positions on different pages. I don't want to make a static change to the slideshow, which is what I'd be doing if I changed the CSS.

  6. Dalton
    Member
    Plugin Contributor

    Posted 1 year ago #

    The plugin supports a "class" attribute. So if your shortcode looks like this:

    [portfolio_slideshow class="left"]

    Then you could add the following CSS:

    .slideshow-wrapper.left {
    width: 350px;
    float:left;
    display: inline;
    margin-right: 20px;
    }

    That would only apply to slideshows with the "left" class added.

    Here's the updated demo: http://demo.madebyraygun.com/blog/portfolio-slideshow-text-wrap/

  7. rmgross1
    Member
    Posted 1 year ago #

    Right, and then I'd have to write CSS for floated-right slideshows, centered slideshows, etc. Actually, I just found some code (on another forum) that defines a table in which you put the table dimensions and then embed the slideshow shortcode, as follows:

    <table style="margin-right: 5px; height: 350px; width: 280px;" border="0" align="left"><tbody><tr><td>[portfolio_slideshow id=xx]</td></tr></tbody></table>

    Seems to be working really well, except that I have some centered text on the page that keeps shifting as the images change. Have to work on that...

    Thanks!

  8. mmasb
    Member
    Posted 1 year ago #

    I'm also trying to get text to wrap around my Portfolio Slideshow. I have this:

    <p align="right">[portfolio_slideshow showcaps=true pagerpos=disabled]</p>

    I added what you listed above:
    .slideshow-wrapper {
    width: 350px;
    float:left;
    display: inline;
    margin-right: 20px;
    }

    but it didn't work. Should your code be INSIDE the <p </p> or OUTSIDE???

  9. gheffron
    Member
    Posted 1 year ago #

    This is a great thread -- Dalton's input is very helpful. But I've run into an issue. I've got the text wrapping to a single width (280px), but can't seem to get the plugin to recognize classes so that I can create another width (380px - for wide shots).

    This is my CSS thus far:

    .slideshow-wrapper {
            width: 290px;
            float:left;
            display: block;
    	margin-right: 0px;
    }
    
    .slideshow-wrapper.wide {
            width: 380px;
            float:left;
            display: block;
    	margin-right: 0px;
    }

    My shortcode on the page with the wide images is:

    [portfolio_slideshow class="wide"]

    My page is at http://wfmusic.org/site/ I'm a little at a loss. I have the latest version of the plugin.

    Any insights? Thanks ahead of time.

  10. Dalton
    Member
    Plugin Contributor

    Posted 1 year ago #

    Hi Gheffron,
    I just checked, and I apologize for the misinformation - the "class" attribute is in Portfolio Slideshow Pro (the premium version) only. There's really no good reason for that except that the free version hasn't been updated in a little while, I'll try to remember that the next time I update the plugin.

    It should be easy enough to work around this, just wrap the slideshow in a div, and float that instead. I'm pretty sure if you did this:

    <div class="wide">
    [portfolio_slideshow]
    </div>

    And then added this CSS to your theme:

    .wide {
            width: 380px;
            float:left;
            display: block;
    	margin-right: 0px;
    }

    That should have the same result.

    Again, I'm sorry for the mixup! I only ever use the Pro version of the plugin so sometimes I forget which features are in which.

    Dalton

  11. gheffron
    Member
    Posted 1 year ago #

    Thanks Dalton! That worked perfectly! So easy.

    And thanks for such a great plugin!

    Cheers,
    Greg

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic