[CChesnuttParticipant]

Hello!

First off all of my software and plugins are updated.

I have what is likely a very basic question from a mostly newb. I’m using a basic Soliloquy slider on my homepage http://www.corichesnutt.com to display featured/new items in my Portfolio. I have the captions appearing on each Soliloquy “slide”. I would like to be able to link each slide to its individual portfolio page. I know Soliloquy isn’t as robust as Slider Revolution but I’m not looking to launch a space shuttle! (Slider revolution leaves me feeling very overwhelmed when I’ve tried to use it) I just need some basic functions. How can I add a link to soliloquy slides? I’ve tried to add the href into the actual photo caption in media library but it seems to be “breaking” things. For Example, the first slide that says “A new take on glamping”, I’d be totally happy if I could either make that whole thing (image or caption) a clickable link or to be able to add ” -MORE” (A new take on glamping -MORE-) at the end and make it take you to http://www.corichesnutt.com/portfolio/uncr

Any help is greatly apprecaited! Thank you!!!

[RupokMember]

Hi there,

Thanks for writing in! You can try the Cornerstone slider element to create your slider – http://prntscr.com/cmmwz9

It’s pretty simple in functionality and will let you wrap everything within anchor tag – http://prntscr.com/cmmxfa

Cheers!

[CChesnuttParticipant]

Thanks for the reply. So are you telling me there’s no way to add a simple link to a slider I have already created?

[CChesnuttParticipant]

…also…I am using the Soliloquy else where on my site and would like to keep the look/feel/consistency.

If there is a work around with the Soliloquy slider to somehow add a link I would really really appreciate it.

~Cori

[FriechModerator]

Hi Cori,

Soliloquy has an option to add a HTML base slide.

Please set your slide as HTML and wrap your images with anchor tag.

e.g
<a href="URL HERE"><img src="URL HERE"></a>

Hope it helps, Cheers!

[CChesnuttParticipant]

Great thank you!

So I have built my HTML slider with link and its awesome that the whole image is a link now. But how do I incorporate the caption back into this? It doesn’t seem to be pulling it from the media gallery data and I’m not sure how it needs to be coded in. I need the caption on both desktop & mobile versions.

FYI, here is my code for the first HTML slide
<a href="http://www.corichesnutt.com/portfolio/uncr/"><img src="http://www.corichesnutt.com/wp-content/uploads/2016/09/HomeSlider_UNCR.png"></a>

Here is my caption for that slide “A new take on Glamping!”

Can you help me incorporate this please? If I figure one out, clearly I can manage the rest of them. Thanks again so much for the help!

~Cori

[RupokMember]

Hi Cori,

You didn’t add the caption so there is no caption. It should be like this :

<a href="http://www.corichesnutt.com/portfolio/uncr/"><img src="http://www.corichesnutt.com/wp-content/uploads/2016/09/HomeSlider_UNCR.png">This is caption</a>

There is a better approach if you are interested :

<a href="http://www.corichesnutt.com/portfolio/uncr/">
    <figure>
      <img src="http://www.corichesnutt.com/wp-content/uploads/2016/09/HomeSlider_UNCR.png" alt="Your alt text">
      <figcaption>This is the caption.</figcaption>
    </figure> 
</a>

You can add style to this easily using the selectors.

Cheers!

[CChesnuttParticipant]

AWESOME THANK YOU! I’ll give this a shot when I get home from the day job 🙂

[ChristopherModerator]

Let us know how it goes.

[CChesnuttParticipant]

…ok now I’ve got captions. I apologize for not being fluent with coding. And I am so very grateful for your help with these fine details.

So to code style into the captions underneath the images in the slider at the top of http://www.corichesnutt.com am I doing this right in the same HTML slide code window where I coded the caption or is this a CSS thing to be done via Cornerstone/Custom CSS? Can you help me with code to achieve something like this (original Soliloquy caption styles), or at least the same styling BELOW the images in the slider? If it doesn’t have the color band behind text that is OK but I’d at least like a little more spacing between the image and text, and have the copy centered. If you help with the basic code I can usually manage to tweak the specifics. I’m borderline desperate at this point…its the last thing I need to do on this site to officially launch and begin job searching LOL!!!

[CChesnuttParticipant]

Also I have one more strange thing happening that I could use your help solving. When http://www.corichesnutt.com FIRST loads, there is a large white space, like added padding, below the slider. The slider Nav arrows are also below the center of the image. Once the slider switches slides, the extra padding goes away and the Nav arrows are centered at the sides of the image (see screen grabs attached). It only happens upon the initial load of the page and once the slide changes, its fine the next time around. I can make this happen over and over again each time I reload the page (in Safari as well as a Chrome Incognito window at least). Any ideas how I can fix this?

THANK YOU SO SO SO MUCH!

[LelyModerator]

Hi There,

Thank you for the screenshots.
We can add custom CSS on Appearance > Customize > Custom > Edit Global CSS. Add the following CSS for the caption style:

.home .soliloquy-container a figure {
    position: relative;
}
.home .soliloquy-container a figcaption {
    position: absolute;
    width: 100% !important;
    text-align: center;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
    padding: 10px 0;
    color: #ffffff;
}

For the extra space below, please try adding this custom CSS too:

.home .soliloquy-html-sentinel{
    overflow: hidden;
}

Hope this helps.

[CChesnuttParticipant]

Styling for the captions is perfect thank you!

The extra space below slider still seems to be occurring though. In OSX Chrome the gap stays there the whole time now instead of shifting after the first slide changes. BUT, if you change the width of the browser window, everything shifts up to where it should be. In Safari and Chrome on a PC it is doing the same thing it was before and everything shifts after the first slide changes.

For reference, Screen shot is of the code placed into the global CSS window.

Thanks again!

~Cori

[Paul RModerator]

Hi Cori,

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

.home .soliloquy-container {
    margin-bottom: 0 !important;
}

Hope that helps

[CChesnuttParticipant]

Good Morning Paul, thanks for the help. I don’t think it has changed anything that I can tell. Am I supposed to remove the previous coding for the “overflow: hidden”?

Thanks in advance,

~Cori

[Author]

Posts