Home>Support>Post Loop Widget – Carousel Slider image sizes

Post Loop Widget – Carousel Slider image sizes

By nrl009, 10 years ago. Last reply by Andrew Misplon, 10 years ago.

Is there a way to change the sizes of the images that are being displayed in the Carousel Slider? I would like then to be smaller, let’s say something like 100px tall.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Norman

    Unfortunately not a setting but you can try inserting the following under Appearance > Themes Settings and adjusting as required:

    /* Page Builder Post Loop Carousel */

.vantage-carousel-wrapper .vantage-carousel li.carousel-entry .thumbnail a {
width: 242px !important;
height: 162px !important;
background-size: 242px 162px !important;
}
  2. 10 years, 2 months ago Rich Dunmore

    I use the plugin in page-builder and just had to fix an issue where we wanted multiple carousel sizes on the same page. I used some jQuery to do the resizing. Once i found the page builder panel id of the carousel i wanted to modify… your theme might have different classes.

    jQuery("#pgc-20675-3-1").find("ul.sow-carousel-items").css('height','130px');
	
jQuery("#pgc-20675-3-1").find("li.sow-carousel-item").css('width','125px');
jQuery("#pgc-20675-3-1").find("li.sow-carousel-item").css('height','125px');
				
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail").css('width','125px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail").css('height','75px');
				
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail > a").css('width','125px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail > a").css('height','75px');
jQuery("#pgc-20675-3-1").find("div.sow-carousel-thumbnail > a").css('background-size','125px 75px');
  3. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Rich. Glad to hear you made progress there. Thanks for sharing your solution.

  4. 10 years, 2 months ago Nature Spy

    Hi,

    Related to this – i’d like to change the image sizes to be slightly larger in the Grid loop, and so that they run three abreast rather than the standard 4 I currently have (see test.naturespy.org).

    I’ve been playing with the CSS for about an hour and can’t get it all to sit nicely. Is there a simple bit of code to do this? The above didn’t work for me (after switching it to grid rather than carousel).

    Hope you can help.

    James

  5. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi James

    Good to hear from you. Please can you open this up in a new thread and I’ll do my best to assist.

    Thanks

  6. 10 years, 2 months ago Nature Spy

    Hi Andrew,

    Yeah sorry I should have raised it elsewhere – but I eventually figured it out anyway. Set loop-grid.php to show 3 in a row and changed width in CSS to 33%.

    Thanks anyway and keep up the great work – this support thread is getting crazy busy these days!

    James

  7. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Super, glad you won there! I’m sure you have but just a reminder that loop-grid should be a child theme and the CSS in Custom CSS or a child theme.

    All the best.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More