Jump to content
Alex

Repeater and Colorpicker: different colour for each repeater

Recommended Posts

I have a repeater which will contain an image and text, I want to apply a custom colour to an element in each repeater using the color picker. I'm not sure the best way to specify an individual css name for each repeater, can it be automated in some way?

 In my code below i'm using the colour picker and some inline css, but in this example each repeater item would have the same colour.

I want to make each one different.

<?php
		foreach($page->repeater as $p) {
		echo "<style>.repeatColor {background-color: #{$p->colour_picker};}</style>";
		echo "<div class='repeatColor'></div>";	
		}  
		?>

Share this post


Link to post
Share on other sites

Hi alex,

<style> tags are normally inside the <head>, as far as I know.

You can set the chosen color inline:

foreach($page->repeater as $p) {
  echo "<div style='background-color: #{$p->colour_picker};'></div>";	
} 
  • Like 2

Share this post


Link to post
Share on other sites

of course... not sure what i was thinking there!

I was going to work out how to move the <style> into a separate style sheet but its not necessary.

cheers

Share this post


Link to post
Share on other sites

In a related topic, but not quite the same thing. I installed the color picker used it in in a tab and it is not working. When I checked the source I get a 404 not found on the color picker CSS file. it is installed in /site/modules/module_name/. I actually installed it with the module manager.  Installed without a problem and the files are seem to be there.

I think the issue is the default .htaccess file from process wire is not letting the file be served up because of a mod rewrite. The CSS 404 has a my site header so I know processwire is in control of that url when it should not be...right?

<link type='text/css' href='/site/modules/FieldtypeColorPicker/colorpicker/css/colorpicker.css?v=107' rel='stylesheet' />

...

<script type='text/javascript' src='/site/modules/FieldtypeColorPicker/InputfieldColorPicker.js?v=107'></script>

Both throw 404 errors when I try to visit URL in browser, even though files do exist (as far as I can tell)

I read the htaccess file several times, but i'm not entirely sure where I put the exception so proccess wire does not try  take control of modules or color picker url.  

Proccesseswire 2.2.9 

Any tips would be greatly appreciated. 

if it's better to post these things as a new topic, rather then finding the most similarly related topic let me know.

Share this post


Link to post
Share on other sites

The htaccess surely isn't the problem here. How is it only when you use it in a tab or also when used in normal content area? Strange, And do you have site installed in a subfolder from the root?

Share this post


Link to post
Share on other sites

Ok, I figured it out. it was a permission issue. I set my /site/modules folder to chmod 766 to work with the module manager. So I changed it to chmod 777 and it works great. Is an ok setting to have that as a setting for the site/modules folder working with "module manager"?

Share this post


Link to post
Share on other sites

OK, so I got the color picker to work perfectly as it should, but it broke all my tabs, weather it was in the first tab or not, it also broke some of my page selects. must be an conflict in the JS some where.  When I uninstall the field all my pages look normal again. I'll give the color picker another try when I upgrade to 2.3 maybe there is an issue there, or maybe my theme. Oh well, hex typing for now. 

Share this post


Link to post
Share on other sites
Ok, I figured it out. it was a permission issue. I set my /site/modules folder to chmod 766 to work with the module manager. So I changed it to chmod 777 and it works great. Is an ok setting to have that as a setting for the site/modules folder working with "module manager"? 

Whether it's okay or not largely depends on your hosting situation and whether it's completely isolated from other accounts or not. This would be a question for your web host. Chances are your web host hasn't heard of ProcessWire, so a quick way to get an answer to the question is to ask them what permissions they recommend for your /wp-content/uploads/ directory. :) 

OK, so I got the color picker to work perfectly as it should, but it broke all my tabs, weather it was in the first tab or not, it also broke some of my page selects. must be an conflict in the JS some where.  When I uninstall the field all my pages look normal again. I'll give the color picker another try when I upgrade to 2.3 maybe there is an issue there, or maybe my theme. Oh well, hex typing for now. 

While I don't know what the issue might be there, it does sound like you need to check your Javascript console. In Chrome this is in View > Developer > Javascript console. Look for error messages, as it sounds like there probably will be one there waiting for you. Paste it here. Also, another possibility is that the color picker module requires 2.3 or newer (?). I know that a few of my modules require at least 2.3.

Share this post


Link to post
Share on other sites

