- This topic has 17 replies, 4 voices, and was last updated 7 years, 8 months ago by
.
-
Posts
-
Hi,
I've been spending the last couple of weeks on a template where I'm trying to lay out user-submitted reviews without breaking the rest of the site.
An example of the template in question can be found here:
https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/kozjak-falls-slovenia/After taking some PHP for WordPress courses to gain better confidence at digging into the code on my site (where I'm trying to take over from past developers and plugins that have fallen short of completion), I reached a point where there's a bit of a leap between going from 2016-based theme coding in the tutorials to Genesis-based theme coding that my site is currently using.
I'm afraid I reached a point where I'm stuck because it's not clear to me how to properly introduce my widgetized area to my template in the presence of the Genesis Framework.
Currently, it looks like the sidebar area is taken over by some kind of generic Genesis widgetized area (based on the sidebar class it has). I'm worried about making tweaks to it and breaking something else, which is why I'm aiming to wrap my own div or aside so I can better target it in the CSS without unintended consequences elsewhere.
But this is where I don't know what to do next as my current attempts at doing this have failed miserably (see commented code in single-userwaterfallreview.php below).
If anyone in this forum has guidance on this, it would be most appreciated.
Thanks in advance,
JohnnyBelow are what I think are the relevant bits of code:
single-userwaterfallreview.php (the template displaying the user-submitted review):
<?php /** * Template Name: Userwaterfallreview Custom Post Type * Description: This file governs the template for the Userwaterfallreview Custom Post type. * Author: Johnny T Cheng * */ // Force content-sidebar Layout add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); add_action( 'genesis_meta', __NAMESPACE__ . '\\remove_redundant_markup' ); function remove_redundant_markup() { add_filter( 'genesis_markup_content-sidebar-wrap', '__return_null' ); } // Enqueue Template Styles add_action( 'wp_enqueue_scripts', 'wow_userwaterfallreview_enqueue_styles' ); function wow_userwaterfallreview_enqueue_styles() { wp_register_style( 'wow_userwaterfallreview_css', get_stylesheet_directory_uri() . '/css/userwaterfallreview.css', __FILE__ ); wp_enqueue_style( 'wow_userwaterfallreview_css' ); } // Remove default genesis post content remove_action( 'genesis_entry_content', 'genesis_do_post_content' ); // Display userwaterfallreview customized content add_action( 'genesis_entry_header', 'genesis_post_info', 6 ); add_action( 'genesis_entry_header', 'add_post_info_userwaterfallreview' ); function add_post_info_userwaterfallreview() { $post_info = ' submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; printf( '<p class="entry-meta-uwr">%s</p>', do_shortcode( $post_info) ); } add_action( 'genesis_entry_content', 'wow_output_userwaterfallreview_content' ); function wow_output_userwaterfallreview_content() { /* Some ACF support code to display repeater images before actual content */ // check if the repeater field has rows of data if ( have_rows( 'photos', get_the_ID() ) ): ?> <div id="acf-imported-photos"> <?php // loop through the rows of data while( have_rows( 'photo', get_the_ID() ) ) : the_row(); ?> <!-- display the ACF-extracted images and captions --> <a>" data-fancybox="" data-caption="<?php echo the_sub_field( 'caption' ); ?>"><img />" height="160" width="160" alt=""></a> <?php endwhile; ?> </div><!--.acf-imported-photos--> <?php else : // no rows found endif; ?> <div id="uwr-content-left"> <?php the_content(); ?> </div> <!-- #content-left --> <!--<div id="uwr-content-right">--> <!--<aside class="uwr-sidebar">--> <?php //if ( is_active_sidebar( 'userwaterfallreview-sidebar' ) ) : ?> <?php //dynamic_sidebar( 'userwaterfallreview-sidebar' ); ?> <?php //endif; ?> <?php //do_action( '???' ); ?> <!-- </aside> --> <!-- </div> --> <?php } genesis(); ?>the relevant part of functions.php where I registered and hooked the widgetized area:
/* The following code sets up the custom sidebar for the Userwaterfallreview Custom Post type */ // Register new sidebar with ID ==> userwaterfallreview-sidebar genesis_register_sidebar( array( 'id' => 'userwaterfallreview-sidebar', // 'name' => 'Sidebar for Userwaterfallreviews', 'name' => __( 'Sidebar for Userwaterfallreviews', 'genesis' ), // 'description' => 'Sidebar for Userwaterfallreview Custom Post Type', 'description' => __( 'Sidebar for Userwaterfallreview Custom Post Type', 'genesis-wow-child' ), ) ); /*Attempting to add hook for custom sidebar using a tutorial combo from WPMUDEV and some other tutorial*/ //add_action('get_header','update_userwaterfallreviews_sidebar'); add_action( 'genesis_before_sidebar_widget_area', 'update_userwaterfallreviews_sidebar' ); function update_userwaterfallreviews_sidebar() { if ( is_singular('userwaterfallreview')) { // Here "userwaterfallreview" is a slug name for the target CPT remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); // remove the default genesis sidebar add_action( 'genesis_sidebar', 'add_userwaterfallreviews_sidebar' ); // add an action hook to call the function for my custom sidebar } } //Function to output my custom sidebar for userwaterfallreview CPT function add_userwaterfallreviews_sidebar() { dynamic_sidebar( 'userwaterfallreview-sidebar' ); // id of sidebar which I just registered } /* --end of the custom sidebar hook for userwaterfallreview CPT -- */Finally, the enqueued stylesheet userwaterfallreview.css is blank because I haven't figured out how to target the sidebar such that I don't mess up anything else.
https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/kozjak-falls-slovenia/It would be a whole lot easier if you just used the Genesis Simple Sidebars plugin. With the plugin, you build the sidebar and add it to the page through the editor.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?I don't think you need a template for this or need to enqueue a separate stylesheet. On the page you linked i'm only seeing the Primary sidebar.
It might be best to go back to basics and fully explain what you want to achieve here as it might be a case of sledgehammer and nut , It's probably way simpler than you think.
Hi,
Thank you for the responses. To answer the latest response, here's what I'm trying to accomplish.
I have about 1200 visitor-submitted reviews to migrate into the WP website (from a static html website) and I anticipate a similar amount (or more) of user submitted reviews via a front-end form I'm trying to integrate using USP Pro. This doesn't count another 1800 comments to migrate but that is another matter. This gives you an idea of the volume of information I'm trying to gracefully handle.
All these user-submissions are on top of the 1600 custom waterfall writeups I've already imported and about 500 regular posts that were both imported and created in WP. These classes of posts have templates that are already complete and in working order for the most part. But this is relevant because whatever I'm trying to do with the visitor submitted posts cannot affect the already working classes of posts as well as static pages.
So what is it I'm trying to do with the user-submitted posts?
Given the volume of user-submitted post entries I'm trying to handle, I don't think adding sidebars on a post-by-post or page-by-page basis as suggested earlier is an efficient way of going about this problem. This is why I'm trying to create a template to properly display the user-submitted posts (both imported grandfathered ones and new submissions via form), and hence why I have to dig into the code even if I'm not an experienced web developer.
Furthermore, the post URL that I provided in the original post was just one example of a grandfathered post. There's still work to do there like displaying ACF repeater fields to serve up images and video oEmbeds properly. It also has to work with USP Pro form submissions, where I did figure out a way to display images (but the plugin doesn't support ACF repeater fields so I can't make them common). Such requirements are why custom coding is necessary as I have yet to find a lightweight plugin to handle this. I've already gone hiring the custom developer route and the cost is not justified.
In any case, you can see in the post URL that I provided in the original question, there's work to do on the sidebar. There's way too much spacing between each of the widgets, and in smaller screens, I want to put the boxed widgets above the content instead of below. My understanding is that these are CSS changes, which is why I attempted to have a separate stylesheet to handle this case.
I thought this was low-hanging fruit to correct. However, it's not clear to me how to properly introduce the sidebars in my code (and hence the proper classes to target in my CSS) since I'm not certain how to properly introduce Genesis hooks without having undesirable duplications. Perhaps my inexperience in web development is showing. This is where I'm hoping to be guided in the right direction to at least solve this issue and move onto the next issue.
Thanks,
JohnnyOk , I doubt anyone can help with the USP Pro Plugin aspect of this , I pesonally have no experirence with it. Also , I can't be of help with the importing process.
I can show you a template example for the custom post type that you have. We don't need to remove the content as you have in the template code you've posted , we can simply use hooks to place the ACF fields output where we want (or any other content). The actual review content will come from the post editor as normal. I also don't know how you've created the actual custom post type itself or what supports you've added , but i'll include a working example for creating that also.
Regards the ACF fields , the output you posted in the template is obviously non functioning as i can see. I also assume you're using Fancybox Lightbox on these images, so i've included that in the ACF output code. It assumes a repeater field is created with 2 sub fields - review_images and image_caption. Set that to return 'Image Array' and show on it this custom post type.
You'll have to check the field names to match yours or re-create them as shown , the field names are examples. The images are wrapped in a
- class with
- 's , the actual display layout and image size will have to be sorted by you but I've included an inline 'width' declaration as you'll see in the code (i'm not keen on that , but it'll get you started in displaying something). As it is they will display one after the other list style and after the content using a priority. Some code notes are added to help you. If you wanted to display it before the content using just the priority , then just change the '15' to '5' and it will move above the content. Alternatively just change the hook completely to something else - 'genesis_after_entry' for example and remove the priority as required.
Visual Hooks guide here -
Ok , I doubt anyone can help with the USP Pro Plugin aspect of this , I pesonally have no experirence with it. Also , I can't be of help with the importing process.
I can show you a template example for the custom post type that you have. We don't need to remove the content as you have in the template code you've posted , we can simply use hooks to place the ACF fields output where we want (or any other content). The actual review content will come from the post editor as normal. I also don't know how you've created the actual custom post type itself or what supports you've added , but i'll include a working example for creating that also.
Regards the ACF fields , the output you posted in the template is obviously non functioning as i can see. I also assume you're using Fancybox Lightbox on these images, so i've included that in the ACF output code. It assumes a repeater field is created with 2 sub fields - review_images and image_caption. Set that to return 'Image Array' and show on it this custom post type.
You'll have to check the field names to match yours or re-create them as shown , the field names are examples. The images are wrapped in a
< ul >class with< li >'s , the actual display layout and image size will have to be sorted by you but I've included an inline 'width' declaration as you'll see in the code (i'm not keen on that , but it'll get you started in displaying something). As it is they will display one after the other list style and after the content using a priority. Some code notes are added to help you. If you wanted to display it before the content using just the priority , then just change the '15' to '5' and it will move above the content. Alternatively just change the hook completely to something else - 'genesis_after_entry' for example and remove the priority as required.Visual Hooks guide here -
https://genesistutorials.com/visual-hook-guide/
Register the custom sidebar - Place this in functions.php of your child theme
// Register new sidebar for the Userwaterfallreview Custom Post type genesis_register_sidebar( array( 'id' => 'userwaterfallreview-sidebar', 'name' => __( 'Sidebar for Userwaterfallreviews', 'genesis' ), 'description' => __( 'Sidebar for Userwaterfallreview Custom Post Type', 'genesis-wow-child' ), 'before_widget' => '<aside id="%1$s" class="widget userwaterfallreview-sidebar %2$s">', 'after_widget' => '</aside>', ) ); add_action('get_header','add_userwaterfallreviews_sidebar'); function add_userwaterfallreviews_sidebar() { if ( is_singular('userwaterfallreview')) { // show only on single posts for a CPT with a registered name of userwaterfallreview remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); // remove the default genesis sidebar add_action( 'genesis_sidebar', 'waterfallreview_do_sidebar' ); // add action hook to call the function below to output the custom sidebar } } // Output the userwaterfallreview custom sidebar function waterfallreview_do_sidebar() { dynamic_sidebar( 'userwaterfallreview-sidebar' ); // ID of the registered custom sidebar }The Template file to be placed in the child theme root dir - save this as - single-userwaterfallreview.php
<?php /** * Template Name: single-userwaterfallreview.php * Description: This is the Single Post Template file for the Userwaterfallreview Custom Post type. * Author: Johnny T Cheng * */ //Forcing a specific layout for this template - overrides genesis theme settings add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); //Filtering the Post Info add_filter('genesis_post_info', 'wow_post_info'); function wow_post_info($post_info) { $post_info = 'Submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; return $post_info; } // Remove stuff below - for example - if breadcrumbs are enabled for single posts , we can remove them on this template only // Add other remove actions to this list as needed remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); /* -----------------------------------------------------------*/ /* -----------------------------------------------------------*/ /* We dont need to remove the loop or the content */ /* We just add our ACF fields with a hook instead */ /* -----------------------------------------------------------*/ /* -----------------------------------------------------------*/ // Adds our acf repeater fields add_action('genesis_after_entry','add_acf_images' ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority '15' to suit function add_acf_images() { if( have_rows('photos') ): // ACF repeater field named Photos - set to return Image Array ?> <ul> <?php while( have_rows('photos') ): the_row(); // vars $image = get_sub_field('review_images'); // ACF 'Image' sub field named 'Review Images' $image_caption = get_sub_field('image_caption'); // ACF 'Text' sub field named 'Image Caption' ?> <!-- Output set for for fancy box lightbox --> <li> <a href="<?php echo $image['url']; ?>" data-fancybox data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" width="460"/> </a> </li> <?php endwhile; endif; ?> </ul> <?php } genesis();EXTRA if you want it - Register the custom post type with supports - save this file as - userwaterfallreview.php and ZIP it , install via plugins and activate.
<?php /** * Plugin Name: User Waterfall Reviews Custom Post Type * Plugin URI: http://www.worldofwaterfalls.com * Description: A simple plugin that adds a custom post type for Waterfall Reviews * Version: 0.1 * Author: Johnny T Cheng * Author URI: http://www.worldofwaterfalls.com */ function wow_userwaterfallreview_posttypes() { $labels = array( 'name' => 'Water fall reviews', 'singular_name' => 'Water fall review', 'menu_name' => 'Water fall reviews', 'name_admin_bar' => 'Water fall review', 'add_new' => 'Add Water fall review', 'add_new_item' => 'Add Water fall review', 'new_item' => 'New Water fall review', 'edit_item' => 'Edit Water fall review', 'view_item' => 'View Water fall review', 'all_items' => 'All Water fall reviews', 'search_items' => 'Search Water fall reviews', 'parent_item_colon' => 'Parent Water fall reviews:', 'not_found' => 'No Water fall reviews found.', 'not_found_in_trash' => 'No Water fall reviews found in Trash.', ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => array( 'slug' => 'userwaterfallreview' ), 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => 20, 'menu_icon' => 'dashicons-format-status', 'supports' => array( 'title', 'editor', 'author','excerpt', 'thumbnail', 'page-attributes', 'genesis-seo', 'genesis-cpt-archives-settings') ); register_post_type( 'userwaterfallreview', $args ); } add_action( 'init', 'wow_userwaterfallreview_posttypes' );By default the single post for this CPT will already have a unique CSS body class - in this case - single-userwaterfallreview
That can be used to target anything on this page exclusively , nothing else on the site will be affected. Some examples below -/*Some CSS examples Targets the whole page on this CPT only*/ .single-userwaterfallreview { background:green; } /*Targets single post elements on this CPT only - in this case the <u> and <li> are shown as examples */ .userwaterfallreview ul { margin-bottom:0; margin-left:0; } .userwaterfallreview ul li { list-style:none; } /*Targets the whole sidebar on this CPT single posts*/ .single-userwaterfallreview .sidebar { background:red; padding:20px } /*Targets all widgets in the sidebar on this CPT single post*/ .widget.userwaterfallreview-sidebar{ background:blue; padding:20px }Further edit to the template file -
this -
// Adds our acf repeater fields add_action('genesis_after_entry','add_acf_images' ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority '15' to suitshould be this -
// Adds our acf repeater fields add_action('genesis_entry_content','add_acf_images' ,15 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority '15' to suitIf someone could delete the earlier half baked reply #224045 that messed up , be appreciated
andytc, I implemented your suggested changes and I was successfully able to get most of the desired functionality working. The sidebars work and the ACF fields were picked up.
Thank you very much for giving me some mojo on this task.
Now I have to do some more playing around with the CSS to get it right. That part seems a bit less intuitive to me, but I'm going to keep trying and researching some thing before giving in on that.
I also have to figure out why the pinit on hover works for the USP Pro-submission (URL: https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/attempt-to-submit-more-than-one-photo-this-time/) but not for the grandfathered stuff with ACF that we just did (URL: https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/kozjak-falls-slovenia/)
Once again, thank you for your feedback.
Ok , that's great. Not sure what Pinit hover you mean ?
Also , try removing the
<ul>and<li>from the ACF code on the template , I think you'll find your images will fall into place better. They were only added as an example to play with.Never mind about pinit hover. I see on the sandbox2 sites that the pinit hover save button shows up on both examples when you hover over each image. Must be something quirky in my VirtualBox instance.
Tonight, I'll try to play around more with getting rid of the list. I thought there was a strategic reason for listing them because there's a variable number of images.
My next risk to burn down is to do the same thing for video embeds, which I'd be putting below the content and in max-width 640 listed vertically with accompanying caption. So I'll probably be using a hook or lower priority for the div wrapping a loop governing the extraction and display of this info. Would the following proposed code do the trick (assuming I could style this in CSS)?
function add_acf_videos() { if( have_rows('videos') ): // ACF repeater field named Videos - set to return Video Array ?> <div id="acf-video-list"> <ul> <?php while( have_rows('videos') ): the_row(); // vars $video_embed = get_sub_field('video_embed'); // ACF 'oEmbed' sub field named 'video_embed' $video_caption = get_sub_field('video_caption'); // ACF 'Text' sub field named 'Video Caption' ?> <!-- Output set for straight video embeds with caption below --> <li> <video><source src="<?php echo $video_embed['url']; ?>"</video><br> <?php echo $video_caption; ?> </li> <?php endwhile; endif; ?> </ul> </div> <?php }With a straight embed with ACF you don't need the
<video><source>tags in that , unless some reason you really need them.This will display them one after the other responsively (mobile) if you include the CSS I've given you.
Video code for ACF
<?php function add_acf_videos() { if( have_rows('videos') ): // ACF repeater field named Videos - set to return Video Array ?> <div id="acf-video-list"> <?php while( have_rows('videos') ): the_row(); // vars $video_embed = get_sub_field('video_embed'); // ACF 'oEmbed' sub field named 'video_embed' $video_caption = get_sub_field('video_caption'); // ACF 'Text' sub field named 'Video Caption' ?> <!-- Output set for straight video embeds with caption below --> <div class="video-embed"> <?php echo $video_embed; ?> <p><?php echo $video_caption; ?></p> </div> <?php endwhile; endif; ?> </div> <?php }CSS for responsive video and getting started
/* main video container div*/ .video-embed { margin-top: 20px; } /*For responsive video embed*/ .video-embed { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .video-embed iframe, .video-embed object, .video-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* video caption div*/ .video-caption { background: rgba(0,0,0,0.6); color: #fff; padding: 8px; }more info -
https://www.advancedcustomfields.com/resources/oembed/
Obviously you'll have to work this into that template , hooked where you want it , i haven't included that , just edited your code.
Ok , that's 3 million beers you owe me ! LOL
Opps .. another edit
Change the ouput to section to this -
<div class="video-embed"> <?php echo $video_embed; ?> </div> <div class="video-caption"> <?php echo $video_caption; ?> </div>This forum post edit isnt available for long enough
So I implemented the video code for grandfathered content using ACF fields. Looks like it was working pretty well.
But then when I did some regression testing to see if anything else got screwed up, I ran into a situation where new user submissions apparently had the sidebar misplaced whenever the video hook is not commented out.
The sidebar is restored when the video hook is commented out, but then that means the videos won't be shown (not good).
A grandfathered user submission with ACF images is (URL: https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/kozjak-falls-slovenia/)
A grandfathered user submission with ACF videos is (URL: https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/tasmanian-waterfall-videos/)
A new user submission with USP Pro uploaded images is (URL: https://s1.temporary-access.com/~allacros/sandbox2/userwaterfallreviews/test-submission-w-usp-pro-custom-fields/). Note the misplaced sidebar on this one.Any idea what is causing the USP Pro case to treat the sidebars differently?
I've been debugging this for the past few hours and I'm having a hard time with this one.
Below are the latest codes:
single-userwaterfallreview.php
<?php /** * Template Name: Userwaterfallreview Custom Post Type * Description: This file governs the template for the Userwaterfallreview Custom Post type. It's motivated by me taking over from Luka who didn't do anything yet tried to take money from me. * Author: Johnny T Cheng * */ // Forcing a specific layout for this template - overrides genesis theme settings add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); // Enqueue Template Styles add_action( 'wp_enqueue_scripts', 'wow_userwaterfallreview_enqueue_styles' ); function wow_userwaterfallreview_enqueue_styles() { wp_register_style( 'wow_userwaterfallreview_css', get_stylesheet_directory_uri() . '/css/userwaterfallreview.css', __FILE__ ); wp_enqueue_style( 'wow_userwaterfallreview_css' ); } // Filtering the Post Info add_filter( 'genesis_post_info', 'wow_post_info' ); function wow_post_info( $post_info ) { $post_info = ' submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; printf( '<p class="entry-meta-uwr">%s</p>', do_shortcode( $post_info) ); // return $post_info; } // Remove undesired widgets below if enabled for single posts by performing remove_action as needed remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); //No need to remove the loop or the content. We just add our ACF fields with a hook instead // Adds our ACF repeater fields for images add_action( 'genesis_entry_content', 'add_acf_images', 1 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_images() { if ( have_rows( 'photos' ) ): // ACF repeater field named photos - set to return array of subfields $featured_photo = get_field( 'featured_photo' ); ?> <div id="acf-featured-photo"> <img src="<?php echo $featured_photo; ?>" alt=""> </div> <div id="acf-photos-list"> <?php while( have_rows( 'photos' ) ): the_row(); // var $image_url = get_sub_field( 'photo' ); // ACF 'text' subfield named 'photo' $image_caption = get_sub_field( 'caption' ); // ACF 'text' subfield named 'caption' ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_caption; ?>"> </a> <?php endwhile; endif; ?> </div> <!--.acf-photos-list--> <?php } // Display USP Pro Uploaded Images add_action( 'genesis_entry_content', 'add_usp_pro_images', 2 ); function add_usp_pro_images( $acf_featured_photo_exists ) { $usp_featured_photo = usp_get_meta(false, 'usp-file-1'); if( !(empty($usp_featured_photo) ) ) { ?> <div id="usp-pro-featured-photo"> <img src="<?php echo $usp_featured_photo; ?>" alt=""> </div> <div id="usp-pro-photos-list"> <?php for( $idx = 1; $idx <= 5; $idx++ ) { //note I set 5 photo limit $usp_file = 'usp-file-' . $idx; $usp_caption = 'usp-caption-' . $idx; $usp_alt = 'usp-alt-' . $idx; $image_url = usp_get_meta(false, $usp_file); $image_caption = usp_get_meta(false, $usp_caption); $image_alt = usp_get_meta(false, $usp_alt); if( !(empty($image_url) ) ) { ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_alt; ?>"> </a> <?php } } ?> </div> <?php } } // Adds our ACF repeater fields for videos add_action( 'genesis_entry_content', 'add_acf_videos', 15 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_videos() { if ( have_rows( 'videos' ) ): // ACF repeater field named videos - set to return array of subfields ?> <div id="acf-video-list"> <?php while( have_rows( 'videos' ) ): the_row(); // var $video_embed = get_sub_field( 'video_embed' ); // ACF 'oEmbed' subfield named 'video_embed' $video_caption = get_sub_field( 'video_caption' ); // ACF 'text' subfield named 'video_caption' ?> <!-- Output set for straight video embeds with caption below --> <div class="video-embed"> <?php echo $video_embed; ?> </div> <div class="video-caption"> <?php echo $video_caption; ?> </div> <?php endwhile; endif; ?> </div> <!--.acf-photos-list--> <?php } genesis(); ?>userwaterfallreview.css
/****************************************************************************** Styling for the User-Submitted Waterfall Review Template ******************************************************************************/ /* styling the main content */ article.userwaterfallreview { max-width: 1024px; width: 100%; } #acf-featured-photo img, #usp-pro-featured-photo img { max-width:640px; height:auto; padding-bottom: 25px; } #acf-photos-list, #usp-pro-photos-list { margin-bottom:5; padding:0; text-align:left; list-style:none; /*float: left;*/ display: inline; margin-left: 0px; margin-right: 0px; } #acf-photos-list img, #usp-pro-photos-list img { position: relative; overflow: hidden; width: 160px; height: 120px; } .video-embed { margin-top: 20px; max-width: 1024; } .video-caption { padding: 8px; margin-bottom: 20px; } /* For responsive video embed */ /*.video-embed { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .video-embed iframe, .video-embed object, .video-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }*/ /* styling the sidebar */ .single-userwaterfallreview .sidebar { padding:25px; } .widget.userwaterfallreview-sidebar{ padding:2px; }The misplaced sidebar link doesn't seem to have the videos , but i can tell you the .site-inner is closing off to early.
The video page link doesn't contain the responsive CSS i gave you , therefore they are not responsive.
I can't help with the USP pro plugin element that's causing the issue , it's not genesis related and you're also using Visual Composer. Too much in the mix to help any further.
You need to put it all together , images , videos and USP pro stuff, and not split it off supplying multiple links to look at , build it the way it needs to be in the final build and trouble shoot that.
Try this -
<?php /** * Template Name: Userwaterfallreview Custom Post Type * Description: This file governs the template for the Userwaterfallreview Custom Post type. It's motivated by me taking over from Luka who didn't do anything yet tried to take money from me. * Author: Johnny T Cheng * */ // Forcing a specific layout for this template - overrides genesis theme settings add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); // Enqueue Template Styles add_action( 'wp_enqueue_scripts', 'wow_userwaterfallreview_enqueue_styles' ); function wow_userwaterfallreview_enqueue_styles() { wp_register_style( 'wow_userwaterfallreview_css', get_stylesheet_directory_uri() . '/css/userwaterfallreview.css', __FILE__ ); wp_enqueue_style( 'wow_userwaterfallreview_css' ); } // Filtering the Post Info add_filter( 'genesis_post_info', 'wow_post_info' ); function wow_post_info( $post_info ) { $post_info = ' submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; printf( '<p class="entry-meta-uwr">%s</p>', do_shortcode( $post_info) ); // return $post_info; } // Remove undesired widgets below if enabled for single posts by performing remove_action as needed remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); //No need to remove the loop or the content. We just add our ACF fields with a hook instead // Adds our ACF repeater fields for images add_action( 'genesis_entry_content', 'add_acf_images', 1 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_images() { if ( have_rows( 'photos' ) ): // ACF repeater field named photos - set to return array of subfields $featured_photo = get_field( 'featured_photo' ); ?> <div id="acf-featured-photo"> <img src="<?php echo $featured_photo; ?>" alt=""> </div> <div id="acf-photos-list"> <?php while( have_rows( 'photos' ) ): the_row(); // var $image_url = get_sub_field( 'photo' ); // ACF 'text' subfield named 'photo' $image_caption = get_sub_field( 'caption' ); // ACF 'text' subfield named 'caption' ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_caption; ?>"> </a> </div> <!--.acf-photos-list--><!-- MOVED THIS BEBFORE THE ENDWHILE --> <?php endwhile; endif; ?> <?php } // Display USP Pro Uploaded Images add_action( 'genesis_entry_content', 'add_usp_pro_images', 2 ); function add_usp_pro_images( $acf_featured_photo_exists ) { $usp_featured_photo = usp_get_meta(false, 'usp-file-1'); if( !(empty($usp_featured_photo) ) ) { ?> <div id="usp-pro-featured-photo"> <img src="<?php echo $usp_featured_photo; ?>" alt=""> </div> <div id="usp-pro-photos-list"> <?php for( $idx = 1; $idx <= 5; $idx++ ) { //note I set 5 photo limit $usp_file = 'usp-file-' . $idx; $usp_caption = 'usp-caption-' . $idx; $usp_alt = 'usp-alt-' . $idx; $image_url = usp_get_meta(false, $usp_file); $image_caption = usp_get_meta(false, $usp_caption); $image_alt = usp_get_meta(false, $usp_alt); if( !(empty($image_url) ) ) { ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_alt; ?>"> </a> <?php } } ?> </div> <?php } } // Adds our ACF repeater fields for videos add_action( 'genesis_entry_content', 'add_acf_videos', 15 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_videos() { if ( have_rows( 'videos' ) ): // ACF repeater field named videos - set to return array of subfields ?> <div id="acf-video-list"> <?php while( have_rows( 'videos' ) ): the_row(); // var $video_embed = get_sub_field( 'video_embed' ); // ACF 'oEmbed' subfield named 'video_embed' $video_caption = get_sub_field( 'video_caption' ); // ACF 'text' subfield named 'video_caption' ?> <!-- Output set for straight video embeds with caption below --> <div class="video-embed"> <?php echo $video_embed; ?> </div> <div class="video-caption"> <?php echo $video_caption; ?> </div> </div> <!--.acf-photos-list--><!-- MOVED THIS BEBFORE THE ENDWHILE --> <?php endwhile; endif; ?> <?php } genesis(); ?>andytc,
I just wanted to let you know that I figured it out after you pretty much got me to look closer at how the div tag was affecting the post scenarios.
Here's the code. I still have more work to do to integrate the videos from USP Pro Form, but I think I can solve that.
<?php /** * Template Name: Userwaterfallreview Custom Post Type * Description: This file governs the template for the Userwaterfallreview Custom Post type. It's motivated by me taking over from Luka who didn't do anything yet tried to take money from me. * Author: Johnny T Cheng * */ // Forcing a specific layout for this template - overrides genesis theme settings add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' ); // Enqueue Template Styles add_action( 'wp_enqueue_scripts', 'wow_userwaterfallreview_enqueue_styles' ); function wow_userwaterfallreview_enqueue_styles() { wp_register_style( 'wow_userwaterfallreview_css', get_stylesheet_directory_uri() . '/css/userwaterfallreview.css', __FILE__ ); wp_enqueue_style( 'wow_userwaterfallreview_css' ); } // Filtering the Post Info add_filter( 'genesis_post_info', 'wow_post_info' ); function wow_post_info( $post_info ) { $post_info = ' submitted ' . __( 'by', 'genesis' ) . ' [post_author_posts_link]' . ' on [post_date]'; printf( '<p class="entry-meta-uwr">%s</p>', do_shortcode( $post_info) ); // return $post_info; } // Remove undesired widgets below if enabled for single posts by performing remove_action as needed remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); //No need to remove the loop or the content. We just add our ACF fields with a hook instead // Adds our ACF repeater fields for images add_action( 'genesis_entry_content', 'add_userwaterfallreview_images', 1 ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_userwaterfallreview_images() { if ( usp_is_submitted() ) { $featured_photo = usp_get_meta(false, 'usp-file-1'); } elseif ( have_rows( 'photos' ) ) { // ACF repeater field named photos - set to return array of subfields $featured_photo = get_field( 'featured_photo' ); } ?> <div id="uwr-featured-photo"> <?php if ( isset( $featured_photo ) ) { ?> <img src="<?php echo $featured_photo; ?>" alt=""> <?php } ?> </div> <!--.uwr-featured-photo--> <div id="uwr-photos-list"> <?php if ( usp_is_submitted() ) { for( $idx = 1; $idx <= 5; $idx++ ) { //note I set 5 photo limit $usp_file = 'usp-file-' . $idx; $usp_caption = 'usp-caption-' . $idx; $usp_alt = 'usp-alt-' . $idx; $image_url = usp_get_meta(false, $usp_file); $image_caption = usp_get_meta(false, $usp_caption); $image_alt = usp_get_meta(false, $usp_alt); if( !(empty($image_url) ) ) { ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_alt; ?>"> </a> <?php } } } else { while( have_rows( 'photos' ) ) { the_row(); // var $image_url = get_sub_field( 'photo' ); // ACF 'text' subfield named 'photo' $image_caption = get_sub_field( 'caption' ); // ACF 'text' subfield named 'caption' ?> <!-- Output set for fancybox lightbox --> <a href="<?php echo $image_url; ?>" data-fancybox="" data-caption="<?php echo $image_caption; ?>"> <img src="<?php echo $image_url; ?>" width="160" alt="<?php echo $image_caption; ?>"> </a> <?php } } ?> </div> <!--.uwr-photos-list--> <?php } // Adds our ACF repeater fields for videos add_action( 'genesis_entry_content', 'add_acf_videos' ); // either change the hook 'genesis_entry_content' and remove the priority or just change the priority to '15' to suit function add_acf_videos() { if ( have_rows( 'videos' ) ): // ACF repeater field named videos - set to return array of subfields ?> <div id="acf-video-list"> <?php while( have_rows( 'videos' ) ): the_row(); // var $video_embed = get_sub_field( 'video_embed' ); // ACF 'oEmbed' subfield named 'video_embed' $video_caption = get_sub_field( 'video_caption' ); // ACF 'text' subfield named 'video_caption' ?> <!-- Output set for straight video embeds with caption below --> <div class="video-embed"> <?php echo $video_embed; ?> </div> <div class="video-caption"> <?php echo $video_caption; ?> </div> <?php endwhile; endif; ?> </div> <!--.acf-photos-list--> <?php } genesis(); ?>I would include a check for ACF and use WordPress functions rather than plugin specific functions if possible especially for custom fields.
If your plugin breaks or becomes inactive, your front end output will return a error which could break your entire site.
- 's , the actual display layout and image size will have to be sorted by you but I've included an inline 'width' declaration as you'll see in the code (i'm not keen on that , but it'll get you started in displaying something). As it is they will display one after the other list style and after the content using a priority. Some code notes are added to help you. If you wanted to display it before the content using just the priority , then just change the '15' to '5' and it will move above the content. Alternatively just change the hook completely to something else - 'genesis_after_entry' for example and remove the priority as required.
- The topic ‘Help with leveraging genesis to control widgetized area with targeted css’ is closed to new replies.