Support » Plugin: Portfolio Slideshow » [Plugin: Portfolio Slideshow] text does not wrap around slideshow

  • Resolved michael@mccrystal.net

    (@michaelmccrystalnet)


    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/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor Dalton Rooney

    (@daltonrooney)

    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

    rmgross1

    (@rmgross1)

    @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…

    Plugin Contributor Dalton Rooney

    (@daltonrooney)

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

    rmgross1

    (@rmgross1)

    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.

    Plugin Contributor Dalton Rooney

    (@daltonrooney)

    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/

    rmgross1

    (@rmgross1)

    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!

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

    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.

    Plugin Contributor Dalton Rooney

    (@daltonrooney)

    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

    Thanks Dalton! That worked perfectly! So easy.

    And thanks for such a great plugin!

    Cheers,
    Greg

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Plugin: Portfolio Slideshow] text does not wrap around slideshow’ is closed to new replies.