One and others layout – Bottom align

To produce one and others layout with bottom aligning like this:

contentviewspro-oneothers-bottomalign

(as you see on this demo)

These are settings of the View:

  • At top of the Display Settings tab:

    cvp-oneother-layout

  • In Display Settings tab, under Fields Settings >> Thumbnail:

    cvp-oneother-fieldsettings-thumbnail

    Notice: Depending on each case, you might need to adjust value of:
    – Thumbnail Width
    – Thumbnail Height
    – Width
    – Height
    to have perfect bottom align.

  • In the Animation tab:

    Content Views Pro - overlay permanently

  • Optional, in the Style Settings tab, reduce space between items:

    cvp-oneothers-stylesettings-itemmargin

Best regards,

Live Filter – custom style for the checkbox type

This document helps you to style the checkbox type of Live Filter to look like this:

cvp-live-filter-checkbox

To do that, Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter – custom style for the checkbox type */
.cvp-live-filter.cvp-checkbox {
    min-width: 250px;
}

.cvp-live-filter.cvp-checkbox .cvp-label {
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    background-color: #00aeef !important;
    display: block;
    margin-right: 0;
    padding: 10px;
}

.cvp-live-filter.cvp-checkbox .checkbox {
    border-bottom: 1px solid #f3f3f3 !important;
    padding: 5px 0px;
    color: red;
}

Best regards,

How to show the modified date instead of the published date?

Content Views helps you to show posts with their information (title, thumbnail, content, date, so on) in the grid and list easily.
About date, the published date will be shown.

To show the modified date instead of the published date, please add this code to file functions.php in the theme’s folder (or install this plugin Code Snippets then add this code to the “Code” textarea):

// Content Views - Show modified date
add_filter( 'pt_cv_field_meta_date_final', 'cvp_theme_field_meta_show_modified_date', 100, 2 );
function cvp_theme_field_meta_show_modified_date( $args, $utc_time ) {
	global $post;
	$args = mysql2date( get_option( 'date_format' ), $post->post_modified );
	return $args;
}

Best regards,

Glossary layout supports pagination

The default Glossary layout doesn’t support pagination, that is ineffective when there are a lot of posts in your site.
To show a glossary look-alike list, click each index will show relative posts, and support pagination, please follow instructions below:

  • Step 1: add a custom field to every existing and upcoming posts, to store the glossary index.

    Please add this code to file functions.php in the theme’s folder (or install this plugin Code Snippets then add this code to the “Code” textarea):

    // Content Views Pro - add custom field glossary heading for each post
    add_action( 'admin_head', 'cvp_theme_add_ctf_glossary_to_exising_posts' );
    function cvp_theme_add_ctf_glossary_to_exising_posts() {
        if ( !get_option( 'cvp_theme_add_ctf_glossary_index' ) ) {
            global $wpdb;
            $wpdb->query( "INSERT INTO {$wpdb->postmeta} (post_id,meta_key,meta_value)
      SELECT ID, 'cvp_glossary_filter', LEFT(post_title,1)
      FROM {$wpdb->posts} WHERE {$wpdb->posts}.post_type = 'post' AND {$wpdb->posts}.post_status = 'publish'" );
            
            add_option( 'cvp_theme_add_ctf_glossary_index', 1, '', 'no' );
        }
    }
    
    add_action( 'save_post', 'cvp_theme_add_ctf_glossary_to_new_posts' );
    function cvp_theme_add_ctf_glossary_to_new_posts( $post_id ) {
        if ( wp_is_post_revision( $post_id ) )
            return;
    
        $post_title = get_the_title( $post_id );
        update_post_meta( $post_id, 'cvp_glossary_filter', mb_substr( $post_title, 0, 1 ) );
    }
    // End code
    

    Notice:

    Above code works for the Post type.
    To use for Page type, please replace 'post' in above code by 'page'.
    To use for Custom Post type, please replace 'post' in above code by Post Type Key, for example: 'product' or 'event' depends on your post type.

  • Step 2: Create a new View to show the glossary indexes, and allow visitors to filter posts by indexes.
    In Admin area, click Content Views > Add New menu item.

    In Filter Settings tab of the View:

    • select Custom Fields in Advance group, then click Add New button. A new field will be added.
    • select cvp_glossary_filter for the “Field Key”
    • select the checkbox: Show as filters to visitors
    • select the Button option for the Type dropdown

    In Display Settings tab of the View:

    • Select the Grid option for Layout. We do not select Glossary option, as it doesn’t support pagination.
    • Enable pagination

Then save the View, and add View shortcode to where you want to display it.

Best regards,

Change border (width, style, color) of Read More button

To change border (width, style, color) of Read More button of Content Views, please use this CSS:

/* Change border of Read More button */
.pt-cv-view .pt-cv-readmore {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: red !important;
}

.pt-cv-view .pt-cv-readmore:hover {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: red !important;
}

You can change values of width, style, color as you want.

Best regards,

How to switch from Live Filter to Shuffle Filter?

Live Filter is the next generation of filters which is available to your site’s visitors. Live Filter has some advantages over Shuffle filter, but if you like the animation of Shuffle filter, you can easily switch from Live Filter to Shuffle Filter with 2 steps:

1. Disable live filter by deselecting the “Show as filters to visitors” checkbox under Filter Settings >> Advance >> Filter by Taxonomy
Content Views Pro - enable live filter taxonomy

2. Enable Shuffle filter by selecting the top checkbox in “Shuffle Filter” tab

Best regards,

Prevent images in View from being pinned to Pinterest.com

Content Views helps you to show thumbnail image of posts easily.
If you are installing another plugin which adds the “pin” button of Pinterest to images, but want to disable that button for images in View, please add this code to file functions.php in the theme’s folder (or install this plugin Code Snippets then add this code to the “Code” textarea):

// Content Views Pro - Prevent images from being pinned to Pinterest
add_filter( 'pt_cv_field_thumbnail_image_html', 'cvp_theme_field_thumbnail_image_html', 100, 1 );
function cvp_theme_field_thumbnail_image_html( $args ) {
	global $pt_cv_id;
	if ( $pt_cv_id === 'VIEW_ID' ) {
		$args = str_replace('<img', '<img nopin = "nopin" data-pin-nopin="true"', $args);
	}

	return $args;
}

(replace VIEW_ID with ID of your View)

Best regards,

Live Filter – disable loading results on changing filter option, only loading on click “Submit” button

Live Filter helps you to show taxonomies, custom fields… as filter options, which allows your visitors to filter content in their way.
By default, the results are loaded on changing a filter option (select an option from dropdown, select a checkbox, select an option…)
To disable that behavior, and only loading results on click the “Submit” button, please add this code to Custom JS field (the right textarea) in Content Views >> Settings page:

/*Live Filter - disable loading results on changing filter option*/
var cvp_lf_loadonsubmit=function(){$("input, select",".cvp-live-filter").each(function(){$(this).data("nosubmit",!0)})};cvp_lf_loadonsubmit(),$("body").on("pt-cv-pagination-finished",function(){cvp_lf_loadonsubmit()});

Best regards,