Meteor Slides integration with Portfolium

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.

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

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!

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

No problem!

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:
https://www.paubarrena.com/

here no:
https://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!

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.

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

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.

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

You’re welcome!