WordPress › Support » [Plugin: Meteor Slides] Positioning slide show

ravalde
Member
Posted 1 year ago #

Hi first can meteor slides be rapped with a div as I can not get them to position correctly I have followed the online tutorial exactly on a local site and the slides same as used on the tutorial sit about 50px indented from the left. I tried applying a div to the slideshow but it does nothing.
Plus how do you make another slide show instruction video doesnt show this
JLeuze
Member
Posted 1 year ago #

Hi, you could be able to style what you need to on the main meteor-slideshow div without needing to add new ones.

How you do this would depend on your theme, but to over ride the plugin's stylesheet, you'll want to use a custom stylesheet.

Here is some documentation on setting up multiple slideshow.
ravalde
Member
Posted 1 year ago #

Thanks for the reply but im a visual person i've read the instructions and the whole thing has confused me wish there was a tutorial on how to create different slideshows. At the moment I cant even move anything with a div. I thouhght this was going to be a simple plugin but its way to complex for me. But Hey its free and guys like you do need some credit for trying. Think I'll try something a bit easier that I can wrap in a div and position, at the moment I have no idea why I cant move or position it. Thanks again
JLeuze
Member
Posted 1 year ago #
Sorry to hear that you are having problems. I am planning to post some more video tutorials in the near future, but I need to make a few more changes to the plugin first.

I'm afraid I can't debug your layout issue without seeing the site. If you can get you local site onto a live dev server and send me a link, I'd be happy to help you get the slideshow to layout properly.

But you can certainly wrap an extra dive around the slideshow if you need or want to, it won't affect the slideshow any.

As for the multiple slideshows, not let them frustrate you :) The slides are just like posts, and the slideshows are just categories for the slide posts.

So if you have a slideshow on the home page and another on the about page. You just create two slideshows, one called "About", and one called "Home".

Then you should be able to add the slides to those slideshows just as you would posts to a category.

Then you just need to specify a slideshow when you add the slideshow to your page. Like of you added a slideshow to the content of your about page, it might look like this:
```
[meteor_slideshow slideshow="about"]
```
bbjaze
Member
Posted 1 year ago #

Are there detailed instructions for inserting this plugin into the WP Weaver 2010 header code?
JLeuze
Member
Posted 1 year ago #
It should be pretty easy to add a slideshow to your header using WP Weaver.

In the WordPress admin, go to Appearance -> 2010 Weaver -> Advanced Options, On the Advanced Options tab, there is a Site Header Insert Code section.

In that textarea, you can enter the Meteor Slides shortcode to add a slidshow:
```
[meteor_slideshow]
```
You will probably need to change some of the Main Options settings to remove the title, description, and other content if you want a full width header.
bbjaze
Member
Posted 1 year ago #

Thank you for the speedy (and clear) reply. I inserted the code per your instructions, but when I did, the slideshow header was added to the site, but it didn't replace the old one--it was simply positioned on top of the old one (so now there are two headers, one active and one static). Also, I had already installed the "Featured Articles" plugin, which is a slideshow with excerpted text from featured posts and links to the full post. That slideshow had been at the top of the posts area on the homepage, but after inserting the Meteor Slideshow code, the Featured Articles slideshow was moved to the new, active header, and the slides from both plugins were combined. Is there a fix for that? Thanks again for your time...
JLeuze
Member
Posted 1 year ago #

No problem bbjaze, could you post a link to the page you are working on?
Pattaya_Web
Member
Posted 11 months ago #

Hi,
Nice plug in and I'm sure it will devlope more.

I'm attempting to install and run on Weaver 2.0 but it's not behaving exactly the way I wanted. The site is photo-journ's newsblog

I uploaded all of the images to the image library as 1160 x 270
I adjusted the settings in Slides to 770 x 270
I imported the slides and created a home page slideshow
I went to the Appearance/ weaver admin / main and changed the header image height to 270
I then went to and Appearance/ weaver admin / advanced and inserted [meteor_slideshow="home-slideshow"] in the Site Header Insert code.
I checked the slides and they show they were uploaded as 770 x 270
On the homepage though they are only showing as 770 x 198.

