Archived

This topic is now archived and is closed to further replies.

  • 0

Cloned sections = duplicate IDs!


Question

Posted · Report post

Hi again,

I was looking at the source code of the site I'm working on. I had duplicated a box section so I could have two sets of boxes on the home page. Well, it looks like when you duplicate a section, the ID gets duplicated too, so now I have two places in my code that say:

section id="boxes"

IDs are supposed to be unique on a page. How can I fix this?

Share this post


Link to post
Share on other sites

23 answers to this question

Posted · Report post

Since this has been placed as an issue to be addressed with the developers, would this topic be considered resolved for the forum?

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

I've been adding the word "clone" to every variable. It still puts the same highlight text in both my original section and the one I manually cloned.

This is what I have so far. What am I doing wrong?

<?php

/*

Section: HighlightClone

Author: PageLines and KJF

Author URI: http://www.pagelines.com

Description: Adds a highlight sections with a splash image and 2-big lines of text.

Class Name: PageLinesHighlightClone

Workswith: templates, main, header, morefoot, sidebar1, sidebar2, sidebar_wrap

Edition: pro

Cloning: true

*/

/**

* Highlight Section

*

* @package PageLines Framework

* @author PageLines

*/

class PageLinesHighlightClone extends PageLinesSection {

var $tabcloneID = 'highlight_meta';

/**

*

* @TODO document

*

*/

function section_optionator( $settingsclone ){

$settingsclone = wp_parse_args($settingsclone, $this->optionator_default);

$metatabclone_array = array(

'hl_options' => array(

'version' => 'pro',

'type' => 'multi_option',

'title' => 'Highlight Header Text (Optional)',

'shortexp' => 'Add the main header text for the highlight section.',

'selectvalues' => array(

'_highlight_head' => array(

'version' => 'pro',

'type' => 'text',

'size' => 'big',

'inputlabel' => 'Highlight Header Text (Optional)',

),

'_highlight_subhead' => array(

'version' => 'pro',

'type' => 'text',

'size' => 'big',

'inputlabel' => 'Highlight Subheader Text (Optional)',

),

'_highlight_splash' => array(

'version' => 'pro',

'type' => 'image_upload',

'inputlabel' => 'Upload Splash Image'

),

'_highlight_splash_position' => array(

'version' => 'pro',

'type' => 'select',

'inputlabel' => 'Highlight Image Style',

'selectvalues'=> array(

'top' => array( 'name' => 'Image on top of text' ),

'bottom' => array( 'name' => 'Image on bottom of text' ),

'notext' => array( 'name' => 'No text, just the image' )

),

),

'_highlight_image_frame' => array(

'type' => 'check',

'inputlabel' => 'Add frame to image?'

),

)

)

);

$metatabclone_settingsclone = array(

'id' => $this->tabcloneID+"1",

'name' => 'Highlight Clone',

'icon' => $this->icon,

'clone_id' => $settingsclone['clone_id']+"1",

'active' => $settingsclone['active']

);

register_metatab($metatabclone_settingsclone, $metatabclone_array);

}

/**

*

* @TODO document

*

*/

function section_template( $clone_id ) {

$h_headclone = ploption('_highlight_head', $this->tset);

$h_subheadclone = ploption('_highlight_subhead', $this->tset);

$h_splashclone = ploption('_highlight_splash', $this->tset);

$h_splash_positionclone = ploption('_highlight_splash_position', $this->oset);

$frame_classclone = (ploption('_highlight_image_frame', $this->oset)) ? 'pl-imageframe' : '';

if($h_headclone || $h_subheadclone || $h_splashclone){?>

<div class="highlight-area">

<?php

if( $h_splash_positionclone == 'top' && $h_splashclone)

printf('<div class="highlight-splash hl-image-top %s"><img src="%s" alt="" /></div>', $frame_classclone, $h_splashclone);

if( $h_splash_positionclone != 'notext' ){

if($h_headclone)

printf('<h1 class="highlight-head">%s</h1>', __( $h_headclone, 'pagelines' ) );

if($h_subheadclone)

printf('<h3 class="highlight-subhead subhead">%s</h3>', __( $h_subheadclone, 'pagelines' ) );

}

if( $h_splash_positionclone != 'top' && $h_splashclone)

printf('<div class="highlight-splash hl-image-bottom %s"><img src="%s" alt="" /></div>', $frame_classclone, apply_filters( 'pl_highlight_splash', $h_splashclone ) );

?>

</div>

<?php

} else

echo setup_section_notify($this, __('Set highlight page options to activate.', 'pagelines') );

}

}

Share this post


Link to post
Share on other sites

Posted · Report post

First of all, please don't feel I expected you to respond Saturday night or Sunday morning - I wasn't expecting a reply until Monday - it was just when I had time to write about it. So thank you and sorry you're working on a weekend. That said, I first wrote about this several days ago so it's been an ongoing conversation. Yes, I am not using the clone feature at this point - I am manually duplicating the highlight section and editing the code. It's not going well and the suggestions thus far have not been specific as to what I need to change to make it a completely separate section from its "parent" - currently when I change the text for one highlight I change the other. I thought I had renamed every variable. What am I missing?!?!

Share this post


Link to post
Share on other sites

Posted · Report post

