Image Input type as a setting / Field Type of a Chunk

ContentBlocks
#1

So maybe there is a better way to do this? but currently I created a new “Field” in content blocks called “Billboard”

my billboard essentially consists of a Large Div with a title subtitle some social media icons and a background image.

I used a chunk to do this and all of my code is in the chunk. I used some “settings” to go with the chunk like

[[+billboard_title]]
[[+billboard_subtitle]]

then i made 5 or 6 social media icons and linked them up with the Site Config addon you created. (youtube, fb, twitter, etc).

and i have some input filters that say ifnotempty and i display the social for each one.

i also made a social media setting in the Contentblocks Field settings and made it a dropdown for yes or no.

where I get stuck is trying to do a background image. I want them to be able to invoke the MoDX Image selector and pick an image at which I am going to use phpthumb and just size it up correctly.

something like

<div class="mybg"></div>

and then a inline style
<style> .mybg { background: url('[[+billboard_image:phpthumb..etc..]]');} </style>

but i don’t see any way to get a image input as a option for settings in a chunk.

Do you have any ideas what I should do to accomplish this type of component?

Thanks!

#2

Image settings is something we’re working on. One way to get around it currently is to use an image input as your base field (rather than a chunk), and adding the settings to that. That will give you the upload/choose functionality you need.

#3

Hey Mark,

thanks for the reply. That does sound like a possibility, but i want to make a component that basically can be reused over and over for each page, like a billboard, etc.

One thing I went and did was created a custom input using your tutorial on the site, I made a class, javascript, template, etc. but where I am stuck is getting the fields into the template.

for example.

    public function getFieldProperties()
{
    return array(
        array(
            'key' => 'billboard_title',
            'fieldLabel' => $this->modx->lexicon('myawesomeinput.billboard_title'),
            'xtype' => 'textfield',
            'default' => '',
            'description' => $this->modx->lexicon('myawesomeinput.billboard_title.description')
        ),
        array(
            'key' => 'billboard_subtitle',
            'fieldLabel' => $this->modx->lexicon('myawesomeinput.billboard_subtitle'),
            'xtype' => 'textfield',
            'default' => '',
            'description' => $this->modx->lexicon('myawesomeinput.billboard_subtitle.description')
        ),
    );
}

now that I have those 2 pieces, can i use those in my template? like

<div>[[+billboard_title]]></div>

thats where I am stuck. I see the javascript, am i suppose to pass it in the JS? I also see this:

<div class="contentblocks-field contentblocks-field-text">
<div class="contentblocks-field-actions"></div>
<label for="{%=o.generated_id%}_textfield">{%=o.name%}</label>
<div class="contentblocks-field-text contentblocks-field-title-input">
	<input type="text" id="{%=o.generated_id%}_textfield" value="{%=o.value%}">
</div>
<label for="{%=o.generated_id%}_textfield">{%=o.name%}</label>
<div class="contentblocks-field-text contentblocks-field-subtitle-input">
	<input type="text" id="{%=o.generated_id%}_textfield" value="{%=o.value%}">
</div>

and the JS: from your tutorial as well.

(function ($, ContentBlocks) {
	ContentBlocks.fieldTypes.my_awesome_input = function(dom, data) {
		var input = {
			// Some optional variables can be defined here
		};

		// Do something when the input is being loaded
		input.init = function() {
			console.log('init', dom, data);
		};

		// Get the data from this input, it has to be a simple object.
		input.getData = function() {
			return {
				value: dom.find('input').val()
			}
		};

		// Always return the input variable.
		return input;
	}
})(vcJquery, ContentBlocks);

how can I get the two inputs into the template? I dont think i need the getFieldProperties correct? I just need those 2 inputs from contentblocks-field-subtitle-input??

any help would be appreciated, i feel like i am getting closer :wink:

#4

The getFieldProperties is used in the ContentBlocks component, on the Properties tab if you edit a field. I think what you need is to fix the duplicate IDs in the template (id="{%=o.generated_id%}_textfield"), and updating the input.init and input.getData methods in the javascript to set/get the data there.

#5

ok great! I figured it out. I actually got the inputs working and then I just manually copied all the code and template for the image and put that in there as well and now I have the image browser and both inputs. I guess the only thing left to do is turn this into a installable package and then I can reuse this by installing it for other sites.

thanks again

#6

ok one more question.

how do i programmatically set the availability of the input?

Specifically the “Times per page =1” and “Times per layout =1”

#7

Those values are set on the field record (on the Availability tab), not the input type itself and are also enforced by ContentBlocks automatically.

Glad you’re getting it all figured out :slight_smile:

#8

but what i am asking is, can i set that up at a program level so that if someone installs this compoenent its prefilled? that way they don’t have to manually go in and set it up, is that possible?

#9

I guess you could automatically create a cbField record automatically in a package? Not sure if I would recommend doing that though, at the very least that should be optional.