TUTORIAL

Adjust slider images and links

Welcome to another tutorial on my website. This time it’s about the images of the slider and the links shown within. It is addressed to those who use the slider and did implement it already successfully.

If you are new to the theme or to the slider I suggest that you rather first have a look this tutorial:

Make the slider work

which explains the basic use of the slider and its images.

If you came here only to remove the links for the slider you can skip the first section “Sizing the slider images”.

In case you only want to adjust the image for the slider than the first section “Sizing the slider images” might be your favorite.

Introduction

One of the main problems for adjusting the images for the slider is that the image size you choose for the slider will be the featured image size for your post to be visible. In other words: Making an image small and wide for the slider will also have the same small and wide image for the featured image of your post which might look a little awkward.

In this tutorial I will guide you how to:

  • Seizing the slider images
  • Hide title link
  • Hide navigation dots
  • Hide navigation controls
  • Change some PHP code

Here we go:

 1) Sizing the slider images

The image of the slider is determined by the width of your blog as the slider always takes the full width. The width of your blog width depends on the layout you have choosen for the theme.  The slider will always reduce or enlarge the image to this value.

For the best results (crisp and clear images) there are three possible ways, which I recommend. Try them both to find out what works for you best:

Option 1: One image
With this option you have to create only one image. No matter what size your native image is, make it the exact ratio (width/height) of your slider.  Assuming that your width is 1140px, which is the standard size of the theme with a sidebar layout, you can easily calculate the height. The standard ratio of the theme is 2,9 which makes the image 1140px width and 395px heigth. If you want a small image adjust the ratio to a higher number.

Let’s assume you want the slider image to be only 200px heigth: the ratio is than 5,7 (1140/200). Any picture that you upload and you want to show in the silder should have that ratio (not the size), no matter what the native size is. It can be  1424 x 250 or 900 x 158 as long as the ratio is the same. The theme will up- or downscale the image in your post to fit the slider, but will show the original size when clicking on it.

Most of the time this option is sufficient.

Option 2: Separate images
The golden way for the best sharpness in both worlds is to create wo native images because nothing is scaled by the theme but only controlled by you. You need to create two images: One for the slider and one for the post. Both in the exact pixel width of each. Assign one image as a thumbnail and the other one to be added to the post.

In case you want to open bigger image when clicking on the smaller one in the post you need to upload the bigger image to your media files first. After uploading it copy and paste the path where WP stores the image. Later, while assigning the image for the post, you have to replace the path for the image (which shows the path to the post image) with the path for the original image that you copied before. This is done in the pop-up. There is a field which shows the path at the bottom of the pop-up. Now the post image that you added to your post is linked to the original image that you uploaded before. Got it?

Another way to work around that is to use the slider image as the „bigger image“ when clicking on the image in your post. In that case you need to paste the path where WP stores the slider image (you can check this in the media files too) into the field for the path of the post image at the pop-up, as described above.

Option3: Tweaking by CSS

This is the option is also a possible way to adjust the images for the slider. The first one will squeeze the image out of its proportion, but won’t crop it:

#slider .wp-post-image, #slider .entry-attachment {
height: 200px;
}

The other change which keep your images proportional, but croppped from the bottom.

.slides {
height: 200px;
}

You can adjust the cropping by changing the ‚top‘ parameter into negativ numbers, depending how many pixel you want to move the image up.

#slider .wp-post-image, #slider .entry-attachment {
top: -66px;
}

This option is by far the easiest one with good results aswell.

2) Hide title link

Add this little code segment to your CSS to hide the title link in the slider, linked to the post:

#slider .entry-title a {
display:none;
}

and save your changes.

3) Hide navigation dots (optional)

As you may recognize there are small dots in the center of the slider for a quick navigation to each image. In case you want to hide these dots add this to your CSS:

.flex-control-nav {
display:none;
}

4) Hide navigation controls (optional)

If you also want to remove the forward, backward, start/stop buttons on the right side of the slider try to add this to your CSS:

.flex-direction-nav,.flex-pauseplay {
display:none;
}

As you can see the „flex-direction-nav“ class controls the forward and backward controls whereas the „flex-pauseplay“ class controls the start/stop control. In case you only want one of them to hide you can delete the other class in the CSS code, e.g.:

.flex-direction-nav {
display:none;
}

will only show the start/stop control.

5) Hide picture link

Finally you need to exclude the main link for the slider manually. In the slider.php after the line:

<?php if( has_post_thumbnail() ) : ?>

you have to exclude the following line, like in this example:

<!--
<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
-->

I’m not a friend of changing PHP code because of the theme responding design and changes end up easily in a mess when the layout or the page size changed. But in this case the link is the same for all layouts and can be changed safely. Nevertheless this change will be gone when updating or overwriting the slider.php file.

AND THAT’S IT !!

I hope you like the tutorial and it was helpful for you.

