[Muireann BParticipant]

Hi there,

I am trying to make a simple portfolio site like one I made using an older version of X (http://muireannbrady.com/) I want to replicate the slideshow on all the pages, but Cornerstone seems to be going a bit weird on me – this is where I am trying to create the new site / slideshows
http://colmrooney.com/land-poisened/
First off the quality is vastly reduced on the images – I have attached one image I am using so you can see the difference in quality – it has been optimised and saved for web using Photoshop so I don’t know what’s happening there.

Also I was wondering if there is a way to force the slides to be a certain width / height – I have tried setting up the slides in 3 different ways and none of them seem ideal – especially once I start looking at them on different devices….

This simple artists portfolio site has worked for me in the past with older versions of X and with some custom code but I’m not sure if it’s possible to recreate again with newer version and cornerstone? This is the code I have used

.x-flexslider { background-color: transparent; }

.x-colophon.top {background-color: #ffffff;}

.x-flexslider-shortcode-container { margin-top: 50px; }
.flex-direction-nav a.flex-prev { top: -40px;
background-color: transparent;
color:#000000; }
.flex-direction-nav a.flex-next { top: -40px;
background-color: transparent;
color:#000000; }

Many Thanks for any help

[RadModerator]

Hi there,

Thanks for writing in.

When adding image to cornerstone’s slider element, you’re able to use Add media. And with that, you can select the image and size just before inserting it to the slider content. I checked and the inserted images and they are
medium sizes.

Thanks.

[Muireann BParticipant]

OK great – missed that completely – the quality is fine now!

Is there anywhere to contain images in the slideshow though – when I upload an image thatt is 400px wide for example the slideshow stretches it so it fits to 1200px (or however wide the slideshow is – so 100% I guess)

[JadeModerator]

Hi Muireann,

You can add this under Custom > CSS in the Customizer.

.x-flexslider .x-slides img {
    width: auto !important;
    max-width: 100%;
}

Hope this helps.

[Author]

Posts