Cloned sections = duplicate IDs!

[dugoni 0]

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?

[Simon 248]

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

[dugoni 0]

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...

[Simon 248]

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.

[dugoni 0]

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

[dugoni 0]

And in the VERY short term, should I just make a second custom section for Boxes and give it a unique ID?

(These instructions still good?)

http://www.pagelines.com/docs/custom-sections

[Simon 248]

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.

[dugoni 0]

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.

[James B 436]

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.

[dugoni 0]

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.

[dugoni 0]

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?

[Simon 248]

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.

[dugoni 0]

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') );

}

}

[Rob 547]

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.

[dugoni 0]

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.

[Simon 248]

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.

[dugoni 0]

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?!?!

[Danny+ 1,327]

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.

[Simon 248]

http://www.pagelines.com/forum/tracdown/issue/2-duplicate-ids-when-clones-are-used/

[dugoni 0]

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.

[dugoni 0]

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

[Simon 248]

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

[dugoni 0]

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.

[mackenzie 12]

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