Stay Theme – Keep featured image on homepage, but replace on sub-page.
-
I’m using the Stay theme and have purchased the Premium plan for customization.
In order to have rotating homepage images, I need to set a Feature Image for sub-pages. Each of those featured images are pulled into the homepage’s rotating banner and contain links to their respective pages. That is okay.
However, there are some sub-pages where I don’t want the feature image to show. Is there a way to hide it (for just one page) using HTML or CSS ?
Then, there are other sub-pages where I would like to use a different image. Is there a way to replace it (for just one page) using HTML or the CSS ?
Finally, there is another sub-page where I’d like to overlay an image with the featured image. Is there a way to overlay it (for just one page) using HTML or CSS ?I’m VERY green at all of this, so if it is possible, step-by-step instructions would be incredibly helpful!
The blog I need help with is: (visible only to logged in users)
-
Hi there, I’d be happy to help.
However, there are some sub-pages where I don’t want the feature image to show. Is there a way to hide it (for just one page) using HTML or CSS ?
You can do it with this code:
#post-79 .attachment-feat-img { display:none; }The example above includes the number 79. That number will need to change depending on which page you are working on. The number 79 came from the edit URL for the page showing image4:
https://portfoliopartner.wordpress.com/wp-admin/post.php?post=79&action=edit
So if you wanted to do it for the Advisor Resources page, you would use the number 74, as that number is in the edit URL for this page:
https://portfoliopartner.wordpress.com/wp-admin/post.php?post=74&action=edit
Then, there are other sub-pages where I would like to use a different image. Is there a way to replace it (for just one page) using HTML or the CSS ?
So ideally, you would set the featured image that you want to use for each page. If for some reason you needed to set a featured image that you didn’t want to appear on a page, you could use the code above to hide it, and just include the image within the content of your page.
Finally, there is another sub-page where I’d like to overlay an image with the featured image. Is there a way to overlay it (for just one page) using HTML or CSS ?
In this case, I would recommend hiding the featured image, and then creating a new image in the photo editing software of your choice where you combine the two images into the layout that you want. From there, you could include that combined image into your page’s content.
Alternatively, you could do this with CSS, but it is a bit advanced, and goes beyond the scope of what I’d be able to help with here.
However, feel free to ask this question in our CSS Customization Forum if you like. We have several helpful volunteers who may be able to assist further with this part.
If you have any questions, just let me know how I can help.
-
Thanks for the speedy reply.
That code worked great. However, I’m now struggling to get my replacement image (in the content section of my page) to cover the same width as the previous image did.
I tested it on the “Internal Forms” page. The image I inserted in the content section is 1042px wide. I inserted it at “full size” (with no link, no alignment). However, the text code shows it pulled in at 600px wide. If I adjust the pixel size in the text code to 1042 x 167, it retains it in the size in the visual view. When I preview the page, though, the formatting is lost.
Would you mind sharing how I can get the width to ‘stick’? I would still like it to scale down with the page when the window is smaller than 1042px, so it’s mobile friendly.
-
Hi again,
The reason the image isn’t showing properly is because the content width in the Appearance > Customize > CSS is set to 600px.
If you adjust that to a larger number, you’ll be able to fit your image in. If you erase the number, the theme will use it’s default.
At the default size, the theme will automatically scale down images for mobile/tablets.
Also, you’ll find some of the default widths for content at the bottom of the theme guide:
-
Getting closer, but still not there quite yet. :(
I changed the width and adjusted the picture, so it fills up the entire width. I adjusted the colophon margins in the CSS code as follows. The only issue is when I scale the page down, the image’s placement changes. I like that the image scales down with the content, I just need the top to stay aligned with the bottom of the menu bar. Any thoughts?
#colophon {
margin-left: -1.25%;
margin-right: -1.25%;
margin-top: -5.8%;
background-color: #ffffff;
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 25px;
} -
Hi there,
So, this would be a bit outside of what I’d be able to help with here, as the image is changing placement due to the additional CSS that has been added.
I’d recommend checking in the CSS Customization forum to see if someone might be able to assist you.
When you create a CSS-related help request, please make sure to select or link to the WordPress.com blog you’re working on and include a clear description of the change you’re trying to make. It really helps.
If you need to hire a consultant to help you with in-depth design work or large CSS revisions, please consider getting a quote from Elto:
http://en.support.wordpress.com/customize-my-site/request-theme-customization/ -
I figured it out… I needed to set the entry-header to blank. Now, I’m good. I couldn’t have gotten that far without you. Thanks much!
-
- The topic ‘Stay Theme – Keep featured image on homepage, but replace on sub-page.’ is closed to new replies.
WordPress.com Forums 