Responsive Websites Showcase

Download layout
Author:
Videlin Djedjev
Uploaded on:
July 10, 2024
Categories:
Tags:

This layout is used to showcase websites. For each website, there are 3 devices illustrated - mobile, laptop and tablet, each of which opens a lightbox gallery to display more images. To achieve this, you need a custom post type and some custom fields for the image URLs.

Instructions

This layout uses a custom post type called website. You need to create it and add a meta box where you can enter specific meta data for each post. The meta data contains the image URLs for the 3 devices present in the layout and the image URLs for the galleries they display.
We assume you have the Showcase Creator plugin installed. Additionally, you must either have a child theme installed to edit the functions.php file or use a code snippets plugin to add PHP code.

 
  1. Install the Layout.
  2. Add the following PHP code:
<?php
/**
 * Registers a custom post type called website.
 */
function cpt_website_register() {
	$labels = array(
		'name' => 'Websites',
		'singular_name' => 'Website',
		'menu_name' => 'Websites',
		'all_items' => 'All websites',
		'add_new_item' => 'Add new Website',
		'edit_item' => 'Edit Website',
		'new_item' => 'New Website',
		'view_item' => 'View Website',
		'view_items' => 'View Websites',
	);
	$args = array(
		'public' => true,
		'labels' => $labels,
		'description' => 'For Websites Showcase.',
		'menu_position' => 26,
		'menu_icon' => 'dashicons-desktop',
		'supports' => array( 'title', 'excerpt', 'comments' ),
		'register_meta_box_cb' => 'cpt_website_add_metabox',
	);
	register_post_type( 'website', $args );
}
add_action( 'init', 'cpt_website_register' );

/**
 * Adds meta box to website post type.
 */
function cpt_website_add_metabox() {
  add_meta_box( 'cpt-website-metabox', 'Website Data', 'cpt_website_metabox', 'website', 'normal', 'high' );
}

/**
 * Processes gallery entries from meta data to custom field.
 * @for website post type.
 */
function cpt_website_get_gallery( $str ) {
    return implode(
        PHP_EOL,
        array_map(
            function($i) {
                return trim( $i, "' " );
            },
            explode( ',' , $str )
        )
    );
}

/**
 * Processes gallery entries from custom field to be saved to meta data.
 * @for website post type.
 */
function cpt_website_set_gallery( $str ) {
	$items = preg_split( '/,|\s+|\n+/', $str );
	$items = array_filter( $items, function( $i ) {
		return strlen( trim( $i ) ) > 1;
	} );
	$items = array_map(
		function( $i ) {
			$split = str_split( trim( $i ) );
			if ( $split[0] !== '\'' ) {
				$i = '\'' . $i;
			}
			if ( array_pop($split) !== '\'' ) {
				$i = $i . '\'';
			}
			return $i;
		},
		$items
	);
	$items = implode( ',', $items );
	return $items;
}

/**
 * Displays meta box with custom fields.
 * @for website post type.
 */
function cpt_website_metabox( $post ) {
	$url = get_post_meta( $post->ID, '_site_url', true );
	$desktop = get_post_meta( $post->ID, '_desktop', true );
	$desktop_gallery = get_post_meta( $post->ID, '_desktop-gallery', true ) ?: '';
	$desktop_gallery = cpt_website_get_gallery( $desktop_gallery );
	$tablet = get_post_meta( $post->ID, '_tablet', true );
	$tablet_gallery = get_post_meta( $post->ID, '_tablet-gallery', true ) ?: '';
	$tablet_gallery = cpt_website_get_gallery( $tablet_gallery );
	$mobile = get_post_meta( $post->ID, '_mobile', true );
	$mobile_gallery = get_post_meta( $post->ID, '_mobile-gallery', true ) ?: '';
	$mobile_gallery = cpt_website_get_gallery( $mobile_gallery );
	ob_start(); ?>
	<style>
		.sites-metabox {
			display: flex;
			flex-flow: column nowrap;
		}
		.sites-metabox textarea {
			min-height: 5em;
		}
	</style>
	<div class="sites-metabox" style="gap: 10px;">
		<div class="sites-metabox">
			<label for="site_url">URL:</label>
			<input type="text" name="site_url" id="site_url" value="<?php echo $url; ?>" placeholder="https://" />
		</div>
		<div class="sites-metabox">
			<label for="desktop">Desktop thumbnail:</label>
			<input type="text" name="desktop" id="desktop" value="<?php echo $desktop; ?>" placeholder="https://" />
		</div>
		<div class="sites-metabox">
			<label for="desktop-gallery">Desktop gallery*:</label>
			<textarea name="desktop-gallery" id="desktop-gallery" placeholder="space / new line separated URLs"><?php
				echo $desktop_gallery;
			?></textarea>
		</div>
		<div class="sites-metabox">
			<label for="tablet">Tablet thumbnail:</label>
			<input type="text" name="tablet" id="tablet" value="<?php echo $tablet; ?>" placeholder="https://" />
		</div>
		<div class="sites-metabox">
			<label for="tablet-gallery">Tablet gallery*:</label>
			<textarea name="tablet-gallery" id="tablet-gallery" placeholder="space / new line separated URLs"><?php
				echo $tablet_gallery;
			?></textarea>
		</div>
		<div class="sites-metabox">
			<label for="mobile">Mobile thumbnail:</label>
			<input type="text" name="mobile" id="mobile" value="<?php echo $mobile; ?>" placeholder="https://" />
		</div>
		<div class="sites-metabox">
			<label for="mobile-gallery">Mobile gallery*:</label>
			<textarea name="mobile-gallery" id="mobile-gallery" placeholder="space / new line separated URLs"><?php
				echo $mobile_gallery;
			?></textarea>
		</div>
		<span class="font-style: italic;">* URLs can be separated by a space or a new line.</span>
	</div><?php
	ob_end_flush();
}

/**
 * Saves the data from the custom fields.
 * @for website post type.
 */
function cpt_website_metabox_save( $post_id, $post ) {
	if ( $post->post_type === 'website' ) {
		$desktop_gallery = cpt_website_set_gallery( $_POST['desktop-gallery'] ?? '' );
		$tablet_gallery = cpt_website_set_gallery( $_POST['tablet-gallery'] ?? '' );
		$mobile_gallery = cpt_website_set_gallery( $_POST['mobile-gallery'] ?? '' );
		update_post_meta( $post_id, '_site_url', $_POST['site_url'] ?? '' );
		update_post_meta( $post_id, '_desktop', $_POST['desktop'] ?? '' );
		update_post_meta( $post_id, '_desktop-gallery', $desktop_gallery );
		update_post_meta( $post_id, '_tablet', $_POST['tablet'] ?? '' );
		update_post_meta( $post_id, '_tablet-gallery', $tablet_gallery );
		update_post_meta( $post_id, '_mobile', $_POST['mobile'] ?? '' );
		update_post_meta( $post_id, '_mobile-gallery', $mobile_gallery );
	}
}
add_action( 'save_post', 'cpt_website_metabox_save', 10, 3 );
  1. Update and reload.
  2. Open the newly created post type menu and Add a new Website.
  3. Fill the title, the excerpt and also the fields in Layout Data meta box: site URL, thumbnail and gallery image URLs for each device (mobile, desktop, tablet).
  4. Note that the image URLs in the galleries must be separated by newline or space. You must also provide a single image URL for each device.
  5. Publish the post and add more Websites if you need.
  6. Create a page and add the Posts Showcase block.
  7. In the block controls set Websites as a post type and set the current layout to display them.