• 0

$content_width support?


Question

Posted · Report post

Hi guys,

 

i am trying to work around jetpack tilled galleries and came across that the theme might not have this function specified.

 

I do not want to alter the theme functions for nothing so, according to this link,

 

http://codex.wordpress.org/Content_Width

 

does pagelines defines what is needed?

 

something like:

2
if ( ! isset( $content_width ) )
    $content_width = 800;

 

It needs to work for this

 

http://jetpack.me/support/tiled-galleries/

 

I do not want to alter because the framework has the width adjuster so i do not know how the code will affect things around.

Share this post


Link to post
Share on other sites

29 answers to this question

  • 0

Posted · Report post

Hi Denis

 

I've checked in the php reference and with one of our developers and its doesn't seem like we declare this in the framework. I can see the variable for the content-width but not along side asset. The devleoper confirmed that is usually declared globally in a normal theme and is used for media but it's not something that they think we've included.

 

Looking at the link it states if the command isn't defined it will alter to 500px wide, is this whats happening on your site? If so you might be able to alter this manually using css.

 

If you have this active on a page we can take a look at, please let zap us a url and we'll take a look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

thank you for replying. Yes, everything goes to 500px when i am trying to create tilled galleries.

 

I have created a test page with several galleries with different displays so you can have a look.

 

I would very much appreciate if this can be solved somehow in a non intrusive way (altering php, css too much).

 

here is the link

 

http://sansapentrusansa.org/pagelinesvsjetpack/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, had a look for you. Seems to be easy enough to fix with css, just one line of code seems to get it back in alignment by fixing the image size.

 

Try

 

.gallery-icon {
    display: inline-block;
    width: 240px;
}

That gives this layout - http://screencast.com/t/v3KmcmljW

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you James.

 

I used the code, you can check again.

 

The code you provided only solves the problem for one of the gallery types, the basic one, which is available without jetpack also. For the other types of galleries the problem is still there and still related to the width thing i think. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

As far as I can (I could be wrong) see the the images from the other galleries, are in separate divs. Therefore, this is not related to width, the images appear on a new line as they're in different divs.

 

http://cl.ly/image/1i1u3y17022M

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

the images are inside a div but there are a series of dividers. The one controlling the width is above the one you showed me in your last screenshot.

 

I have attached a new screenshot, where you can see that the main div for the gallery contains the divs for rows which i tried to alter and nothing happens. This controls the width of the row with images under it i think.

 

That main div gets an attribute:

data-original-width="500"

because the width attribute from the topic title is not defined.

 

I am new with css, php, i do not know how alter subclasses and i do not want to risc to break more stuff as that data-original-width might affect more.

 

Here is the link to the screenshot.

 

https://www.dropbox.com/s/a01phn96ywwrzpy/pagelinesvsjetpack.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, you have missed the point, even if you change the width, each row is a separate div called gallery-row. In order to make these gallery appear side by side, you're going to need to add some custom CSS float:left to the gallery-row class and increase the width of your site.

 

The reason to increase the width of your site is the images are two large to be side by side unless you either increase the width of your sites content area or you reduce the image size.

 

I increased the sites width to 1080px, added a float:left; to the gallery-row class and get the following result.

 

http://cl.ly/image/1032283M3Q1B

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you again Danny.

 

I would like to keep my actual width. The site is addressed to persons with very low incomes, that might have received a computer from someone and the internet is used to find help as it is an NGO related to cancer and leukaemia. Every day, after testing stuff the site is reduced to more simple code and effects. The screen resolution for many is still 1024 x 768 px for some. i need to fit in the window.

 

I need to reduce codes in time and in the same time be able to insert easy but appealing content to make them come, experiment, discover, evolve. I know this does not matter here but, it may explain why i am so "stubbornness"...

 

So, just keep this at it is and, hope in time, some changes with jetpack or in the theme core... problem solved?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Denis, reading through the jetpack link - http://jetpack.me/support/tiled-galleries/ it says you can add the code directly if the site/theme doesn't include it already.

 

Try adding the isset! code to the functions.php of a child theme instead of using css, set a width which matches the width of your content area.

if ( ! isset( $content_width ) )
    $content_width = 800;

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Thank you James.

Inserted the code, 2 problems solved, new one emerged.

For the pages that are have one sidebar, left for example, the content width is 766px in my case.
For the pages that are full width, the content is 940 px.

