Viewing 30 posts - 1 through 30 (of 35 total)
  • Author
    Posts
  • #602943

    Hi, I’m trying to figure out how to have a main blog page so that there’s a featured image on the left and then the excerpt and read more link are on the right, next to it.

    The options in the blog layout all put the featured image above the heading, excerpt/read more, unless you set it to the tiny preview image.

    I guess I’d like the right third to be the image from the blog, then the 2/3 to the right to have the heading and excerpt.

    So as you scroll down you see a column of images on the left, and a column of headings and excerpts on the right.

    Ideas?

    Thanks!

    #602944

    adding this to tick the email follow up box as I forgot

    #602959

    to get this effect

    http://www.divergenttravelers.com/travel-blog/

    rather than this

    #603871

    Hey!

    Did you get this sorted out? We don’t see much difference other than the example link is using a full width layout… should you need any help on this please feel free to get in touch with us.

    Regards,
    Vinay

    #606996

    Hi!

    No, not sorted unfortunately. That was just bodged together, a picture on the left and then some manually inputted text with a link to the individual blog page. So it has to be manually entered each time they post a blog…

    We want a regular blog page that when a new entry is posted, it appears automatically like the screenshot above… is that possible?

    All the options seem to bring the image above the excerpt, unless it’s a tiny thumbnail photo to the left.

    Thanks

    #607428

    Hi!

    Set the Blog Styling to Elegant and the Blog Layout to Single author, small preview pic then add this in the Quick CSS field:

    .post_author_timeline {
        display: none;
    }
    
    .small-preview {
        width: 181px;
        height: 181px;
    }
    
    .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
        text-align: left;
    }
    
    .html_elegant-blog #top .post-entry .blog-categories {
        text-align: left;
    }

    Regards,
    Ismael

    #607476

    Thank you for your reply, but it’s not changing it so that the image is next to the text. Image left, text on the right.

    I’m playing with it on this site here:

    The image is still above the text… and it’s tiny…

    ideas?

    V

    #607586

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .page-id-14 .small-preview {
        height: 100%;
    }
    .page-id-14 .blog-meta {
        float: left!important;
        width: 180px!important;
        height: 180px!important;
    }

    Cheers!
    Yigit

    #607695

    Brilliant! That is *almost* there now… if you check back on my page

    http://www.victoria-ward.com/news/

    you’ll see I increased the size of the place I want the image from 180×180 to 280×280 because I want a larger picture there. However the picture doesn’t fill that space…

    Any ideas?

    here’s what I’ve got added to my quick styling so far…

    /* Blog layout */
    .post_author_timeline {
    display: none;
    }

    .small-preview {
    width: 280px;
    height: 280;
    }

    .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
    text-align: left;
    }

    .html_elegant-blog #top .post-entry .blog-categories {
    text-align: left;
    }

    .page-id-14 .small-preview {
    height: 100%;
    }
    .page-id-14 .blog-meta {
    float: left!important;
    width: 280px!important;
    height: 280px!important;
    }

    #607696

    Hi!

    Please add following code to Quick CSS as well

    .page-id-14 .small-preview img {
        width: 100%;
    }

    Cheers!
    Yigit

    #607705

    BRILLIANT! perfect :)

    You are wonderful wonderful helpful people

    V

    #607709

    Hi!

    Thank you for your kind words, we are addicted to help wonderful people :)
    Let us know if you have any other questions or issues!

    Best regards,
    Yigit

    #607728

    Ok… you asked for it!

    I tried to copy these changes over to the site I was originally wanting help with, and it’s all gone a bit pear-shaped!

    http://www.normansrunningwild.com/index.php/blog-2/

    Even though I have it set to show only excerpt and ‘read more’, I’m getting the whole text of the blog entry. And also… the image has gone strange and rectangular!

    (also changed to elegant, single author small pic etc)

    Ideas :/

    This is the Quick CSS I have added

    /* Blog layout */
    .post_author_timeline {
    display: none;
    }

    .small-preview {
    width: 280px;
    height: 280;
    }

    .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
    text-align: left;
    }

    .html_elegant-blog #top .post-entry .blog-categories {
    text-align: left;
    }

    .page-id-913 .small-preview {
    height: 100%;
    }
    .page-id-913 .blog-meta {
    float: left!important;
    width: 280px!important;
    height: 280px!important;
    }

    .page-id-913 .small-preview img {
    width: 100%;
    }

    #607731

    Hi!

    Please add following code to Quick CSS

    .blog .blog-meta, .blog .small-preview {
        height: 180px;
        width: 180px;
    }

    Please edit and insert more tag to your blog post

    Cheers!
    Yigit

    #607740

    Thanks!

    I have the same problem I had on the other site though, where I want it 280×280, but then the image doesn’t stretch to fit the space.

    (I have copied the code from the other page that you gave me to do this, but it doesn’t work on this site for some reason…)

    Thank you for all this quick attention!

    #607743

    – oh, and sorry, but it still is showing the whole post not just an excerpt. I have it set to ‘Excerpt with read more link’ on the blog posts element…

    #608270

    Hey!

    this thread is quite long and a bit confusing to me. Can you provide precise links where we can see the issue please?
    Please use WordPress’ excerpt function by activating it in “Screen Options” on the upper right corner of your screen of you backend. Then scroll down and check your new excerpt field.

    Cheers!
    Andy

    #608300

    Ok! Start again.

    This blog:

    http://www.normansrunningwild.com/index.php/blog-2/

    I’ve got it set on elegant, single author small preview pic in the Blog Settings, Excerpt and Read More (in the ‘blog posts’ element) – as suggested by Yigit earlier.

    I have this code in the Quick CSS

    /* Blog layout */
    .post_author_timeline {
    display: none;
    }

    .small-preview {
    width: 280px;
    height: 280px;
    }

    .html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
    text-align: left;
    }

    .html_elegant-blog #top .post-entry .blog-categories {
    text-align: left;
    }

    .page-id-913 .small-preview {
    height: 100%;
    }

    .page-id-913 .blog-meta {
    float: left!important;
    width: 280px!important;
    height: 280px!important;
    }

    .page-id-913 .small-preview img {
    width: 100%;
    }

    .blog .blog-meta, .blog .small-preview {
    height: 280px;
    width: 280px;
    }

    As you can see, the preview image doesn’t stretch to fit the 280×280, and the full blog post is showing not just an excerpt. (I already have the excerpt screen option ticked, and have put in a paragraph excerpt there, but still the full blog post shows)

    Thanks!

    #608769

    Hi!

    can you provide us admin access, so we can have a deeper look please? post login details here as private reply.

    For your image use this code in Quick CSS field:

    img.attachment-square.size-square.wp-post-image {
    width: 280px;
    height: 280px;
    }
    

    However, we recommend to upload you image in the size you need it to and a WordPress is cropping images by default when uploading them, we recommend to use a plugin to control this behavior: https://wordpress.org/plugins/simple-image-sizes/

    Regards,
    Andy

    #610370

    Brilliant! Thanks, picture great, side by side too so almost there…

    What I need now is that instead of it posting the whole blog, it just posts whatever is entered into the custom Excerpt field on the blog post page…. and a read more button!

    Thanks!

    (you guys really are awesome)

    • This reply was modified 7 years, 11 months ago by vjward.
    #611057

    Hi!

    I checked your blog element and it seems that your settings are fine, but get not displayed correctly. So it seems to me related to a caching issue, so go into any caching plugin’s settings and choose to switch off caching. Deactivate this and all other plugins. Afterwards clear browser cache and hard refresh a few times.

    Regards,
    Andy

    #611104

    Hi. Thank you for you response.

    I have deactivated all plugins and it’s still not displaying correctly. I have loaded it to view in a different browser (so no caching issues) and it’s displaying the full blog.

    Any more ideas?

    Thanks!

    Victoria

    #611106

    Hey!

    caching issue not about any different browser. If caching is still activated then it would cache on a different browser too, as it is cached on your server (not browser). Try to add any new elements via ALB into on of your pages and check if it gets displayed in frontend, to see if caching is activated or not. I tried it before and it did not work for me, which is why I guess your website gets cached still. Let us know about your results.

    Best regards,
    Andy

    #611113

    Oh, I guess I don’t understand caching then! I thought that was it just getting stored on my browser for quicker access.

    To folow your instructions if I have understood them correctly (add an element to a page using ALB) I added a post slider to http://www.normansrunningwild.com/index.php/destinations-2/

    this shows up.

    However if I add it to the blog page it doesn’t.

    BUT – is this something to do with it being the ‘elegant’ layout (as Yigit suggested I use), as when I have it set to elegant, it doesn’t show any other elements I post on the page…

    #611147

    Hey!

    what happens if you use a different blog layout than elegant?

    Cheers!
    Andy

    #613670

    Ok, this is really making me crazy now.

    There is nothing I can do, following all the instructions, to get the blog so that it is laid out the way I need it – with a 250×250 image on the left, and an excerpt on the right with a read more link.

    This template is SO flexible – surely this is possible??

    The login details remain the same, please could someone take another look into this?

    Many thanks

    #613674

    Yes, tried all the different blog options – business, grid, big pic, ALB…

    Tried disabling all of the plugins too.

    #613694

    Hey!

    and what happens if you use a different blog layout than elegant? do you get the same issue? or not? please let us know about your results.

    Best regards,
    Andy

    #613714

    Hey! I replied to this earlier you think… I tried all the different types of layout. Elegant, business, grid, alb…

    Thanks!

    #613763

    Hey!

    I know that you tried it, but I was asking about your results with different layouts and you did not say anything about it until now. So again: do you get the same result using a different blog layout or not?

    Regards,
    Andy

Viewing 30 posts - 1 through 30 (of 35 total)
  • The topic ‘Main Blog Posts page – image on left excerpt next to it?’ is closed to new replies.