Ask your WordPress questions! Pay money and get answers fast! (more info)

Modify slider height on the 2nd and following pages of the blog. WordPress

  • SOLVED

I’m designing a WordPress site which hosts a Slider and a Blog with pagination directly in the Home/Main Page.

The problem is that I would like to modify the height of that Slider once any user click on the 2nd page (and following) of that blog using the pagination system. Specifically, the Slider of the Main Page is 750 px and, on the 2nd and following pages of the blog, I would like to reduce the height of that Slider to 500 px.

For more details, I think the following code (below) could be related with this issue. Maybe it’s not the most appropriate code to solve the problem, but I’m not a professional developer. It’s just I think the php code must be introduced in the single.php, however I don’t know where it must specifically be introduced.

If this issue could be solved using CSS in the WordPress Panel, all would be easier. But I’m opened to any better and clean way to solve it, so any suggestion will be more than welcomed.

<strong>css</strong> (on general css panel of the wordpress theme)

.post-id-33 .paged .parallax_slider_outer {
height: 500px;
}


or

<strong>php</strong> (on single.php)

<?php if( is_page() && is_paged() ) { ?>
get_slider('slidertest');
height:500px;
<?php } ?>

Answers (2)

2015-04-04

Dbranes answers:

Not clear what's your setup, but you should most liekly be able to solve this by CSS.

If you're using the <em>body_class()</em> in your body tag, then you can check out how it changes for different page.

For example

/* paged */
.paged .parallax_slider_outer, {
height: 500px !important;
}

/* page */
.page .parallax_slider_outer {
height: 500px !important;
}

/* single post */
.single-post .parallax_slider_outer {
height: 500px !important;
}


Dbranes comments:

ps: There might be other div's inside the div.parallax_slider_outer part set with width = 750px, so you would need to target those as well.

You might also need to adjust this to the responsiveness of the theme by using custom media queries.

It's hard to say without a link to the site.


Ricard comments:

Hello Dbranes

The code seems to work, I miss the parameter “!important;”.

But there is still a problem, the heading text and buttons of the slider keeps the properties of the initial full screen slider and they doesn’t appear (both are hidden) when the slider becomes small in the second page and follows.

Is there any way to complete this code and deactivate this initial full screen in the second page and follows? Or any way to relocate the text and buttons to the correct position when the slider becomes smaller?

By the way, it doesn’t matter the exact number of pixels, I just would like to know the code which let me adapt these buttons and texts.


Dbranes comments:

How do you set the slider height, can you adjust it from the backend?

If so then you might try to override it with an "option" filter in PHP.

Regarding the CSS adjustments, you could additionally, try to target the div children, with data-height="750" (just a pure guess):

.paged .parallax_slider_outer div[data-height="750"] {
height: 500px !important;
}


or try to target the direct div children of div.parallax_slider_outer (just another guess):

.paged .parallax_slider_outer > div {
height: 500px !important;
}


Not sure about the slider text, since I don't know it's HTML structure. But something like:

.paged .parallax_slider_outer .some-text-class-to-modify {
/* some adjustments here */
}


might do the trick, where <em>.some-text-class-to-modify</em> is the class within the slider you want to target.

Then you might need some media queries:

@media only screen and ( min-width: 961px ) {

.paged .parallax_slider_outer {
/* some adjustments here */
}
}

@media only screen and ( max-width: 960px ) {

.paged .parallax_slider_outer {
/* some adjustments here */
}
}


where you have to modify the split points to your needs. Could also be mobile-first or desktop-first approach?


Ricard comments:

Hello again Dbranes,

After doing all tests the code still doesn’t works. Specifically, when I resize the browser window to a mobile or pad size, the code cuts the slider creating a “black empty space” below the slider.

On the other hand, I’ve realized that if I was able to deactivate the function “fullscreen” of the slider, it will use the first size I wrote (750px) with the buttons and texts on a correct position. So it would be great if we could deactivate this fullscreen function with CSS.

For more details, this slider (Nectar Slider) has been created using Visual Composer, which allows me to activate or deactivate this “fullscreen”. Besides, the Visual Composer includes a text field to specify the height that the slider have to take when the fullscreen function is deactivated.

The only problem is that this solution doesn’t allows me to activate the fullscreen function on the 1st page and deactivate it starting from 2nd page and next.

I insist, I’m not a professional but I think that it would be nice if we just could deactivate the “fullscreen” function from the 2nd page. The question is, how?


Dbranes comments:

I guess you use the <em>[nectar_slider]</em> shortcode? It has the <em>full_width</em> and <em>slider_height</em> attributes.

Then you could try conditional shortcodes from [[LINK href="https://wordpress.org/plugins/conditional-tags-shortcode/"]]this plugin[[/LINK]] for exmple and try:

[if is_front_page]
[nectar_slider full_width=”true” slider_height=”750” location="Some Location"]
[/if]
[if not_is_front_page]
[nectar_slider full_width=”false” slider_height=”500” location="Some Location"]
[/if]


where you can also use <em>is_paged</em>, <em>is_page</em>, <em>is_single</em> and all the other conditionals.


[[LINK href="https://www.youtube.com/watch?v=FLU9Pxo_RD8"]]Here's a video[[/LINK]] about this nectar_slider shortcode

Another approach would be to override the [nectar_slider] attributes via filter in PHP.


Ricard comments:

Big thanks for all your good suggestions Dbranes, it finally seems to work like a charm!! :)
I just hope this plug-in keeps working despites any WordPress updates.

2015-04-04

Hariprasad Vijayan answers:

Hello,

Not exactly sure about the code that you shared. Can you share your site URL?

Are you using index.php as home page? Or the slider is working on single.php?

May be you can try following css,

.paged .parallax_slider_outer {
height: 500px;
}

Let me know.

Regards,
Hariprasad


Ricard comments:

Thank you so much for your suggestion Hariprasad , but it hasn’t work.