Jump to content

Archived

This topic is now archived and is closed to further replies.

circ2013

pl.masonic.js - Can I edit this file?

Recommended Posts

circ2013

I am starting a new post, even though this is kind of an on going issue I have been struggling with and posted similar questions...

 

In this topic, I want to know if it is possible to force the Masonic Gallery to stop at no more than 4 columns despite how large the window is.?

 

I have tried messing with thumbnail sizes (setting a max size) and I have tried changing the css for row width, I have even tried media queries... 

 

Now, I am wondering if I can edit the pl.masonic.js to get this to do what I am hoping.  for example, in the code snippet below, you would think that I could comment out the first 'if' and or change the '1600' to something like 2000 so that the 5th column never comes into play, but I have tried both of these and when I hit the widow size of 1600 (even if I set the first 'if' to 1800) it still breaks into 5 columns.

 

theGallery.imagesLoaded(  function(){
 
var windowWidth = window.innerWidth
, galWidth = theGallery.width()
, masonrySetup = { }
, numCols
 
if( windowWidth >= 1600 ){
numCols = 5
} else if ( windowWidth >= 1300 ){
numCols = 4
} else if ( windowWidth >= 990 ){
numCols = 3
} else if ( windowWidth >= 470 ){
numCols = 2
} else {
numCols = 1
}
 
masonrySetup = {
columnWidth: parseInt( galWidth / numCols )
}
 
thoughts?
 
Thanks,
Scott
 

Share this post


Link to post
Share on other sites
Danny

Hi Scott,

 

You can create a child of the Masonic section via a child theme, which will allow you to override the parent Masonic section and be safe from updates. Once you have a child section, you can edit any file in that sections folder in anyway you like.

However, please be aware that we are unable to provide assistance should you proceed, as this is considered user created code.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
circ2013

I actually have created a child theme and have already copied the masonic folder into my Child Sections directory with edits, but it doesn't appear to be doing anything.  I can even use the js console and see that my changes are made, but I still get 5 columns.  I understand that this is a custom change on my end, I was just wondering if anyone had tried this or knew why this doesn't seem to be doing anything for me.

 

Thanks,

Scott

Share this post


Link to post
Share on other sites
Danny

I've just added the Masonic section to my child theme and replace the following code:

 

if( windowWidth >= 1600 ){
numCols = 3
} else if ( windowWidth >= 1300 ){
numCols = 3
} else if ( windowWidth >= 990 ){
numCols = 3
} else if ( windowWidth >= 470 ){
numCols = 2
} else {
numCols = 1
}

 

The end result looks like this - https://cloudup.com/cDFzn5zV3gj


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
circ2013

Hello Danny,

 

I reeally appreciate you looking into this.  I must have something set up wrong in my child theme, because as you can see here: https://diigo.com/056inb (https://www.diigo.com/item/image/4odn7/iuhq?size=o) I have updated my file to set a max number of cols to 4, but I still get 5.  Also, I am using a 27 inch monitor and I have the theme set to "pixwl width based layout" and "boxed display" where I would like the max-width to be no more than 1440px, but again with a 4 column layout in the Masonic Grid.

 

Is it possible that another file is trumping this file?  I ran a test in Chrome's Dimensions App and the column breaks are spot on at 470, 990, 1300, and 1600, even with my edits to the pl.masonic.js file.

 

Thanks again,

Scott

 

 

Share this post


Link to post
Share on other sites
Danny

Did you make the child theme yourself or have you downloaded one ?

Can you provide a screenshot of your child themes folder and files please.

 

Also, can you provide a link to the site in question please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
DonRicardoRVM

Did you make the child theme yourself or have you downloaded one ?

Can you provide a screenshot of your child themes folder and files please.

 

Also, can you provide a link to the site in question please.

 

 

Hi :

 

I have same problem than @circi2013. I need fix the maximun number of columns of the masonery gallery in 3, and I´ve created the section child, but it doesn´t work.

 

My folder´s structure is:

 

WordPress:

 

-------->themes

------------------>DMS

------------------>Tania (child Theme)

----------------------------->Sections

--------------------------------------->Masonic

 

 

 

Is it OK? Am I doing something bad?

 

Sorry for my bad english...


Ricardo Royo-Villanova

Agítalo 3.0

Share this post


Link to post
Share on other sites
Danny

DonRicardoRVM - Have you reloaded the sections via DMS Toolbar > Add To Page > Reload Sections ?

If so and the changes are still not taking effect, then there is likely something wrong with your child theme. As I never encountered any issue when I tried this myself. Also, please be aware that we do not provide support for this kind of customization as you're customizing the core of a section.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

Ricardo, did reloading sections resolve your issue ?

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
circ2013

Hi Danny and Ricardo,

 

I have tried everything from creating a new child theme, used a child them sent over to me from Danny, removing and reloading the sections, but so far, nothing has worked for me. 

 

When I have some down time, I am planning on duplicating my site to a new install and stripping all my other sections and customizations out and see if I can get this figured out.

 

Thanks,

Scott

Share this post


Link to post
Share on other sites
Danny

OK Scott, keep up posted.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
flourishdesignstudio

Hi Scott (@circ2013) and Danny,

 

Did you ever find a solution for this? I too would like to use this section but only have it display 3 columns at full width, not 5. I downloaded the Skeleton Theme and added in the sections < masonic folder and edited the specific part of the pl.masonic.jd code to read:

 

theGallery.imagesLoaded(  function(){


var windowWidth = window.innerWidth
, galWidth = theGallery.width()
, masonrySetup = { }
, numCols


if( windowWidth >= 1600 ){
numCols = 3
} else if ( windowWidth >= 1300 ){
numCols = 3
} else if ( windowWidth >= 990 ){
numCols = 3
} else if ( windowWidth >= 470 ){
numCols = 2
} else {
numCols = 1
}


masonrySetup = {
columnWidth: parseInt( galWidth / numCols )
}

 Didn't work.. any thoughts? If DMS allowed us to control this from the front end that would be a huge value. 

Share this post


Link to post
Share on other sites
circ2013

Hello Fourish Design Studios,

 

Unfortunately, I was never able to get this to work either.  I finally just went with the default.  Sorry I am not able to provide good news here.

 

I agree it would be a great feature if this were controllable via DMS. 

 

Thanks,

Scott

Share this post


Link to post
Share on other sites
flourishdesignstudio

Thanks for the quick reply circ2013.

 

Sorry you didn't find a solution either... bummer!

Share this post


Link to post
Share on other sites
Keith Vaugh

Hi all

I realise this is a old post, however I am maybe on the track to a solution (maybe not). What I have done, is modified the code in the .js file to be:

if( windowWidth >= 1300 ){
							numCols = 4
							} else if ( windowWidth >= 990 ){
							numCols = 3
							} else if ( windowWidth >= 470 ){
							numCols = 2
							} else {
							numCols = 1
							}	

This does not appear to solve the problem completely, however when I inspect the elements I notice this css:

@media only screen and (min-width: 1600px)
.row.row-set > [class*="span"] {
    width: 19.98%;
}

If the width is changed to the say 24%, then the four column arrangement appears. However when I try to add this css to the custom css section it seems to have no affect. Maybe @danny might have a suggestion. Also I think I will need to change the padding to try and get the images to space evenly - trying to target this also but so far not successful.

Share this post


Link to post
Share on other sites
Keith Vaugh

As a follow up I think I have managed to sort it out. I am not sure if editing the .js has any real impact overall. What seems to work is to add new @media details to the custom css. I added:

@media only screen and (min-width: 1300px) {
li.span3.weddingstationery.isotope-item, .row.row-set > [class*="span"] {
    width: 24.98% !important;
}
}

and this seems to force 4 columns no matter what the overall width of the browser. It does not impact smaller @media elements. If you change the width to 33.98% then it forces 3 columns etc...

Hope this helps someone else out or if anyone has anything to add please let us know. 

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      The Filtering of categories in the Masonic Gallery refreshes back to ALL categories when the DMS Revslider loads a new image?
      Anybody any idea? See Artists Category refreshes back to ALL when the DMS Revslider with images on the top loads a news image on http://www.18hrsfestival.nl/
    • Susan
      By Susan+
      I have three items in my Masonic section. I would like them to center on the page. Here is the page on my staging site. What is the CSS code to do this? I don't see another option to handle this.
      Thank you.
       
       
    • Susan
      By Susan+
      Please tell me how to remove the date on hover from the Masonic section. The dummy for this page is here.
      An older post here showed the following for it (below) but it does not work (anymore?).
      #site .pl-center-cell .metabar { display: none; } Thank you.
       
       
    • MissT
      By MissT+
      Hi there, the Filter By option within the Masonic section isn't working when a custom post type and custom category is selected.  If you swap to normal posts and categories then it works but sadly not with custom post types and custom categories.
      All posts are shown but when you click on the categories all posts disappear even though posts do have these categories. When you click All all the posts come back. I've tried this on two different websites with the same result.
      Many thanks in advance.
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
×