+++
date = "2018-08-01T21:37:32+00:00"
publishdate = "2023-12-29T07:08:55+00:00"
title = "Mixing PHP into Hugo"
slug = "mixing-php-into-hugo"
author = "Thedro"
tags = ["hugo","php","webdev"]
type = "posts"
summary =  "Hugo is nice because of its blog template system, static site generation abilities and generic framework structure, but sometimes you may want to add extra functionality that requires dynamic content. "
draft =  ""
syntax =  "1"
toc =  ""
updated =  "2019-05-18"
+++

{{< image source="/images/mixing-php-into-hugo.png" >}} Hugo's Homepage
{{< /image >}}

[Hugo](https://gohugo.io/) is nice because of its blog template system, static
site generation abilities and generic framework structure, but sometimes you may
want to add extra functionality that requires dynamic
{{< sidenote mark="content." set="right" >}}The unholy union of `PHP` and
Hugo.{{< /sidenote >}}

If you are also combining static elements with dynamic functions you may want to
[`DRY`](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) your views to make
everything consistent. It could be that you only want the blog of your website
to be static and everything else to operate dynamically.

We can generate files ending in `.php` using the
[media types](https://gohugo.io/templates/output-formats/#media-types) option in
Hugo, however because the template is in the `layouts/_default` directory, we
can simply inject something like this directly within the `.html`
{{< sidenote mark="files." set="right" >}}This is not recommended if you do not
have complete control of your stack.{{< /sidenote >}}

```go-html-template
{{ safeHTML "<?php require $_SERVER['DOCUMENT_ROOT'] . '/..' . '/views/partials/navigator.php'; ?>" }}
```

This tells Hugo when compiling to insert the above `PHP` code as
[safe HTML](https://gohugo.io/functions/safehtml/) into the statically generated
{{< sidenote mark="files." set="left" >}}When in the context of an HTML
attribute you can use
[safeHTMLAttr](https://gohugo.io/functions/safehtmlattr/).{{< /sidenote >}} If
your web server is set up to parse `.html` files as `PHP` then you are good to
go.

```cfg
# nginx let fastcgi parse .php, .html, and .htm
location ~ \.(php|html|htm)$ {
    include default.d/php_fastcgi.conf;
}
```

More tricks can be had by carefully tiptoeing around the Go
{{< sidenote mark="template." set="left" >}}This is blasphemy ... is what you
are probably thinking.{{< /sidenote >}} You get the best (or worst) of both
{{< sidenote mark="worlds." set="right" >}}This is a partial snippet of an
[image shortcode](https://www.thedroneely.com/git/thedroneely/thedroneely.com/tree/generators/hugo/themes/tdro/layouts/shortcodes/sideimage.html?id=3c0f9c3df4063413ee2ea96c237e990073d85e91)
which automatically sets height and width using `PHP` to prevent image reflow.
This can also be done with plain
[imageConfig](https://gohugo.io/functions/images/#imageconfig).{{< /sidenote >}}

```go-html-template
{{ safeHTML "<?php" }}
$width = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[0];
$height = getimagesize($_SERVER['DOCUMENT_ROOT'] . '{{.Get `source`}}')[1];
$ratio = ((($height / $width) * 100) > 100) ? $height . 'px' : $height / $width * 100 . '%';
{{ safeHTML "?>" }}

<img data-image-zoom src="{{.Get `source`}}" alt="{{.Get `title`}}" title="{{.Get `title`}}"
{{ safeHTMLAttr `<?php echo 'width=' . '"' . $width . '"'; ?>` }}
{{ safeHTMLAttr `<?php echo 'height=' . '"' . $height . '"'; ?>` }} />
```

If you are interested in producing `.php` pages with Hugo, take a
[look at using custom output formats.](https://gohugo.io/templates/output-formats/)
Note that since Hugo version [`0.44`](https://gohugo.io/news/0.44-relnotes/) the
`MediaType.Suffix` is deprecated and replaced with a plural version,
`MediaType.Suffixes`