WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
Meteor Slides integration with Portfolium (12 posts)

  1. bolide
    Member
    Posted 2 years ago #

    I seem to be treading a path already explored by Ravi Swami (www.raviswami.com) and working on integrating Meteor Slides with Portfolium

    Yes, it works. I am having problems understanding how to beat the CSS into submission

    When adding a slideshow to a Portfolio page it appears & works. But it sits left and displaces the text above or below depending on the order you enter the shortcode & text in the Portfolio edit box. The slideshow "should" sit right with the text left, as in a standard Portfolio page

    I don't know enough about how the various templates & CSS elements interact to find out why

    This works:
    http://www.raviswami.com/blog/?portfolio=frosties-bg-design

    This doesn't:
    http://www.bn1photo.co.uk/portfolio/light-3/

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    I think on raviswami.com the slideshow is part of the template, not part of the page content, it is in a different column which is already setup in the CSS.

    But to do this you would have to edit some template files and have the slideshow specified dynamically using CSS. It might be easier to create a one column fill width page template if one doesn't already exist, and then you would only need to style the slideshow to float to the right within the same column as the rest of the content. This way you can still manage the slideshows through the page content using the shortcode.

  3. bolide
    Member
    Posted 2 years ago #

    OK, I understand the principle. I can create a custom single-portfolio-meteor.php template, put it in my Child Theme folder and create a new Portfolio post based on that template. I thought I could select templates in the post editor but it seems I can't. That's OK, I can substitute my new template, call it single-portfolio.php and use that exclusively

    The template pulls the data into the following CSS:

    <div class="container clear">
    <div class="content">
    <div id="show">

    I can see the relevant CSS in style.css and meteor-slides.css. I just don't have the knowledge of CSS to work out what is going on

    I could do this when websites were built in tables. But how the heck do you edit CSS??

    Thanks for your help. I think I may give up on this one

  4. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Yeah, you can only select the template manually for pages, not posts. But it will be easier to manage if you edit the template file so that the customizations applies to all the portfolio posts.

    All you should need to do in your single-portfolio.php file is remove the second column, "content", this is what the markup looks like, might be a bit different in the PHP file:

    <div class="content">
                <div id="show">
                                </div><div id="show_nav"></div>
            </div>

    Then you just need to edit the CSS for the "l_col" column in your theme's style.css file. Find this rule:

    .l_col {
        float: left;
        margin-left: 15px;
        width: 145px;
    }

    And edit it like this:

    .l_col {
        float: none;
        margin-left: 15px;
        width: 975px;
    }

    Then just add a new rule to float the slideshow to the right:

    .meteor-slides {
        float: right;
        margin: 0 0 0 20px;
    }

    But for the content of the post to wrap to the left of the slideshow, make sure that the slideshow shortcode is first before the rest of the content.

    To better understand how the page is laid out and how the CSS is styling the markup, I highly recommend using Firebug, it's a big help!

  5. bolide
    Member
    Posted 2 years ago #

    Many thanks for this help. I realise CSS issues with other people's themes are not your concern

    I have a basic layout up & running and will be implementing it soon

    There is a Firebug-like option in Safari which has been very useful to me and that, combined with BBEdit, has allowed to to be a bit more confident & productive in CSS

    Thanks again

  6. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No problem!

  7. pau__
    Member
    Posted 2 years ago #

    Hi Jleuze,

    Your plugin is really awesome! Nice job!
    But i have two questions:

    1.
    I'm doing something wrong. Sometimes and some slide, prev/next buttons appear on the middle of the slide, in other case, appear on the top, as if they doesn't recogniser css or i don't know what.

    here good:
    http://www.paubarrena.com/

    here no:
    http://www.paubarrena.com/gay-pride-barcelona-2011/

    2.
    I'm using qTranslate plugin to translate my site.
    I want to add a description/ caption on my picture. I've already added the code. But, do you know if there is some way to show different caption by different languages?

    I hope you can solve my problems and i doesn't take you a lot of time!
    Thank you very much!

  8. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    The slideshow specified in the second one is "gay_pride", double check and make sure that is the slideshow slug and not the title, the slideshow will break if the title is used instead.

    You would have to load a different slideshow for each language, then the slides for each slideshow could have captions in a different language.

  9. pau__
    Member
    Posted 2 years ago #

    Hi Jleuze,

    I check it out the problem about the buttons next/prev and just happen sometimes! Usind the same and different title and slug. I don't know. I've created a new slideshow and it doesn't happen. 5 minutes later, i've created another one, as the same way, and it's happen! WTF? i don't understand anything... :-O

  10. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Ah, I see the problem, there are code tags wrapped around the shortcode on this page. This happens when the shortcode is copied from a page and pasted into the visual editor. Switch to the HTML editor and either remove the code tags or remove the whole slideshow and paste or type it into the HTML editor.

    You can use the visual editor, but you have to type in the shortcode so that the code tags aren't copied.

  11. pau__
    Member
    Posted 2 years ago #

    ohhhh!!!! Thank you genius! Buff! I got crazy! I didn't know why!
    Thank you very much!

  12. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    You're welcome!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic