{"id":16216,"date":"2012-04-05T08:29:34","date_gmt":"2012-04-05T12:29:34","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=16216"},"modified":"2017-02-22T05:16:17","modified_gmt":"2017-02-22T10:16:17","slug":"drupal-how-to-work-with-gallery","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/drupal-how-to-work-with-gallery.html","title":{"rendered":"Drupal. How to work with Gallery"},"content":{"rendered":"

\r\n

This tutorial is going to show you how to work with a portfolio page on your Drupal template. If your template comes with a custom portfolio page installed with the sample data profile (How to install Drupal sample data<\/a>), you will get three tabs in the main menu with 3 different gallery layouts.<\/p>\r\n

Edit gallery<\/h3>\r\n

In order to make changes to the existing gallery, <\/p>\r\n

1) Login into your Drupal admin panel; <\/p>\r\n

2) Go to the top menu "Content<\/strong>" <\/p>\r\n

\"\"<\/a><\/p>\r\n

3) Under "Show Only items Where<\/strong>" select "Portfolio<\/strong>" and click "Filter<\/strong>" <\/p>\r\n

\"\"<\/a><\/p>\r\n

4) This will get you to the list of all portfolio projects that come with the sample data of your template. You can change the existing images and the image descriptions to yours. Click on "Edit<\/strong>" under the ‘operations’<\/strong> column to edit each of them. <\/p>\r\n

5) On the "Edit portfolio..<\/strong>" page you can change the name of the portfolio project (required), its description in the "body’<\/strong> field and delete the old original image\/upload your image.<\/p>\r\n

\"\"<\/a><\/p>\r\n

6) In the next field called "Category<\/strong>" you can change the name of the existing category or add a new category name. You can find the list of the available categories by going to the top menu "Structure<\/strong>" -> "Taxonomy<\/strong>" -> Category<\/strong> -> list items.<\/p>\r\n

\"\"<\/a><\/p>\r\n

7) When you are done with your changes, click on "Save<\/strong>" at the bottom of the page; <\/p>\r\n

8) Preview your changes from the front end.<\/p>\r\n

Add Protfolio Project<\/h3>\r\n

In order to add a new portfolio project <\/p>\r\n

1) In your Drupal administration panel go to Content -> Add Content;<\/strong><\/p>\r\n

2) Under the "Add Content<\/strong>" select "Portfolio<\/strong>" <\/p>\r\n

\"\"<\/a><\/p>\r\n

3) On the "Create Gallery\u2026<\/strong>" page add a title (required), the image description, upload your new image and specify what category you want to add the image to; <\/p>\r\n

\"\"<\/a><\/p>\r\n

4) When you are done, click the "Save<\/strong>" button at the bottom of the page; <\/p>\r\n

5) Go to the front end of your site to preview the changes. Some templates may have some text on top of all your Portfolio pages.<\/p>\r\n

Edit portfolio project<\/h3>\r\n

In order to edit it, <\/p>\r\n

1) Go to Structure<\/strong> -> Blocks<\/strong> -> Our gallery block<\/strong> (the name depends on your template, so it may be different) and click "configure<\/strong>"; <\/p>\r\n

2) On the next page you can change the block, the title, the block description and the block content; <\/p>\r\n

3) If you scroll down, you can edit the list of gallery pages to display the block on under the Visibility Settings -> Pages<\/strong>; <\/p>\r\n

4) When you are done with your changes, click the "Save Block<\/strong>" button at the bottom.<\/p>\r\n

Add new portfolio page and edit view<\/h3>\r\n

In order to modify the displays of your Portfolio view and add a new Portfolio page <\/p>\r\n

1) In your Drupal admin go to the top menu "Structure<\/strong>" -> "Views<\/strong>" -> "Portfolio<\/strong>" <\/p>\r\n

\"\"<\/a><\/p>\r\n

2) Under the "Operations<\/strong>" column you can open, edit ( disable, delete, clone or export) the portfolio content view. Select "edit<\/strong>" <\/p>\r\n

\"\"<\/a><\/p>\r\n

3) On the next page you can modify the displays of your Portfolio view or add new displays. By clicking on different "Page<\/strong>" tabs, you will notice that the only differences between them are the Path and the Menu. To delete any of them, it is enough to delete the menu each one is pointed to <\/p>\r\n

\"\"<\/a><\/p>\r\n

4) To add a new gallery page (view), under "Displays<\/strong>" click on "Add<\/strong>" -> "Page<\/strong>"; <\/p>\r\n

5) Under the "Fields" click on "add<\/strong>" and select " Content: Upload Image<\/strong>" . Click "Apply<\/strong>" to add the selected; <\/p>\r\n

6) In the Filter criteria click "Add<\/strong>" and select Content: Published (Yes) and Content: Type (= Portfolio); <\/p>\r\n

7) Under the "page Settings’ add a new path. The path can be copied from the url of the page (E.g. if your URL is your_site.com\/?q=portfolio-1-col , just copy portfolio-1-col); <\/p>\r\n

\"\"<\/a><\/p>\r\n

8) For a portfolio page the path also means a style (layout) of the page. To check the paths available for the portfolio, go to \\sites\\default\\files\\styles\\ folder on your FTP. Copy the name of one of the folders \/portfolio, \/portfolio-1-col, \/portfolio-2-col or \/portfolio-3-col. Click on "\/" (if no path were added), paste the name and click "Apply<\/strong>"; <\/p>\r\n

9) Under the "Page Settings" you can also add a new menu tab or one of the existing menu tabs to point the new portfolio page to. Click on "No Menu" next to the "Menu" and in the next window select "Normal menu entry" and add a new title. Click on "Apply"; <\/p>\r\n

10) Under the "Pager" you can specify the number of images to display per page; <\/p>\r\n

11)When you are done click on "Save<\/strong>"; <\/p>\r\n

12) To add a new menu tab to point the new gallery layout page to, go to the top menu "Structure<\/strong>" -> "Menus<\/strong>" -> Main Menu<\/strong> -> add link. Add a new title (or the same as the title of your portfolio display page) and the path (the same as in your portfolio display page (see point 7) and click on "Save" at the bottom. <\/p>\r\n

13) If you need to show your portfolio page as a drop-down, drag your new menu to re-order it. To change the galley image sizes on your Portfolio pages, go to the top menu "Configuration<\/strong>" -> ‘Media<\/strong>" -> "Image styles<\/strong>". <\/p>\r\n

On the same page you can also change\/select an effect with which your image is displayed on the page:<\/p>\r\n

\"\"<\/a><\/p>\r\n

For more information on how to work on your Portfolio page in Drupal, please see the demo below <\/p>\r\n

 <\/p>\r\n

Feel free to check the detailed video tutorial below:<\/p>\r\n

Drupal. How to work with Gallery<\/a><\/p>\r\n<\/p>\r\n

<\/p>","protected":false},"excerpt":{"rendered":"

This tutorial is going to show you how to work with a portfolio page on your Drupal template.<\/p>\n","protected":false},"author":30,"featured_media":16856,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[723],"tags":[2564,593,499,572,847],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/16216"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=16216"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/16216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/16856"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=16216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=16216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=16216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}