Cheers,
Alexander

  1. Marie BakerMarie Baker10-28-2012

    Fantastic guide. I have just got this working on my website. Just one question if you dont mind. This is working on my main page, but isnt appearing on other pages like yours does through the whole site, did i miss something to get it at the top on all pages?

    Also the slider category i started just for the slider is showing in my category widget on the side of my page listing my categories, did i do something wrong as id like it not to show this.

    Many thanks

    • AlexanderAlexander10-28-2012

      Thanks for your kind words.

      The other pages where the slider appears on my site are static pages where I choose the template „Landingpage“.

      Cheers,
      Alexander

  2. Marie BakerMarie Baker10-28-2012

    Ah thank you, Ill look into changing some to landing pages. Any idea how to stop my categorys showing the category we made for the slider images?

    • AlexanderAlexander10-29-2012

      I prevent this by not showing categories in the sidebar.

      If a have a category that I add it to the main menu which also is a good way to sort them as you may have more and more sub (child) categories over time.

      Also Im pretty sure that there are plugins on the web to hide categories, but as I said, this was never an issue to me.

      Cheers,
      Alexander

  3. Marie BakerMarie Baker10-29-2012

    Many thanks again.

    Managed to get a plugin to hide certain categorys so thats all good. One last question, just looked at my blog and the slider posts are there, did i miss something? because i thought they would be hidden … 🙁 sorry if i have missed something simple

    http://www.radleycollector.com/blog/

    Thanks again.

  4. AlexanderAlexander10-30-2012

    Step 9) and 10) should move the posts from the blog pages to the portfolio.

    Cheers,
    Alexander

  5. JulienJulien11-03-2012

    Hi,

    I’ve tried what you’ve said, but I can’t hide the slider from my blog page. It seems that WP Hide Post, doen’t work except if choose to hide my post from the home page…

    Can you tell me why ?

    PS : may blog page is not reachable from the menu but you can find it there :

    http://www.juliendavid.ca/blog

    • AlexanderAlexander11-03-2012

      Try to use the plugin to hide your slider post everywhere except your slider. If you remove the post from the home page it won’t be able to feed the slider. If you need the blog page use the portfolio as decribed in the tutorial to hide your post from the blog page.

  6. EliyahEliyah11-04-2012

    Thank you for the lesson, there is one problem that I need help, and that reducing slide  pictures, images the right size, and I just do not, understand why the slide grabs an extensive area from the screen. I’d love to get help to correct and improve.
    Thanks in advance
    Eliyah

  7. Edward FishEdward Fish11-05-2012

    Thanks for the tutorial. I hope you’ve told the theme author as this is an obvious design issue with his theme and should really be dealt with inside the theme logic.

    • AlexanderAlexander11-06-2012

      Edward, feel free to tell David abiut your issues. 🙂

      For my part I only try to work around things which I like to change and share them with the community.

  8. Dominik StaufferDominik Stauffer11-12-2012

    Hi Alexander,

    vielen Dank erstmal für deine Zeit die du in de Support eines Themes steckst, das uns allen scheinbar gleich gut gefällt. Eben dazu hätte ich an Dich zwei Fragen, die mir im zugehörigen Support Forum auch nach langer Suche nicht beantwortet werden. 1. Wie bekomme ich die kleine Schrift im Kopfzeilenmenü (bei dir „Wo alles Begann“, „Regenbogenation“,….) hin? 2. Wie kann ich die beiden Pfeile der Slidernavigation entfernen. Über eine Antwort auf diese beiden Fragen würde ich mich sehr freuen. Beste Grüße Dominik
    Ach ja, wo ichs gerade sehe, welches Plugin nutzt du für die Benachrichtigungsfunktion unten den Kommentaren („Benachrichtigung bei weiteren Kommentaren per E-Mail senden.“ und „Informiere mich über neue Beiträge per E-Mail.“)

    • AlexanderAlexander11-12-2012

      Hi Dominik, I will answer your questions in english as other people may run into the same problem you did.

      1) The little description beneath the main menu entries is part of the theme. You will find it when you click on „Appearance/Menu“ (Design/Menü in deutsch). Open one of your menu entries and you will find a field called „HTML-attribut title (optional)“. Here you can fill in whatever you would like to see in small letters below each menu entry.

      2) How to remove the arrows in the slider? You will find the answer in topic 14) of the updated tutorial.

      3) I use Jetpack plugin for the „leave a message“ functions.

      Cheers,
      Alexander

  9. AvinAvin11-17-2012

    Thanks a lot man, sometimes i feel your site is the official support site for the theme.
    Cheers man!

    • AlexanderAlexander11-17-2012

      Thanks for your kind words, dude. I like to contribute to the theme as David is quite busy but already delivered a good job for free.

  10. Joosh RicoJoosh Rico12-28-2012

    Hello, would like to know how to operate the slider on my blog, eh followed instructions but does not work, I want to leave the images as shown in the topic hope you can help me greetings!

    Joosh

  11. AlexanderAlexander12-28-2012

    I’m no longer with the Pinboard theme.

    The tutorials are still accessible but no longer supported.

    /closed