Category boxes with images bottom of post

Hi,

2.) Based on the screenshot, looked like you wanted a grid layout for the archive pages, but apparently not. If you want to remove the post meta info from the post item and leave the title, use this css code.

.post-meta-infos {
	display: none;
}

3.) Did you use the code sample provided in the documentation? That should loop through the available categories.

// https://developer.wordpress.org/reference/functions/get_categories/#user-contributed-notes

Best regards,
Ismael

Hi,

You can use this one instead if you want to hide the content of the items in the archive pages.

.archive .entry-content {
	display: none;
}

This will also affect the images added in the content editor, so make sure that the featured image of the post is set.

Best regards,
Ismael

Hi,

Did you modify the loop-index.php file? Looks like it has been removed manually from the template. Please get a fresh copy of the loop-index.php file and do the modification again without removing the featured image.

Best regards,
Ismael

Hi,

I believe this is the code that hides the featured image

Sorry for the late response. Try to replace the modification with the following css code to keep the featured image in the archive page.

.single .post-entry .big-preview {
    display: none !important;
}

Best regards,
Ismael

Hi,
To show the feature image on an archive page please try this css:

#top.archive .entry-content {
	display: block !important; 
}

Best regards,
Mike

Hi,
Thank you for explaining, your first css is correct for hiding the “feature image” on regular posts big-preview
But your archive posts don’t use the big-preview layout.
So the css you are using to hide the excerpts on the archive posts is also hiding the feature image:

.archive .entry-content {
    display: none;
}

because the image is inside of entry-content
So to hide the content and show the feature image on the archive posts you could replace the above css with this:

#top.archive #wrap_all #main .entry-content p,#top.archive #wrap_all #main .entry-content h2,#top.archive #wrap_all #main .entry-content > div:not(.avia-image-container),#top.archive #wrap_all #main .entry-content ul,#top.archive #wrap_all #main .entry-content h3,#top.archive #wrap_all #main .entry-content h6 {
    display: none;
}

But this is not the best because we have to guess what elements are going to be in the entry-content such as “p”, “h2”, “h3”, etc.
Instead, I recommend moving the image before the entry-content so it won’t be hidden and you can target the content easily with entry-content.
Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_image_script(){
  ?>
  <script>
(function($){
  $(window).load(function(){
  $( '#top.archive #wrap_all #main .post-entry' ).each(function() {
  $( this ).find( '.avia-image-container' ).insertBefore( $(this).find('.entry-content'));
  });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_image_script');

So with this function you can leave your current css as is.

Best regards,
Mike

Hi,
Glad we could help, shall we close this then?

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike