CMS Development

megawattmedia
Contributor

blog - listings page global footer and hero image settings

I have created a custom  coded blog template, it's currently pretty straight forward to allow the content editors  to update the hero image and footer images on the post pages, but this also raises the issue of a hero and footer image to be chosen for each post which is uneccessary, i have chosen to have the post page load the hero image autotatmcally from the featuered image.

For the listings pages and blog home page it seems there is no editbale backend and the pages are populated purely by post page data. 

I would like to allow the content editiors to edit a global footer and hero image settings and possibily other global info that appear on the listings pages. 

There seems to be no faciltiy currently for this? 

I kind of created a work around but it's not ideal, making footer and hero load in from posts only on a particular topic name, in this case the topic "header" and "footer" then the most recent post with these tags will populate the listing hero and footer images.

 

I thought another option might be to create an inactive landing page that acted as home or listing page template that could populate the global items. 

 

Thanks, in advance 

0 Upvotes
5 Replies 5
Jsum
Key Advisor

blog - listings page global footer and hero image settings

@megawattmedia,

 

There is not an editing page for the blog listing unfortunately. I have built close to 100 blogs and I have felt this pain close to 100 different ways.

 

one situation is for you to include default content (images in your case) into the modules. These default images will work on your listing page and will be over written by your article pages. If you want to change the listing page images you just need to go into the template and change the default.

 

You weren't far off with using the conditional for certain topics. You could actaully do this same thing only check to see if it's the listing page or an article page though. I've done this to decide whether to use span tags or an h1 on the blog title so it would definitely work for your needs. 

 

I believe it was something like this:

{% if group.absolute_url  %}
     {# use an image module for the listing page  #}
{% else %}
     {# use featured for the article page  #}
{% endif %}

Where group.absolute_url represents the base blog url. This might be the wrong variable though. You can go through the variable in the blog section, I know one is correct. http://designers.hubspot.com/docs/hubl/hubl-supported-variables 

megawattmedia
Contributor

blog - listings page global footer and hero image settings

thank Jsum, 

 

it seems strange that there isn't an easier solution for this as it seems like a realy common issue, especially if you have found this on 100 occasions alone. Is there anywhere to request this feature to be added with the developers. 

 

The template im using is a custom coded template so for the content editors to update the header and footer they would have to edit the coded file which for safety i'd rather be the case.

 

if i split out the hero and footer into custom modules the pulled in by the  blog template and would this use the defualt images set by the content editor. 

 

is having a landing page to work  as a "dummy blog home" "feed only" page a crazy idea? - in theory it would mean you could have a nice easy to update cotent editor home page?

 

forgive the questions but am new to hubspot, normally work with modx, where this would be very straight forward... 

0 Upvotes
Jsum
Key Advisor

blog - listings page global footer and hero image settings

@megawattmedia,

Not a problem. I would suggest global modules over custom modules I think. 

 

Using a landing page for the listing page is an interesting idea. You could definately do this using rss feeds (break them up and customize using HubL). You might have to use the same rss feed multiple times throughout the page to do what you can do natively on a blog listing page. 

 

Since it's custom coded you also have the option of using a different template for either the listing or articles. If you go into content settings you can choose to use different templates for each. You could duplicate your template and make the minor tweaks  to which ever is needed so that they both do what you need without all of the conditional logic. 

 

A global module would probably be the easiest way for the editor to update the listing page without going into the code, however unorthodox. 

0 Upvotes
megawattmedia
Contributor

blog - listings page global footer and hero image settings

@Jsum thanks once again, 

 

I wasn't suggestting to use the landing page as the listing page, that would be an active page and part of the blog system.

 

it would be more of a donor page. that would share the same template layout. 

The content editors could then update the footer - header images and any other content they wished and this would globally feed the blog listing headers and footer. 

 

It was more a method to create a user friendly listing content editor. 

 

I think for now using the global modules for header and footer for the listing / home / page is the way forward. 

 

have you had any joy with a feature requeset for this ?

0 Upvotes
megawattmedia
Contributor

blog - listings page global footer and hero image settings

This was my current work-around for an alternative listing / post header image - the listing view loads from topics with the topic header set - the posts grab from the featured images - then within the post views i hide the post topic output of "header" with css.

 

<!-- HERO SECTION START -->

{% if is_listing_view %}


<div class="hero-height uk-background-cover uk-width-1-1" style="background-image: url('{% set topic_posts = blog_recent_topic_posts('default', 'header', 1) %}
{% for topic_post in topic_posts %}
{{ topic_post.featured_image }}
{% endfor %}');">

</div>

 

{% else %}

{% if content.post_list_summary_featured_image %}

<div class="hero-height uk-background-cover uk-width-1-1" style="background-image: url('{{ content.post_list_summary_featured_image }}');">

</div>

{% endif %}
{% endif %}

<!-- HERO SECTION END -->

0 Upvotes