423,321 Members | 1,167 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,321 IT Pros & Developers. It's quick & easy.

Automatically Display Most Current Post in Blogger (Mobile)

Frinavale
Expert Mod 5K+
P: 9,731
Hi,

I have started a blog for a local group that I volunteer with so that we can communicate with the public, post information about ourselves, and provide a means for the public to get in touch with us. We are using Blogger since it is a free blogging service offered by Google and it is relatively easy to use so that members can maintain the site going forward. Currently the website is using the "Travel" theme that has been modified using CSS to look the way we want it to. (www.wildwindflutechoir.com)

At the request of the organizer for the group, I have modified the "Blog Posts Gadget" so that it only shows 1 post and have removed any widgets that displayed "popular posts" or "past posts". This way only the most recent information/article is displayed on the home page... and the other pages in the site (like the about-us page) don't have old posts lingering around. The main goal was to no longer display information posted about our Christmas activities on our homepage (or elsewhere in the website) now that Christmas is done...unless, of course, you browse to it through the archive links.

This works fine on desktop browsers; however, when I am viewing the website with a mobile device (or by adding the /?m=1 parameter to the URL)...the home page lists all of the posts.

I cannot figure out how to have it automatically display the most recent post instead of this list.

Please provide some advise on how to modify the Home page of my Blogger blog so that it only displays 1 post in mobile view (and preferably the whole post instead of a preview of it)


Thank you

-Frinny
Mar 1 '18 #1
Share this Question
Share on Google+
1 Reply


Frinavale
Expert Mod 5K+
P: 9,731
So, apparently my problem a known bug in the mobile templates.

Apparently, if the post count is set to less than 5 posts, then the mobile homepage will always show minimum 5 posts.

So, to get around this bug I had to edit the site's template and hard code the number of posts shown to 1.

I also, in the case that it is the index page (home page), modified it so that the full post was displayed instead of the mobile index.

I considered displaying both the link to the post along with the full details about the post because I discovered that you cannot navigate to older posts in the mobile version on the home page (you have to be viewing a post for it to detect that there is older content).

After customizing the navigation, and failing to get it to work like the desktop version, I decided to just live without it for the mobile for the time being. At least it is closer to what was requested: show only the most recent content.

The only problem is that now you can't navigate to past posts when viewing the website through a mobile device.

The following code is the modified site template that will show both the link to the most recent post along with the full content of the post:
Expand|Select|Wrap|Line Numbers
  1.  <!-- posts -->
  2. <div class='blog-posts hfeed'>
  3.  
  4.   <b:include data='top' name='status-message'/>
  5.  
  6.   <b:if cond='data:blog.pageType == &quot;index&quot;'>
  7.     <b:loop values='data:posts  limit 1' var='post'>
  8.       <b:include data='post' name='mobile-index-post'/>
  9.       <b:include data='post' name='mobile-post'/>
  10.     </b:loop>
  11.   <b:else/>
  12.     <b:loop values='data:posts' var='post'>
  13.       <b:include data='post' name='mobile-post'/>
  14.     </b:loop>
  15.   </b:if>
  16. </div>
Notice the <b:loop values='data:posts limit 1' var='post'> line...this is the hard coded value to limit the number of posts to 1.


This is what I currently have so that only the full content is displayed for the most current post :
Expand|Select|Wrap|Line Numbers
  1.  <!-- posts -->
  2. <div class='blog-posts hfeed'>
  3.  
  4.   <b:include data='top' name='status-message'/>
  5.  
  6.   <b:if cond='data:blog.pageType == &quot;index&quot;'>
  7.     <b:loop values='data:posts  limit 1' var='post'>
  8.       <b:include data='post' name='mobile-post'/>
  9.     </b:loop>
  10.   <b:else/>
  11.     <b:loop values='data:posts' var='post'>
  12.       <b:include data='post' name='mobile-post'/>
  13.     </b:loop>
  14.   </b:if>
  15. </div>
If anyone has any suggestions about how to get the mobile navigation (mobile-nextprev) to work like the desktop navigation (nextprev) I would love to hear it!

Thanks,

-Frinny
Mar 6 '18 #2

Post your reply

Sign in to post your reply or Sign up for a free account.