Jump to content
dugoni

Cloned sections = duplicate IDs!

Recommended Posts

dugoni    0
dugoni

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
Simon    247
Simon

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
dugoni    0
dugoni

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
Simon    247
Simon

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
dugoni    0
dugoni

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
Simon    247
Simon

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.

  • Like 1

Share this post


Link to post
Share on other sites
dugoni    0
dugoni

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
dugoni    0
dugoni

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
dugoni    0
dugoni

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
Simon    247
Simon

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
dugoni    0
dugoni

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dugoni    0
dugoni

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
Simon    247
Simon

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.

  • Like 1

Share this post


Link to post
Share on other sites
dugoni    0
dugoni

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dugoni    0
dugoni

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
dugoni    0
dugoni

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

Share this post


Link to post
Share on other sites
Simon    247
Simon

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

  • Like 1

Share this post


Link to post
Share on other sites
dugoni    0
dugoni

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
mackenzie    12
mackenzie

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

  • Like 1

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • jojoking
      By jojoking+
      I have to admit to being baffled.
      I'm trying to embed a video (from my WP media library) within a WP post using the videobox section shortcode.
      The shortcode section popup only allows two items to be configured - the section type, in this case videobox - and a unique id. There's no URL or other parameters such as autoplay or loop which are available within the Pagelines editor.
      Whatever I put in the unique ID makes no difference to what is shown which seems to be a default video with stars or white noise on a black background.
      I assume I need to define this ID somewhere else, or maybe WP has done it for me?
      HELP!
       
      PS This is the page source generated when a shortcode is added within the WP post editor
      <!-- VideoBox | Section --> <section id="videobox_1675853156" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="1675853156" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="280414138" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/plugins/pl-section-videobox/default.mp4?r=280414138" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#280414138')[0].load(); </script> </div> </div></div></section> </div>  
      If I add a videobox section using the Pagelines page editor the page source generated includes my video:
      <!-- VideoBox | Section --> <section id="videobox_udvu4uz" class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-videobox" data-object="PL_VideoBox" data-clone="udvu4uz" data-level="0"><div class="pl-sn-wrap"><div class="pl-sn-pad fix" data-bind="pledit: true" > <div class="video-highlight"><h3 class="video-title" data-bind="pltext: vb_title"></h3></div> <div class="pl-video-box" data-bind="plcallback: { vb_autoplay: vb_autoplay(), vb_loop: vb_loop(), vb_controls: vb_controls(), vb_video: vb_video()}" data-callback="videobox"> <video id="429558737" autoplay loop > <source src="https://www.handinhandmanchester.org.uk/wp-content/uploads/2017/04/HIHWelcome.mp4?r=429558737" type="video/mp4" /> No browser html5 video. </video> <script> jQuery('#429558737')[0].load(); </script> </div> </div></div></section>  
    • flourishdesignstudio
      By flourishdesignstudio
      Hi,
      I am having an issue with the Lax sections on Platform 5. I can embed a widget or text box into a Lax section which is really neat, but the image in the background (the parallax image) seems to get stretched and doesn't scale in an attractive way.  For example, the page http://ed6.61e.myftpupload.com/#clients has a parallax section with a woman's face  and I thought is would scale as the browser window gets smaller but the zoom-level never changes. Also, the amount of parallax shift seems more dramatic than what we want. I thought that if I uploaded a shorter image it would scan/scroll less since the height from the image's top to bottom would be less. However, that doesn't seem to have any effect and I am at a loss of how to properly control the way the image is displayed within that box. Any thoughts, tips, or suggestions to get me pointed in the right direction?
      Thanks so much for the help!
    • PierreFF
      By PierreFF+
      Hello Everyone, 
      I think this one is for the pagelines team. 
      I have some trouble with the Adventure section plugin https://www.pagelines.com/product/pl-section-adventure/ that doesn't seem to load in any of the three websites I run using pagelines. 
      I do the setup via the extend platform as usual. It tells me that the plugin is installed and activated but unfortunately it doesn't appear on the page editor.
      I have just tried it consecutively with three websites I own with the same result.
      My intention was to use it with this website: http://launchpadweekend.foundersofthefuture.co/ (free version)
      And I also tried with this website http://foundersofthefuture.co/ (pro license) and this one http://ffactor.me/ (free version). And I have the same problem with each. 
      I would love to see how I could solve this issue. 
      Thanks a lot. 
      Pierre
       
    • chamois_blanc
      By chamois_blanc+
      What is the right/best way to make a one-page website with PL5? The framework seems to hardcode section IDs without any possibility of changing them. Scrolling to a page section requires the link to use the section ID, ie <a href="#<section_ID>">...</a>. I don't see myself hardcoding weird section IDs in there as this will show up in the address bar.
      Please advise, thanks!
×