Customise Blog Page

Hello everyone,

I just started customising my blog page, but there is some things that i’m struggling to change.
my website page is this one:
http://www.pedaispelomundo.com/blog/

and i would like to make look like this one:
http://www.travelmap.world/news/

the customisations is:

  1. Set the image on top of the title
  2. Short the text and add a button “read more” taking the user to the blog post.

Thanks in advance for your help.

I am also interested in this for my own site’s blog page, as everything is currently showing the full content.

I have tried other methods (the_content to the_excerpt) but this affects my portfolio and truncates the posts themselves. I love the theme and have my site just how I like it, so this would be icing on the cake.

1. Set the image on top of the title
I use featured image on my posts so they show at the top, does this not work for you?

I would like the read more functionality as well. I’m a little confused because there appear to be read more buttons on the theme demo here?

I’m in the same boat, haven’t been able to replicate that on my own site that uses Shapely, would very much like that as it is a lot tidier than a massive long page of full posts haha :slight_smile:

Hello Webduke,

the problem on the featured image is because the image is getting cropped.
unless i could change the format for full width and height. there is any way to do that?

Cheers.

Hi Guys,

  1. For read more button use this https://en.support.wordpress.com/more-tag/
  2. For featured image on top, you can choose Appearance -> Customize -> Shapely Options -> Blog Settings -> Blog Layouts = Large Images.
  3. If you want to hide the category above the featured image means, use this Custom CSS, Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

.post-content .shapely-category { display: none; }

Let us know,

Thanks,
laranz.

Hi laranz,

thanks for your reply.
i’ve have set already the blog layout as large image.
the problem is when i set the feature image is getting cropped, there is any way to leave as full resolution?

Kind Regards,
Felippe Santana

And also another problem is that the featured image loses a lot the quality, there is no sharpness and looks all blurred.
you might be able to see attached.

Hi,

It seems you’re enabling the “Photon” module in the Jetpack can you try to disable that? It will revert back to the WordPress default cropping so that the images will look crisper.

Let us know,

Thanks,
laranz.

Hello Iaranz,

Thanks for your reply,
i’ve changed the configuration you said, but still the image is loosing quality and is being cropped, you can see as per bellow.
there is another way to sort this out?

Kind Regards,
Felippe

Hello there,

I hope you are doing well today.

You can try using the following plugin to resize the images in a way that it does not reduce the quality of the image:

Best Regards,
Support

Hi,
is there a way to hide the featured image, so it don’t show on the page at all?

Regards,
Per WIlkenson

.entry-header img { display: none; }

Hello
I too would like to remove the featured image from blog posts, however would like the featured image to remain on the blog homepage…

I tried the Additional CSS code
.entry-header img { display: none; }

which has worked to remove the featured image, however from both the post and the blog home page.

Revised code to try would be appreciated.

Kind regards
Lidia

You need to find the Id of your post and the blog home page in their source code. It should be something like
postid-1762
Then you could add something like
.postid-1762 .entry-header img { display: unset; }

Hey guys,
Hope you’re doing well today

Did you manage to resolve all the issues you’re having?

Please let me know so that I may provide further assistance if needed.

I look forward to your reply :slight_smile:

Best Regards,
Support

Hello !
I try to have a line of 6 portfolio featured pictures in line on my first page. I modify the CSS below. It works, but first the page load, then the images move to the correct position. Maybe there is a solution for having 6 portfolio featured pictures in line by default without this delay ?
With the modification I made on the CSS, when the screen size is very big (> 2000px width), the white space below the shapely portfolio widget is good. But when screen size is around 1000px, we can see lots of space below this widget.
I made other modification which seems to be working well :
Thank you

@
/* 6 photos sur la meme ligne avec un grand ecran*/
@media screen and (min-width: 768px) {
.post-type-archive-jetpack-portfolio #page #main article,
#page .shapely_home_portfolio .row.masonry .masonry-item.project.fadeIn.masonry-brick {
position: static !important;
width: 16.33%;
}
.bg-dark {
height: 508px
}
}

/* Fond blanc et marges du widget portfolio - 1ere page*/

.bg-dark {
background: #FFF;
margin-top: -20px;
margin-left: 30px;
margin-right: 30px;
padding:0px;
margin-bottom: 10px;

}

/*
Les galleries des portfolio sont responsives
*/
.gallery-item {
width:auto !important;

}

/*texte justifié dans le 1er widget
*/
.mb32 {
text-align: justify;
}

/* marge de la photo principale de la premiere page et couleur*/
section.bg-secondary{
margin-bottom: -87px;
margin-top: -80px;
background: #FFF;

}

/* virer les featured image de la page portfolio */
.entry-header img { display: none; }

/* Les portfolios sont en pleine page */
.col-md-8 {
width: 100%;
}

/*virer les titres */
.post-title {display: none;}

/*virer la recherche en haut */
#site-navigation .search-widget-handle {
display: none;
}

/* virer éplein ecran dans gallery */
.jp-carousel-image-meta {
display: none;
}

/* Taille du logo*/
img.logo {
max-height: 100%;
}

/*taille de la zone menu */
#site-navigation .module.left, .nav-bar a (min-width: 990px){
height: 55px;
}

/*Taille de la police des menus */
.menu li a {
font-size: 12px;}

Hi there,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.masonryFlyIn article {
width: 16%!Important;
position: static!important;
}

I hope this helps :slight_smile:

Best Regards,
Support