Adding A Greenshift Transition to Blocksy

greenshift plugin

Greenshift is a WordPress plugin that can be used to create responsive website designs as well as cool animations and page interactions. It pairs very well with the Blocksy Pro plugin and theme. Both WordPress plugins provide some great design tools, but where they shine is the ability to apply code for even greater functionality.

While Greenshift does have a fairly comprehensive Learning Center, it falls a bit short in explaining how to use page transitions between an archive page and a single post, as in the video below.

Applying the page transition between an archive or blog page and a single post requires a unique transition name for each archive post. The Greenshift example spends lots of time explaining how to implement this with a lot of configuration.

I wasn’t sure how to implement this with Blocksy. After viewing the video multiple times, I determined that I just needed to hook the filter that generated the featured image HTML markup. This filter is called on a single post and for each post on an archive page.

To add code to your WordPress site, you will either need to create a child theme and edit the functions.php or you will need a code snippet plug-in like WPCode or Code Snippets. If using one of these plug-ins, ensure the code is set to run on the frontend.

function add_view_transition_to_featured_image($html, $post_id, $post_thumbnail_id, $size, $attr) {
	
    // create a view-transition-name based on the post_id
	$transition_name = "view-transition-name: transition_object_{$post_id};";

	// Extract the existing style attribute from the img tag
	if (preg_match('/style=["\'](.*?)["\']/', $html, $matches)) {
		// Append to existing styles
		$new_style = $matches[1] . ' ' . $transition_name;
		$html = str_replace($matches[0], 'style="' . esc_attr($new_style) . '"', $html);
	} else {
		// add a new style attribute
		$html = preg_replace('/<img/', '<img style="' . esc_attr($transition_name) . '"', $html, 1);
	}
    // Return the generated HTML
    return $html;
}

// hook in our new filter
add_filter('post_thumbnail_html', 'add_view_transition_to_featured_image', 10, 5);

Most modern browsers, except Mozilla Firefox, currently support browser transitions. This means over 85% support for view transitions, with other browsers ignoring the transition.

As written, this snippet adds a unique view-transition-name style attribute to the feature image HTML markup for all post types on the blog page, archive pages, or even search results page. I even realized that this code isn’t specific to Blocksy. Feel free to copy and adapt this code, as this should be theme and plugin-agnostic.

Share This