Announcement

Collapse
No announcement yet.

New Slider....how do you configure it to show pictures

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • New Slider....how do you configure it to show pictures

    I've just upgraded my test site to 5.1.5 and I'm looking at the new slider. Adding it to a page is easy enough. I've gone to an existing forum post with a picture in it, gone to the inline moderation menu and chosen 'feature post'. When I do so the topic title turns up in the slider but the picture in the post does not show.

    How do you configure the slider to show pictures? Or attachments generally?

  • #2
    It will use the first attached image on the post in the slider. It will not use images inserted via the [img] tag.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API - Full / Mobile
    Vote for your favorite feature requests and the bugs you want to see fixed.

    Comment


    • #3
      Originally posted by Wayne Luke View Post
      It will use the first attached image on the post in the slider. It will not use images inserted via the [img] tag.
      Perhaps I didn't make myself clear. I've installed the slider. I've taken an existing post which has an image inserted into it and which is visible in that post. I have made that post a featured post. The title of the post does show in the slider, but the image visible in the post doesn't show in the slider. How do I set it so that it does?

      Comment


      • #4
        Is the image inserted with the [IMG] bbcode? If so, it won't be used. It needs to be actually attached to the post. Attached images can still be inserted inline. There is no configuration. It will only use the first attached image on a post.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • jdj
          jdj commented
          Editing a comment
          OK...so it's attachments only. Thanks for the info.

      • #5
        Also, you'll need to clear the system cache before an image will show in the slider.
        AdminCP > Maintenance
        MARK.B | vBULLETIN SUPPORT

        TalkNewsUK - My vBulletin 5.5.6 Demo
        AdminAmmo - My Cloud Demo

        Comment


        • jdj
          jdj commented
          Editing a comment
          I did that, it made no difference. I'm guessing it's something to do with Wayne's previous post.

      • #6
        Originally posted by Wayne Luke View Post
        Is the image inserted with the [IMG] bbcode? If so, it won't be used. It needs to be actually attached to the post. Attached images can still be inserted inline. There is no configuration. It will only use the first attached image on a post.
        OK, that works thank you. It doesn't pick up an image inserted into a post but it does pick up the first attachment if there's an attachment.

        It doesn't appear to resize the attachment. So with the test post I've done so far it appears to display part of the image. Can you give any more detail on the size of images it displays? E.g., if you wanted the slider to display the entire first attached image, what size would it have to be?

        Comment


        • #7
          The slider will center and scale the image to fill the space. This gives the best results with moderately sized images. 1440 X 900 or larger.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API - Full / Mobile
          Vote for your favorite feature requests and the bugs you want to see fixed.

          Comment


          • jdj
            jdj commented
            Editing a comment
            Thanks. I've just noticed the new stylevars under Module Contentslider.

            - I can see that the height of the content slider is set under module_contentslider_height and that the default is set to 200px high. [I've just noted you can also change that from the default of 200px each time you deploy the module by editing the configuration for the content slider in site builder].

            - I can see that the background colour and image are set under module_contentslider_background: It looks as though you can set an image 1px wide then choose 'repeat' so I'm guessing if you set that it will then fill an appropriate proportion of the page filled by the module. Is responsive design more likely to work if you do this? Or does it matter?

            Also: the stylevar module_contentslider_caption_background tells me it controls the '...background for the Content Slider module caption block.' What is the 'Content Slider module caption block'?

          • Wayne Luke
            Wayne Luke commented
            Editing a comment
            The problem with the slider and responsive is that it escapes the bounds of its container if the container is resized, not the background image display. If you put the content slider in a 30% width column, it should work fine on most devices. If you put it in a 70% or 100% width column, it can break. Some devices will force a resize on it anyway though.

            The Caption Block is the text that contains the title of the featured topic.

        • #8
          I'm trying to deploy the content slider on vB5.1.5.

          I've found by trial and error that if I make an attached image the first attachment in a post which I then feature, the image will display in the slider, but only if I choose the thumbnail option when I upload.

          What happens when I upload the image is that the text that appears from the post itself (the title and first few words of the post), that I believe are called the caption block, appear over the top of the image in the slider. But the text appears as black and there is nowhere that I can see in the stylevars to change the colour of the text so that it does not stand out against a dark image.

          I've got around that on my test site by creating a new gif with the bottom third of the first attached image blocked out by a white rectangle so that the text in the caption block stands out in the slider. Is there any other way to change the colour of the text in the caption block? You appear to be able to change the background colour of the caption block in the stylevars, but not the colour of the font.

          Also, when the text appears in the content slider it is not left aligned, so the slider chops off most of the text in both the title and the first few words of the post. Is there any way to set it so that it's left-aligned?

          Comment


          • #9
            The caption text is currently hardcoded in vbulletin_global.css.

            Code:
            .slideshow .caption {
                color:#FFF;
                font-size:12px;
                height:50px;
                margin:15px 30px;
            }
            As it is white, it should show up on dark images. However there is no way to tell whether an image is dark or light or change the color of the caption text based on this. It really should have a defined background-color as well.

            http://tracker.vbulletin.com/browse/VBV-14372
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API - Full / Mobile
            Vote for your favorite feature requests and the bugs you want to see fixed.

            Comment


            • jdj
              jdj commented
              Editing a comment
              The problem is that the image contains white writing in it. If I change the image so that the bottom third is white the caption block text appears as black and it stands out.

              PS: I can see that the code says color:#FFF but the text on my test site appears in black without changing the CSS
              Last edited by jdj; Fri 27th Feb '15, 8:15am.

          • #10
            Makes sense that the sizing has to do with bootstrap compliance and cell phone compatibility. On all my websites I use 32% just to be sure.

            Comment


            • #11
              Originally posted by Wayne Luke View Post
              The caption text is currently hardcoded in vbulletin_global.css.

              Code:
              .slideshow .caption {
              color:#FFF;
              font-size:12px;
              height:50px;
              margin:15px 30px;
              }
              As it is white, it should show up on dark images. However there is no way to tell whether an image is dark or light or change the color of the caption text based on this. It really should have a defined background-color as well.

              http://tracker.vbulletin.com/browse/VBV-14372
              So presumably I can change this in css_additional then? What do I change to get the text to left align? Do I just stick in

              .slideshow .caption {
              color:#FFF;
              font-size:12px;
              height:50px;
              margin:0px 30px;
              }
              Last edited by jdj; Fri 27th Feb '15, 8:13am.

              Comment


              • #12
                text-align: left;

                personally, I like text-align: justify for most of my articles. Then it just wraps around the images and lines up on both sides nice and square. We need a button for that!

                Comment


                • #13
                  You can change it in additional CSS as well as add additional CSS code to get the look you want.
                  Translations provided by Google.

                  Wayne Luke
                  The Rabid Badger - a vBulletin Cloud demonstration site.
                  vBulletin 5 API - Full / Mobile
                  Vote for your favorite feature requests and the bugs you want to see fixed.

                  Comment


                  • #14
                    Originally posted by Wayne Luke View Post
                    You can change it in additional CSS as well as add additional CSS code to get the look you want.
                    I tried adding the .slideshow .caption etc. code together with either text-align: left; or text-align: justify; to css_additional, for my live template. I hit save and reload, cleared the cache. In both cases nothing changed. I used this:

                    .slideshow .caption {
                    color:#FFF;
                    font-size:12px;
                    height:50px;
                    margin:0px 30px;
                    text-align: left;
                    }

                    .slideshow .caption {
                    color:#FFF;
                    font-size:12px;
                    height:50px;
                    margin:0px 30px;
                    text-align: justify;
                    }

                    where did I go wrong? And what code should I have used in css_additional?

                    For the benefit of anybody else trying to use this what I've been trying to do is get the image to display in the sidebar without the image being truncated and without the slogan obscuring the image. Having tried and failed to do that I tried creating a separate PNG of precisely the same size and width of the default background png with the top half of that png black and the bottom white (the slogan text appears black and in the bottom half of the slider window) in the centre column of a 15/75/15 layout. That does actually work on a desktop (not tried on a handheld yet) but you've got to be careful with the height settings in the slider; you need to leave them set to 0.

                    Comment


                    • #15
                      I'd have to look at the code by you may not be able to justify the text if it isn't in a block element.

                      We're looking at controlling the text color and background color via Stylevars.
                      Translations provided by Google.

                      Wayne Luke
                      The Rabid Badger - a vBulletin Cloud demonstration site.
                      vBulletin 5 API - Full / Mobile
                      Vote for your favorite feature requests and the bugs you want to see fixed.

                      Comment

                      widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                      Working...
                      X