When i inserted the code with 766 looks great on pages with the sidebar, and some white space (174px the difference from the full wdith 940px page) on the full dith pages.
When i altered the code to 940 thinking that if i specify the "maximum" width a page can have, the galleries have partially hidden images.

Any last help on how to combine these two widths?

 

This is why i said in my first entry that

 

"I do not want to alter because the framework has the width adjuster so i do not know how the code will affect things around."

 

here are some screenshots

https://www.dropbox.com/s/n33glq3n0vvtz57/spsgalleryfullwidth.png

https://www.dropbox.com/s/gycuhsx5f7m8n9e/spsgallerysidebar.png

Thank you again for replying, means a lot.

Edited by Denis Ciumbargi

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you provide a link to both pages which have the two different layouts, so we can take a closer look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sure Danny.

 

the page with the one sidebar is the same:

 

http://sansapentrusansa.org/pagelinesvsjetpack/#.UX_DlLVhiSo

 

And the full dith gallery for testing is on this page:

 

http://sansapentrusansa.org/dorim-sa-cream-imagini/#.UX_DhrVhiSo

 

at this moment the content width is 940 to match the full width.

$content_width = 940;

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've scoured the web and it seems it is possible to declare various widths based on the template/page, for example if the page was using the one-sidebar-right layout you could specify a width for it. However it seems it would need a complex hook which would mean more code, which was something you were trying to avoid. However, just in case I've attached link below in case you want to take a look at it. To be honest I'm not sure how that would be implemented in the framework, or even if it would work 100%.

 

http://davejesch.com/wordpress/wordpress-tech/variable-width-pages-for-your-theme/

 

As usually the content width only gets declared once, I would think the safest thing to do would be to declare the width as the figure for the sidebar layout, that should then work on both pages without formatting issues, although on the full width page it wouldn't stretch the entire page width, if centered it might not notice too much, depends on the size of the sidebar.

 

If you can set the width to the sidebar layout version so we can see how that looks on a full width page, we might be able to see if css could help in adjusting the width a little more to make it sit on the full width page better.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you James B.

 

I have changed the content width to 766px, the size for the one side bar layout.

 

The link remain the same to test around.

 

http://sansapentrusansa.org/pagelinesvsjetpack/ for one side bar

 

and

 

http://sansapentrusansa.org/dorim-sa-cream-imagini/#.UYDcvbVhiSo for a full page layout.

 

I have also thought of keeping the content width to the layout of a one sidebar page and to center but, before i will keep that as final solution just wanted to not give up the fight and try until... well, until i am sure the fight is over :)

 

Crazy fun thing... Sometimes is like, who is better, me, us or the code? :))

Thank you guys for the support, i know it is just a line of words but i relly mean it! Thanks!

Hope there will be a happy ending on this one.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

From what I can see, this is now working correctly, I am not sure what you're trying to achieve now on your full width pages ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny - i am trying to have a gallery that on full width pages goes to full width of the page and not to keep the content width of the one side bar content. I am trying to have a gallery on pages with one sidebar that do not have partially hidden content because the content width specified in the theme functions manually are bigger to match the full width size settings of the page.

 

James B - Jetpack just released a bug fix on 2.2.5 version saying this:

 

Bug Fix: Custom CSS: Allow the content width setting to be larger than the theme's content width.

 

Maybe these two can work now together?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Reading the change log for jetpack, I read that as you can set the width of the gallery outside of the standard content width of the theme, not sure if that would apply for the different layouts of the template though or just larger than the the full width layout.

 

It's worth a try though to see if it has an effect on the sidebar layout to see if it respects the width of the template width when reduced after the update.

 

