• 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! 🙂

  • Global Moderator

    @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?

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


    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.

  • NodeBB

    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.

Suggested Topics

  • 3
  • 5
  • 3
  • 6
  • 3
| |