Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro: Full width images in blog posts
Tagged: parallax pro full width images
- This topic has 8 replies, 3 voices, and was last updated 8 years, 11 months ago by Sridhar Katakam.
-
AuthorPosts
-
May 6, 2015 at 3:06 pm #150468MudMember
Hi
How can I add full width images to blog posts and also have the parallax effect?
I assumed that, much like the static home page, I could use the same effect in the articles I post.
Thanks
May 6, 2015 at 11:51 pm #150528Sridhar KatakamParticipantYou could use the code in parallax.js for the front page's top section for a custom widget area on single posts. Here's an example.
1) In
functions.php
, addgenesis_register_sidebar( array( 'id' => 'single-parallax-section', 'name' => __( 'Single Parallax Section', 'parallax' ), 'description' => __( 'This is the parallax section below nav on single Posts.', 'parallax' ), ) );
2) Create a file named
single.js
in /js directory inside the Parallax Pro having this code:jQuery(function( $ ){ // Enable parallax $(window).scroll(function(){ scrolltop = $(window).scrollTop() scrollwindow = scrolltop + $(window).height(); $(".single-parallax-section").css("backgroundPosition", "50% " + -(scrolltop/6) + "px"); }); });
3) Create a
single.php
in the theme folder having this code:<?php add_action( 'genesis_after_header', 'sk_single_parallax_section' ); function sk_single_parallax_section() { genesis_widget_area( 'single-parallax-section', array( 'before' => '<div class="single-parallax-section widget-area"><div class="wrap">', 'after' => '</div></div>', ) ); } // Enqueue Parallax add_action( 'wp_enqueue_scripts', 'sk_enqueue_single_scripts' ); function sk_enqueue_single_scripts() { wp_enqueue_script( 'single', get_stylesheet_directory_uri() . '/js/single.js', array( 'jquery' ), '', true ); } genesis();
4) Add the following in style.css:
.single-parallax-section { margin-top: 70px; padding: 190px 0 200px; background-image: url("//demo.studiopress.com/parallax/wp-content/themes/parallax-pro/images/bg-1.jpg"); background-attachment: fixed; background-color: #fff; background-position: 50% 0; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: #fff; text-align: center; } .single-parallax-section h4.widget-title { color: #fff; font-size: 72px; margin-bottom: 40px; }
5) Go to Appearance > Widgets, drag a text widget into the 'Single Parallax Section' widget area and put in your desired title and text.
Change the background image URL in the above.
May 7, 2015 at 2:34 am #150538MudMemberWow!
Thanks very much! I might try this but the obvious caveat being the process of posting new articles.
How about just having a full width image as shown on the site below?
May 7, 2015 at 3:57 am #150544MudMemberHi
I tried the code on my test site and it works, but adds the widget to every single post....Is it possible to add a different one for each post?
May 7, 2015 at 5:56 am #150590MudMemberJust to be more clear Sridhar is it possible to do what your widget does but in a normal blog post template and say by choosing featured image?
May 9, 2015 at 3:21 pm #151318pxlar8Member+1 on Mud's question. Would also love to know the answer.
May 9, 2015 at 3:29 pm #151321Sridhar KatakamParticipantYes, possible.
You can use a plugin like https://wordpress.org/plugins/genesis-custom-headers/ or http://robincornett.com/plugins/display-featured-image-genesis/.
Let me know if you would like to know how to do the same w/o using a plugin.
May 10, 2015 at 10:20 am #151514MudMemberThanks Sridhar,
I discovered and am now subscribed to your website!
Thanks for the links to the plugins but they do not do the parallax style.
Basically I would love to have parallax style on blog posts using code and using the featured image as the trigger to enable it, and that way the posts on which I don't use an image just look as normal...
May 11, 2015 at 4:50 am #151674 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.