Dynamic Blog Template With Neat Meta Data « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Corona

not a support question

Dynamic Blog Template With Neat Meta Data

11 posts from 2 voices

Started 3 months ago by siobhan13
Latest reply from Nick
This topic is not a support question

Tags:

siobhan13
Member

Hey,

I'm trying to create a blog that has a small featured image and extract on the Blog Homepage/Landing page and then for each individual post it has two columns with two thirds blog post content and a large featured image at the top with meta data under the title and a sidebar on the right.

There have been lots of other threads relating to editing the blog page with suggestions I have followed without success -
http://www.kriesi.at/support/topic/where-are-those-blog-templates

Currently, the featured images aren't showing at all - either on the blog homepage or the post page and the metadata isn't sitting neatly under the title.
http://etool.net.au/eblog/
http://etool.net.au/eblog/design/how-to-design-low-carbon-buildings/

The last few posts layout are set to big preview with right sidebar.

I think I'm almost there, just need a few tweak ideas for the Loop-Index.PHP and the CSS.

Many thanks, Siobhan

Posted 3 months ago #
Nick
Moderator
Hi,

To fix the meta data please add this to Quick CSS located in the backend Corona > Theme Options > Styling ... text area at thethe bottom of the page.; or you can also add it to your /css/custom.css file .
```
#top .small_image .blog-meta{float: left;}
```
----Images

I think there may be a temporary issue with the blog images. Here is a quick workaround.

1) Please add the code from this page to the bottom of your functions.php file http://pastebin.com/7tWgQUKb

2) This will create an additional upload field in your Post page. Add the images through there , making sure they are of the correct size. When you add the image you will be given 2 options to either 'use as featured image', or to insert image into post. You need to select 'Insert into Post'. When you return to the Post page, you should see a url to the image located in the images field just as you see here http://www.clipular.com/c?2046620=DlOEEqL22YZHr8Nd45sjs5hvc24

3) Please open /includes/loop-index.php and find line 15 which is the empty line after line 14 which looks like
```
<div class='post-entry'>
```
please add the code below on line 15 which is empty
```
<?php
$blog_feature_image1 = get_post_meta($post->ID, 'nick_featured-image-blog', true);
if(isset($blog_feature_image1) && $blog_feature_image1)
{
    echo '<img src="'.$blog_feature_image1.'" width="618" height="177" >';
}
?>
```
Its just a patch for now, and a proper update should be out in not time at all.

Thanks,

Nick
Posted 3 months ago #
siobhan13
Member

Hi Nick,

Thanks for you help.

I've followed the steps above and have encountered a few problems...
1. The blog landing page is still showing full blog posts instead of extracts - http://etool.net.au/eblog/
2. The meta data is still looking odd, there is a lot of white space between the bits of information and the bottom line of the data is longer than the top line.
3. Once I added the code, the additional upload field appeared in the post editing section but when I added a picture, the URL didn't show. I tried adding a few different images, in gallery, media library and from my computer but nothing happened.
4. So the images aren't showing up on the blog landing page or individual page just boxes where it should be.
5. Code is also showing up next to where the image is supposed to be - would this still be there if an image was attached?

I think having the large 618x177 image would be fine with the post extract on the blog landing page instead of a small featured image. Just need a bit more help to fix the issues please!

Do you think it could be a conflict in the CSS or loop-index.PHP? I have followed a number of other support threads and made some changes so that might be the problem...

Thanks, Siobhan

Posted 3 months ago #
siobhan13
Member

Hi Nick,

I've taken the Code for line 15 out so that it doesn't show on the blog page, but I've also noticed that when I try to add pictures normally inside the blog post it's not inserting them.

It's going through the motions, but not image is showing. Maybe something wrong with the code from Pastebin? http://pastebin.com/7tWgQUKb

Hope you have a fix I can use!

Thanks, Siobhan

Posted 3 months ago #
Nick
Moderator
Hi,

Code on pastebin is fine since I created and tested it out locally before pasting it there. Please add the code back.

1) To get the excerpt on blog list page please find the code in /includes/loop-index.php which looks like (around line 119)
```
if(has_tag() && is_single())
```
and add the code below *before* that line
```
if(is_single()){
     the_content(__('Read more  →','avia_framework'));
}else{
     the_excerpt();
}
```
2. Please provide an illustration, pointing to what you are referring to.
3) Have you clicked the ''Insert into Post' after selecting and uploading the image?
4 & 5) You need to first correctly add the image in step 3 . Please look at this image, and notice the Insert into Post button, that is the button you need to click when adding a blog image.

