Announcement

Collapse
No announcement yet.

Adding latest 3 blog posts - images and titles on home page

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adding latest 3 blog posts - images and titles on home page

    Hello to the 3DCart community! We recently launched our 3DCart store and need a bit of help.

    Is there anyway to configure to add the latest 3 blog posts on the home page of the store (right above the footer)? (built in blog from 3DC)

    Using the thumbnail (or creating a constrained) image size - with the titles below the image - 3 across horizontally (on desktop) and then atop each other on responsive mobile.

    I've followed the instructions (as a test) for the frontend blog post - but it simply inserted one entire blog post - with a gigantic image and its not anything near what we would like.

    I've inserted a screenshot below. We have another store using a different store software and we use a WP blog in this way on the front page of the store. We just launched this new store on 3Dcart - and hoping it will work so we can move the other store to 3DC but need blog to work on home page. If it could work using WP blog, its so early in launch I could easily add WP instead - but hoping to use all the built in features for ease.


    Thank you in advance!

  • #2
    Super disappointed that no one knows anything. Is there anyone here that can point to someone that might be able to help me? Thanks in advance!

    Comment


    • #3
      I was hoping 3dcart would respond saying it could be automated in some way I wasn't aware of. Here is the work around I would use. If you're using a core theme, you can manually add the bootstrap blocks using something like this in your home.html.


      <div class="row">
      <div class="col-lg-4">
      <img class="rounded-circle" src="" alt="" width="140" height="140">
      <h2>Heading</h2>
      <p>Short Decription.</p>
      <p><a class="btn btn-secondary" href="#" role="button">Read More</a></p>
      <div class="col-lg-4">
      <img class="rounded-circle" src="" alt="" width="140" height="140">
      <h2>Heading</h2>
      <p>Short Decription.</p>
      <p><a class="btn btn-secondary" href="#" role="button">Read More</a></p>
      </div>
      <div class="col-lg-4">
      <img class="rounded-circle" src="" alt="" width="140" height="140">
      <h2>Heading</h2>
      <p>Short Decription.</p>
      <p><a class="btn btn-secondary" href="#" role="button">Read More</a></p>
      ​​​​​​​</div>
      </div>

      ​​​​​​​Edit - parts of my html keep disappearing when I post
      Last edited by Toocutebeads; 03-12-2019, 12:47 PM.

      Comment


      • #4
        Thank you for your response! Do I simply copy/paste this to the home.html file in the place I want to show up (right above the footer) and it will fill in the latest 3 blog posts or is there something else? This doesn't mention anything about it being blog....

        We are using a core theme.

        Comment


        • #5
          Originally posted by Kelley22 View Post
          Thank you for your response! Do I simply copy/paste this to the home.html file in the place I want to show up (right above the footer) and it will fill in the latest 3 blog posts or is there something else? This doesn't mention anything about it being blog....

          We are using a core theme.
          You would need to manually code what you want to show up there.

          Comment


          • #6
            Yes, that's what I'm asking for - is help with a code to show up there. I'm not a coder although I know html - and some CSS - I don't know code. I'm asking for help with that.

            Is there anyone here I can hire?

            Comment


            • #7
              Originally posted by Kelley22 View Post
              Yes, that's what I'm asking for - is help with a code to show up there. I'm not a coder although I know html - and some CSS - I don't know code. I'm asking for help with that.

              Is there anyone here I can hire?
              If you know a bit of html you just need to drop this block in the home.html and make some adjustments


              <div class="row">
              <div class="col-lg-4">
              <img class="rounded-circle" src="" alt="" width="140" height="140">Replace SRC with Blog image path
              <h2>Heading</h2> Replace Heading with Blog Title
              <p>Short Decription.</p> Write a short description, or Remove
              <p><a class="btn btn-secondary" href="#" role="button">Read More</a></p> replace href with link to blog post
              </div>
              <div class="col-lg-4">
              <img class="rounded-circle" src="" alt="" width="140" height="140">Replace SRC with Blog image path
              <h2>Heading</h2> Replace Heading with Blog Title
              <p>Short Decription.</p> Write a short description, or Remove
              <p><a class="btn btn-secondary" href="#" role="button">Read More</a></p> replace href with link to blog post
              </div>
              ​​​​​​​<div class="col-lg-4">
              <img class="rounded-circle" src="" alt="" width="140" height="140">Replace SRC with Blog image path
              <h2>Heading</h2> Replace Heading with Blog Title
              <p>Short Decription.</p> Write a short description, or Remove
              <p><a class="btn btn-secondary" href="#" role="button">Read More</a></p> replace href with link to blog post
              </div>
              </div>

              Comment


              • #8
                Yes, thank you. This would be great if it would pull automatically from the database - This would require me editing the home.html every time I posted a new blog post. It should be automated as it works on my other (non 3dc) store.

                Is there anyone here that is a dev that is for hire to provide the code to automate this?

                Comment


                • #9


                  I would recommend thecartdesigner or tangopixel. Both do good work.

                  Comment


                  • #10
                    @Kelley22

                    Yep, this can be done without issue. It actually pulls the first 10 by default. You can hide the following 7 or make them scroll. Here is an example on one of my recent builds:

                    https://www.harmonyhousefoods.com/

                    You are more than welcome to PM me for any further information.
                    TheCartDesigner.com
                    Not 3dcart Owned or Operated
                    100% Independent 3dcart Expert


                    Follow Us on Twitter

                    Comment


                    • #11
                      Thanks so much! I'll send you a PM.

                      Comment

                      Working...
                      X