Forum Replies Created
-
AuthorPosts
-
October 31, 2018 at 7:05 pm in reply to: Help with leveraging genesis to control widgetized area with targeted css #224104storynatureMember
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(); ?>
October 30, 2018 at 11:00 pm in reply to: Help with leveraging genesis to control widgetized area with targeted css #224087storynatureMemberSo 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; }
October 30, 2018 at 8:32 am in reply to: Help with leveraging genesis to control widgetized area with targeted css #224068storynatureMemberNever 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 }
October 29, 2018 at 10:58 pm in reply to: Help with leveraging genesis to control widgetized area with targeted css #224057storynatureMemberandytc, 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.
October 29, 2018 at 10:28 am in reply to: Help with leveraging genesis to control widgetized area with targeted css #224040storynatureMemberHi,
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,
Johnny -
AuthorPosts