Recommend a slideshow plugin with adjustable width

[laura]

Before posting this, I searched the forum, but the plugin that was recommended seemed to be either no longer supported or it doesn’t exist anymore. Weaver recommended a plugin called, Portfolio Slideshow. Every time I click on the link to download it or view it, I get directed to a dead link. 

I’m looking for a plugin where I can use some selected gallery images and put them into a responsive slideshow on a post where I can adjust the width of the slideshow. I currently use Slim JP, which is nice, but I can’t seem to adjust the width. I would like to be able to make it a little wider. There doesn’t seem to be any css to be able to do that.   

Thanks,
Laura

[scrambler]

Weaver has its own slideshow plugin caller Weaver Show Slider. Combined with Weaver Show posts it can also make slideshow of posts and not just images.

We can make this one any responsive size you want. Some size options are in the slideshow options, other can be done with custom CSS that we can help with

[Bobthearch]

I haven’t used SlimJP, but I maintain multiple websites that utilize a variety of slideshow and image plugins.
Your slideshow width may be limited by two things other than the plugin’s limitations:

First, it may be self-adjusting to the width of the photos.  If the photos are 900px wide, the plugin won’t show them at a width of 1200px, for example.

Second, the slide show may be ‘trapped’ within the container.  If the slideshow is posted in your main content, and the main content area is 900px, again for example, it’ll be difficult to show a 1000px image at full width.  It can be done with some custom code, but I’ve had minimal luck with it.

---

Here are the slideshow features I’m using:

http://placesandpics.com/
At the top of the main page I’m using “Huge IT Slider” within the container_top area provided by WeaverX theme, and making it full width with some custom code provided by scrambler, .home #container {padding:0;} .  The full page width is 1200px, and all of the images are 1200px wide.

http://placesandpics.com/photo-tours/jurassic-drive/
At the bottom of this page is a slideshow within the main content area created with the plugin Photo Gallery by WebDorado.  The slideshow width is adjustable and currently set to 1200px but it’s trapped within the content area that is 900px wide, which doesn’t matter because each image is only 900px wide anyway.

http://placesandpics.com/photo-tours/mudgee-region-historic-drive/
On this page I wanted to do something to really feature the photos, so I used the same plugin as above, Photo Gallery by WebDorado, to create an “image browser” slideshow that isn’t constrained by any container.  Each photo is 1200px wide, and the slideshow width is set to 1200px.

---

Here are the plugin links:
HugeIT Slider.  I was able to do everything I needed with only the free version: 
https://wordpress.org/plugins/slider-image/

Photo Gallery.  There is a paid upgrade version available with more options and features, but the free version has a lot of functionality and is all I use.  https://wordpress.org/plugins/photo-gallery/

I tried about a hundred different plug-ins looking for ones that worked as advertised and did what I needed before settling on these.  Hope this helps!

[laura]

Scrambler,

I got off to a bumpy start due to the learning curve of the settings, but I managed to create two slideshows. The documentation was good. The images I uploaded into the slideshows are 1920 x 1280, but in my settings, I’m defining 80% of the containing width which looks ok. It looks great on the desktop, but for some reason it crashes on the iPad. It loads the slideshow and starts running, but then I get a message saying, “A problem occured with this webpage, so it was reloaded.” It keeps reloading the slideshow and then crashes with this message. Here is a link to the site with the slideshow post if you need to see it:
http://laurasblogs.com/grounds-for-sculpture-exhibition-slideshow/

Thank you so much,
Laura

@Bobthearch – thank you for your input. I’ll check it out if I get too frustrated!

[scrambler]

I don’t have an Ipad to test, and Ipads normally work with weaver slideshow, so @weaver would have to jump in to investigate

On your side, can you test a basic slidshow on a test page (all default options) to see if that works on the Ipad, and if so, the test the various options you are using one by one to see if a specific option is causing the Ipad issue.

[laura]

Scrambler,

The only thing I can think of is that I uploaded about 61 images that are 1920 x 1280, so is it possible that it’s the loading time that is slowing down the slideshow to a point where it crashes and stops?

I get better results with the iPad mini than with the regular iPad.

The first slideshow I made as a test only contains 3 images with the same width and height and I do not have this problem at all.
http://laurasblogs.com/grounds-for-sculpture-the-peacocks/

Should I remove some the images from the other one and see if it makes a difference?

Thanks,
Laura

[scrambler]

If a basic slideshow with 3 images work, then definitely test your current one with progressively less images and figure out if at one point it starts working

[laura]

Scrambler,

I actually redid the slideshow that I’m having trouble with using less images and although there is still significant loading time on the iPad, it doesn’t crash as much, so I think the amount of images I used plus the fact that they are very large made a difference.

Do you consider this solved if it works with less images?

Do you recommend possibly reducing the images before I create the slideshow with them? What width and height should I use? I was currently using 1920 x 1280.

Thanks,
Laura

[scrambler]

Your site width is 1050px, so why are you using images that are 1920×1080?

But more importantly, your images are very heavy like almost 2MB each because they are using very little compression.

You need to resave them at max 1050px wide, with a bigger jpeg compression. I tested  on a few and you should be able to get them down below 300k each or even less depending on the image, without loosing visual quality.

Once all your images are optimized in size (both resolution and compression), you should have no problem.

[laura]

Scrambler,

I am using a new digital camera and I checked the image settings and you’re right. I thought that if I define in the slider settings that they only take up 80% of the container width, that it would be okay. The smaller size in my camera settings after that would be 720 x 480. 

