WordPress.org

Ready to get started?Download WordPress

Forums

Portfolio Slideshow
Is it possible to center every image? (11 posts)

  1. akkw2n
    Member
    Posted 3 years ago #

    I tried <center></center> but only center the pev/next button and the widest image.

  2. Dalton
    Member
    Plugin Contributor

    Posted 3 years ago #

    Howdy! Someone posted some code in the forums a couple of weeks ago, you should give that a try: http://wordpress.org/support/topic/plugin-portfolio-slideshow-center-the-slideshow?replies=1#post-1758483

    Cheers,
    Dalton

  3. Dalton
    Member
    Plugin Contributor

    Posted 3 years ago #

    Whoops, duplicate posts!

  4. Helsinki
    Member
    Posted 3 years ago #

    I tried with that code, though it's a little different to your own code, and it's not clear which css to modify - style.css or portfolio-slideshow.css, as both seem to have an influence on the layout. I've tried various combinations and none seem to work. In fact, there was originally no div for div.portfolio-slideshow img, but it's been added in the new code.

    Anyhow, centering is a basic function for this plugin, so it would be nice to see it incorporated or a more tested workaround made available through this forum. It could be an excellent plugin that really fills a gap in WordPress with this basic functionality added.

  5. Dalton
    Member
    Plugin Contributor

    Posted 3 years ago #

    Everyone has "just one feature" that would make the plugin perfect for them. Unfortunately I can't keep up with them all. Centering is hard, as every theme is different and what works for some does not work for others (as you have seen). It's best done in your theme's style.css file.

    You may want to give WordCycle a try: http://wordpress.org/extend/plugins/wordcycle/

  6. Helsinki
    Member
    Posted 3 years ago #

    :) Dalton, with all due respect, you are right that everyone wants a feature to suit them, but centering an image in the container is not really a 'specialist' feature, it's a basic, and that's why several people have asked for it. It just looks silly when it defaults to the left margin. People are not used to it.

    But thanks for the reply, and I'll check out wordcycle. I realise it's not your fault that 'centering' is so difficult, but surprised that such a basic formatting feature has become so complicated with WordPress.

    Best regards
    Mark

  7. Dalton
    Member
    Plugin Contributor

    Posted 3 years ago #

    Hey Mark,
    The problem isn't really WordPress - anyone with any basic knowledge of CSS should be able to center something on a page. The issue is trying to do it automatically with a plugin, in a way that works for everyone, because I have no way of knowing how large your images are. But you should be able to do it in your style.css quite easily, like so:

    div.portfolio-slideshow, div.slideshow-nav {
    	width: XXpx;
    	margin: 0 auto;
    }

    Change XX to the width of the images in your slideshow and add this to the bottom of your theme's style.css and you should be in business.

    Dalton

  8. akkw2n
    Member
    Posted 3 years ago #

    Thanks alot for replies, I will try it later today.

  9. Helsinki
    Member
    Posted 3 years ago #

    Hi Dalton
    Thanks for your time and attention on this. I did try the solution you gave, but it didn't work for my theme Atahualpa. That theme has very many theme options and so there might be conflicts in trying to resize via CSS.

    Anyhow, I did find an alternative solution that fitted to my needs. I had quite large pictures, and none with a width smaller than 600px, so in the media settings page of WordPress, I reset the max width of the medium thumbnails to 600 and left the height box empty. I then used the Regenerate Thumbnails plugin to go through the library of image attachments and resize them.

    This means the width on all the pictures is now the same, only the vertical dimension changes, which I'm happy with.

    I can then position the slideshow on the page by changing the width of the main div:
    div.portfolio-slideshow {width:615px; margin: 0 auto;}

    I adjusted the position of the thumbs under the picture by setting a fixed width in this CSS, and adjusting it to suit the minimum number of images in a post (four in my case):
    div.slideshow-thumbs{width:450px;margin: 0 auto;}

    I also added a little top margin to the thumbs so that they don't touch the bottom edge of the main picture:
    div.slideshow-thumbs img{width:75px;height:75px;margin-top: 15px;}

    I think the reason the previous solutions weren't working for me was that i had images of different widths.

    Thanks again for your suggestions.

  10. Dalton
    Member
    Plugin Contributor

    Posted 3 years ago #

    If anyone is still looking to center slideshows with images of various widths, this feature has been added to the premium version of the plugin. It should work for just about any theme & all image sizes: http://madebyraygun.com/blog/2011/centering-slideshows/

  11. OneHorseStudio
    Member
    Posted 2 years ago #

    Figured out a pretty simple fix:

    .portfolio-slideshow {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    Add this to your child theme or however you customize the css.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic