Last updated March 25, 2011. Created by sevi on April 26, 2009.
Edited by linclark, markpenny, true-pal. Log in to edit this page.
ImageWall makes it possible to place and scale nodes and their fields. It is implemented as a Views style plugin, so all the brilliant qualities of Views are inherited.
Depedencies
- Views 6.x-2.5 or higher
- Jquery UI 6.x-1.2
- JQuery Update 6.x-1.1
Installation
After activation of ImageWall module a new views style plugin will appear in the list.
It's essential that you use view type: „Node revisions“ because it must be possible to load non-active node-revisions.
The following steps describe the installation in detail:
- Creation of a new Views:
View type: „Node revision“;
View name: any. - Choose fields:
If you don't want a field to show up you can use „Exclude from Display“ to hide it. You probably want to use this option if you need a specific field for configuration issues only (see next steps). - Change the style plugin to Imagewall
- Access Style options:
You must set:- „Title of Container“: Only visible in admin-mode at the drag-handle.
- „Group containers by this field (CSS)“: This field will be used for the CSS Class name to make specific templating possible.
- Set some arguments (optional):
Each pair of view-id,arguments will be handles as a unique structure. - Set some filters (optional)
- Create a page display:
Choose the path name and a Menu Items (optional) - Save the view
(Draggable objects)
Prepare nodes for specific templating
All Taxonomy terms which are assigned to a specific node will be part of the CSS Class name.
How to use ImageWall
Note: If the view doesn't return any nodes the page output will be empty.
Elements
- Box:
You can find the Box on the left top of the page. This is the place where nodes appear by default before you drag them on the canvas. The background color changes if an element can be dropped here. Otherwise the object will revert to its previous position. - Canvas:
You can move nodes on the canvas via drag'n drop. The background color changes if an element can be dropped here. Otherwise the object will revert to its previous position. - Preview link:
Click preview to hide all drag handles and resize handles. This is actually how a locked structure looks like. - Revisions:
All Revisions of the current pair of view-id,arguments. You can choose a revision from this box. After hitting submit button a new revision will appear. - Submit Button:
After hitting submit the current structure will be saved. - Container:
Actually a container is a node. Containers can be dragged/dropped, resized and selected. If you move a container all objects (actually fields) will follow.
Open a selecting window by holding the left mouse button pressed. All containers which are included in this window will appear on the left side, straight under the Revisions box. Here you can choose another revision of the selected node (if available).
Move a container back to the box to make it disappear from the canvas. - Object:
Objects are actually fields of a node (container. Its position will be saved relatively to the container's position. Whenever you resize an object containing images will be resized too.
Theming of Drag-Handles, Containers and Objects
CSS class name (hierarchy) for drag handle in the Box:
.imagewall-box-container-CONTENT_TYPE .imagewall-container-drag-handle
Each "group" of containers and each "group" of objects can be theme differently. Such a "group" is described by the option „Group containers by this field (CSS)“ (see installation) and the taxonomy terms which are assigned to the nodes.
Positions and dimension defined in the templates can be changed in admin mode.
CSS Class name for containers:
.imagewall-canvas-container-CONTENT_TYPE
CSS Class name for objects:
.imagewall-canvas-object-FIELD_NAME
CSS Class name for taxonomy terms:
.imagewall-term-TERM_ID
CSS class names occur in combination with others. This makes it possible to theme in different layers of abstraction. The amount of available CSS class names depends on the amount of taxonomy terms assigned to the nodes. Look at the following example to see how to theme a container:
.imagewall-canvas-container-products.imagewall-term-65 {
width: 169px;
height: 209px;
}
CSS Class names of obects don't depend on the node-type of it's container.
Easy theming..
Call your view with the template variable. Example:
http://mysite.com/?q=myview/54&template
Click „Generate Template“ to generate a template with all available positions automatically. All available CSS class names will be used for this template. If class names are not unique for each element the template will not be unique too.
Only active elements (on the canvas) will be involved.
The Files
imagewall.css
and
imagewall-VIEW_ARG.css
will be included automatically out of the current theme folder.
Administration Of Structures And Revisions
With each ImageWall structure revision a new node revision will be created. The pair will be saved together with the representing node. If you delete a revision of this representing node the connected ImageWall structure revision will be deleted too.
Note: Creating a new node revision or reverting an old revision of such a node won't affect the ImageWall structure.
Known Bugs
- When you move a container on the canvas it will jump.
Reason: css(position: relative) will be changed to css(position: absolute). The container will be detached from the box and attached to the canvas. Because of that the position that JQueryUI returns changes completely.
Current Work-Around: Using the mouse coordinates and special parameters that will be added to the new position. Changing the design makes it necessary to change these parameters. - Deleting the full node doesn't affect the ImageWall structure. Reason: hook_nodeapi will be called AFTER removing all revisions from database. The node revisions cannot be accessed when a node is being deleted. There already exists an issue: #287063: node_delete "leaks memory" due to deleted nodes cached
- Linux, Firefox: When you scroll down the page „droppable“ of JQueryUI will not recognize that the canvas has to move down too.