Blog Overview – Image left, copy right

Hey Jables,

Thank you for the inquiry.

This layout is not available by default, but you can try using the Blog Posts element. Set Content > Select Entries > Blog Style to Single author, big preview pic, then add the following css code to place the featured image beside the post content.

.av-alb-blogposts {}

.av-alb-blogposts .post-entry {
    display: flex;
}

.entry-content-wrapper .big-preview.single-big {
    min-width: 30%;
}

.av-alb-blogposts .big-preview.single-big a {
    height: 100%;
}

.av-alb-blogposts .big-preview.single-big a img {
    object-fit: cover;
    height: 100%;
    max-height: 300px;
}

Best regards,
Ismael

Hi,

Thank you for the info.

We tried logging in, but the user account provided above does not exist. Please create a test page and provide valid login credentials so that we can check the modification.

Best regards,
Ismael

Hi,

Thank you for the info.

We adjusted the code in the Quick CSS field a bit. It should be working correctly now.

@media only screen and (min-width: 769px) {
  /* Add your Desktop Styles here */
  #top .fullsize .template-blog .big-preview {
      padding: 0 0 10px 0;
      width: 40%;
  }

  .av-alb-blogposts .post-entry {
      display: block;
  }

  .av-alb-blogposts .big-preview.single-big a {
      height: 100%;
  }

  .av-alb-blogposts .big-preview.single-big a img {
      object-fit: contain;
  }

  #top .fullsize .template-blog .post-title {
      text-align: left;
      font-size: 30px;
      padding: 15px 0;
      max-width: 800px;
      margin: 0 auto;
  }

  #top .fullsize .template-blog .post-meta-infos {
      text-align: left;
  }

  #top .fullsize .template-blog .post .entry-content-wrapper {
    width: 60%;
    float: left;
  }

  #top .fullsize .template-blog .blog-meta {
      display: none;
  }

  #top .fullsize .template-blog .big-preview {
      padding: 0 0 10px 0;
      width: calc(40% - 50px);
      float: left;
      margin-right: 50px;
      min-height: 200px;
  }
}

@media only screen and (min-width: 989px) {
  #top .fullsize .template-blog .big-preview img {
    min-width: 494px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add this code to the functions.php file to adjust the size of the thumbnails used in posts.

function avf_modify_thumb_size_mod( $size_array ) {
    $size_array['entry_without_sidebar'] = array('width' => 9999, 'height' => 9999);
    $size_array['entry_with_sidebar'] = array('width' => 9999, 'height' => 9999);
    return $size_array;
}
add_filter( 'avf_modify_thumb_size', 'avf_modify_thumb_size_mod', 10, 1 );

After adding the filter, make sure to create a site backup, then use one of the following plugins to regenerate the thumbnails.

— https://wordpress.org/plugins/regenerate-thumbnails/
— https://wordpress.org/plugins/regenerate-thumbnails-advanced/

Best regards,
Ismael

Hi,

Did you regenerate the thumbnails using the plugins suggested above? You could also try re-uploading the featured images.

Best regards,
Ismael