1. Prerequisites.
Install Drupal modules Views, EVA: Entity Views Attachment, and Views Galleriffic. Login into your site as webmaster, and in the administration toolbar: Modules, group of modules called “Views”, enable “Eva”, “Views”, “Views Galleriffic” and “Views UI”.
2. Add two new Image Style Presets:
a. Name 1 'galleriffic_slide'.
- Choose Configuration→ Media and click Image styles to display the Image Styles screen.
- Click Add style and type galleriffic_slide in the Style name box as shown in the following image.
- Click the Create new style button and and Drupal displays the Edit Style galleriffic_slide window.
b. Add 'Scale and Crop' efffect.
- In the EFFECT Box, choose Scale and Crop and click the Add button.
c. Add desired 'Width' and 'Height'. 500 x 400 is recommended.
- In the Add Scale and Crop box displayed by Drupal shown below, enter the desired Width and Height. Recommended values are 500 x 400. Then click the Add Effect button. Then click Update Style and close the window.
d. Name a second Image Style preset 'galleriffic_thumb'.
- Follow the steps described in 2a, 2b and 2c to add an Image Style galleriffic_thumb, add Scale and Crop effect and add the desired width and Height settings. The recommented settings for Width and Height are 75x75.
3. Add Gallery content type
In the administration toolbar, go to Structure → Content types → Add Content Type.
- Type Gallery in the name textbox and click the Save and Add Fields button and Drupal displays the MANAGE FIELDS window for the Gallery content.
a. Add 'Gallery Image' field
(If you are not in the MANAGE FIELDS window, in the administration toolbar, go to Structure → Content types and click manage fields in the Gallery row.)
- Type “Image” in the “Add new field” text box. In the same row, “MACHINE NAME” column, click on “edit”, type gallery_image and choose “Image” in the combobox in the “FIELD TYPE” column as shown.
- Click the “Save” button to save the image field.
- Click “Save field settings” button in the “FIELDS SETTINGS” window and Drupal now displays a “Gallery Settings” window.
- Select 'Enable Alt field', 'Enable Title field' and 'Unlimited' under "Number of values" as shown.
- Click the Save Settings button.
b. Select 'Hidden' for the gallery image in the "Manage display" setting.
- Click the MANAGE DISPLAY tab. The FORMAT column for the image row contains Image. Click Image in the FORMAT column and choose Hidden. Your screen should look similar to the following image.
- Click the Save button to save settings.
This will keep the images from showing up on the node. We are going to use Views to show the images on the node. You have defined all settings. Now, its time to test the stuff. Go ahead a create a Gallery node with images.
4. Create a Gallery node with a number of images
In the administration toolbar, go to Content → Add content → Gallery, fill the field “Title” and, below the body, use the buttons “Browse” and “Upload” to choose pictures from your computer and upload them, one by one, to the web server.
At the end, don't forget to click on the “Save button”, located at the bottom of the page.
5. Create a new View name 'Galleriffic Node Gallery'.
In the administration toolbar: Structure → Views → Add New View.
- Uncheck Create a Page. Do not select block or page. You can select content by gallery. Note that it says "Gallery" above instead of "Galleriffic Node Gallery". You can use either. Click Continue and Edit.
a. Remove "Content: Title" field from "Fields".
On the “Gallery (Content)” page displayed by Drupal, click “Content: Title” in the “FIELDS” section and click the “Remove” button.
b. Add "title" field from your gallery node
This might be a little confusing because we are going to override the field output.
- Click the Add button in the FIELDS section and you see an image similar to the following.
- Select 'Content: Image' . (Fields names on your screen may be different if you used a different field name earlier.) You may type Image in the search box to limit the number of fields displayed on the screen. Make sure that the field you choose is from the gallery (e.g. node:gallery and not article, e.g. node:article ).
- Click Add and Configure fields button.
Drupal displays Configure field: Content: image screen.
- Enter 'Title' in the Label box, as shown in the following image.
- In the same screen, click REWRITE RESULTS to expand it, if required. Then check Rewrite the output of this field and enter [field_gallery_image-title] in the "Text" box, as shown in the following image.
- Click MULTIPLE FIELD SETTINGS (located above REWRITE RESULTS section) and uncheck Display all values in the same row, as shown in the following image. Notice that this is important.
- Click the Apply button.
Drupal returns you back to the View you are creating. It displays the Content: Image (Title) in the FIELDS section. We need to add three more fields.
c. Add "description" field:
- Click the Add button in the FIELDS section..
- Select 'Content: Image' as in the previous step (5b).
- Click Add and Configure fields button.
- Enter 'Description' in the Label textbox.
- Enter [field_gallery_image_1-alt] instead of '[field_gallery_image-title]' under "Rewrite results" section.
- Click MULTIPLE FIELD SETTINGS (located above REWRITE RESULTS section) and uncheck Display all values in the same row, as shown in the following image. Notice that this is important.
Note: If you don't see the MULTIPLE FIELD SETTINGS section on the Configure field screen, you might have selected node:article field instead of node:gallery. In that case, delete the field and try again.
- Click the Apply button.
d. Add slide field:
- Select 'Content: Image' in the field list, same as above.
- Enter 'Slide' in label.
- Select galleriffic_slide under "Image style" as shown in the following image.
- Click the Apply button.
e. Add thumbnail field:
- Repeat steps above substituting 'Thumbnail' for 'Slide'.
f. Add Format Settings:
- Click the first item (Unformatted List) in the FORMAT section as shown in the following image.
- On the Master: How should this view be styled dialog box displayed by Drupal, select 'Galleriffic Gallery' and click the Apply button.
Drupal displays the Master Style options as shown. These are used to define settings for the gallery. Defaults should be fine to start out with. You may changes these later.
- Click the Apply button to close the Master Style Options dialog box.
g. Add "Show" settings:
- Click Fields against Show in the FORMAT section to display the "Master: How should each row in this view be styled" dialog box. Click 'Galleriffic Fields'.
- Click the Apply button.
- Select the correct field for each type of row as shown.
6. Add View to Gallery node.
- Click ' Add' and choose 'Entity content'.
If you do not have the EVA module installed, you will not see this option.
- In the ENTITY CONTENT SETTINGS in the middle of the screen, click “None” against Entity type and select 'Node' under "Entity type".
- Select 'Gallery' under "Bundles" in ENTITY CONTENT SETTINGS.
- Add a "Contextual Filter" (under "Advanced") and select 'Content: Nid'.
- Select 'Provide default value' and 'Content ID from URL' in the argument.
- Click Save to save the view.
Comments
Doesn't work for me
Good afternoon.
First of all thank you for this explanation.
I'm a new drupal user coming from Joomla. I follow step by step this guide, but unfortunatelly I can't create a gallery.
My problem is that I can see the preview of the gallery correctly under
, but I can't see the gallery in my website. The gallery content is empty.
Where may I be wrong?
Thank you very much!
Daniele
It works when ...
I had a similar problem at first.
I had to go back into the manage display option on the content type and change gallery to visible in order to make it appear on the node..
Thanks very much darkside1it ... this is exactly what I was looking for ... now to start messing with the image styles and theming it
As a views newbie I also found it a great tutorial for getting my head around views.
m :D
Help
First I would like to thank you for this step by step instructinos. It is great help for me as a newbie in Drupal. I have a problem. I created a gallery and I have thumbnails on the left side and selected picture on the right side, but under that image a have a white box with next content:
[field_gallery_image_title]
[field_gallery_image_1-alt]
I'm trying to figure it out why is this happening but I can't. So i would be more then gratefull if you can point me where to look for solution. I use Drupal 7.
Thank you
same proble happening to me..any solutions for this issue?
please help me i'm new to drupal 7.
PLEASE DO NOT LEAVE A COMMENT HERE
If you are having trouble PLEASE DO NOT LEAVE A COMMENT HERE. Please open an issue on the module page: http://drupal.org/project/issues/views_galleriffic
I am happy to help but don't know if you leave a comment on this page. Please speak up if you have questions or need assistance.
Aaron Couch
drupal: DKAN
work: http://govdelivery.com
me: http://aaroncouch.info
"Entity Content" is now "EVA Field"
Hi There,
Firstly, thanks for the great and detailed tutorial.
It is worth noting that in the meantime, EVA's option used in step #6 was renamed, and what you will see in the dropdown menu is not "Entity Content" but "EVA - Field". Took me a while to figure out that the two were actually the same thing.
If you're interested in why they would rename a menu item, I've found you this:
http://drupal.org/node/1461518
Thanks again!
Zsolt
This is the very best "how to" page on drupal
Every Drupal module should have step-by-step guidance like this.
There needs to be one more step added: Create another view called "Galleries" and make its content type "Gallery", and create a page with a drop-down menu/link to access the individual galleries. Then this page can be linked to a menu so that the user can access all of the galleries.
However, my gallery of 10 pictures displays the ten picture images followed by the image gallery created in this page. So where am I going astray? Also, the large images in the Gallerific gallery look as if they were scaled up from the thumbnails rather than down from the original.
Any suggestions?
Thanks,
Jim
I know this was posted a
I know this was posted a while ago, but this might help someone. Your images look like they were scaled up because they probably are. The 'galleriffic_slide' image style should be 'scaled' only, not 'scaled and cropped' as indicated above in step 2b. Scaling will maintain the correct aspect ratio and scale the image down enough to fit within both the width and height that you set. Scaling and cropping will only scale the image down until you reach one of the dimensions, and then crop the part that doesn't fit.
In my case, smaller images looked like they were being scaled up to fill the full width and height set before the cropping took place. Changing the image style to 'Scale' fixed it so the images display properly now.
Hope this helps.
TY
Thank you very much, it all works like a charm for me. Version: 7.21 Theme: Business
Thanks, everything works as
Thanks, everything works as expected!
Outstanding documentation btw!
I've got it working but I"m getting this error on my front page
These instruction were so easy to follow. However my Node pages are loading fine but I' getting this error on my front page. What have I done wrong?
That's weird it's just
That's weird it's just disappeared all of a sudden...
I‘v got the same problem! I
I‘v got the same problem! I wonder if it is because I used the different label of the fields
Galleriffic Install Instructions
This is the right way to provide instructions on how to do something.
Thank you so much!
Good guide
This is a perfect guide to get this thing installed. And it looks fantastic!
A useful change to the guide
Hello!
Perhaps a useful addition to this guide would be to have the person look at "Replacement Patterns" for rewriting the title/alt fields.
Because my title field was actually "[field_gallerific_image_3-title] == Raw title" for the title
Does anyone know how this convention is built? why _3?
Best,
cherner
Warning: Creating default
Warning: Creating default object from empty value in template_preprocess_views_galleriffic_view_gallerifficrows() (line 115 of \sites\all\modules\views_galleriffic\views_galleriffic.module).
on latest drupal 7.41 | views 7.x-3.13 | Eva 7.x-1.2 | Views Galleriffic 7.x-1.1
also when:
e. Add thumbnail field:
You should also "Click MULTIPLE FIELD SETTINGS and uncheck Display all values in the same row, as shown in the following image. Notice that this is important."
And there isn't any view preview - if you want to see gallery you need to enter the nede it self.
Drupal beginer