Oxygen Theme: Expand max-width of image in single.post to overlap with left menu

  • Unknown's avatar
    yihwan · Member ·

    I’m currently using the Oxygen theme.

    If possible, I would like to expand the full-width settings on an image to expand beyond the left #content margin and onto the #secondary menu bar.

    I do not want to do this with ALL images, but just ones that are set to max width. For images that are not set to max width, I would like to have them centered aligned with the text.

    For example, in this post: http://milewriter.com/2014/10/15/salkantay-trail/

    It would be great for the second image (happy people on a train) to expand into the secondary menu bar area on the left. But I would like the first image (smiling llama) to remain as it is so that it does not overlap with the actual menu and social media buttons.

    It is very important that expanded images retain its original quality.

    Is this possible with CSS?

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

  • Unknown's avatar
    briansteeleca · Member ·

    See if this works…

    Step 1 – Add this custom CSS: 

    /* target the anchor tag that wraps
the image and offset it to the left */
a[title="bleed-left"] {
    display: block;
    margin-left: -100px ;
}
/* for screens smaller than 767px,
do NOT offset it to the left */
@media only screen and (max-width: 767px) {
  a[title="bleed-left"] {
    margin-left: 0px;
  }
}

    Step 2: Click Add Media to add your image and then Insert into post.

    Step 3: Click on your image and then the Edit button. In the image editor, select Align: None and Size: Custom Size (leaving the default values), and then Update.

    Step 4: With the image still selected, click on the Edit/insert link icon (in your editor’s toolbar) . Enter your URL and set the Title field to be bleed-left, then Update.

    Step 5: Update your post.

    You may have to experiment with the size of your images and the margin-left value in CSS, but your image should bleed to the left and fill the entire with of the column. Then, when you get down the smaller resolutions on mobile, the bleed is removed by setting the margin-left back to 0.

  • Unknown's avatar
    briansteeleca · Member ·

    I should mention that the Title attribute isn’t actually the correct place to target your anchor tag – it’s actually meant to add additional/advisory information to your link. Also, when someone hovers over your link, some browsers will display this text in a tooltip (yellow box).

    The correct way is to use a CSS class, but the Insert/edit link dialog doesn’t have a field for Class, so I cheated and used Title instead. If you’d prefer to do it the proper way with a class, you can go into the HTML tab of the editor and replace title=”bleed-left” with class=”bleed-left”. For example:

    <a class="bleed-left" href="path-to-my-image-file">

    Then, use this custom CSS instead of what I showed you in my previous post:

    /* target the anchor tag that wraps
the image and offset it to the left */
a.bleed-left {
    display: block;
    margin-left: -100px ;
}
/* for screens smaller than 767px,
do NOT offset it to the left */
@media only screen and (max-width: 767px) {
  a.bleed-left {
    margin-left: 0px;
  }
}

    It’s a little more work, but I think it’s a better approach.

  • Unknown's avatar
    yihwan · Member ·

    Wow, that works great! Thanks so much for the help.

    I’ve been experimenting with class=”bleed-left” in this post on the 6th image down:

    http://milewriter.com/2014/12/22/design-society-and-the-other-my-days-in-copenhagen

    So my understanding is that your method will activate each image as a link. I don’t necessarily want that to happen in all instances, so when I don’t want a linked image, I’ve removed the “href” of the 6th image shown above:

    <a class="bleed-left" ><img class=" alignnone wp-image-873" src="https://milewriter.files.wordpress.com/2014/12/img_0483.jpg" alt="CPH Airport" width="800" height="480" /></a>

    However, the theme still thinks this is a link. So when you hover over the above image, two things happen (1) it becomes underlined in blue, and (2) and the following body text shifts down a bit.

    I’m debating whether or not I like this (it could be spun as a “feature,” I suppose). But if I later decided that I didn’t like it, how could I remove (1) or (2) above?

    Thank you again!

  • Unknown's avatar
    briansteeleca · Member ·

    Great, I’m glad it worked and am happy to help.

    You’re right, my method makes each image a link, but fortunately there’s an easy way to keep the same functionality without having a link. (It’s only a feature if there isn’t a fix!)

    You can replace your anchor tag with either a div or a span.

    (An aside: both and <span> are inline elements, while <div> is a block-level element. However, because .bleed-left specifies display: block, it will behave as a block-level element, just like a <div>.)

    There’s one more thing you’ll have to do though: make your .bleed-left selector less specific. Right now, you have: a.bleed-left { .. }. That will only work for anchor tags. You want it to work for anything, including , <span> or <div>. By using .bleed-left, it will work for any element that has that class. And remember to add your media query for screens smaller than 767px (as in the code above).

    Great article on Copenhagen btw – I’m going back to read the rest now!

  • Unknown's avatar
    briansteeleca · Member ·

    The formatting of my previous post got a bit messed up, so I’ll try again!

    Great, I’m glad it worked and am happy to help.

    You’re right, my method makes each image a link, but fortunately there’s an easy way to keep the same functionality without having a link. (It’s only a feature if there isn’t a fix!)

    You can replace your anchor tag with either a div or a span.

    (An aside: both a and span are inline elements, while div is a block-level element. However, because .bleed-left specifies display:block, it will behave as a block-level element, just like a div.)

    There’s one more thing you’ll have to do though: make your .bleed-left selector less specific. Right now, you have: a.bleed-left { .. }. That will only work for anchor tags. You want it to work for anything, including a, span or div elements. By using .bleed-left, it will work for any element that has that class. And remember to add your media query for screens smaller than 767px (as in the code above).

    Great article on Copenhagen btw – I’m going back to read the rest now!

  • Unknown's avatar
    yihwan · Member ·

    Thanks for your kind words and sharing my post !

    I just tried using div and span, but I’m not sure if I have the html syntax right.

    First, I changed “a.bleed-left” to “.bleed-left” in CSS (should the period be included?).

    Then, I tried a couple of different things in the post HTML editor. The most recent attempt includes this:

    <div class=”bleed-left”><img class=”alignnone wp-image-873″ src=”https://milewriter.files.wordpress.com/2014/12/img_0483-e1426370552268.jpg” alt=”IMG_0483″ width=”800″ height=”480″ /></div>

    Unfortunately, that is not working. Is my error in HTML or CSS?

    Thanks again!

  • Unknown's avatar
    yihwan · Member ·

    Wait, just kidding! I was inadvertently editing only the mobile screen section in CSS. I fixed that, and now it works!

    Thanks again for your help. I really appreciate your taking the time to explain the logic behind each change so that I can slowly begin learning how to create these edits myself in the future.

  • Unknown's avatar
    briansteeleca · Member ·

    You’re welcome, and if you need help with anything else, just let me know!

  • The topic ‘Oxygen Theme: Expand max-width of image in single.post to overlap with left menu’ is closed to new replies.