Shoreditch Theme image gets cropped

  • Unknown's avatar
    nieuwemamas · Member ·

    My featured images get cropped all the time while I’m using the suggested size (2000×1500).

    What am I doing wrong?

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

  • Unknown's avatar
    joshron · Member ·

    Hi lykkecreative,

    The site lykke-creations.com is currently marked as private which makes the site visible to the public. As user with an upgraded plan, you are eligible for Email & Live Chat Support through the link below.
    https://wordpress.com/help/contact

    I’m tagging “modlook” as well to get a staff’s attention.

    Hope this helps. Thanks!

  • Unknown's avatar
    joshron · Member ·

    Sorry, I mean the site is not visible to the public. However, staff can view it even though it is marked as private.

    Thanks!

  • staff-zinnia · Staff ·

    Howdy –

    I am happy to have a look at this. Let me know if you are planning to use the Panel Page or Full Width layout with this theme.

    Details and instructions are available here as well: https://wordpress.com/theme/shoreditch

  • Unknown's avatar
    nieuwemamas · Member ·

    Hi @joshron thank you for your quick reply!

    Hi staff-zinnia,

    Thank you for looking into this.
    I’m using the Full With layout.
    I looked it up on the theme page with explanations you are referring to, but couldn’t seem to find an answer.

  • staff-zinnia · Staff ·

    No worries. Could you grab a screen shot of how you are seeing the site?

  • Unknown's avatar
    nieuwemamas · Member ·

    here you go: https://snag.gy/3wXszb.jpg

  • supernovia · Staff ·

    Thanks for that. It looks like the image is getting cropped so it will fit different screen widths. If I make my screen narrower, it’s okay. If I go wider, or if I’m using a shorter screen, your image gets cropped.

    If I try to make it so your image doesn’t get cropped at all, it doesn’t fit all the way across from side to side.

    Do you happen to have access to the original image files, such that you could separate the watercolor-ish background from the image that should not be cropped? If you have easy access to that and wouldn’t mind uploading the separate images to your media library, we could see if we could help you figure out another way to do this.

  • Unknown's avatar
    nieuwemamas · Member ·

    Hi,

    Thank you.

    Yes, that is what I experience too indeed.
    Is there another size or anything I can do to make the images look good (and not cropped) on all screens?

    Also, I just noticed that I can’t edit the pictures directly in WordPress if I uploaded them. Can you look into that too?

    I just uploaded the backgrounds and images separately.

  • supernovia · Staff ·

    Since screens have different widths and heights, there’s really not a particular way you can avoid getting cut off with a single image. Let me see if I can figure out a way to work with both, though…

  • supernovia · Staff ·

    Okay. I think I can find a way forward, but it will take some time to come up with the right code. Are you definitely sticking with this theme, or just getting a feel for it at this point?

    Also, with the way you have it set now, that image and background combination would only appear on the panel for that page. Is that okay or do you want that header and image throughout the site?

    Lastly, I recommend making the pink background into a jpg for better compression (and better downloads for your mobile users), and cropping the excess border space from the round logo image. We can add space back in.

    Again, let me know whether you’re sticking with this theme or just trying it on for a bit. Then we will work out the best way to accomplish what you’re after.

  • supernovia · Staff ·

    Oh, and re: not being able to edit the image in the editor, we can work on that too. Let’s put it in a new thread though so that this one doesn’t get confusing to anyone who finds this while looking for a solution to the original issue you mentioned. Let us know when you’ve started that thread and we’ll check it out.

  • Unknown's avatar
    nieuwemamas · Member ·

    Hi supernovia,

    I’ll stick to this theme.

    And I indeed want the image only to appear for that page. I am creating other images for the other pages. I just wouldn’t want to create them all and then find out that they all get cropped and won’t be looking great. So that’s why I wanted to check this first with one picture to find a solutions and if that works out well, I’m going to create new images (in the right way) for the other pages.

    Thanks for your help and I’m going to open another thread for the image-edit-issue :)

  • Unknown's avatar
    gemmacevans · Member ·

    I just noticed that I can’t edit the pictures directly in WordPress if I uploaded them.

    I had a thought about your image editing — the site will need to be public in order to use these editing options:

    https://en.support.wordpress.com/images/editing-an-image/

    lykke-creations.com is currently marked as private so I think that could be the issue.

  • Unknown's avatar
    nieuwemamas · Member ·

    Hi gemmacevans,

    Thank you, I guess that this was the issue indeed.

    Is there already any news on the cropped image issue?

    Thank you,
    Evi

  • supernovia · Staff ·

    Hi,

    OK. I was able to get this working on my test site. It takes a few steps, though.

    1) Set the featured image for that page section to just the background image.

    2) For the body of that page, use your logo image (the one without a background).

    3) Add this CSS under My Site > Customize

    /* logo plus watercolor background on front page panel */
/* Take away the weird shading */
.page-template-panel-page .hentry.has-post-thumbnail:before {
	background: rgba(0,0,0,0);
}

/* hide the title and footer  for this section */
.page-template-panel-page .hentry.has-post-thumbnail h1 {
	display: none;
}

.page-template-panel-page .hentry.has-post-thumbnail .entry-footer {
	display: none;
}

/* Remove some padding */

@media screen and (min-width: 1020px) {
	.hentry {
		padding-bottom: 0;
		padding-top: 1em;
	}
}

/* End logo + watercolor panel */

    Then save your changes and try it out on different browsers and devices to test.

    Cheers!

  • Unknown's avatar
    nieuwemamas · Member ·

    Hi supernova,

    I just tried to apply the steps mentioned above, but it doesn’t seem to work.
    Could you please check my page again?

    Thank you,

    Evi

  • staff-zinnia · Staff ·

    Hi Evi –

    Which browsers did you check the site in already?

  • Unknown's avatar
    0projektrapunzel0 · Member ·

    Safari only. But even in the customizer it’s looking different than it is supposed to. Now the background is above the logo and the background got a gray layer.

  • Unknown's avatar
    0projektrapunzel0 · Member ·

    Sorry, logged in with another account…

1 2
  • The topic ‘Shoreditch Theme image gets cropped’ is closed to new replies.