I've tried using css to make a change on the full width page with the reduce content-width on it, but I can't find a way to get it to work without changing for each image as the styles seem to be applied inline :-(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B - Well, thank you...

 

I shall try to keep the content width size in theme functions to 766 as for my one sidebar layout page width and... maybe in the future this can be sorted out.

 

Is bad that a solution is hard to find as Jetpack is a top plugin, used by millions and these gallery functions helps users to have less plugins, to replace nextgen gallery or any other combination of plugins in order to create these galleries. It is all about simplicity for the common user.

 

Well, heads up high for a solution in the future, thank you again.

 

If any updates on these, i would love to have them :D

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I will bring this to our developers attention to see if anything can be done in the future.

 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Most people simply don't read the docs properly for $content_width. Hopefully I can clear this up easily.

 

$content_width is a GLOBAL variable that themes and plugins can use to control media. We dont set it in PageLines, we leave it up to the user.

 

James was almost there with his example:

if ( ! isset( $content_width ) )
    $content_width = 800;

Here he is setting a var, but it isn't globalised so nothing can use it.

 

So lets assume for an example you have a page width of 1200px with a 800px content area and 200px sidebar... and you want the gallery to fit nicely in the content area..

global $content_width;
if ( ! isset( $content_width ) )
    $content_width = 800;

OK what about if you have a full width page?

global $content_width;
if ( ! isset( $content_width ) )
    $content_width = 1200;

Get the idea?

Better yet, how can we make this use the settings from the layout editor? There are a bunch of functions added long ago in this file: http://phpxref.pagelines.com/nav.html?includes/library.layout.php.source.html

 

So on my full width test page here: http://pross.org.uk/test/ To get the gallery to use the proper width i used this in my child theme functions:

global $content_width;
$content_width = pl_page_width();
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can also use a LESS approach since those are also LESS variables. This works for @pl-content-width, and @pl-page-width. Note however, this does not account for padding.

 

EX:

 

.some-div (@pl-content-width) when (@pl-content-width < 500) {
 do something with your less
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi and THANK you all for the answers.

 

I mean no disrespect to any developer, programer, administrator, moderator when i post my posts. I totally get their jobs.

 

The last two answers, from Simon_P"] and @[member="beardedavenger bring more. This helps but again, with the risk of look stubborn, the problem is another one.

 

I CANNOT DEFINE TWO WIDTHS. I WOULD LIKE TO HAVE A WIDTH AUTO DECLARED AS I WOULD NOT HAVE TO CHOOSE THE GALLERIES TO BE ONLY ON 800 PX WIDE PAGER OR JUST 1200. I WOULD LIKE TO HAVE THE OPTION TO PUT A GALLERY ON ANY WIDTH THE PAGE MIGHT HAVE WITHOUT HAVING THIS ISSUE.

 

Declaring a 1200 px and to insert my gallery on a 800 px wide page will create content that is partially hidden. IF ONE CONTRIBUTOR CREATES AN ARTICLE THAT IT'S TEMPLATE IS 800 PX AND WANTS TO ADD A GALLERY HE WOULD HAVE TROUBLES SHOWING IT'S CHOSEN CONTENT FOR THE GALLERY. IT GOES THE OTHER WAY AROUND ALSO.

 

it is one thing for me if i would be the only contributor / author and i would know that i have to create galleries only on 1200px wide pages but is different when you are creating a community site with simple contributors.

 

That was my problem.

 

I do know is hard to create a product that everyone can use with no troubles and i feel sometimes guilty that i have to ask this kind of questions here on the forum.

 

And more minds are better than one. Ok. Maybe i am the only one at the moment asking for this. But i might not be the last. It is better to have this with an answer that will please the future also.

 

Anyway...Thanks, i do appreciate the answers.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

All pages are the same width though?

 

If you set the layout in the admin layout editor, then use this the content width is set for you:

global $content_width;
$content_width = pl_page_width();

 

How are you setting different widths for different pages?

 

Im having trouble reading your posts, are the bits IN CAPS questions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Simon_P

 

I have different widths for pages.

 

There 2 types of widths. Full width and one sidebar pages that off course the content area has different width.

 

Full width pages are defined on 1000 px including the padding, the one sidebar have the sidebar set at 200 px and the content of the page 800px with paddings included.

 

Most of the articles will be on 800 px pages. Most of the articles, as being a NGO community website will have content that will require lots of images and i have chosen jetpack as it has so many features nicely integrated into wordpress core and are less likely to cause conflicts with other plugins. The full width pages will have content that is intended for super exposure for visitors and again, some of them will need to have galleries.

Contributors and Authors will understand in time the coding needed but most of them are just people with stories that all they know is to drag and drop images, choose the gallery option and write text. They are less likely to contribute if i put pages like, use only that template with that plugin with that setting on. I have to offer just the option where they can put what they need to put and me handle the battle with coding even if i am not that good myself. That is why i am trying and being stubborn to define a width that will make the galleries, even if it such a small thing for some, look good.

 

The caps are things that are more important in context not necessarily questions.

I know, lots of text outside the context but, might help better understand the customers you have :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So are you going to have galleries on full width pages and sidebar pages?
 

The caps are things that are more important in context not necessarily questions.

I think you mean bold

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now