• Hello all. Been a long time since I used WordPress and I’m trying to help a friend solve an issue.

    He has a site and wants to create a new page based on another. The main page has an image, which looks to be beneath the header which has a logo and hamburger menu. When that page is duplicated to create the new page, the image is no longer beneath the logo header. It seems to have been pushed down and the header is now white (and the logo is white so it essentially disappears). I’ve tried this with a few pages and whenever duplicated it messes up the image beneath the header.

    Any suggestions would be great. Thanks.

    • This topic was modified 4 years, 2 months ago by Jan Dembowski.
Viewing 15 replies - 1 through 15 (of 15 total)
  • You can duplicate posts and pages using Yoast Duplicate Post.

    Hope this helps.

    Moderator bcworkz

    (@bcworkz)

    Verify the source page and its duplicate are both using the same page template. Compare the source HTML of both pages. Some kind of diff utility can be useful for this, search the ‘net for “diff online”. Any discrepancy in the HTML tags could cause different CSS to be applied. Patch the duplicate page as necessary.

    Or use a different page duplicator like Davood suggests.

    Thread Starter ba-doyn

    (@ba-doyn)

    Thanks. Some good suggestions. I’ll check them out.

    I figured the page that was duplicated should duplicate failthfuly. I guess that’s not always the case. Doesn’t make sense to me as a duplicate is a duplicate.

    Thread Starter ba-doyn

    (@ba-doyn)

    Not yet comfortable adding the Yoast plug in yet as it’s not my site.

    How can I confirm the the page I duplicated, and the duplicated page, is from the same page template?

    I did the diff utility and the only things that are different are the images used (that shouldn’t be an issue as when the page was duplicated the original image was in there and the page was still incorrect), and there was the addition of some sort of “encode_shortcode_id=”xxxxxx”, where the “xxxxxx” is a number. That is not in the original page.

    Suggestions?

    Moderator bcworkz

    (@bcworkz)

    To check the template used, open each page in the editor. Open the settings sidebar if it’s not already visible (click the gear icon). There should be a template setting in the “page” settings tab. If there isn’t one, there are no alternative page templates with this theme.

    I don’t know what an encode_shortcode_id value would be for. The presence of a shortcode in one but not the other could be a factor in display discrepancies.

    If the HTML is identical, the difference would be in the CSS that’s applied, but that should have shown up in the diff somewhere.

    In any case, the end solution is to get appropriate CSS applied to the copy so it appears as desired, even if it ends up being different CSS than the original. Your browser’s element inspector tool is instrumental in determining appropriate CSS. Any custom CSS you decide is needed can be added to the Additional CSS customizer section. Verify any added CSS does not adversely affect other pages on the site.

    Thread Starter ba-doyn

    (@ba-doyn)

    Ok. I’ll try to track down the template and see if there is an issue with the “good” page.

    What I don’t understand is that if you duplicate the page then it should duplicate faithfully, including any custom or modified items. Otherwise it’s not really a “duplicate.”

    I appreciate your help and patience.

    Thread Starter ba-doyn

    (@ba-doyn)

    Doesn’t seem to be any template the original page is based on… at least one i can find.

    A strange thing i noticed is that when i duplicate the page, and it’s in draft status, and view the page, all is well. The minute i save the draft it messes it up.

    Does that mean anything?

    Moderator bcworkz

    (@bcworkz)

    That’s a meaningful distinction, but I don’t know what it actually means 🙁

    It could get messy untangling what’s going on. Instead of trying to fix that, I’d be inclined to add corrective CSS so the copies display correctly, whatever their actual difference may be.

    Thread Starter ba-doyn

    (@ba-doyn)

    Sounds good. Now I just need to figure out what that is. I guess I’ll have to target the single image and try to position it absolutely. Wish me luck. 🙂

    Moderator bcworkz

    (@bcworkz)

    Good luck 🙂 if you get stuck, I’m willing to help, but I’d need live links to both pages. I got the impression you were either unable or unwilling to share links. I understand either way.

    Thread Starter ba-doyn

    (@ba-doyn)

    I am waiting on permission to share the links to the pages. I would love for you to look at them. I’ll keep you posted.

    Thread Starter ba-doyn

    (@ba-doyn)

    Ok. Let’s see if this works.

    Here is the page that works. Notice the image goes beneath the header which contains the logo and hamburger menu (there will be another question about the header later). Here is the link:

    http://sdainteractiveclients.com/behavior-health/

    Here is the link to the page that was a duplicate of the Behavioral Health page, new image added, and new copy added. You will see the image is beneath the header which displays as white. Those don’t really matter as when the page is duplicated it messes up. Here is the link:

    http://sdainteractiveclients.com/our-company/

    Thanks for taking the time to help.

    Moderator bcworkz

    (@bcworkz)

    The .menu-wrapper element on the good page has an element style attribute height of 0. On the problem page it’s 118px. If this isn’t in the source HTML of either page, it was probably set via script. The issue isn’t the duplicated page so much as the header that is applied to it. I’m unsure why they are slightly different.

    The good .menu-container element has a transparent background via the theme’s style-custom file that is not applied to the problem page. Not sure why, but in any case a transparent background needs to be applied somehow. It also has a bottom border that shouldn’t be there.

    As I said, untangling why this is could be challenging. I suggest applying the necessary styles by what ever means available, such as adding to the Additional CSS customizer section. The .menu-wrapper height is a problem though since we cannot override element style attributes with ore CSS. If it’s not set in source HTML where you can alter it, it’ll need to be set by JavaScript.

    FWIW, all links that appear in forum posts have the nofollow attribute added to discourage search bots from doing anything with them.

    Thread Starter ba-doyn

    (@ba-doyn)

    Thanks so much for looking and finding out the issues. I agree, not sure why this has happened. I’ll look into how this can be fixed.

    Did you use the inspector dev tools in the browser?

    Much appreciated.

    Moderator bcworkz

    (@bcworkz)

    Yup , dev tools. I’d be lost without it 🙂 It did take a some sleuthing though to zero in on the specific rules. I figured it was a positioning issue of some sort, but the image positioning was all correct, so it had to be the header pushing it down. There were several levels of header elements to poke through until the culprit was identified.

    It’s a useful tool, but like all tools, you need to learn how to use it well, which often can only come with experience. Truth: my experience was gained mostly from helping others here in the forums.

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘duplicating pages changes image location…’ is closed to new replies.