Link Media to the file itself, not the media page

When showing the Media type by CVPro, by default the media link is URL of the media page where shows:
– the image, if the media is an image
– the player, if the media is an audio or a video
– the title (includes link) of PDF file, if the media is a PDF file

If you want to link the media to its file directly, please add this code to file functions.php in the theme’s folder:


// Content Views Pro - Link Media to direct file, instead of media page
add_filter( 'pt_cv_field_href', 'cvp_theme_field_href', 100, 2 );
function cvp_theme_field_href( $args, $post ) {
	if ( get_post_type( $post->ID ) === 'attachment' ) {
		$url = wp_get_attachment_url( $post->ID );
		if ( $url ) {
			$args = $url;
		}
	}
	return $args;
}

Best regards,

Live Filter – hide all posts at the beginning

By default, posts will be visible under filters list of Live Filter.
To hide these posts at page load, Please add this code to Custom JS field in Content Views >> Settings page:

$('.cvp-live-filter ~ .pt-cv-view').hide();
$('.cvp-live-filter ~ .pt-cv-pagination-wrapper').hide();
$('body').on('pt-cv-pagination-finished', function() {
    $('.cvp-live-filter ~ .pt-cv-view').show();
    $('.cvp-live-filter ~ .pt-cv-pagination-wrapper').show();
});

Best regards,

Pagination – modify label: first, last, prev, next

Please add this code to file functions.php in the theme’s folder:

// Content Views - Modify pagination label: first, last, prev, next
add_filter( 'pt_cv_pagination_label', 'cvp_theme_pagination_text', 100, 1 );
add_filter( 'pt_cv_pagination_text', 'cvp_theme_pagination_text', 100, 1 );
function cvp_theme_pagination_text( $args ) {
	$args[ 'first' ] = 'First_text_here';
	$args[ 'last' ]	 = 'Last_text_here';
	$args[ 'prev' ]	 = 'Previous_text_here';
	$args[ 'next' ]	 = 'Next_text_here';

	return $args;
}

Best regards,

Scrollable list – fade effect (instead of slide)

This feature only works with Pro version.

