Featured Images- Russell Theme

  • Unknown's avatar

    Hello,
    I understand that the way featured images are displayed on the top of posts are controlled by the theme developer and it is not very customizable, without adding custom CSS.

    On every post page, my featured image shows up very large at the top – that is the featured image display – and then I have the same image, smaller, embedded in the post itself. I do want to have a featured image on my posts, so that the thumbnail will display elsewhere on the site where the post is linked, but I do not want the featured image to show up huge at the top of the post page as it is now. I only want the smaller image below in the post.

    Is there any override or fix to this other than adding CSS or using the “Conditionally display featured image on singular posts and pages” plugin (https://wordpress.org/plugins/conditionally-display-featured-image-on-singular-pages/), both of which require an upgrade from the plan I have? Or do I have to switch away from using the Russell theme?

    IF I have to switch themes, is there an easy way to view how themes display featured images so you can pick a theme with that in mind? This does not seem very obvious from the wordpress themes page. I am happy with the Russell theme in all ways except this one. Thank you!

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

  • Hey there, Russell is compatible with the Full Site Editor:
    https://wordpress.com/support/full-site-editing/

    That should allow you to modify how the featured image displays: you could add columns, for example, and put the image in one of those.

    Full Site Editing is a whole new world with frequent updates, so if you’re interested, I’d recommend joining one of our webinars:
    https://wordpress.com/webinars/

    Cheers!

  • Unknown's avatar

    Thank you for your response!

    I have used the full site editor for all pages on my site. However, I cannot access a post page (https://georgienink.com/2022/03/31/on-the-atlantic/) from within the site editor, in order to edit it. Can you assist with this? Once I am in the site editor, I cannot get to the post page itself from there to edit.

    On your 2nd point “That should allow you to modify how the featured image displays: you could add columns, for example, and put the image in one of those.”, I understand that you cannot modify how the featured image displays since this is controlled by the theme itself. When I am editing the post page that I linked above, the featured image does not even show in the edit view. I only have the option to set featured image, remove featured image, replace featured image, etc. in the settings panel. But the featured image itself is not showing on the page so I cannot edit the size or create columns. Any further ideas on how I can fix this?

    Thank you!

  • The featured image won’t show in the post editor, because its placement is determined by the theme rather than the individual post settings. But, you can edit the theme now, even without CSS.

    So to clarify, are you hoping to edit the size of the featured image in just this one post, or do you want to change the size of the featured images in this theme, for every post on the site?

    If you want to manage the size and placement of the featured image in each post individually, I’d recommend removing the featured image from the single post template. Then, just add the image as you like when you compose the post.

    Let us know which option you prefer and we can help!

  • Unknown's avatar

    This worked: “If you want to manage the size and placement of the featured image in each post individually, I’d recommend removing the featured image from the single post template.”

    Thank you!

    Now the post page is showing up how I want it to, without the featured image at the top.

    Now my only outstanding issue is 2 problems with the mobile view:
    1. the header does not show up full width on mobile, though it does on the desktop version.
    2. The picture (featured image which links to the post) shows up too large on the home screen where the post content is previewed. there is no margin on the right, only on the left. so the mobile home page in general looks weird, and I cannot figure out how to fix it.

    Do you have any ideas on the above?

    Thank you for your help!

  • Hi there,

    1. the header does not show up full width on mobile, though it does on the desktop version.

    The header is full width when I view it on mobile. I tested it on two mobile devices. Can you please take a screenshot of what you’re seeing so I can better understand the issue? Then, you can upload the screenshot to your site’s Media Library, and I’ll be able to see it.

    2. The picture (featured image which links to the post) shows up too large on the home screen where the post content is previewed. there is no margin on the right, only on the left. so the mobile home page in general looks weird, and I cannot figure out how to fix it.

    This is happening because the image is displayed in full size. You can adjust the width of the image from the Image Block settings. Here’s a screenshot of that option:

  • Unknown's avatar

    Thanks so much for your quick reply!

    When I first open the site on mobile (I have tested in both Firefox and Chrome on my Samsung but could test on other phones as well), the header does appear correct, stretching the full width of the screen. But I can zoom out with 2 fingers, and then the page zooms out showing some blue, non header space to the right of the white colored header. It looks as if the page loads being slightly zoomed in.

    On the image: whether zoomed in or out, the image has no margin on the right. I did try selecting “none” for alignment according to your screen shot, but there was no change.

    I uploaded 2 screen shots to my media library: 1 is “zoomed in” aka how the page looks when I first open it on mobile, and 1 is “zoomed out” after zooming out with 2 fingers. You can see the header issue on only 1 of the screen shots, but the image issue shows up in both.

    Any advice appreciated. Thank you!

  • Hmm, ok, I can reproduce this exactly as depicted in your screenshots too on an iPhone 13 running iOS 15.4.1 with Safari.

    I think changing the scale on the Featured Image block may help, and I’d like try that with your permission, or you’re welcome to try to instead of course.

    To give this a shot, first enter the Site Editor: https://wordpress.com/support/site-editor/

    Now, we don’t have any documentation yet for the Featured Image block, but I made a simple 3-step annotated screenshot for you: https://d.pr/i/dW7uWD

    Select each scale option, save, and refresh your site in your mobile browser to see if there’s any change.

  • Unknown's avatar

    I think I had already done that when troubleshooting the image size on mobile, but just to be sure, I did it again and tried all 3 options. When refreshing the mobile view, same issues are there.

    But you are welcome to try from your side, and see if that works?

  • Hmm, yes, your right.

    I did a bit of poking around there though and was able to get it to work by decreasing the width in the same place.

    I recommend trying that to the desired width, and it should work out.

  • Unknown's avatar

    So in the place you are talking about, site editor –> editing the featured image block, even when I change the width from 400 to 200 there is no change in mobile view of that image. Changing the width in that spot does not change how it shows up on mobile view unfortunately.

    Do you have any other ideas about how I can fix the width of that image on the home page in mobile view, and make the header full width (and avoid the zooming in/zooming out thing)?

    Any advice appreciated! Thank you

  • Hey there,

    even when I change the width from 400 to 200 there is no change in mobile view of that image

    Hmm…

    From this end it seems like adding the 400px width to the image is what’s causing it to break in the mobile view.

    Can you try resetting the dimensions on that image? It looks like its container should do the work of constraining its width for this page.

  • For this part:

    and make the header full width (and avoid the zooming in/zooming out thing)?

    I haven’t been able to duplicate that. Right now the header (showing your site name, a flower icon, and the menu) take up the top of my mobile screen. Just to keep our wires from getting crossed, let’s sort the image issue out first, then swing back to any remaining issues with the header.

  • Unknown's avatar

    This worked! Thanks so much. Yes, I had the featured image set to 500 height and 400 width, not sure why. When I selected the featured image block and then “reset all” under dimensions, this fixed the image issue on the mobile version. Somehow, the header issue then also got fixed. Now on both Firefox and chrome browsers on my Samsung, the page is showing correctly: the header is full width and the photo is centered with margins on both sides. Thanks a lot for your help with that!

    I have 1 additional question, not related to the above issue. Right now as you can see I have a static page for my home page. Under the header, my home page shows the latest post (which right now is “On the Atlantic”) and below is a latest posts block and then email sign up block. I understand you can make the home page a static page as I have now, OR “your latest posts” under Appearance – Customize – Homepage settings. Is there any way to do a hybrid of those 2 options? I have been looking on the forums but haven’t found a good way to do this.

    I want my 3 latest posts to show up on my home page in reverse chronological order, and below those 3, to have the other blocks like email sign up that would always be there. In sum, I need a part of the page (email sign up and maybe later a search bar) to stay static, while the other part (posts) should update when I publish new posts. Do you have any advice on this last point?

    Thank you again for your help.

  • Hi there,

    You can have both static and dynamic elements on your homepage using blocks. So, you can display a search bar, the signup form, and a few blog posts.

    For the posts, you can use the Blog Post block, which has several options to display and arrange your posts. You can read more here:

    https://wordpress.com/support/wordpress-editor/blocks/blog-posts-block/

    As for the rest, you can keep using the MailChimp form and the Search block.

  • Unknown's avatar

    Great – this is very helpful.

    Thank you!

  • The topic ‘Featured Images- Russell Theme’ is closed to new replies.