Can't use <!-- IF thumb --> in header.tpl file

[dogs]

Hey guys!

I want to display the thumbnail in the topic.

If I use it in topic.tpl it works fine:

<!-- IF thumb -->
<p>Thumb is here</p>
<!-- ENDIF thumb -->

But I want to use it in header.tpl to get out of div.container. But it do not work. My text wont display ... I dont know why. Is there anything I should kno about header.tpl or anything else?

Looking forward!

[baris]

As @PitaJ mentioned header.tpl doesn't have access to the page data, but it is possible to give it access via plugins.

The hook you need to use is filter:middleware.renderHeader. Here is a sample on how to make thumbs available to header.tpl

myPlugin.filterMiddlewareRenderHeader = async function (hookData) {
  if (hookData.templateValues.template.name === 'topic') {
    hookData.templateValues.thumbs = hookData.data.thumbs;
  }
  return hookData;
};

The hook looks like this

const hookReturn = await plugins.hooks.fire('filter:middleware.renderHeader', {
	req: req,
	res: res,
	templateValues: templateValues,
	data: data,
});
return await req.app.renderAsync('header', hookReturn.templateValues);

templateValues is used to render the header and data is the data used to render the page.

This only works for cold loads though since when you ajaxify on the client side the header is not re-rendered so you need to handle client side ajaxify and update the header too.

$(window).on('action:ajaxify.end', function (ev, data) {
     if (ajaxify.data.template.name === 'topic') { 
           // code to update header using ajaxify.data.thumbs
     }
}};

Hope this helps.

[PitaJ]

@dogs header.tpl is rendered separately from the rest of the page. It doesn't have any of that information.

What are you trying to accomplish?

[dogs]

@pitaj said in Can't use <!-- IF thumb --> in header.tpl file:

accomplish

I just wanted to display the thumbnail as a full with header image outside of the div.container which is boxed. Theme Persona.

I thought that would be the easiest solution to put it in the header above the div.container starts.

[baris]

As @PitaJ mentioned header.tpl doesn't have access to the page data, but it is possible to give it access via plugins.

The hook you need to use is filter:middleware.renderHeader. Here is a sample on how to make thumbs available to header.tpl

myPlugin.filterMiddlewareRenderHeader = async function (hookData) {
  if (hookData.templateValues.template.name === 'topic') {
    hookData.templateValues.thumbs = hookData.data.thumbs;
  }
  return hookData;
};

The hook looks like this

const hookReturn = await plugins.hooks.fire('filter:middleware.renderHeader', {
	req: req,
	res: res,
	templateValues: templateValues,
	data: data,
});
return await req.app.renderAsync('header', hookReturn.templateValues);

templateValues is used to render the header and data is the data used to render the page.

This only works for cold loads though since when you ajaxify on the client side the header is not re-rendered so you need to handle client side ajaxify and update the header too.

$(window).on('action:ajaxify.end', function (ev, data) {
     if (ajaxify.data.template.name === 'topic') { 
           // code to update header using ajaxify.data.thumbs
     }
}};

Hope this helps.

[dogs]

@baris Thank you very much. This worked!

€: I additionally use the hook

$(window).on('action:ajaxify.start', function (ev, data) {
   $('div.topic-header-image').hide();
});

so that the header container with the image is hiding immediatly and before ajaxify.end