Goran theme grid page images CSS

isabelashdown · Member · Sep 30, 2016 at 8:18 am
Copy link

Add topic to favorites
My ‘Books’ page is currently a grid page, linking to each of my book titles (I think this grid draws on the featured images from these child-pages). What I’d like instead is to be able to place images of the full book covers, instead of the featured image – but still clicking through in the same way. Is that possible? Many thanks for any advice!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 30, 2016 at 9:02 pm
Copy link
Hi Isabel, this will require a separate CSS rule for each of your books on the grid page. The following is for Little Sister and you can insert it and see what you think and then use that as a guide for doing the others. When you inspect and look in the HTML, you will see that each book on that page has a unique id number (in the case of Little Sister it is 6620). The first bit, .page-id-9 is the grid page id, so that will stay the same. In general all you will have to do is to copy/paste the below rule, change the post id number and then change the URL in the background-image declaration in the first rule.
```
.page-id-9 .post-6620 .post-thumbnail {
    background-image: url("https://isabelashdown.files.wordpress.com/2016/06/little-sister-by-isabel-ashdown.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.page-id-9 .post-6620 .post-thumbnail img {
    visibility: hidden;
}
```
isabelashdown · Member · Oct 1, 2016 at 5:28 pm
Copy link
Thanks @thesacredpath! Yes, that looks great, exactly what I had in mind – and is it possible to make the images larger ie as wide as the original grid image, but therefore taller? When I try to increase the size, the image is cropped off to fit the shorter grid space. AND with the whole book cover on display I think the title below is now redundant – can that be hidden?

Big thanks!
thesacredpath · Member · Oct 3, 2016 at 9:19 pm
Copy link
Hmmm, many times this is a real challenge, but with Goran it can be done. I’ve limited this change to the Books page by using the unique page id CSS class from the opening body HTML tag so that it doesn’t mess with any other pages. See what you think with this.
```
.page-id-9 .post-thumbnail {
    height: 350px;
}
```
I’ve checked and it looks like this works with all screen/window sizes, but make sure and verify on tablet and phone.
isabelashdown · Member · Oct 4, 2016 at 9:10 am
Copy link
That is PERFECT @thesacredpath – thanks so much! And what’s the trick if I want to hide the text beneath the image?
thesacredpath · Member · Oct 4, 2016 at 6:43 pm
Copy link
Awesome! If you wish to hide the title below (which of course is now redundant) this will do it.
```
.page-id-9 .hentry .entry-title {
    display: none;
}
```
isabelashdown · Member · Oct 4, 2016 at 7:19 pm
Copy link
Just the ticket! You’re always so brilliant @thesacredpath – thanks again :)
thesacredpath · Member · Oct 5, 2016 at 9:32 pm
Copy link
Hooray and you are welcome! And thanks. :)
isabelashdown · Member · Oct 25, 2016 at 2:54 pm
Copy link
Hi @thesacredpath – I’ve just done some additional work on my site and a lot of space has opened up beneath each row of book covers on this ‘Books’ page we had sorted. Any idea what I’ve done/how to reduce that space down again? Thank you!
thesacredpath · Member · Oct 27, 2016 at 5:53 am
Copy link
Hi, on a couple of elements (title and summary) you have used visibility hidden. With that, the element is there and rendered as a blank div, so it holds the space for the content of those divs. find these two rules in your custom CSS and change visibility: hidden; to display: none;
```
div.grid .page .entry-summary {
    display: none;
}
.page-id-9 .hentry .entry-title {
    display: none;
}
```
isabelashdown · Member · Oct 27, 2016 at 6:47 am
Copy link
That’s perfect – thank you!
thesacredpath · Member · Oct 27, 2016 at 7:12 am
Copy link
Woohoo!

No items found.