By default, the Scrollable list uses the slide effect when switching slides.
To use the fade effect, please:

  • add this code to Custom JS field in Content Views >> Settings page:
    $('.pt-cv-carousel').addClass('carousel-fade');
    
  • add this code to Custom CSS field in Content Views >> Settings page:
    .carousel-fade .carousel-inner .item{-webkit-transition-property:opacity!important;transition-property:opacity!important}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right,.carousel-fade .carousel-inner .item{opacity:0}.carousel-fade .carousel-inner .active,.carousel-fade .carousel-inner .next.left,.carousel-fade .carousel-inner .prev.right{opacity:1}.carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right,.carousel-fade .carousel-inner .next,.carousel-fade .carousel-inner .prev{left:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.carousel-fade .carousel-control{z-index:2}
    

Best regards,

Show the structured data of the WordPress posts list by Content Views

Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.
You can read more about it here.

This document includes solution to display structured data of the WordPress posts list by Content Views (and Content Views Pro) in JSON-LD format.
This data has a short description of each item in the list, and each description points to a separate details page that is focused entirely on one item, for example:

structured-data

To generate that summary structured data, please add this code to file functions.php in the theme’s folder:

// Content Views - show structured data of the posts list
add_action( 'wp_footer', 'cvp_theme_show_structured_data' );
function cvp_theme_show_structured_data() {
	if ( !empty( $GLOBALS[ 'cv_posts' ] ) ) {
		$list = array();
		foreach ( $GLOBALS[ 'cv_posts' ] as $idx => $post ) {
			$list[] = array(
				"@type"		 => "ListItem",
				"position"	 => $idx + 1,
				"url"		 => get_permalink( $post )
			);
		}

		echo '<script type="application/ld+json">{"@context":"http://schema.org", "@type":"ItemList", "itemListElement":' . json_encode( $list, JSON_UNESCAPED_SLASHES ) . '}</script>';
	}
}

Best regards,

Use a third-party lightbox

Content Views Pro helps you to show posts in a lightbox on clicking the post thumbnail easily (click to see sample).
If you want to use a third-party lightbox, please add this code to file functions.php in the theme’s folder:

// Content Views Pro - Use third party lightbox
add_filter( 'pt_cv_field_href_attrs', 'cvp_theme_use_another_lightbox', 100, 3 );
function cvp_theme_use_another_lightbox( $custom_attr, $open_in, $oargs = array() ) {

	/** For example:
	  $custom_attr[] = 'rel="lightbox"';
	  $custom_attr[] = 'data-rel="iLightbox[gallery-1]"';
	 */

	$custom_attr[] = 'LIGHTBOX_HTML_ATTRIBUTE_HERE';

	return $custom_attr;
}

The LIGHTBOX_HTML_ATTRIBUTE_HERE depends on the third-party lightbox you use.

Best regards,

Add custom text, HTML, etc. before (or after) the Title, Thumbnail, Content, Meta Fields, Custom Fields

Content Views Pro helps you to show the Title, Thumbnail image, Content, Meta Fields, Custom Fields of any WordPress posts easily.
You might want to show dynamic, custom info before (or after) one of these fields. To do that, please add this code to file functions.php in the theme’s folder:

/**
 * Add extra info before/after the field.
 * @TODO: Remove any line below if you don't need
 */
add_filter( 'pt_cv_item_title', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_thumbnail', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_content', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_meta-fields', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_custom-fields', 'cvp_theme_custom_content_to_field', 10, 2 );

/**
 * The function to add extra content to before (or after) above field
 * @param string $html
 * @param object $post
 * @return string
 */
function cvp_theme_custom_content_to_field( $html, $post ) {

	$position = 'after'; // or 'before' the field

	ob_start();
	// @TODO: Add text, HTML, PHP code (access current post ID by $post->ID)

	$extra = ob_get_clean();
	if ( $position === 'after' ) {
		$html .= $extra;
	} else {
		$html = $extra . $html;
	}

	return $html;
}

Notice: This task requires your coding skills about PHP, HTML.

Best regards,

Live Filter – put the filters and result in different places (for example: filters in sidebar, result in page content)

Normally, Live filters will show above the result.
Since CVPro 4.9.0 and CV 1.9.9.4, you can put the filters and the result in different places.

# Show filters in Sidebar, show result in a page

  • to show the filters in Sidebar, please add this shortcode to a Text widget in Sidebar:

    [pt_view id="VIEW_ID" show="filter" submit_to="URL_OF_RESULT_PAGE"]
    
  • to show the result in a page, please add this shortcode to the page’s content editor:

    [pt_view id="VIEW_ID" show="result" submit_to="URL_OF_RESULT_PAGE"]
    

Please replace VIEW_ID with ID of your View, replace URL_OF_RESULT_PAGE with URL string of the result page.

Please add shortcode to the “Text” tab to ensure that shortcode is not modified unexpectedly:
CVP - add shortcode to text tab

# Show filters in left side, show result in right side of a page

If your theme has no Sidebar for a page, you can show filters in the left side, show result in the right side of a page with this code:

<div class="pt-cv-wrapper">
	<div class="row">
		<div class="col-md-4 col-sm-6">
			[pt_view id="VIEW_ID" show="filter"]
		</div>
		<div class="col-md-8 col-sm-6">
			[pt_view id="VIEW_ID" show="result"]
		</div>
	</div>
</div>

You can switch positions of shortcodes to show filters in the right side, show result in the left side.
To change the width of each side, please change the col-md-4 and col-md-8, the sum of numbers must equal to 12.

The VIEW_ID to show filter and result must be the same. It is NOT possible to use 2 different Views there.

When showing the filters and results in different places, the page will be reloaded on changing filter.

Best regards,

Pagination – CSS selectors

Content Views helps you to show any posts with pagination easily.

Here are CSS selectors for page number, next/prev button when you want to use your own custom CSS:

/* Page number */
.pt-cv-pagination li a {
    
}

/* Page number - active */
.pt-cv-pagination li.active a {
    
}

Notice: For Pro users, please use the Style Settings tab of View to change color, font, align, transform.