Image overlap a region

Greetings,
How could I get an image to overlap a region? Particularly be overlapped at the top of a region.

Much Love,
Ciro Bey

  • James Morris

    Hello Ciro Bey,

    I hope you are well today.

    Have you tried defining a floating region? You can do anything with a floating region that you can with a regular region, but you have more positioning possibilities with it. The only difference is, floating regions are positioned absolute in relation to the window so as you scroll, they will scroll with you. You can however, limit them to only *float* within a parent region.

    Let us know if this resolves your issue.

    Best regards,

    James Morris

  • Ciro Bey

    Hey there James Morris I checked out the floating region feature. It doesn't seem to be acquitted for an overlapping image as that would allow the region to display on the page as you scroll. Using the setting you mentioned locks it to the region but doesn't allow for overlapping. I also didn't see a way to change the floating region background, or am I missing something?

    I have something similar with another region (Main Navigation) but the image is overlapping below. Here's a screenshot of that in action.

    I also made a quick mockup in Photoshop to display what I'm talking about here:

    Perhaps the ideal thing to do is mimic the effect done with the navigation region but opposite to achieve the upper overlapping?

    Much Love,
    Ciro Bey

  • James Morris

    Hello Ciro Bey,

    Ok, it's a little tricky, but it's possible to do what you're wanting. The drag and drop editor doesn't like to drag below the parent element when the floating region is attached to the parent element (so it doesn't scroll with the page). The following screenshots illustrate how I was able to get this to work.

    Setting up the floating region: https://monosnap.com/file/aCswoyFBcw4PwxTjAwCHLarKFizfwd

    Results: https://monosnap.com/file/s3twsOOichlmHiQAQBHOBmxyfHyxzM

    I hope that clarifies a bit. Let us know if you have any further questions. We'll be happy to help! :slight_smile:

    Best regards,

    James Morris

  • Ciro Bey

    Hey there James Morris

    This is what i've come up with thus far. (Edited in Builder)

    I do see one possible problem with this. If the name of the post ("Plant" ) is pretty long, the name will underlap under the floating region image. Would there be a way to counter this from happening? Would it be better to create the overlap effect with an image element in the region below to overlap up top?

    Also, I set the background of the floating region to be the featured image. Would et be possible to make the floating region circular all around? (300px rounded or so?)

    13Love
    Ciro Bey

  • James Morris

    Hello Ciro Bey,

    I sincerely apologize for the extreme delay in getting back to you on this.

    I've spent a good bit of time trying to come up with the best solution to your problem I could find. Turns out, floating regions are not it. Actually, the best approach is the featured image itself!

    When you said you were using the featured image, it gave me an idea... Why not set a negative margin and border-radius on the image itself? Thumbnails are supported, so a small enough image is present.

    So, this is what I've done. In the Page/Post parts section, I've enabled the featured image and added the following CSS to the default CSS.

    .uposts-object li .thumbnail {
        width:300px;
        height:300px;
        border-radius:50%;
        margin:-200px 1em 0 1em;
        float:left;
    }

    You can see a video walk-through of what I've done here: https://goo.gl/WzCtQe

    Let us know if this is a better solution for your situation.

    Best regards,

    James Morris

  • Ciro Bey

    Greetings James Morris

    I added the CSS to the Posts Element. I'm a bit confused on using the post element over post data. Do you mind explaining the differences and why use one over the other?

    This screenshot shows the CSS applied. At this time, I'm sort of creating posts within the editor for Plants custom post type at the moment vs in the backend. So i don't have a use for the remainder of the post element. I tried to minimize the padding at the bottom but wasn't able too.

    I did like the using the floating region (Screenshot above), tho the image wouldn't be floating over the post. Would it be possible to use the "Featured Image" Post Data element for this? Maybe a combination of the two? I tried to apply the CSS to that element, tho it didn't have an effect. Also, what would I use to center an element or text?

    (Side Note) When I tried to resize the featured image post data element (horizontally) within Builder, the element went all grey and I could no longer edit it. May possibly be a bug and I thought I'd mention.

    Pretty excited to see these pages completed!

    Much Love,
    Ciro Bey

  • James Morris

    Hello Ciro Bey,

    I used the Post Element, then selected the featured image post data element to be included with the parent post element. This was the most straight-forward way to accomplish what you were wanting to do.

    I was not able to get consistent results using the Floating Region. Your requirement of wanting the post title to wrap properly was one of the biggest issues. This is why I used the featured image post data element with a negative margin. This provided the most consistent results and was the simplest to implement.

    I hope this clarifies a bit.

    Best regards,

    James Morris

  • James Morris

    Hello Ciro Bey,

    I sincerely apologize for the delay in replying. I must have missed the notification for this thread.

    Seeing the logo image in the first screenshots, is there a way to do the same thing but to overlap at the top?

    I'm afraid I'm a little confused by this question. When I've viewed your site, the top overlap seemed to be good. Could you clarify a little please?

    Thanks!

    James Morris

  • Ciro Bey

    James Morris Sure thing!

    Right now the image is using the floating region with featured image as the background. This doesn't show up on Mobile/Responsive modes and is floating above other elements (which may or may not be a problem).

    I was wondering if the same top overlapping effect could be applied to a regular image element just as what was done with the navigation menu logo (posted above). Basically the same thing as the logo but the opposite direction. Instead of overlapping a region on the bottom, to be overlapping a region at the top.

    I hope that clarifies my previous post. This may seem sort of a repeated question, though hopefully I am being more precise with the question.

    I'm also looking to make the image circular (rounded radius), though I couldn't figure out how to do that with the floating region either.

    Best Regards!
    Ciro

  • Luís

    Hi Ciro Bey ,

    Hope you're doing well today!

    Firstly, sorry for the late reply and all the problems it may have caused.

    Floating regions will not be displayed on mobile, only in desktop, so, I think the best option to achieve the look you want is using this solution provided by James.

    However, If I understood well your last question, it's the same effect added by James in the featured image, but in "Image" element instead?

    Cheers, Luís

  • Luís

    Hi Ciro Bey ,

    Hope you're doing well today!

    I made some tests in my install to check what is the best approach to do this. I tried to check this on your install to give you the right CSS classes or ID's, but I was unable, because the Support Access has expired.

    However, I think you have two options, or move the image element itself ot the entire region content (I think this is the best). Please check this video to see if it's what you are trying to achieve:

    https://www.screencast.com/t/AvQJyqt3G

    Cheers, Luís

  • Ciro Bey

    Greetings Luís yes this looks exactly what I was hoping for. I noticed the first id you tried worked (at least from my knowledge) and then you tried two others. The last one worked as well, though I'm not quite sure the differences you had there.

    Support access is now re-granted as well. My apologies about that.
    Feel free to take a look now. Do you mind explaining the difference between the first option and last option (class/id) that you used?

    Much Love,
    Ciro Bey

  • Luís

    Hi Ciro Bey ,

    Hope you're doing well today!

    Regarding to the video I shared in my previous reply, I tried 3 things, by order:

    1) Move just the image element. However, as you can check, only this element is moved, the title is not moved, so, it creates a gap.

    2) This was an error on my side, I was looking for the right CSS class. However, I used the region container, which moved all the elements inside the region, however, the background overlaps the previous region, which will not produce the desired effect..

    3) This is the right choice in my opinion, we move only the elements inside, which will produce the desired effect.

    I made a new test on your install, showing the steps for the "3" example.

    https://www.screencast.com/t/ADv6zKQl

    Note: I didn't saved any changed.

    Cheers, Luís

  • Ciro Bey

    Greetings Luís

    Thank you for clarifying.
    It seems I'm having an issue with builder at the moment.

    The changes saved to the "Single-Plants" Layout (Custom Post Type) aren't saving or applying correctly.

    To elaborate...
    - I've edited the layout within builder for the custom post type (Plants).

    - Not all of the changes are saving (after a few attempts of reapplying) Once I reload the page, some settings are reverted or not applied (changes such as image preset settings, region css, & text preset creation/settings) [Screenshot 3]

    - Carrying over to the website (tamanasprings.com with the theme applied) and creating a new "Plants" post type, the same changes are not applied but the layout has been updated. [Screenshot 1]

    - Editing the new "Plants" post in the Upfront Editor, I noticed not only the absence of the changes made to the layout but also an additional region ("Region 1") that wasn't visible in the Builder or the Live Page itself. [Screenshot 2]

    - I am able to edit the page by deleting the extra region and adding the initial changes again, though that doesn't resolve the issue with the builder layout not updating/applying correctly. This is as the layout should be (with rounded image preset, region CSS, title preset etc.) See [Screenshot 4]

    Screenshot 1

    Screenshot 2

    Screenshot 3

    Screenshot 4

    I think this is what I'm looking for as far as a design solution for the image overlapping the region. Thank you very much for this support and helping me to find a solution for this! Hopefully there is a solution to the Layout editor issue with Builder. Looking forward!

    Much Love,
    Ciro Bey

  • Luís

    Hi Ciro Bey ,

    Hope you're doing well today!

    Firstly sorry for the late reply and all the problems it may have caused.

    I am not sure if this could be the reason, but looking for your description, seems there is a mix of editing procedures done in the Upfront Builder (plugin) and others on the Upfront Editor (theme editor).

    If you already don't know, once you edit the theme on Upfront Editor, all the changes made on the theme using Upfront Builder will not be visible on the current theme, only in new install.

    So, if you created your layouts on Upfront Builder and then edited the theme using Upfront Editor, the changes made in Upfront Builder after that, will not be reflected on this site, and vice versa, the changes made in Upfront Editor will only be reflected in this site, but not in the original theme created in Upfront Builder.

    If you already edited the theme on the Upfront Editor and want to update it with the new changes made on Builder, you will need to reset the theme in Upfront -> General:

    But this will reset the theme to default state, so, all the changes made in Upfront Editor will be lost.

    Cheers, Luís

  • Ciro Bey

    Greetings Luís When using a custom post type, after editing the layout in Builder any NEW post that uses that layout for that site/theme has always switched to the new layout for me. This is still the case now, though the problem still lies with Builder not saving/applying correctly..

    To further prove and test this I installed the theme on a new subsite. I then added a custom post type "Plants" using Custom Press that will use the Layout (for 'plants' post) that is in question here.

    Here is the screenshot that shows the new install on a new site with the same problems as mentioned in my previous reply.

    I hope this gives a better clarity with what I'm trying to point out and that we will come up with a solution!

    Best Regards,
    Ciro Bey

  • Luís

    Hi Ciro Bey ,

    Hope you're doing well today!

    I am trying to replicate the issue but I am not being able, so, I will suggest you to send us the FTP details of your website so we can investigate it further.

    Please send it privately through our contact form:

    https://premium.wpmudev.org/contact/#i-have-a-different-question

    Send in:

    Subject: "Attn: Luis Lopes"
    - WordPress admin username
    - WordPress admin password
    - Login url
    - FTP credentials (host/username/password)
    - Link back to this thread for reference
    - Any other relevant urls/information

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.