Introduction:
I needed to place an image of a flag on a page based on a U.S. State. Sure, I could have done this by simply adding an image block with some design and been done with it. But then I needed to do it 49 more times. And then over and over again for all the sub-pages that will be placed under those pages in the sitemap.
Turning into quite the task it seems? No problem, Magic Data will work with Page Attributes to give us just what we are looking for!
Getting Started:
First, I gathered the images I wanted to use and made sure they were all the same width and height for consistency at full size. I made sure they were all the same format (ie. .jpg), and made sure the filenames were all based on the State names in lower case and had any spaces removed (i.e. "newyork.jpg". The lower case, no space filename will be integrated later, so this is important to do!).
I chose to house all of my images outside of concrete5 to avoid them being deleted or messed with in the file manager, and to allow me to easily implement the direct path to them in following steps. For example you could FTP them to your site at:
mysite.com/customimagefolder/
Page Attributes:
Now let’s visit Dashboard > Pages & Themes - Attributes
For good measure I clicked on Manage Sets and created a Set with a handle of “stateflags” and a name of “State Flags”. Keep in mind the handle can not contain capital letters or spaces.
Now Let’s return to Dashboard > Pages & Themes - Attributes
Scroll down to “add attribute”. Choose a “select” attribute and click add. In my case, I gave it a handle of “state” and a name of “State”. Place it in the State Flags set. In the select attribute options I added, of course, the names of the 50 United States.
NOTE:
These attribute options (the state names) MUST be named in lower case with NO spaces to match exactly with their corresponding image files that were uploaded previously with all lower case and no spaces!!
Now every time you create a new page you simply apply the page attribute and select the option (state) that applies to the page. Any previously created pages you want to apply this to simply edit the pages properties to include the attribute and option that applies!!
Create a Stack for implementation:
Go to Dashboard > Stacks and create a stack called “State Flags” for instance. Go place the stack on all of your “attributed” pages in the position where you want your images to render
Apply some Magic Data:
Now return to Dashboard > Stacks, and lets add an html block inside the stack….
We know our images are housed at: http://mysite.com/customimagefolder
And through the joys of using Magic Data we know that [%CID CONTEXT Page ATTRIBUTE state%] will return the handle of the “page” attribute option selected in the current pages' properties.
So….. Let’s put that together with some html and get this thing working!!
Add the following to your html block, within your stack…
<img src=”http://mysite.com/customimagefolder/[%CID CONTEXT Page ATTRIBUTE state%].jpg” width=”150”></a>
Apply the Magic Data custom template to the html block, click approve changes and enjoy your state flags!!
All in all, this was a bit of a process to accomplish, but was well worth it. Get it worked into page type defaults (for a custom page type if you'd like!!) and this powerful integration will run smoothly, while only requiring you to select the page attribute option when creating a new page!!
You can view the project to see the integration in action here:
Note: You will land on the main ID Database page. Clicking on any of the States, will bring you to the state page, with the associated State Flag in the sidebar!!
http://idinformer.com/id-database
Also See:
Integrate Magic Data with Avatar add-on and Facebook Social Plugins