Forum

Thread tagged as: Question, Events

Adding Facebook 'share' images

Does anyone know how to pull out an image from a Perch Event post and add that to some header code for the Facebook sharing code (below), and if one doesn't exist then fallback to a default image?

<meta property="og:image" content="/path-to-image/image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1201" />
<meta property="og:image:height" content="450" />

Richard
Richard Wiggins

Richard Wiggins 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

You should be able to use a perch:if to test for the image

<perch:id exists="image">
    <img src="<perch:events id="image" type="image" ... />
<perch:else />
    <img src="default.png" ... />
</perch:if>
Richard Wiggins

Richard Wiggins 0 points

7 years ago

Yep, that would be nice and simple Drew, but because it's an Event post page I'm not sure how I'd do that.

Here's my Event page:

<?php include($_SERVER['DOCUMENT_ROOT'].'/perch/runtime.php'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'].'/inc/_doctype.php'); ?>
<?php 
    $title = perch_events_event_field(perch_get('s'),'eventTitle',true);
?>

<head>
    <title><?php echo $title; ?></title>    
    <?php include($_SERVER['DOCUMENT_ROOT'].'/inc/_meta-scripts.php'); ?>
</head>

<body class="default right-align">
    <?php include($_SERVER['DOCUMENT_ROOT'].'/inc/_header.php'); ?>
    <main role="main">

        <section class="first">
            <div>
                <article>
                    <?php       
                        perch_events_custom(array(
                            'filter'=>'eventSlug',
                            'match'=>'eq',
                            'value'=>perch_get('s'),
                            'template'=>'events/event.html'
                        ));
                    ?>

                    <p class="sign-back">
                        <a href="/whats-happening/" class="sign">
                            <span>See More Fun Stuff!</span>
                        </a>
                    </p>
                </article>
            </div>
        </section>

        <section class="find-it">
            <div>
                <article>
                    <h1>Find It!</h1>

                    <?php include($_SERVER['DOCUMENT_ROOT'].'/inc/_findit.php'); ?>
                </article>
            </div>
        </section>

    </main>
    <?php include($_SERVER['DOCUMENT_ROOT'].'/inc/_footer.php'); ?>

    <?php include($_SERVER['DOCUMENT_ROOT'].'/inc/_footer-scripts.php'); ?>
</body>
</html>

The actual content is in 'template'=>'events/event.html'
Drew McLellan

Drew McLellan 2638 points
Perch Support

7 years ago

Copy the fields into a new template for your Facebook tags, and then display the content using that template:

 perch_events_custom(array(
            'filter'=>'eventSlug',
            'match'=>'eq',
            'value'=>perch_get('s'),
            'template'=>'events/facebook.html'
));
Richard Wiggins

Richard Wiggins 0 points

7 years ago

Awesome, thanks Drew!

For anyone else's future reference, my facebook.html looks like this:

<perch:if exists="image">
    <meta property="og:image" content="https://www.perfectworldicecream.co.uk<perch:blog id="image" type="image" />">
<perch:else />
    <meta property="og:image" content="https://www.perfectworldicecream.co.uk/img/pwic.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="600">
    <meta property="og:image:height" content="378">
</perch:if>