Portfolio Viewer

https://www.muse-themes.com/products/portfolio-viewer

This stylish, self-contained project viewer displays a list of projects and associated images. As the user browses through the list, images for highlighted projects are animated on and off the screen in a beautiful randomized patterns.

Clicking the “Explore” button opens a full page gallery with title, description and full image gallery. This appropriately-named widget works great as a plug-n-play portfolio viewer, but would also be a great fit for themed art collections, photo galleries and much more!

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial release



Setup in Muse

  • Place the widget on your site where you would like the portfolio viewer to appear.
  • The widget container may be resized in order to control the size and shape of the portfolio viewer.
  • Most users will want to use this widget at full browser width, so that it is fully responsive.
  • Use the Resize dropdown in the Top Menu to control the responsive behavior of the gallery.

WIDGET OPTIONS

  • Open the widget option panel.
  • Widget Scrollbar: This setting gives you options for whether you'd like to display a scrollbar for the widget content. Options are Auto, Hidden and Visible.
  • Enable Headline: This enables the headline seen above the main menu list (see the "Choose a project" text in the demo.
  • Headline Text: This is the text that appears at the top, above the menu list.
  • More Button Label: This text appears next to each menu list item when the item is selected.

GALLERY 1/2/3/4/5/6/7/8 SETTINGS

  • Gallery Title: This is the title text that appears on the gallery page. Note that the gallery page is the page that is loaded after the user clicks on a menu item.
  • Description Text: This is the description text. You may use this to describe your project.
  • Side Text: This text appears beside the description text. It is best to keep this text fairly concise. Consider using a date, e.g. "November 2021".
  • Open Gallery Background Color: This is the color of the gallery background. You may match the background color of your site, or go with a contrasting color for your gallery. Note that the background color is unique and separate for each gallery page.
  • Image Loader (1-12): Use these to load your images.
  • Image Caption (1-12): Use these to add your image captions. Captions appear in the gallery, as well as the slideshow when a user clicks on a gallery image.

HEADLINE STYLING SECTION
This section contains styling settings for the headline text, including customization options for things like font, color, line height and more. These settings are self-explanatory and are labeled with their exact function.

MENU STYLING SECTION
The settings in this section offer customization controls for the styling of the menu. These settings are self-explanatory and will not be explained in detail, aside from a few imprtant settings:

  • Menu Horizontal Padding: This setting adds padding to the left side of the menu items (percentage-based). By default, the menu items will align with the edge of the widget container, or with the edge of the brakpoint when the widget is used full width and the content arrows in Muse are facing inward. If you are struggling with the placement of your menu items, this setting is the one you want to adjust. Also see the "Unlocking Page Width" item in the Helpful Tips section below.
  • Mobile Menu Horizontal Padding: Same as above, but applied to mobile only.

CONTENT PAGE STYLING SECTION
Once again, the styling settings in this section are self-explanatory and are labeled with their exact function, and will not be described here in detail.

HELPFUL TIPS

  • Unlocking Page Width: The page lock arrows in Muse are important when using this widget. These arrows lock the content on a page so that all page content is constrained to the breakpoint. In the screenshot above, all content will be locked inside of the 960px breakpoint. If these arrows are facing inward on your page, all of the widget content (text and images) will be constrained between the arrows on your published/previewed site. This is not a good look, because the randomly arranged animated images will not appear full width. This weakens the dramatic effect of the widget. Assuming your page design allows for it, we suggest pointing these arrows outward. To do this, just click on the arrows (you only need to click on one side).

Note that when you unlock the page using the arrows, the text from the widget may need to be re-aligned. Use the Horizontal Menu Padding to adjust this. The same applies to the Content Horizontal Padding as well.

  • Uniform Images: As with most all of our gallery widgets, it is advised that your images are uniform in their aspect ratio. Maintaining the same shape for your images will result in a neater, uniform layout when viewing the gallery pages. Using a mix of landscape and portrait style layouts will result in varying gaps between images.

Note that this suggestion is per gallery. If all images are a landscape aspect ratio in one gallery and portrait aspect ratio in another, both will align without inconsistent gaps in the gallery.

Also note that the uniform aspect ratios only affect the gallery. When viewing on the main menu page, there is no negative effect from inconsistent aspect ratios, since the images are scattered.

Commonly Asked Questions

No commonly asked questions


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links