Jump to content


Photo
- - - - -

Cloned sections = duplicate IDs!

section clone ID

  • Please log in to reply
23 replies to this topic

#1 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 October 2012 - 08:55 PM

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?

#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 03 October 2012 - 09:22 PM

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

#3 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 October 2012 - 09:47 PM

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

#4 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 03 October 2012 - 10:08 PM

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.

#5 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 October 2012 - 10:10 PM

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

#6 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 October 2012 - 10:14 PM

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

Please Login or Register to see this Hidden Content



#7 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 03 October 2012 - 10:16 PM

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 likes this

#8 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 October 2012 - 10:22 PM

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.

#9 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 October 2012 - 02:21 AM

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.

#10 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 04 October 2012 - 06:58 PM

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.

#11 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 04 October 2012 - 10:24 PM

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?

#12 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 05 October 2012 - 01:36 AM

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.

#13 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 05 October 2012 - 10:53 PM

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:

Please Login or Register to see this Hidden Content


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' ) [color=blue][font=monospace][size=3])[/size][/font][/color][color=blue][font=monospace][size=3];[/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=blue][font=monospace][size=3]} [/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=#770088][font=monospace][size=3]if[/size][/font][/color][color=blue][font=monospace][size=3]( [/size][/font][/color][color=black][font=monospace][size=3]$h_splash_positionclone [/size][/font][/color][color=blue][font=monospace][size=3]!= [/size][/font][/color][color=#AA2222][font=monospace][size=3]'top' [/size][/font][/color][color=blue][font=monospace][size=3]&& [/size][/font][/color][color=black][font=monospace][size=3]$h_splashclone[/size][/font][/color][color=blue][font=monospace][size=3])[/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=green][font=monospace][size=3]printf[/size][/font][/color][color=blue][font=monospace][size=3]([/size][/font][/color][color=#AA2222][font=monospace][size=3]'<div class="highlight-splash hl-image-bottom %s"><img src="%s" alt="" /></div>'[/size][/font][/color][color=blue][font=monospace][size=3], [/size][/font][/color][color=black][font=monospace][size=3]$frame_classclone[/size][/font][/color][color=blue][font=monospace][size=3], [/size][/font][/color][color=black][font=monospace][size=3]apply_filters[/size][/font][/color][color=blue][font=monospace][size=3]( [/size][/font][/color][color=#AA2222][font=monospace][size=3]'pl_highlight_splash'[/size][/font][/color][color=blue][font=monospace][size=3], [/size][/font][/color][color=black][font=monospace][size=3]$h_splashclone [/size][/font][/color][color=blue][font=monospace][size=3]) [/size][/font][/color][color=blue][font=monospace][size=3])[/size][/font][/color][color=blue][font=monospace][size=3];[/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=#999999][font=monospace][size=3]?> [/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=black][font=monospace][size=3]</[/size][/font][/color][color=#AA00BB][font=monospace][size=3]div[/size][/font][/color][color=black][font=monospace][size=3]>[/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=#999999][font=monospace][size=3]<?php [/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=blue][font=monospace][size=3]} [/size][/font][/color][color=#770088][font=monospace][size=3]else[/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=green][font=monospace][size=3]echo [/size][/font][/color][color=black][font=monospace][size=3]setup_section_notify[/size][/font][/color][color=blue][font=monospace][size=3]([/size][/font][/color][color=#770088][font=monospace][size=3]$this[/size][/font][/color][color=blue][font=monospace][size=3], [/size][/font][/color][color=black][font=monospace][size=3]__[/size][/font][/color][color=blue][font=monospace][size=3]([/size][/font][/color][color=#AA2222][font=monospace][size=3]'Set highlight page options to activate.'[/size][/font][/color][color=blue][font=monospace][size=3], [/size][/font][/color][color=#AA2222][font=monospace][size=3]'pagelines'[/size][/font][/color][color=blue][font=monospace][size=3]) [/size][/font][/color][color=blue][font=monospace][size=3])[/size][/font][/color][color=blue][font=monospace][size=3];[/size][/font][/color]
[color=#FF0000][font=monospace][size=3] [/size][/font][/color][color=blue][font=monospace][size=3]}[/size][/font][/color]
[color=blue][font=monospace][size=3]}[/size][/font][/color]

#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 October 2012 - 07:52 PM

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

Please Login or Register to see this Hidden Content



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.

#15 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 07 October 2012 - 06:54 AM

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.

#16 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 07 October 2012 - 09:40 AM

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 likes this

#17 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 08 October 2012 - 04:03 AM

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

#18 Danny

Danny

    Is Awesome!

  • Moderators
  • 15084 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 October 2012 - 10:01 AM

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:


Please Login or Register to see this Hidden Content


This is what I ended up with:

Please Login or Register to see this Hidden Content



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

#19 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 08 October 2012 - 03:01 PM

Please Login or Register to see this Hidden Content


  • dugoni likes this

#20 dugoni

dugoni

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 08 October 2012 - 05:25 PM

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.





Also tagged with one or more of these keywords: section, clone, ID