Masonry Layout
- This topic has 5 replies, 2 voices, and was last updated 5 years, 11 months ago by
. This post has been viewed 1648 times
Viewing 6 posts - 1 through 6 (of 6 total)
-
Posts
-
Hi Rodrigo – I am working on a site for an artist and am using the masonry layout for a portfolio page (portfolio-masonry-4-columns). I don’t want to have the option to click various categories like “show all/websites/logos”. I have tried but I must be removing the wrong code. The site is not online yet. Can you help me? Thanks, Moira
Hello Moira,
You have two options. Probably the more appropriate in your case is just hide the filters with CSS class
d-none. For example:<ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center d-none" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'masonry', 'filter': '*'}"> <li class="nav-item active" data-option-value="*"><a href="#">Show All</a></li> <li class="nav-item" data-option-value=".websites"><a href="#">Websites</a></li> <li class="nav-item" data-option-value=".logos"><a href="#">Logos</a></li> <li class="nav-item" data-option-value=".brands"><a href="#">Brands</a></li> <li class="nav-item" data-option-value=".medias"><a href="#">Medias</a></li> </ul>If you do not want these filters in your source code my suggestion for you is use the given code below:
<div class="masonry-loader masonry-loader-showing"> <div class="masonry" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}"> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/square/blog-11.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-2.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/square/blog-4.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-9.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-38.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-24.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-34.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-42.jpg" alt=" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> </div> </div>Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Thank you very much. I used the second option and that works but I am having a problem with the thumb info titles. If I add a name to the alt tag like this: alt=”name” the titles disappear. If I leave it as: alt=” with only one ” then the title appears and the page looks fine but the code in Dreamweaver turns brown. So I’m sure there is something wrong.
This is the code I am using:<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/square/blog-4.jpg" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div>
Thanks again for the great support!
Hello Moira,
First sorry, at really the code I sent for your in my last reply was missing a
"in the alt tag. The correct isalt="". Here’s the entire code fixed:<div class="masonry-loader masonry-loader-showing"> <div class="masonry" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}"> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/square/blog-11.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-2.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/square/blog-4.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-9.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-38.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-24.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-34.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> <div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4"> <a href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/blog/medium/blog-42.jpg" alt="" /> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> </div> </div>This is the expected design/style when hover the image:
Sorry again!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Hi Rodrigo,
Thank you for your help. Still having one issue. When I replace with the magnification of the image is not right. I tried putting in:
But when I do this the hover titles disappear. Really appreciate your help.
Moira
Viewing 6 posts - 1 through 6 (of 6 total)
This topic is marked as "RESOLVED" and can not rceive new replies.