Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #20006

    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

    #105944

    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

    #105945

    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 618×177 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

    #105946

    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

    #105947

    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

    #105948

    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

    #105949

    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

    #105950

    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

    #105951

    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

    #105952

    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

    #105953

    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

    #105954

    Hi Nick,

    The function of adding the images above the title of the blog post is no longer working for me. It stopped working a little while ago but I thought it might be due to my lack of updating, so I’ve updated but still now change.

    I’ve checked the code against the above and it all looks correct. The additional image field in the blog post editing page is visible, but when you add an image, the link doesn’t appear and there isn’t an image on the page. I also can’t add images into the actual post.

    Any ideas on a fix or is there an update happening?

    Thanks, Siobhan

    #105955

    Hi,

    My suggestion would be for you to update to the Enfold Theme, which is the latest release since the framework got completely rewritten to take advantage of all the latest WordPress features. And with the new visual layout editor , you can literally build anything you want including the exact look and feel of your current site or give every blog post a completely unique look.

    I see your twitter widget is throwing errors since twitter no longer allows free access to their api.

    I looked at Corona and I have no problems now displaying blog images on the individual post and blog archive page using the built in functionality. .

    http://www.clipular.com/c?6941022=M3RGiO949-T4rbyj8Ek436Wl22M&f=.png

    http://www.clipular.com/c?6523287=caN_DnIoT8VywzsHRQo9zDm14ds&f=.png

    Have you tried all the various layout settings here http://www.clipular.com/c?6941024=XCS4sZNqJFIHTYqE2kizg6Rkzrw&f=.png

    Thanks,

    Nick

    #105956

    Hi Nick,

    Thanks for letting me know about EnFold Theme – it looks fantastic and seems to suit what I’m looking for more than Corona. If I were to purchase and switch to this template, what would happen to my current templates? The back end drag and drop is quite different to the current Template Builder for Corona, so just want to make sure it won’t mess with the site layouts too much before I have chance to edit them.

    For the Twitter widget – it looks normal to me. What errors are you seeing?

    Thanks, Siobhan

    #105957

    Hi,

    I see

    Uncaught ReferenceError: twitterWidgets is not defined line 266

    coming from

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");twitterWidgets.onload = _ga.trackTwitter;</script>

    Oh on second glance this is your google analytics twitter tracker. in any case, you can look here https://github.com/jiankaidang/WebCrawler/tree/master/ResultSet5/pages

    look for page called ‘http:::3doordigital.com:wordpress:plugins:facebook-comments: ‘they have the whole social integration code for google+. twitter, facebook all in one.


    Enfold theme has a set of functions which try to make transition as painless as possible. The templates though will not transfer since by comparison the old templates are limited compared to the new where there are so many ways to customize every single element and combine them that it would be like trying to convert a comfortable horse and carriage into a modern car that simply has no room for a horse, or feed…

    However. in Enfold, templates can be saved and transferred between pages or posts or custom post types and then re-loaded and customized so there is a lot less work. I am not sure how many pages/posts you currently have but, you can import the old posts to look one way and start the new ones in a new way. If you look at some sites 10+ years old you can see that their posts from year 2000 look … well like its year 2000, completely different than their current layout. So visitors expect that.

    For example, you can have a right sidebar that contains one widget but unlike all themes that have this ugly empty area all the way down to the bottom where the sidebar runs the entire length of the page, in enfold the sidebar can stops and the next block of content is full width again, and then can have yet another block with a different middle sidebar and content on the right and left side…

    Can truly build just about any design with it. Very impressive.

    Thanks,

    Nick

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Dynamic Blog Template With Neat Meta Data’ is closed to new replies.