I don't know why the images are not displaying to the correct depth.
Additionally, what I'd like to do is set the slideshow on the right side and use the following custom CSS `{
position: absolute;
top: 40px; margin-left: 20px; width: 380px; /* adjust as needed */
}

{
position:absolute; clear: both; float: left;
top: 80px; /* adjust and coordinate with #site-title */
margin-left: 20px; /* adjust as needed */
width: 205px;
}`
to position the header and site description over the header image area to the left side of the slideshow. This is the position the site name and description were in when using a static image previously.

Thanks for any advice you can give
Pattaya_Web
Member
Posted 11 months ago #

I just found some more instructions in the Weaver support documentation and followed these instructions but still the images are displaying only 198 deep.

For example, assume you've installed the Meteor Slides plugin, and have uploaded your rotating header images for the plugin to use. To add this slide show header image, you should first disable the default header image by setting the header image size to zero in the Main Options tab. Then, add this code to the Site Header Insert Code box:

<div class="ttw-center">[meteor_slideshow]</div>
Pattaya_Web
Member
Posted 11 months ago #
ok. Problem solved.

Seems there was still some cropping going on.

I went back and confirmed the sizes in settings.
I resized the images to exactly the size I wanted (sorry, I don't trust any auto-crop algorithm because they crop without regard to what is important) and reuploaded them

I found some code in another thread for aligning the slide container and inserted this into the Weaver/ advanced options / Head section
```
.meteor-slides {
	margin: 0 0px 0 0;
	padding: 0;
	position: relative;
	z-index: 1;
	overflow: hidden;
	float: right;
}
```
I set the image header size to zero as per the above post.
Then I went back to the main options and inserted the CSS code from above for position the header and site description and played around until they were aligned.

It would appear that the thing that kept me at my computer until 4.30am was the cropping / setting.

The original images were sized at 1160 x 270 and the settings were set to 770 x 270 prior to setting up the first slide show. Instead of only cropping the width it scaled the images down to 770 x 198. Perhaps the cropping/ scaling algorithm needs a little tweaking?

Would it be possible to display all of the meta data and options for adding to the shortcode say on the "slideshow' submenu?
JLeuze
Member
Posted 11 months ago #

Hi, the autocrop is really a last line of defense to keep the slides correctly sized, but you are right that you'll get the best quality slides by sizing and cropping them manually before uploading them.

It looks like you have got your slideshow working correctly now?
Pattaya_Web
Member
Posted 11 months ago #

Hi Josh,

Yes I have thanks very much. I've also posted the details over in the Weaver Forum.

My slide show contains 15 images compressed to jpg level 5. It's a lot of images I know and it slows page load a lot.

The next step will be to see how far I can compress the images without degrading quality or some other way to delay the entire slide show from loading until after the rest of the page loads.

One thought I had is to split the number of images between a landing page slide show and a second one that displays on content pages only.

Really nice plugin for doing something that I paid a programmer to incorporate previously in another template.
JLeuze
Member
Posted 11 months ago #

It depends on the size of the images, but I would suggest trying to stick to 10 slides or less to keep the load time from getting too slow.
engl9253
Member
Posted 4 months ago #

hi! I'm using the picolight 1.1.1 theme and I want to use Meteor Slide plugin to replace the standard header image with a slideshow of my own. I've tried to follow your method from the video posted above, but.. maybe I'm doing something wrong..
Could you help me, please?
JLeuze
Member
Posted 4 months ago #
Hi engl9253, are you editing the header.php file of the picolight theme to replace the header image?

Try replacing this line from the header.php file:
```
<img id="headerimage" src="<?php header_image(); ?>" alt="" />
```
With the slideshow template tag:
```
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
```
engl9253
Member
Posted 4 months ago #

Thanks, did that and works like a charm! :)
I was replacing the whole header paragraph... doh, stupid me.. :))
JLeuze
Member
Posted 4 months ago #

No problem, it happens!