Twentyseventeen, display-posts

  • Unknown's avatar
    manuschwendener · Member ·

    Hi

    I’m using almost identical display-posts code on two pages, but the result looks different.

    On blog.ub.unibas.ch/test:
    [display-posts category="examples" include_date="true" date_format="d.m.Y" include_excerpt="true" posts_per_page="5" image_size="medium" wrapper="div"]

    On the main page, via the code on page /Neueste:
    [display-posts include_date="true" date_format="d.m.Y" include_excerpt="true" posts_per_page="5" image_size="medium" wrapper="div"]

    I would like the blog posts on /Test to look like the ones on the main page.

    Thank you :-)

    CSS 

    .display-posts-listing .alignleft {
	float: right;
	margin: 5px 5px 25px 25px;
}

.display-posts-listing .listing-item {
	clear: both;
	padding-bottom: 40px;
}

.display-posts-listing .listing-item .title {
	display: block;
	font-size: 130%;
	margin-bottom: 15px;
}

.display-posts-listing .excerpt-dash {
	display: none;
}

a.title {
	box-shadow: none;
	-webkit-box-shadow: none;
}

    and

    #panel1 .display-posts-listing .listing-item {
	display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}

#panel1 .panel-content .display-posts-listing .listing-item .title {
	-ms-flex-order: 1;
	-webkit-order: 1;
	order: 1;
}

#panel1 .panel-content .display-posts-listing .listing-item .alignleft {
	-ms-flex-order: 2;
	-webkit-order: 2;
	order: 2;
	float: left;
	margin-left: 0;
}

#panel1 .panel-content .display-posts-listing .listing-item .excerpt {
	-ms-flex-order: 3;
	-webkit-order: 3;
	order: 3;
}

.display-posts-listing img {
	width: 100%;
}

    and

    .blog:not(.has-sidebar) #primary article, .archive:not(.has-sidebar) #primary article {
	float: none;
	margin-left: auto;
	margin-right: auto;
	max-width: 740px;
	width: 100%;
}

.blog .page-header, .archive .page-header {
	max-width: 740px;
	width: 100% !important;
	margin-left: auto;
	margin-right: auto;
	float: none !important;
}

.blog .entry-meta, .archive .entry-meta {
	float: left;
	padding-bottom: 10px;
}

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    manuschwendener · Member ·

    PS: the display will have to work on all future subpages, not be limited to /Test.

  • Unknown's avatar
    manuschwendener · Member ·

    PPS: one thing I like better on /Test than on the main page is that the date is standing at the beginning of the text, not above the title.

    Best would be if the date could stand at the beginning of the text, but in italics.

  • Unknown's avatar
    manuschwendener · Member ·

    And I just saw that the pictures on the main page are very unsharp in IE, but sharp in Firefox.

    Looking sharp as they should on /alle (which is the posts page), also in IE.

  • Unknown's avatar
    manuschwendener · Member ·

    If this helps: main page of manuschwendener.ch looking fine in IE, using identical theme and almost identical CSS.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, we can reorder things, but this is fairly advanced CSS, and only recent browsers support it for the most part, and in the case if Internet Explorer, only version 11 and later support it. You can rearrange the order of the items by changing the order number values, just make sure that no two items have the same number or things can go awry. 

    body:not(.home) .display-posts-listing .listing-item {
	display: flex;
	flex-direction: column;
}
body:not(.home) .display-posts-listing .listing-item .date {
	order: 3;
}
body:not(.home) .display-posts-listing .listing-item .title {
	order: 1;
}
body:not(.home) .display-posts-listing .listing-item .image {
	order: 2;
}
body:not(.home) .display-posts-listing .listing-item .excerpt {
	order: 4;
}
  • Unknown's avatar
    manuschwendener · Member ·

    Thank you, thesacredpath, this is already much better.

    I decided to keep the order like it is on the main page.

    I’ll only be able to check how it looks in IE tomorrow.

    Your code also allows me to align the pictures and the text, and to set the color of the date.

    I’m using 

    .display-posts-listing .listing-item {
	display: flex;
	flex-direction: column;
}

