Featured image vs embedded image

  • Resolved zapa2005

    (@zapa2005)


    8 years, 6 months ago

    I’ve been round and round the block with this one so hopefully there is a way round. I have a nice picture I’d like to use. I can not use the header function otherwise it shows on all pages. If I use it as an added media, it will not be showing across the whole page (current set-up). If I use it as a featured image, it will be loosing its res and actually not showing the bottom (bridge) and top (top of the dome) of the picture. If I reduce the dimension of the image, it will show more of the pic but loose its resolution. If I use a full width page template, then apparently my child pages disappear (that’s the body of my home page).

    I think I tried all options except the one I would like: the current picture to be displayed across the screen with the current resolution. Am sure (hope?) it’s possible but how?

    What have I missed?

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    @zapa2005

    I can not use the header function otherwise it shows on all pages

    If you don’t need a custom header anywhere else, you could add your image in the Customizer and then use some CSS to hide it on all except the page you’d like it to appear on.

    Would that do the trick? If you want to go ahead and add the header to your site and then show me which is the only page on which you’d like it to appear, I can help you with the CSS to hide it everywhere but on that one page. Or I could use the demo site and give you some code you can modify.

    Let me know!

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Hello Kathryn, first of all, thanks a mil for your answer, much appreciated. That sounds like a good way forward. To be sure, what I’d like is a similar look and feel than the template, with the picture across the whole page and the few wordings. Am also trying to put a header picture on the blog page (as in the testimonial page) but haven’t managed yet.

    PS: Am a newby with CSS, never used them yet but keen to get stuck in 🙂

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Kathryn, good news, I have sorted the problem. I think it was good to walk away from it and come back a few days after as the solution was very simple :).

    If you have a sec, I’d welcome your views on two things:
    1- Adding CSS. As mentioned, I am a newby. It is self hosted site. Not clear how to get started with CSS. Starting to do some digging but if you can accelerate this that’d be appreciated
    2- Adding a header on the blog page. Not crucial but doesn’t seem straightforward.

    Appreciate that’s a lot of question, any pointer would be great.

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Kathryn, good news, I have sorted the problem. I think it was good to walk away from it and come back a few days after as the solution was very simple :).

    That’s great!

    1- Adding CSS. As mentioned, I am a newby. It is self hosted site. Not clear how to get started with CSS. Starting to do some digging but if you can accelerate this that’d be appreciated

    Here are some good resources for learning how to use CSS:

    Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

    https://dailypost.wordpress.com/2013/07/25/css-selectors/

    http://dailypost.wordpress.com/2013/06/21/css-intro/

    http://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    http://blog.thewcc.com/a-web-inspector-tutorial-for-front-end-developers/

    https://cssworkshop.wordpress.com/

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

    An easy way to add custom CSS is to use the CSS editor included in the Customizer as of WordPress 4.7. Head to Appearance > Customize > Additional CSS to add your custom CSS.

    2- Adding a header on the blog page. Not crucial but doesn’t seem straightforward.

    The blog page supports a custom header, but it’s only 250px high. If that’s OK for you, here are the steps:

    1 – In your Customizer’s Custom Header area, upload your header.
    2 – Add this to your Custom SS:

    
/* Hide the custom header */
.header-image {
    display: none;
 }
/* Unhide the custom header on the blog page */
.blog .header-image {
  display: inherit;
}
    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Thanks Kathryn. Getting stuck in with the whole child thing, FTP, etc, etc… Thanks for the links. I notice there is no mention of this child thing so will look at the difference (it mentions” “the Custom Design Upgrade (you can experiment without purchasing it, but you won’t be able to save your modifications). so will get my head round the difference).

    Tks again!

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Custom Design is only relevant for sites hosted on WordPress.com. On self-hosted sites like yours, open your Customizer and add your CSS in the Additional CSS panel.

    You don’t need to create a child theme for CSS-only changes!

    Let me know if this helps.

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Oh really? Great then 🙂 So presumably, the paragraph below doesn’t apply either for self-hosted. Am I correct?

    To enable custom CSS on your own site, you need to make sure you have the Custom Design Upgrade (you can experiment without purchasing it, but you won’t be able to save your modifications). To experiment, you can pull up the Customizer by selecting the “customize” option from your top drop-down menu:

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Correct. Self-hosted sites have a built-in custom CSS editor in the Customizer, as of WordPress version 4.7.

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    This is great Kathryn. You’ve been really helpful. Made my first changes with the header on the blog page (admittedly, just copy pasted your instruction, but still 🙂 ).

    Now have to dig into all the CSS options to make the few changes I have in mind. Again, thanks a mil.

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    My pleasure! Glad you’re on your way now.

    I’ll be sharing my top CSS Secrets for Beginners this Friday at WordCamp US, so if you’re able to tune into the free livestream, you’re welcome to join me for more CSS learning. 😀

    Happy CSS-ing!

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Signed up! Prob bit stupid on this one but I am struggling to find the time for the livestream so not sure when I need to be in front of screen 🙂 Sounds like a well worth one to watch!

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Cool! The schedule is here, the sessions start on Friday at 9:30am Central Time.

    https://2017.us.wordcamp.org/schedule/

    My session is part of a 3-lightning-talk block at 3:30pm Central.

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Oh no 🙁 Out and about (Friday evening here). Will look if I can see a replay as this would be great.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Featured image vs embedded image’ is closed to new replies.