Add image to page title

  • Unknown's avatar
    goringsocialclub · Member ·

    I wish to add 2 images to the title of a page in my website.

    How do i do it

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

  • Unknown's avatar
    hallluke · Member ·

    This should be possible with CSS but it would help if you could do a few things first:

    • link to the specific page you want to modify
    • upload the images to your media library and reply with the URLs so we can see
    • explain the size and positioning you want

    I’m subscribed to the thread so I will get a notification when you reply and then see what we can do.

  • Unknown's avatar
    goringsocialclub · Member ·

    The query was general, I’d like to know how to do this for any page title.
    But this instance is specifically about Malt Whiskies.

    The images are already uploaded onto the mediua centre and are at present displayed on the page below the title.

    They are:-
    https://goringsocialclub.files.wordpress.com/2016/07/talisker-10yr.jpg

    Basically I want to know how to do this for future reference in order to improve the website (which is very basic at present).

    For your information I have just (yesterday) taken over the management of this website on behalf of the club; I am familar with html, css and could quickly come up to steam on any programming language (eg VB, Javescript, PHP) or SQL – being a retired software development manager (Datacomms & Mobile Telecomms protocols amongst others). So you can hit me with the technical stuff.

  • Unknown's avatar
    hallluke · Member ·

    No problem, here’s some example code for you to try out and a brief explanation. Your HTML and CSS know-how should make this pretty simple. We can’t edit the underlying PHP or javascript on WordPress.com hosted sites, so nothing extra to learn there.

    In the customiser add this in the CSS section:

    @media screen and (min-width:769px) {
  body.page-id-233 .entry-header {
    background-image: url("https://goringsocialclub.files.wordpress.com/2016/07/talisker-10yr.jpg?w=75&h=100"), url("https://goringsocialclub.files.wordpress.com/2016/07/highland-park-12-yr.jpg?w=75&h=100");
    background-repeat: no-repeat, no-repeat;
    background-position: top left, top right;
  }
}

    If you want to do something similar on another page you’ll have to change the page-id-233 bit on the first line. It’s one of the first classes in the body tag on each page so it’s pretty easy to find via the right-click contextual menu and then view source/inspect element.

    I’ve just used the images you provided and scaled them down in the URL but to optimise it and make your site load faster it would be better if you upload the files at the size you want them to be displayed.

    I’ve also used a media query to only show the images on tablets or larger, there’s not really enough room on a mobile screen so I thought it best not to show them.

    If you have any follow up questions or I’ve not made something clear just let me know.

  • Unknown's avatar
    goringsocialclub · Member ·

    Thanks very much – your help is appreciated. I’ll try that out

  • The topic ‘Add image to page title’ is closed to new replies.