.display-posts-listing .listing-item .date {
	order: 1;
  color: #8d8d8d;
  margin: 0px 0px 15px 0px;
}

.display-posts-listing .listing-item .title {
	order: 2;
}

.display-posts-listing .listing-item .image {
	order: 3;
	margin: 0px 0px 15px 0px;
}

.display-posts-listing .listing-item .excerpt {
	order: 4;
}

    I left the “body:not(.home)” away, as I’d also like to look it like that on the main page.

    Not bothering me, but funny: on the main page, the date now comes after the title.

  • Unknown's avatar
    manuschwendener · Member ·

    > on the main page

    Correction: that was only in the preview while I was changing the CSS.

  • Unknown's avatar
    thesacredpath · Member ·

    Glad that did the trick for you and you are welcome.

  • Unknown's avatar
    manuschwendener · Member ·

    The only thing that isn’t solved yet: the pictures on the main page are still very blurry in IE on Windows, also after emptying the cache.

    Looking good
    – on the subpages in IE on windows
    – Firefox on Windows
    – Firefox, Chrome and Safari on Mac

  • Unknown's avatar
    manuschwendener · Member ·

    Also not sharp in IE on Windows on blog.ub.unibas.ch/neueste, which is the source for the main page.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I don’t have a windows machine, and Browsershots and Browserstack don’t really render things like a full-fledged windows computer. I’m asking some of my colleagues to take a look at your site on Windows and report back as soon as I can.

  • Unknown's avatar
    manuschwendener · Member ·

    Thank you. It doesn’t need to look identical in IE, just looking ok would be enough.

    So if there’s a way to say ‘ignore this part of the CSS code for IE’ we could maybe start from there?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I got someone to view on Windows vs Chrome, and they do see some difference. Each browser renders things slightly differently and some better than others.

    I did notice that they image of the library you are using is 4681 x 2814 pixels, and the Twenty Seventeen suggested header and featured image size is 2000 x 1200 pixels, so our software is having to reduce that image by over 50%, and that may well be the bulk of the issue.

    Take that image into your image editing program and resize and crop it to 2000 x 1200, upload the new image to your media library and replace the featured image with the new one and see how that works.

    For reference, see the Quick Specs section at the bottom of our Twenty Seventeen Theme Showcase page.

  • Unknown's avatar
    manuschwendener · Member ·

    Thanks a lot for your effort!

    Sorry, I should have been more specific: the background image is not the problem, it’s only the featured images of the blog posts that are displayed unsharp in IE. I’ll make a screenshot on Monday and post a link here.

  • Unknown's avatar
    manuschwendener · Member ·

    I just had an easy idea: is there a way to say: “in Internet Explorer below IE10 don’t display the featured images”?

    We’re about to launch our company blog and while our default browser is Firefox we also have IE pre-installed.

    Once we’re on IE10 I’ll check again if the photos are displayed sharp.

  • Unknown's avatar
    manuschwendener · Member ·

    I’ll also try reducing the size of the featured images as you propose.

  • Unknown's avatar
    manuschwendener · Member ·

    > reducing the size

    I forgot: they are already smaller than 2000px in width, because I know that if the featured image is bigger than 2MB it messes up the display.

    And if that wasn’t clear enough above: I am not displaying the featured images on the single blog posts, only in the overview, and only there they are unsharp in IE.

  • Unknown's avatar
    manuschwendener · Member ·

    I found the part of the CSS that is responsible for the unsharp pictures in IE: 

    .display-posts-listing img {
	width: 100%;
}

    But if I leave that away it messes up my display in all browsers.

    The problem in IE disappears with IE10, somebody tested it for me.

  • Unknown's avatar
    manuschwendener · Member ·

    And here’s a link to the screenshot.

1 2
  • The topic ‘Twentyseventeen, display-posts’ is closed to new replies.