Thread tagged as: Question

Meta Data in portfolio detail page

Hi, How would you change the meta data for each portfolio item if you have created a protfolio thorugh the perch_content_custom tags? I have used the the below code for the detail pages but obviously there no page details each portfolio item. Thanks!



<!DOCTYPE html>
<html lang="">
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>John Mark Films - Luxurious, creative, inspiring wedding videos</title>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <!-- Font -->
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <link rel="stylesheet" href="css/elegant-font.css">
      <link rel="stylesheet" href="css/linearicons.css">
      <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
      <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
      <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
      <!-- OWL CAROUSEL
         ================================================== --> 
      <link rel="stylesheet" href="css/owl.carousel.css">
         ================================================== --> 
    $domain        = 'https://'.$_SERVER["HTTP_HOST"];
    $url           = $domain.$_SERVER["REQUEST_URI"];
    $sitename      = "John Mark Films";
    $twittername   = "@johnmarkfilms";
    $sharing_image = '/images/collection.jpg';


      'template' => 'default.html'    
      <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" />

      <!-- Main Style -->
      <link rel="stylesheet" href="style.css">
      <!-- color scheme -->
      <link rel="stylesheet" href="switcher/demo.css" type="text/css">
      <link rel="stylesheet" href="switcher/colors/yellow.css" type="text/css" id="colors">
      <!-- Favicons
         ================================================== -->
      <link rel="shortcut icon" href="favicon.png">
<?php include('includes/analyticstracking.php'); ?>
      <?php include('includes/navigation.php');?>

                <?php perch_content_custom('Weddings', array(
'template'=> 'wedding_detail.html',
'filter' => 'slug',
'match' => 'eq',
'value' => perch_get('s'),
'count' => 1,
          <?php include('includes/latest-projects.php');?>

            <?php include('includes/footer.php');?> 
Jade Marling

Jade Marling 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

You could add the fields to your portfolio item and then display them in the head using their own template.

So add them as extra fields on the portfolio item? How would I then show them in the head?

You could do it like this:

  • Pass the portfolio item's perch_content_custom function result into a variable
  • Grab the relevant data (e.g. title and description) from the array and turn them into variables too
  • Then pass them as layout variables to the head file and…
  • Display them in the head using perch_layout_var

So from that, in the portfolio_detail.html page I've now added the follwing to the bottom of the page.

<meta property="og:site_name" content="<perch:content id="sitename" type="hidden" suppess="true" />" />
    <meta property="og:url" content="<perch:content id="vimeoCode" type="text" label="Vimeo Code" help="This is the numbers sequence e.g 203149445" suppess="true" />" />
    <meta property="og:title" content="<perch:content id="og_title" label="Social title" type="text" escape="true" help="Title for this document with no branding or site name" divider-before="Facebook Open Graph Tags"  suppess="true" />" />
    <meta property="og:description" content="<perch:content id="og_description" label="Social description" type="textarea" size="s" escape="true" / suppess="true" >" />
    <meta property="og:video" content="<perch:content id="og_video" type="text" label="Vimeo Code" help="This is the numbers sequence e.g 203149445" suppess="true" />" />

    <perch:if exists="og_type">
    <meta property="og:type" content="<perch:content id="og_type" label="Facebook type" type="select" options="article,book,profile,website,video,music" allowempty="true"  suppess="true" />" />
    <perch:if exists="og_author">
    <meta property="article:author" content="<perch:content id="og_author" type="hidden"  suppess="true" />" />

How would I then get these attibutes into the head section of the page? And if that's with perch_layout_var can you let me know how that works because I'm not too sure how to use it

Drew McLellan

Drew McLellan 2638 points
Perch Support

In the head of your page use perch_content_custom() to display the region, using a template with just those meta tags in it.

Thanks Drew, that worked well!