James B - true and I'm taking advantage of that, but it doesn't address the problem that you're just not supposed to have two elements with the same ID in an html page. Validators will squawk.

Share this post


Link to post
Share on other sites

Posted · Report post

All Clones are given a unique class which can be used to style the sections individually.

For example, I used the following code on 3 Highlight section clones:


#site #highlight.clone_5 { text-align: left; background-color: lightGreen; }
#site #highlight.clone_5 .content { background-color: lightGreen; }
#site .clone_5 .highlight-head { color: green; }
#site .clone_5 .subhead { color: green; font-size: 18px; font-style: italic; }

#site #highlight.clone_4 { text-align: right; background-color: lightBlue; }
#site #highlight.clone_4 .content { background-color: lightBlue; }
#site .clone_4 .highlight-head { color: lightCyan; }
#site .clone_4 .subhead { color: lightCyan; font-size: 2em; font-weight: bold; }

#site #highlight.clone_2 { text-align: center; background: whiteSmoke; }
#site #highlight.clone_2 .content { background-color: whiteSmoke; }
#site .clone_2 .highlight-head { color: #999; text-align: left; }
#site .clone_2 .subhead { color: #999; font-size: 24px;; font-style: italic; text-align: right ;}[/CODE]

This is what I ended up with:

http://d.pr/i/qsKv

The top Highlight is the default styling, the others are styled with the code above using the clone_ID class.

Share this post


Link to post
Share on other sites

Posted · Report post

Ack - I just tried copying the other section I am having this issue with - Highlight - and while my HighlightClone shows up on the Drag & Drop page, when I edit the meta settings for the actual page where I'd put the text into HighlightClone, it doesn't show up. Help?

Share this post


Link to post
Share on other sites

Posted · Report post

While cloning is awesome, this is the drawback if you place clones on the same page, sorry.

Share this post


Link to post
Share on other sites

Posted · Report post

Um... that seems like a pretty major drawback, and should be fixable. The latest version of PageLines is so awesome I'm somewhat shocked by this oversight.

Is there some way to request that this feature be implemented in the next version?

In regular old WordPress, every time you add a widget, it gets a unique ID automatically - WP just appends a number to the base ID name. And when you clone a section, it even names the sets "Boxes #2", Boxes #3" or something like that. So the information to make this possible seems to be in the system somewhere...

Share this post


Link to post
Share on other sites

Posted · Report post

Problem is, the boxes section has an ID of boxes, and the css targets the boxes ID, so if we change the ID for your clone, the css will break.

Share this post


Link to post
Share on other sites

Posted · Report post

OK... in the longer term, can the default CSS target one of the boxes classes, rather than the ID?

Share this post


Link to post
Share on other sites

Posted · Report post

Those docs are for platformpro...

Yes basically, copy the section folder into your child themes sections folder, then open the section.php and change the classname and the name of the section.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you. This will do the trick for now. I hope in the future PageLines will update to address this issue - cloning is such a useful feature and it's a shame to have it marred by the duplicate IDs issue.

Share this post


Link to post
Share on other sites

Posted · Report post

Your going to have to change more than just the section name, your probably going to have to change all the settings within the section if your going to use it on a page with the section it is copied from. Otherwise it will just load the settings from the original.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Unfortunately we don't read and analyze code here.

If you're trying to add multiple instances of boxes on a page or post, the solution is really quite simple. Use WP-Boxer plugin http://wordpress.org/extend/plugins/boxer/

This plugin uses shortcodes and has made a new section called Content Blocks, which are the same, essentially, as boxes. Thus there's never any conflict with boxes provided by the theme you're using.

It's relatively simple to use, very similar to Boxes in that you create a set, and apply your box (content block) to the set. The fundamental difference is just adding a shortcode where you want it on your site, even in sidebars.

Share this post


Link to post
Share on other sites

Posted · Report post

To clarify - I'm not talking about styling. I am talking about making sure that my new section that I am copying manually has a unique ID, and that its text is set separately from the original section I copied the code from.

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Simon for reporting/posting this as an issue!

Share this post


Link to post
Share on other sites

Posted · Report post

There should be a 'follow' button in the bug, feel free to comment

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Also you can use css to target boxes by classes. There's even a custom class field in the box meta settings when you create a new box set so you can choose what to call the classes.

Share this post


Link to post
Share on other sites

Posted · Report post

Shortcodes aren't going to do it for me in this case. Can you at least give me some more specific feedback than "you have to change all the settings?" WHICH settings?

Forgive my impatience... but we are PAYING for PageLines. As wonderful as it is, I remain frustrated that it shipped with a feature that generates incorrect HTML. I'd really appreciate some help here.

Share this post


Link to post
Share on other sites

Posted · Report post

If your willing to wait, then I will see if we can change the way sections are diplayed without breaking thousands of customers sites so that you can use clones and still have valid html5.

You posted at 8am on a sunday morning, so please bear with us. In the mean time, as I already suggested, until i try and fix it if validation is a deal breaker, dont use the clones, they were added as a quick/cheap/easy way of duplicating sections.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Just FYI in case anybody else encounters this issue in the meantime, I finally managed to get my code to work for now until the update to PageLines. The key was changing the names of the items starting with highlight_head and ending with _highlight_image_frame.

I was also able to rename the ID somehow too, probably because I changed the names of everything else.

Share this post


Link to post
Share on other sites