WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
[resolved] Change layout posts on blogpage (9 posts)

  1. jneele
    Member
    Posted 5 months ago #

    Is there a way to change the layout of the posts on the blogpage? Instead of a full-width image and below a full-width of an excerpt of the post, I want sort of a 2-column layout: left the image (square), below the image the date and on the right side the exerpt of the post.
    Can this be done?

  2. CrouchingBruin
    Member
    Posted 5 months ago #

    Have you played around with the postformat.php virtual sub-template? Go to Appearance > Montezuma Options > Sub Templates > postformat.php.

  3. jneele
    Member
    Posted 5 months ago #

    I tried to, but didn't succeed. I'm not an expert in php. Can you give me a hint what lines I have to modify?

  4. CrouchingBruin
    Member
    Posted 5 months ago #

    OK, you don't have to be a PHP expert, you only have to know that anything inside the <?php ... ?> tag is a PHP function call, and if you click on the Limited PHP Code tab in the upper right corner of the screen when you're in the Sub Templates or Main Templates section, you'll see a list of the functions that can be called along with an explanation of what they do. It's more important to be somewhat knowledgeable about HTML and CSS.

    Here are the pertinent lines in postformat.php:

    <?php bfa_thumb( 620, 180, true, '<div class="thumb-shadow"><div class="post-thumb">', '</div></div>' ); ?>
    
    <div class="post-bodycopy cf">
    
    	<div class="post-date">
    		<p class="post-month"><?php the_time( 'M' ); ?></p>
    		<p class="post-day"><?php the_time( 'j' ); ?></p>
    		<p class="post-year"><?php the_time( 'Y' ); ?></p>
    	</div>
    
    	<?php bfa_excerpt( 55, ' ...' ); ?>
    
    </div>

    The first line, which calls bfa_thumb, creates the thumbnail image that you see on the post. Hopefully the other lines are just as clear to you.

    Here's what I did. I made the image smaller, floated it left so the excerpt would move up to the right, then moved the date down below the excerpt. See if these instructions work for you:

    1) Move the line that creates the thumbnail (bfa_thumb) just inside the post-bodycopy DIV.

    2) With the line that you just moved, create a DIV that surrounds it and give it a class of postLeft so we can style it later to float on the left.

    3) Change the first two parameters of bfa_thumb so the thumbnail will look like a square. For example, you can change the 620 to a 180 so that the thumbnail will be 180x180.

    4) Move the post-date DIV (along with its contents) outside of and below the post-body DIV. The post-date DIV, obviously, displays the post date. You will probably want to remove the paragraph tags around the function call so the date fields are on one line:
    Sep 7, 2013
    instead of stacked on top of one another:
    Sep
    7
    2013

    5) Enclose the line which calls bfa_excerpt within a DIV having a class of postRight.

    6) Click the Save changes button (very important; I have made changes without remembering to save them, and then gone and lost them).

    If you examine your site at this point, you'll see that the image is smaller, but it still takes up the same amount of space going across. That's OK, we'll style it in the next part. The date, however, should be at the bottom.

    If you made a mistake, or if you get stuck, let me know. You can always start over by clicking the small reset subtemplate-postformat button that is above the Save Changes button. The reset button will reset the postformat.php file back to it's default settings.

    So now we just have to add some CSS to make it prettier.

    Go to Montezuma Options > CSS Files > various.css. The various.css file is a good place to add your CSS since it comes after all of the other CSS files, allowing you to override any previous CSS. Go to the bottom of that file and enter the following CSS rules:

    .postLeft > div {
      	margin-right: 10px;
      	float: left;
    }
    .post-date {
      border-right: none;
      float: none;
      padding-right: 0px;
      text-align: left;
    }

    If everything worked out correctly, it should look something like this test page. Hopefully you now have enough information where you can make your own tweaks. Let me know if you have any other questions.

  5. CrouchingBruin
    Member
    Posted 5 months ago #

    Hmm, strange, for some reason, my test page shows up fine in Chrome but not Firefox or IE; some process sets the img_wrapper to a value of 0 for width & height. I'll have to take a closer look.

  6. jneele
    Member
    Posted 5 months ago #

    Thanks very much for your comment! Your testpage looks great (in Chrome).
    I think I followed your instructions correctly, but I must have missed something because the square image still takes up the same amount of space going across. My code looks like this:

    <div id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?>>
    
    	<h2>
    		<span class="post-format"></span>
    		<a>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
    		<?php bfa_comments_popup_link( '0', '1', '%' ); ?>
    	</h2>
    
    	<div class="post-bodycopy cf">
    
    	  <?php bfa_thumb( 180, 180, true, '<div class="postleft"><div class="thumb-shadow"><div class="post-thumb">', '</div></div></div>' ); ?>	
    
          <?php bfa_excerpt( 65, ' ...', <div class="postright">', '</div>' ); ?>
    
    	</div>
    
      	<div class="post-date">
    			<p class="post-date"><?php the_date( 'j M Y' ); ?></p>
    	</div>
    
    	<div class="post-footer">
    		<a>" title="<?php the_title_attribute(); ?>">
    		<?php _e( 'lees verder →', 'montezuma' ); ?></a>
    
    		<?php the_tags( '<p class="post-tags">', ' · ', '</p>' ); ?>
    	</div>
    
    </div>

    I also added the code in various.css.
    Hope you can help me a little more.
    Thanx!

  7. CrouchingBruin
    Member
    Posted 5 months ago #

    OK, you just had a few syntax errors in your code, but not bad, you actually did very well.

    I also came up with a fix for the Firefox and IE browsers, but I had to eliminate the gray fade effect; I hope that is OK.

    Here's your corrected code for postformat.php. For the work-around, I took out the DIVs for thumb-shadow and post-thumb; there's some sort of JavaScript that doesn't correctly calculate the width and height of the img_wrapper DIV when the thumb-shadow DIV is floated.

    <div id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?>>
    
    	<h2>
    		<span class="post-format"></span>
    		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
    		<?php bfa_comments_popup_link( '0', '1', '%' ); ?>
    	</h2>
    
    	<div class="post-bodycopy cf">
    
    	  <?php bfa_thumb( 180, 180, true, '<div class="postleft">', '</div>' ); ?>	
    
          <?php bfa_excerpt( 65, ' ...', '<div class="postright">', '</div>' ); ?>
    
    	</div>
    
      	<div class="post-date">
    			<p class="post-date"><?php the_date( 'j M Y' ); ?></p>
    	</div>
    
    	<div class="post-footer">
    		<a class="post-readmore" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    		<?php _e( 'lees verder ?', 'montezuma' ); ?></a>
    
    		<?php the_tags( '<p class="post-tags">', ' · ', '</p>' ); ?>
    	</div>
    
    </div>

    And you need to change the CSS to this:

    .postleft {
      	margin-right: 10px;
      	float: left;
      	padding: 3px;
      	border: solid 1px #ccc;
    }
    .post-date {
      border-right: none;
      float: none;
      padding-right: 0px;
      text-align: left;
    }

    You can see the effects of the changes on my test page. Let me know the address of your site when your done so I can take a look. And post the link as well on the BytesForAll Montezuma Showcase thread, I'm sure everyone would like to see a blog page that is formatted somewhat different than the rest.

  8. jneele
    Member
    Posted 5 months ago #

    This works perfect!
    My site is http://www.jpnc.nl
    I'll post my site on the showcase thread once I've changed the featured images, they're still formated for 620*180px.
    Thanks very much for your help.

  9. jneele
    Member
    Posted 5 months ago #

    Resolved!

Reply

You must log in to post.

About this Theme

About this Topic