Jump to content
mindfulbaby

Any adjustments available to Image Carousel shortcode?

Recommended Posts

mindfulbaby    0
mindfulbaby

I think the answer is no, but wanted to see if there are any adjustments I can make (as a non-programmer!) to the Image Carousel I am using based on the shortcodes page (http://demo.pagelines.me/tools/). This is a really handy carousel for me, and a big help!

Mostly I am curious if it is possible to adjust 2 items:

- the height of the black bar with the caption text/subtext (I'm using smaller images, 400x400, so it would be great to make smaller)

- the speed the carousel progresses through the images

I haven't seen any notation on being able to modify, but wanted to make sure before I check it off my list and don't keep wondering if it is possible.

Great shortcode! So much on that page that is super helpful.

BTW, if I should be posting questions like this under "Customizations" instead please let me know. I wasn't quite sure where to post it. Thank you-

Share this post


Link to post
Share on other sites
Rob    547
Rob

The height is set to 'auto', so whatever the height of your slide image is what the slider height will be. I think the width should be the same, but not sure about that. Are you seeing different results? Can you snapshot what you see?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

Try this:


.carousel-caption {padding: 5px 6px 4px;}

Adjust the numbers to your desire.

Add that to Custom Code > CSS Rules.

It might work.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob


.carousel-caption {padding: 5px 6px 4px;}

Try this in Custom Code > CSS rules.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mindfulbaby    0
mindfulbaby

Thanks! That does let me change the caption box size.

Do you happen to know if it is possible to change the slider speed as well?

One follow-up on the caption box:

When I delete the Title and then also the caption text for a particular slide in the slider, the result is the dark caption area at the bottom of the slide disappears (great, just as I would expect).

However, the Grid that I have set up (I am using a "span 4" and "span 8") effectively breaks and the text that should appear to the right of the slider then appears below. Is this a simple code issue I am missing related to the slider or grid? I am assuming that simply removing a title and caption text shouldn't impact a grid layout, correct?

Example: http://mindfulbaby.com/testpage-2/ is where broken

Still works on http://mindfulbaby.com/testpage-1/, where I have text for the title and caption text for all slides.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

Can you provide a concept image of what you're trying to achieve and also add the code you have used to our paste service please.

http://paste.pagelines.com/

Then provide a link to your paste when you reply.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mindfulbaby    0
mindfulbaby

Sure.

The page that is working (and what I am trying to make it look like is here): http://paste.pagelines.com/data/images/8/8lp.png

But simply without the black caption at the bottom.

So I'm trying to figure out where I am going wrong with simply removing the Title and caption text from the shortcode slider, which then throws the text right of the image to suddenly below it. I'm guessing it is either something super simple I can do, or not possible with Pro help!

Longer term the "ideal" concept would be something like this:

http://paste.pagelines.com/data/images/5/5od.png

But I figured I would save the question whether that was even doable for another post so as not to confuse - I'm getting as close as I think I can on my own, but I wasn't sure if there is something that could combine a carousel with image above, while still keeping the ability to have text with tabs on the right (as I have learned to do with the Grid system).

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I've taken a look at your second concept image. Have you seen our new 'response gallery'? It produces that type of result and is as easy to work as the shortcodes. Take a look http://www.pagelines.com/store/sections/responsive-gallery/

If not try hiding the captions and black bg using css. Just paste that code into Pagelines>site options>custom css box and hit save :)


.carousel-caption {

    display: none;

}

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
mindfulbaby    0
mindfulbaby

Wow, that is undoubtedly as close as I would expect to get - I hadn't seen that yet! Thanks for the link.

I'll try using the code to hide the caption/title.

One quick one to wrap up - if I have another carousel on my site, will it remove the captions from that one too? Basically wondering if I can have no captions for one carousel on the site, but if I add another carousel then still have captions for that one.

Thanks again!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

HI,

You could use the code below, but you will need to check the class is there before hand.


.clone_2 .carousel-caption {
display: block;
}
[/CODE]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • John Olsson
      By John Olsson+
      We're often working with ACF (https://www.advancedcustomfields.com/) that's great for user experience in the backend, 'cause we don't want out clients to be in the editor to much.
      So we want to be able to use shortcodes in the editor fields, regardless of section, THIS WOULD BE SO GREAT. Is there a way to fix this, it should open up som much more functionality.
      In ACF, the shortcode is for example: 
      [acf field="field_name"] ...for example, I want to att field_names value to display in a section, i understand I can make it in embed and so, but I want it in titles and options, the whole range.
      I know I can build my own sections, that we've done, but it's not very effective, and thats what PL5 is about.
      Any ideas on this, can Pagelines take this in the core? I guessing there are more than just ACF out there who can use this.

    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • bnapoli
      By bnapoli+
      On my site www.anewbeginning.com the "toggle" function mysteriously stopped working.  I have tried all browsers, tried disabling plugins, removing all the relevant CSS but still cant understand why it isn't working.
      The toggle is placed on this page: http://anewbeginning.com/?page_id=15965 and http://anewbeginning.com/?page_id=10779 but it does not display.
      On my other Platform5 websites, that exact code works fine: see here http://4aa.d11.myftpupload.com/?page_id=123
      Code is the same. Please help, thank you!
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
      Button: FAÇA SUA INSCRIÇÃO.
      Tks
    • flourishdesignstudio
      By flourishdesignstudio
      Hello, 
      I am having a problem with shortcode not working properly with the PL5 theme. I have been trying to insert shortcode for a specific plugin (Map List Pro) and it has worked when I am using DMS but not with PL5. When I insert the shortcode into the page content then none of the content (text, images, or map) will load on that page. Thinking that maybe a widget or straight HTML code would work better made me try inserting the shortcode into a widget (didn't work) as well as an embed section within PL5. The embed section worked in that I can look at the code and see that the map is there but nothing is actually displaying on the page.
      I am also unable to edit the embed code section (added through PL shortcode into the content of the page) once I have put in the Map List Pro shortcode. Any thought as to a workaround or if the codes are somehow interfering with one another? You can see the page (and gap where the map is supposed to be loading) here: http://new.fingerlakesdistilling.com/where-to-buy
      Thanks so much for any insight you are able to provide!
×