Dynamically adding Background Image to Blog Post Titles

Permalink
I have just completed building a custom blog for my new portfolio website. Its working really well. I would like to dynamically to put different background images on the blog title for each post. I want to set it up so I can added a field in Composer that allow me to upload a background image on title. What is a good way to start tackling this issue?

Here is a picture of the design I had in mind.

1 Attachment

stewblack23
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi stewblack23,

Here is one approach using page attributes.
- You could reuse the existing "Thumbnail" Image/File page attribute or create a new page Image/File attribute.
- This attribute would be added to the Composer form of your blog post page type.
- You could then create a custom template for the Page Title block (assuming you are using that block for your blog titles) where you retrieve that page attribute value.
- The page attribute value will be a file object that you can use to get the image's relative path. This path could be used for an inline background style.
stewblack23 replied on at Permalink Reply
stewblack23
Thanks for the reply.
- I figured that I could use page types > Blog Entry> Edit Form then add a form image control.
- I'm already using a custom page templates for the blog post type and using the page title block to display the title.

I think the hard part of me would be trying to figure out file ID. I'm not very good in PHP and don't even know where start with that.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@stewblack23

When editing your blog entry page type form, in the "Add Form Control" modal, you would add your Image/File attribute listed under "Custom Attributes".

Here is an example custom template for the Page Title block using the Thumbnail page attribute. The template is a copy of the default view.php with the changed code in "CHANGES/END CHANGES" comments.
- application\blocks\page_title\templates\page_title_background.php
<?php  defined('C5_EXECUTE') or die('Access Denied.');
// CHANGES
// get the current page object
$currentPage = Page::getCurrentPage();
// get the thumbnail attribute of the current page
// - if a thumbnail image was set, the thumbnail attribute will be a file object
$thumbnailAttribute = $currentPage->getAttribute('thumbnail');
$thumbnailImageRelativePath = false;
// if the thumbnail attribute is an object, then use the getRelativePath() method to get the thumbnail image's relative path
if (is_object($thumbnailAttribute)) {
    $thumbnailImageRelativePath = $thumbnailAttribute->getRelativePath();
}
// END CHANGES
if ($useFilterTitle) {
    if (is_object($currentTopic) && $useFilterTopic) {

- after applying the custom template, you should see a background image if a thumbnail image was selected
- if a thumbnail image was selected, the title will have a "page-title-background-image" class that you can use to add additional CSS properties like background-repeat, background-size, and background-position (this CSS can be added in the block template, a separate block template CSS file, or put in your theme)
stewblack23 replied on at Permalink Reply
stewblack23
Wow. Thanks. This is a great help. I'm working on the site now and will try this tomorrow. The CSS is the easy part. Just the PHP code would have taken me forever to figure out.