💡Case Study Template

Principal provides a separate template for case study

To create the Case Study post:

1. Go to Posts from the admin menu.

2. Click the New post button in the top right corner.

3. Add Post title.

4. Add featured image for this page.

5. Click icon in the top right corner to open the Post settings.

6. Add a small description text (inside excerpt). Excerpt: This will be displayed on the case study card.

   
7. Select the Template dropdown and choose the Case Study Post.

8. Click Publish.

To create client date to sidebar:

• Go to Settings > Code injection from the admin menu

• Choose Site footer

  

• Here is the code to add client data such as client name and image, products used, company type, location, methods, and results.

<script data-case-study-clients>
  if (document.querySelector('#spectra')){
    document.querySelector('#spectra').insertAdjacentHTML("beforeend", `
      <div class="sidebar__client">
            <h4 class="sidebar__title">Client</h4>
            <div class="client-info">
                <div class="client-info__img-wrapper">
                    <img class="client-info__img" src="/assets/images/client1.jpg" alt="client img"> // You need to change "src" and specify your path tho the downloaded image
                </div>
                <div class="client-info__wrapper">
                    <span class="client-info__name">Nick Anderson</span> // To change the name
                    <span class="client-info__desc">CEO Spectra</span> // To change the position held
                </div>
            </div>
            <h4 class="sidebar__title">Products used</h4>
            <div class="sidebar__product">
                <span class="sidebar__text">Guides</span> // To change the product name
                <span class="sidebar__desc">Maximized efficiency with guides.</span> // To change the product description
            </div>
            <div class="sidebar__product">
                <span class="sidebar__text">Video Lectures</span> // To change the product name
                <span class="sidebar__desc">Elevated skills with video insights.</span> // To change the product description
            </div>
            <h4 class="sidebar__title">Company type</h4>
            <span class="sidebar__text">Higher Education</span> // To change the company type
            <h4 class="sidebar__title">Location</h4>
            <span class="sidebar__text">Canada</span> // To change the location
            <h4 class="sidebar__title">Methods</h4>
            <span class="sidebar__text">User Research</span> // To change the methods
            <h4 class="sidebar__title">Results</h4>
            <div class="sidebar__result">55+</div> // To change the results
            <span class="sidebar__result-desc">Increase in user engagement.</span> // To change the results description
            <div class="sidebar__result">30%</div> // To change the results
            <span class="sidebar__result-desc">Reduction in checkout time.</span> // To change the results description
        </div>
    `);
  }
</script>

Adding Client Photos to the Theme

To add a client's photo to the website, follow these steps:

1. Locate the theme folder named assets.

2. Inside the assets folder, find an images folder. If it doesn't exist, create a new folder named images.

3. Add the client's photos to the images folder.

4. Specify the correct path in the code to include these images.

5. After updating the theme with new photos, reload the

Please specify the path to the photo:

With local image

<img class="client-info__img" src="/assets/images/client1.jpg" alt="client img">

You can also add photos via the web if you don't want to upload photos to the topic.

With image from web

<img class="client-info__img" src="https://img.icons8.com/emoji/48/fire.png" alt="client img">

• Click Save to save your work!

Starting with Ghost 6.0, themes will display a maximum of 100 case study posts on the case studies page.