💼Case Studies (All case studies) Template

Principle has a template for the Case Studies (All case studies) page, which shows all of the case study of your publication. Case Studies page is not required, but you can add it if you want.

To add Case Studies Page:

To add an Case Studies Page to your publication, you'll need configure and upload routes.yaml file.

Adding an Case Studies Page:

1. In your Ghost admin area, go to Pages and click on the New Page button in the top right corner.

2. Title your page. You can choose any title you like for the Case Studies.

3. Click icon in the top right corner to open the Page settings
4. In the Page URL section, ensure the slug is set to case-studies. This links the page to the route you've set up in your routes.yaml file.

5. Optionally, you can add an excerpt and feature an image to make the page more engaging.

6. Once you're done, click on Publish to make your Projects Page live.

To add a company logo to a case study card:

To add a company logo, the logo must first be added to the theme folder. Locate the "assets" folder and add the logo to the "images" folder. If there is no "images" folder in "assets," you need to create one. Then, specify the required path in the code. After adding a logo to the theme, reload the theme

1. Check the case study slug. You can do that in Post settings in the admin panel.

2. Combine the slug with case-study-card to build a CSS class. For example, if the slug is 'spectra', the CSS class will be .case-study-card__spectra.

3. Go to Settings -> Code Injection from Admin Panel

4. Add the following code in the Site Footer section:

For example:

<style>
  .case-study-card__spectra::after {
    content: '';
    background-image: url('../assets/images/spectra.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 24px;
    left: 24px;
    width: 113px;
    height: 29px;
  }
</style>

Copy and add your params:

<style>
    .case-study-card__CHANGE_THIS_TO_POST_SLUG:before {
        content: "";
        background-image: url(URL_TO_YOUR_IMAGE);
    }
</style>

Paste the URL of the image or emoji to the background-image: url(HERE).

Click Save

Contact form in Sidebar

Principle offers a contact form in sidebar on case studies page. For an easy way for your readers to reach you, add a contact page using Formspree.

Add your Formspree endpoint:

• Go to the 'Design & branding' settings in the Ghost Admin.

• On the right you’ll see the tab 'Homepage' – expand this settings list and go to the Formspree endpoint.

• Please provide your Formspree endpoint, e.g https://formspree.io/f/xhyplkej

• Finally, click Save to activate.

Customize the title and text for your contact form.

Contact form in sidebar

Add title for contact form

• Go to the 'Design & branding' settings in the Ghost Admin.

• On the right you’ll see the tab 'Site wide' – expand this settings list and go to the "Sidebar contact form title".

  
• Add title.

• Click Save to display.

Add addiotional text for contact form

• Go to the 'Design & branding' settings in the Ghost Admin.

• On the right you’ll see the tab 'Site wide' – expand this settings list and go to the "Sidebar contact form text".

  
• Add title.

• Click Save to display.