I did two things and one of them fixed the issue with the color picker:

Upgraded to 2.3 and went back to the default theme. 

Thanks Ryan for the tips on directory permissions and how to talk to my web host about it. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By David Karich
      ProcessWire InputfieldRepeaterMatrixDuplicate
      Thanks to the great ProModule "RepeaterMatrix" I have the possibility to create complex repeater items. With it I have created a quite powerful page builder. Many different content modules, with many more possible design options. The RepeaterMatrix module supports the cloning of items, but only within the same page. Now I often have the case that very design-intensive pages and items are created. If you want to use a content module on a different page (e.g. in the same design), you have to rebuild each item manually every time.
      This module extends the commercial ProModule "RepeaterMatrix" by the function to duplicate repeater items from one page to another page. The condition is that the target field is the same matrix field from which the item is duplicated. This module is currently understood as proof of concept. There are a few limitations that need to be considered. The intention of the module is that this functionality is integrated into the core of RepeaterMatrix and does not require an extra module.
      Check out the screencast
      What the module can do
      Duplicate a repeater item from one page to another No matter how complex the item is Full support for file and image fields Multilingual support Support of Min and Max settings Live synchronization of clipboard between multiple browser tabs. Copy an item and simply switch the browser tab to the target page and you will immediately see the past button Support of multiple RepeaterMatrix fields on one page Configurable which roles and fields are excluded Duplicated items are automatically pasted to the end of the target field and set to hidden status so that changes are not directly published Automatic clipboard update when other items are picked Automatically removes old clipboard data if it is not pasted within 6 hours Delete clipboard itself by clicking the selected item again Benefit: unbelievably fast workflow and content replication What the module can't do
      Before an item can be duplicated in its current version, the source page must be saved. This means that if you make changes to an item and copy this, the old saved state will be duplicated Dynamic loading is currently not possible. Means no AJAX. When pasting, the target page is saved completely No support for nested repeater items. Currently only first level items can be duplicated. Means a repeater field in a repeater field cannot be duplicated. Workaround: simply duplicate the parent item Dynamic reloading and adding of repeater items cannot be registered. Several interfaces and events from the core are missing. The initialization occurs only once after the page load event Changelog
      1.0.4
      Bug fix: Various bug fixes and improvements in live synchronization Bug fix: Items are no longer inserted when the normal save button is clicked. Only when the past button is explicitly clicked Feature: Support of multiple repeater fields in one page Feature: Support of repeater Min/Max settings Feature: Configurable roles and fields Enhancement: Improved clipboard management Enhancement: Documentation improvement Enhancement: Corrected few typos #1 1.0.3
      Feature: Live synchronization Enhancement: Load the module only in the backend Enhancement: Documentation improvement 1.0.2
      Bug fix: Various bug fixes and improvements in JS functions Enhancement: Documentation improvement Enhancement: Corrected few typos 1.0.1
      Bug fix: Various bug fixes and improvements in the duplication process 1.0.0
      Initial release Support this module
      If this module is useful for you, I am very thankful for your small donation: Donate 5,- Euro (via PayPal – or an amount of your choice. Thank you!)
      Download this module
      > Github: https://github.com/FlipZoomMedia/InputfieldRepeaterMatrixDuplicate
      > PW module directory: https://modules.processwire.com/modules/inputfield-repeater-matrix-duplicate/
    • By gerritvanaaken
      Wouldn’t it be cool to have whole repeater items (or even repeater matrix items) language-specific. Some of my clients do have pages that are 90% identical in German and English, but there are some sections that should not appear in one or another language. I attached a concept screenshot.
      Would something like this be possible with some simple backend hooks and "hidden checkbox fields"? Or is it way more complicated?
       

    • By brdje
      Greetings,
       
      I've ran into an issue with adding a repeater field to a template.
      The page editor in the backend shows the fields and the data attached to the fields, including the repeater.
       
       
      However, when viewing the template in the front-end, there is no sign of a repeater field in the data set.
      ["data"]=> array(3) { ["name1189"]=> string(11) "partenaires" ["status1189"]=> string(1) "1" ["title"]=> string(8) "Partners" } } Do u have any idea what could be causing this issue?
      I've tried recreating the field and there is no caching active, but still can't get the repeater in the data set.
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Screenshot:

       
×
×
  • Create New...