Image size of the post/page vs featured image size

  • Unknown's avatar
    efculturelab · Member ·

    Dear pcosta,
    thank you so much!
    I tried to change the header using the last code you posted and it is a very good starting point!
    I guess that now we are getting closer to what I would like. Could you have a look at this screen shot? http://www.evernote.com/shard/s519/sh/54b4f7ac-f5b4-46e3-a7bc-adc50b0cd98f/d6af4af3a23cf430f57fdaea94e121bf
    I have still some problem with the position of the image…
    Thanks a lot!

  • Unknown's avatar
    pcosta88 · Member ·

    Ok!

    I was able to get the title to be placed under the picture with the following code: 

    .has-thumbnail .entry-header .entry-title {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    bottom: 450px;
    font-size: 20px;
    left: 200px;
    line-height: 20px;
    margin: -200px;
    padding: 10px;
    width: 390px;
}

    I am not sure if you wanted the whiteness around the image to be removed but I was able to do that by unfixing the position and making it absolute: 

    #main .entry-thumbnail, .header-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
    position: absolute;
    top: 0;
    width: 400px;
    z-index: 0;
}

    I was able to get your screen to look like this from a wide angle:
    http://pbrd.co/1xQSGWL

  • Unknown's avatar
    efculturelab · Member ·

    Thanks for the title!
    The whiteness was made on purpose.
    What I would like to do is to move the image (+title) to the right in line with the logo but without affecting the mosaic images on the front page.

  • Unknown's avatar
    efculturelab · Member ·

    Now it looks better though but here what I would like to do:
    http://www.evernote.com/shard/s519/sh/7406f6e3-baac-421b-b292-f9030b2ac535/a84e07c167387608fd2dadd644b211b1

  • Unknown's avatar
    pcosta88 · Member ·

    Hmm.
    I was able to shift over the image by using the following id
    #main .entry-thumbnail, .header-image

    with the following code:

    left:100px;

    Though I am unable to see if it affects the front-page image. Can you confirm that it either does or does not?

  • Unknown's avatar
    efculturelab · Member ·

    Dear pcosta,

    Indeed it does shift over the image and this change unfortunately affects the “mosaic image” size in the front page but it doesn’t affect the main header images…
    Is there a code that will allow to affect just the image inside the post and leave it as it is the front page?
    Thanks!

  • Unknown's avatar
    efculturelab · Member ·

    Also because all the images in the mosaic front page are square so I need to have a different size in the related posts. On the contrary the main big images in the front pages are rectangular and in terms of dimension are fine now as they look inside the related posts.

  • Unknown's avatar
    designsimply · Member ·

    1)I realise that the effect black/white in the “mosaic” images on the first page of my web site doesn’t show up with Windows 8. How can I make it work?

    If you are talking CSS filter effects such as “filter:grayscale(100%)” — a search to find out the browser compatibility for that CSS property shows that Internet Explorer does not support it. See http://caniuse.com/#search=filter for details. It is a problem with the browser not the theme.

    1. Yes, I confirm that if I change my theme (I tried twenty-ten) I could get it to work with Windows 8 and IE 11…

    I am surprised if you were referring to getting CSS filter effects to work. From what I have researched, filter affects such as “filter:grayscale(100%)” are not supported by Internet Explorer yet.

    Is there a code that will allow to affect just the image inside the post and leave it as it is the front page?

    Yes. You can apply CSS to different types of pages by using the classes available in the body tag. For example, one of the body class names on the front page is “home” so you could use “.home p {color: red;}” to turn all of the paragraphs on the home page red, for example.

    I did read back through all of the previous replies on this thread, and I am so sorry but I don’t understand yet what you are trying to do with the images on single posts. Would you mind please trying to explain it to me with more specifics?

    Here is a link to one of your recent posts:
    https://culturelabblog.wordpress.com/2014/11/12/last-news/

    Can you tell me exactly how you are trying to change that page to look different from the way it looks right now?

  • Unknown's avatar
    efculturelab · Member ·

    Dear Designsimply,
    Thank you for your answers.
    Regarding the 3rd question, first of all i would like to keep the format/layout of the pages/posts always the same, no matters with which computer I open them. I realized that if I change computer everything is messing up.
    So what I would like to do is have an order and the logo “culture lab” aligned with the images.. but first of all we have to see the same screen.
    Thanks so much!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, there are some things in your CSS that are most likely causing some misalignment between browsers. I would suggest adding some temporary sample text to this post, https://culturelabblog.wordpress.com/2014/11/12/last-news/ since it is also going to be out of alignment with everything else.

    Can you verify if I understand correctly that you want the header image and the logo at the top aligned vertically (left edge of each)?

  • Unknown's avatar
    efculturelab · Member ·

    Hi there,
    Thanks for your message!
    I added some temporary sample text to this post https://culturelabblog.wordpress.com/2014/11/25/last-news/ (your link is not working).
    I would like the header image and the logo at the top aligned vertically yes, but keeping a little left edge of images… (without affecting the mosaic images on the front page).
    Thank you!!

  • Unknown's avatar
    designsimply · Member ·

    I’m circling back to review this to try to understand the request a bit better. I think some of the custom CSS you’ve applied in the past is too complex and it’s making it hard for you to go forward.

    What I would like to do is to move the image (+title) to the right in line with the logo but without affecting the mosaic images on the front page.

    This is not possible with fixed positioning (suggested in an earlier reply on this thread) because the width of browsers is variable and the logo moves depending on the browser width with the way the header in this theme is setup. So, this request sort of conflicts a little with the CSS given before. I think it would be worth just deleting some of what you have now and starting again.

    Can you try deleting ALL of this:

    #main .entry-thumbnail, .header-image {
	background-position: center center;
	background-repeat:no-repeat;
	background-size:cover;
	height:250px;
	left:px;
	width:400px;
	position:absolute;
	top:0;
	z-index:0
}
.has-thumbnail .entry-header .entry-title {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	bottom:350px;
	left:200px;
	font-size:20px;
	display:10px;
	line-height:20px;
	margin:-200px;
	padding:10px;
	position:10px;
	width:400px
}
#main .has-thumbnail .entry-header {
	bottom: 0;
	background-color:#FFF;
	height:100px;
	margin:0;
	top:140px;
	padding:200px;
	position:fixed
}
#main .has-thumbnail .entry-content {
	width: 600px;
	font-family:"Georgia";
	text-align:justify;
	color:#180000;
	position:relative;
	left:150px;
	top:px
}

    Then add this to the bottom of your CSS editor:

    .single .entry-header {
	margin: 0 auto;
	width: 885px;
	max-height: 200px;
}

.single .has-thumbnail .entry-header .entry-title {
	font-family: Georgia;
	font-size: 1.5em;

}

    The “.single” part of the selectors in the new example work to limit the change to single posts only (which means that CSS will not affect the home page). The change moves the header image on posts from full browser width to match the width of the content. I’m not sure if you wanted to do something different with the image, but I think it would be help to start from this point and then continue again from here.

1 2
  • The topic ‘Image size of the post/page vs featured image size’ is closed to new replies.