Thanks,

Nick
Posted 3 months ago #
siobhan13
Member

Hi Nick,

Thanks for all your help :)

1. I've added the excerpt code in, replacing this line which worked fine - the_content(__('Read more →','avia_framework'));

2. For the meta data, space and line issue, here is how it looks for me http://i.imgur.com/inPvaeq.png

3. I've clicked "Insert Into Post" and the URL isn't showing in the box (same as before) but if I click Link URL and then insert into post, the link shows in the box. However after hitting update post, the image isn't showing on the blog homepage or individual post page, just the code and an image box.

As I mentioned I also cannot add media into the post through the usual "insert into post" way which is why I'm thinking there might be a conflict somewhere.

Any ideas?

Thanks, Siobhan

Posted 3 months ago #
Nick
Moderator
Hi,

For this page > http://etool.net.au/eblog/ Your line numbers and mine must not match in file loop-index.php. Would you put this in front of the code I gave you inside loop-index.php
```
<?php
```
and this behind the code I gave your previously
```
?>
```
2> Here is the css for the meta location, and please add it to the end of the custom.css file or to Quick CSS:
```
#top .small_image .blog-meta {
width: 610px !important;
}
```
3> Here is a screen-cast I made for you showing the process. https://docs.google.com/file/d/0B8hqGBMSfHtKZlUydlIzX1NnYkE/edit?usp=sharing\

Thanks,

Nick
Posted 3 months ago #
siobhan13
Member

Hi Nick,

1. I've updated with the additional PHP beginnings and endings and looks fine now.

2. CSS worked as well and the meta data is much neater.

3. Thanks a lot for doing the screen-cast - I've made one to show you how I've been doing it (same as you did in the video) but the outcome is not the same.
The image still isn't showing up on the blog or post pages. Obviously there is nothing wrong with the code you've written as it works on your example :), but this is why I'm thinking there is a code conflict in my edited theme.
Here is the screen-cast http://www.screencast.com/t/Cv7z10k3d

Let me know what you think.

Thanks, Siobhan

Posted 3 months ago #
Nick
Moderator
Hi,

Upload seems to work, though you didnt show the upload text box after you saved the page. If the image url is still there that's fine. The problem is that the code that is supposed to execute the image instead gets displayed on the page as though it is text.

Please delete the code I gave you before, and in its place, please paste this
```
<?php
$blog_feature_image1 = get_post_meta($post->ID, 'nick_featured-image-blog', true);
if(isset($blog_feature_image1) && $blog_feature_image1)
{
    echo '<img src="'.$blog_feature_image1.'" width="618" height="177" >';
}
?>
```
I could see in your video, that you did not add the <?php to the start of the code and ?> at the end of the code. Please do this, and things will start working again. Thanks for the video.

Nick
Posted 3 months ago #
siobhan13
Member

Hi Nick,

Thanks for the new code. It works perfectly!

I put the php in front of the excerpt code that you gave by mistake. Do I need to add it somewhere else as well or leave it as the new code seems to be working fine?

Also...
1. I would like to create more of a space between the image and the title of the blog post.
2. I would like to lessen the gaps between the blog posts as they are quite far apart.
3. We have a secondary blog in our Help Centre with a few blog posts like this one here http://etool.net.au/support/40_release_notes/etool-again-leading-building-lca-software-2/. I haven't added the image headers yet, but the meta data is still looking odd with a longer line underneath than above.

Any suggestions?

Many thanks,
Siobhan

Posted 3 months ago #
Nick
Moderator
Hi,

Please add these to the end of Quick CSS or /css/custom.css . I modified the first one, but you should modify the second one to make that number less. The third one, please paste as is.

1) You can change the 20 to whatever you want. right now it is at 0.
```
#top .post-entry img {
padding-bottom: 20px !important;
}
```
2) Right now the distance between each blog post is 50px as is shown below, please change that to what you like.
```
#top.page .post-entry {
padding-bottom: 50px !important;
}
```
3)
```
#top .sidebar_left .template-blog .blog-meta {
float: left !important;
margin: 0 0 0 0px !important;
}
```
Thanks,

Nick
Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top