So would the solution be to reduce the images in an image editor and redo the slideshow?

Thank you so much.

[scrambler]

the best solution is to use an image editor as this lets you precisely control the resolution and the compression when you save them.

Depending on the image editor, you will be choosing the level of compression when you go save the image, and it should show you how big the file will be depending on the setting you use. if not, just choose a middle of the road compression level save and check the file size, do that at a few compression levels, and choose the compression level that produces the smallest file for a visually acceptable quality.

By the way, the slider options let you choose a Width % which I personally don’t like because on smaller screen it will still use the same percentage and therefore make the slideshow too small. (80% of 100px is 800px, but 80% of 500px is 400px)

I prefer to use Custom CSS to set a maximum width, so that on desktop the sideshow is limited to that max width, but on smaller screen it will take the whole space.

If you want to try that, put 100 in the slider width option box, keep the center option checked, but then, add the rule below in the “Per Slider Custom CSS” option box at the bottom of the slider option page

.this-slider {max-width:700px;}

with the value you want.

@weaver, I think this would be a valuable option to add in the slider width section, either a % width, or a max-width 🙂 

 

[Bobthearch]

I am using a new digital camera and I checked the image settings
and you’re right. I thought that if I define in the slider settings that
they only take up 80% of the container width, that it would be okay.
The smaller size in my camera settings after that would be 720 x 480.

Use the highest setting on the camera to get the best pictures.  If you’re using a DSLR you should be shooting in RAW and converting to jpeg on your computer.  That’s my preference anyway.
Then use photo editing software on your computer to crop the images to the desired dimensions, then compress the jpeg to reduce file size so that web pages load faster without reducing the image quality too much.
Your camera probably came with all of the necessary software.

[Weaver]

It is possible that an iPad will have memory problems with a lot of largish images. The really don’t have all that much main memory, and not the swapping capabilities of a desktop, so it makes sense.

The proper way to create images is as the last post suggests – always take the highest resolution possible on your camera. If you are an expert at Photoshop, then RAW isn’t a bad idea, but you have to be good at it to benefit from RAW. We are talking about professionals and very serious amateur photographers here – not your average website creator.

Then create a “full size” image for your website from the original. This would often be an “auto correct” the image (it usually works pretty well – but you might know how to do it better manually), and a resize to something that is reasonable. Right now, an image width of 1920px is an good guideline as that is the resolution of HD images, and the max width of probably the majority of monitors at the moment. If you know all about “Retina” or HiRes images, go bigger, but use a Retina plugin. Your “full size” image should not be overly compressed, but also should probably not be over 500K bytes long (unless you are targeting Retina ready).

Your full size image will usually only be displayed on the Image Attachment page. Otherwise, it is standard practice to have you image Large, Medium, or Thumbnail. You set what those sizes are in the Settings dashboard panel. The large size should correspond to your site’s normal content area max width.

When you upload the “full size” image (which is NOT necessarily the same as Large, but it can be if you want it to be), WP will upload your “full size” image, and AUTOMATICALLY create Large, Medium, and Thumbnail versions in the sizes set for those, and using what WP thinks is appropriate compression. There is no control over that (might be a plugin that tweaks compression ratio).

So – you only have to worry about creating a single version of your image – the “full size” image. Then you let WP worry about the other versions.

[laura]

Weaver, Bobthearch, and Scrambler,

Thank you for all your help and advice.

I recently did get a Canon EOS 6D DSLR camera and I have been experimenting with it so far. It does come with a lot of software which I downloaded to my computer, but I have not used yet because I wasn’t shooting any images yet with the RAW format.

It actually has the ability to shoot both RAW and JPG formats at the same exact time. So I’ve been playing around with the Canon software. Up to now, I’ve mostly been using the amateur stuff most people use like paint.net, etc. for image editing. The Canon software seems much more advanced and it will take me time to get used to it. But shooting RAW images with the Canon is no different than shooting in any other format. You just have to adjust the settings in the camera menu.       

Thank you all. You’re the best!

Laura

[Weaver]

@laura –

RAW is the unprocessed data from the image without any color correction, and other stuff needed to make the image look “good”.

My son is a true professional videographer and photographer, and he is about the only person I know who ever shoots RAW. He normally shoots RAW+jpg (on a Canon), and occasionally will tweak the RAW file, but ususally just used the .jpg. It take a really good eye for color and contrast to really do much better than the camara’s native .jpg. My son is a true artist, and has that eye. He’ll show me two version of the same image, and I can see his tweaked RAW image is better, but not exactly why. He’ll say – see this and that – and I can’t – I can just see it is a bit better.

So – have fun with the RAW images – with practice comes improvement, I think. But I’d probably never be able to do it myself.

[Bobthearch]

I shoot RAW because, as you said, it’s the actual data from the camera sensor.  By using the actual data instead of a processed image of the data, it’s possible to change many of the camera settings after-the-fact such as white balance, color controls, highlights and shadows, and Active D-Lighting (Nikon speak).  I can see and control the process much easier on a 24″ calibrated computer monitor than the 3″ screen on the camera back.  🙂
So basically the camera is collecting the RAW data of every photograph anyway, it’s just a matter of whether you want the camera to create the jpeg, or whether you want to create the jpeg yourself using separate software on the computer.

I’m not trying to convince anyone to shoot RAW or even saying that RAW is better, but I would encourage you to try it, especially if you’re going through a process of editing each jpeg before publishing anyway.

[Author]

Posts