Dimensions of slides in slide show

[karnac2020]

I have a Weaver II Pro based site at monroe.michianait. Everything seems to be working well with the exception that I cannot seem to adjust the size of the slides in the ATW slide show on the front page. I am using the “gallery” approach as suggested in the ATW “Quick Start” guide form an image slider.

When I create a new gallery and use a size like “medium” or “large” (instead of the “full size” which I first used when creating the slide show), the size of the slides does not change.

I don’t know if this is a setting in the ATW slider or I am not following some other type of procedure. I have cleared the cache in Firefox but it doesn’t seem to make a difference.

If someone has a suggestion, I would appreciate it.

Thanks

[scrambler]

@weaver can confirm, but I dont think the show slider cares about any of the settings from the gallery like size or columns, it just takes the full images.

The idea is if you want to make the Slideshow smaller, either use small images, or  use the width % option in the slider options, or add a rule like below in the “Per slider CSS box”

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

Using the value you want

[karnac2020]

Thanks again for your help.

Mark

[scrambler]

Keep in mind that when using the width option makes the slider always the same percentage of the browser, so on mobile devices it may end up too small.

For that reason, the max-width rule may be a netter option as it limits the size on large screen devices, but keeps it big enough on mobile devices

[pulpcovers]

Are there any plans to give a slider an option to set image size (small, medium, large)? I ask because I tend to upload very large images, and want people to be able to open the full-size image in a lightbox, but have the smaller images load when just viewing the page.

[scrambler]

I think all that should become unnecessary with the new dynamic loading of image resolution in the latest WordPress version.

But I don’t know all the details, @weaver may be able to explain more

[Weaver]

Weaver Slider does indeed support the latest WP 4.4 automatic image loading with images from the Media Library.

For example, this is the HTML generated for an example I use to test the slider:

<div class=”atwk-slide”><div class=”slide-content slide-image”><a href=”//example.com/?attachment_id=1691″ alt=”dsc20050315_145007_132″><img style=”cursor:pointer;” class=”atw-gallery-img” src=”//example.comt/wp-content/uploads/2014/01/dsc20050315_145007_132.jpg” alt=”dsc20050315_145007_132″ srcset=”//example.com/wp-content/uploads/2014/01/dsc20050315_145007_132-256×192.jpg 256w, //example.com/wp-content/uploads/2014/01/dsc20050315_145007_132-512×384.jpg 512w, //example.comt/wp-content/uploads/2014/01/dsc20050315_145007_132.jpg 640w” sizes=”(max-width: 640px) 100vw, 640px” /></a>
</div>

Note how the <img> element uses the srcset and sizes options to specify alternate physical sizes for the image to load. (this example uses a dummy URL example.com).

These sizes are automatically generated when you upload a new image to the Media Library. Most modern browsers understand srcset and sizes, and will automatically load the most appropriate size image based on the size of the browser’s screen. A very nice feature, and is totally automatically done.

[pulpcovers]

I have a test site up testing.pulpcovers.com and the sliders look exactly as I would like them to (other than the thumbnails being on the bottom, but I can live with that) but each slide is loaded as the full-size image, which is more than 1MB each. I am running WordPress 4.4.2. Is there anything else I need to do to have WordPress serve up the smaller image size?

[scrambler]

I don’t see the multiple res in the html of your page as mentioned by weaver.

If the images where uploaded before the new WordPress version, it is possible that you need to delete all the images, and re upload them, so that WordPress can create the various resolution. Not sure, @weaver may know better.

By the way, there is an option in the Slider option page to move the Thumbnails above the slider instead of the default bottom

[pulpcovers]

Reuploading the images didn’t help.

I can get the thumbnails on top, but only by switching from Thumbnails to Sliding Thumbnails, which then shows the single thumbnail for single image galleries, unlike the standard Thumbnails, which hide themselves when there is only one. But like I said, that’s not a big deal.

[scrambler]

If you want to move the images above you can then try the rules below, placed in the Per Slider Custom CSS rule box (bottom of slider option page), they should do the trick

.this-slider .atwk-viewport {margin-top:22%;}
.this-slider .atwk-control-nav {position:absolute;top:0px;bottom:auto;}

[Author]

Posts