Intergalactic Template – Image Size Change

  • Unknown's avatar

    Hello, I am using the Intergalactic template and would like the images on the homepage to appear larger – ideally to take up the full screen. Is there a way to do this?

    Thanks!

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

  • Hi there, the images on your homepage in Intergalactic already stretch to the edges of the entire browser window, but perhaps that’s not what you mean. Right now, your site is set to display the latest posts on the front page. Each post’s featured image takes up the full browser width. Could you explain in more detail what you have in mind, or perhaps show me an example or provide a sketch? Thanks!

  • Unknown's avatar

    I actually meant height wise. I would like viewers to only be able to see one post at a time before scrolling.

    I am also having an issue getting my header to resize properly. I am uploading it with the indicated sizes, 1440 x 460 px. It looks ok on the Customizer preview screen, but once it is uploaded it is displayed like the image attached. Ideally I would also like this to take up the full screen (height and width) but at the very least can’t have it be cut off. Thanks!

    Screenshot

  • Unknown's avatar

    @ corilee,

    I am also having an issue getting my header to resize properly. I am uploading it with the indicated sizes, 1440 x 460 px.

    When you upload an image to be used in the header you may choose to “skip cropping, Publish image as is,” or modify the area to be cropped by dragging the corners and sides of the dotted line that appears in the cropping tool.

    I am using the Intergalactic template and would like the images on the homepage to appear larger – ideally to take up the full screen. Is there a way to do this?

    The background images on the posts page of the Intergalactic theme are created by assigning featured images to posts. The featured images on your top four posts have the following dimensions: 720 X 969, 768 X 960, 1400 X 1082, and 960 X 960. It’s not clear to me from examining the Intergalactic demo what the ideal size for a post’s featured image should be as the dimensions used there are all over the board, but it is clear that the height at which a post displays on the posts page is dependent upon the amount of content in the post. A post with more lines of text, an image, a video, etc. in the content will appear taller than one with less content.

    You may also increase the height without including additional visible post content by adding code to the content which forces a break or a new line, such as the following:
    force break code (you may stack them to create more space)
    <p>&nbsp;</p>
    force a new line code:
    &nbsp;<br />

    Have you considered the Radcliffe theme? Radcliffe demo.

  • Unknown's avatar

    Th code was stripped. I’ll try that again.

    Force a break code:
    <p>&nbsp;</p>
    Force a new line code:
    &nbsp;<br />

  • Unknown's avatar
  • corilee114 –

    I actually meant height wise. I would like viewers to only be able to see one post at a time before scrolling.

    You could try something like this, adjusting the number as you like:

    article {
         height: 800px;
    }

    You may need to then make other adjustments as well.

    I am also having an issue getting my header to resize properly. I am uploading it with the indicated sizes, 1440 x 460 px. It looks ok on the Customizer preview screen, but once it is uploaded it is displayed like the image attached. Ideally I would also like this to take up the full screen (height and width) but at the very least can’t have it be cut off. Thanks!

    Since your header is mostly just a logo, I’d recommend uploading it the logo portion itself under Site Title, Tagline, and Logo to get a better effect. You can then upload a small solid purple background image in the Header area.

    musicdoc1 –

    You may also increase the height without including additional visible post content by adding code to the content which forces a break or a new line, such as the following:
    force break code (you may stack them to create more space)
    <p> </p>
    force a new line code:

    I wouldn’t suggest adding empty tags, as the Visual Editor tends to strip those out. A more reliable way to add spacing is using CSS, using padding and margin.

  • Unknown's avatar

    @ kathrynwp,

    I wouldn’t suggest adding empty tags, as the Visual Editor tends to strip those out.

    I didn’t use empty tags. Also I wasn’t aware that the member had the custom design upgrade. The codes were stripped here, despite my using the code button, which normally allows code to be displayed. In my suggestion above I used two different codes which had been recommended to me years ago either here in the support forum or privately (email) by WordPress staff.

    I have noticed that these codes have sometimes been stripped when I’ve used them in page content, but the force a new line or line break codes that I suggested worked in the tests I did before making the suggestion above, and both are still working in my test website. Here is a screen shot showing the two codes in the test page editor window: http://snag.gy/D7fW2.jpg. They are working on the first post of the posts page here: https://spithalo.wordpress.com/.

  • Ah, I don’t think it’s possible to use non-breaking spaces (& n b s p ; ) here in the forums, that’s why they’re being stripped out.

    In addition, I do think that sort of code would also be stripped out by the TinyMCE Visual editor when you flip back and forth between the Text and Visual editors, so I woudn’t generally recommend it as it’s not a reliable method of adding space.

    Inline CSS can always be used within the editor and is a much more reliable way of adding space. It doesn’t require any upgrades, either.

    This is what I mean, for example:

    <p style="margin-bottom: 50px;">Add 50 pixels of space below this paragraph</p>

  • Unknown's avatar
  • The topic ‘Intergalactic Template – Image Size Change’ is closed to new replies.