Jump to content

[Share] Add Portfolio Thumbnails under Pagination

Recommended Posts

To show Portfolio Thumbnails under Pagination, like this

image.thumb.png.163f37683dd856b275545e003a5b7605.png

You can follow these steps.

If you can't make it work, you can comment below or message me.

#1. Install Section Loader Plugin

https://www.will-myers.com/products/p/section-loader-supreme

or this link (referral link)

https://www.will-myers.com/products/p/section-loader-supreme?peachs_apc=tuan-phan

The plugin will give you some code like this

image.png.b94a1653263e4a52d5b59290e579f077.png

image.png.39a04cb03cf0c3c3c01669ff4ca12ced.png

#2. Use this code to Portfolio Page Header Code Injection

<div data-wm-plugin="load" data-target="/portfolio01-gridsimple"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/portfolio01-gridsimple') return;
  $('div.wm-load-container').insertAfter('section#itemPagination');
  const path = location.pathname;
    $(`a[href="${path}"]`).css('display', 'none')
})
</script>
<style>
.wm-load-container+section {
    padding-top: 0px !important;
}
body.view-item div.wm-load-container {
  display: block !important;
}
  div#gridThumbs {
    opacity: 1 !important;
    transform: unset !important;
}
</style>

image.png.b01f7e7a0af4e3abb108218bbbbdcde5.png

#3. Note

This is Portfolio Page URL. You need to replace example url with your portfolio page url.

image.png.e2bb522fc116c9a0c371f884e39d5c45.png

#4. I forgot, thumbnails will appear on both Portfolio List + Detail Page, so you can use this code under #2 code to hide them on Portfolio List Page.

<style>
body.view-list div.wm-load-container {
  display: none !important;
}
</style>

image.png.6ccc1e4d5cc51e34ecd519688f72886d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 211
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.