Portfolio page, how to adjust images

  • Unknown's avatar
    olliestaggcreative · Member ·

    Hi, i’m just having a bit of trouble with my ‘stills’ page, I want the page to show all of the images with no text around them. But when you hover over the image it kind of dims and shows the title with the year of release where you can click to see full details.

    I basically want the page to show as a scatter of thumbnails showing the full image rather than cropped as they are currently.

    What sort of CSS code would I be looking for to do this kind of thing?

    Thanks, Ollie.

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

  • Unknown's avatar
    thesacredpath · Member ·

    Ollie, add the following to your custom CSS to get rid of the titles on the archive pages (archive, category, portfolio and tag), and to remove the grayscale filter on hover. 

    .archive article:hover .entry-thumbnail img, .blog article:hover .entry-thumbnail img, .search article:hover .entry-thumbnail img {
	filter: none
}

.archive .hentry .entry-title {
	display: none;
}
  • Unknown's avatar
    olliestaggcreative · Member ·

    Hi, thanks!

    Is it possible to show the title when you hover over the image?

    Also I have noticed that the images aren’t displayed in full, they’ve been cropped? is it possible to show the image in full just a little smaller. Like an aray of images just scattered on the page.

    Thanks, Ollie

  • Unknown's avatar
    olliestaggcreative · Member ·

    I also still want the titles to show on the rest of the pages, just not the stills page.

  • Unknown's avatar
    siobhyb · Member ·

    Hi Ollie,

    Is it possible to show the title when you hover over the image?

    You could make the title transparent by default, it would then only be visible when hovered over:

    .archive .entry-title a {
    color: transparent;
}

    Also I have noticed that the images aren’t displayed in full, they’ve been cropped? is it possible to show the image in full just a little smaller. Like an aray of images just scattered on the page.

    The theme does automatically crop images on the portfolio page in order to optimise the design for all different devices. There isn’t any way around this cropping, however, you could resize the main image using the following snippet:

    @media (min-width: 768px) {
.archive article, .blog article, .search article {
    width: 13.33333%;
}
}

    Increase/decrease the value of width to your liking.

    I also still want the titles to show on the rest of the pages, just not the stills page.

    You’d need to add “.jetpack-portfolio-type-stills” to the start of the CSS snippet in rorder to only target that one page. Like so:

    .jetpack-portfolio-type-stills .archive .entry-title a {
    color: transparent;
}

    Hope that’s helpful! We’re right here if anything else comes up, too.

  • The topic ‘Portfolio page, how to adjust images’ is closed to new replies.