Jump to content

Archived

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

Denis Ciumbargi

$content_width support?

Recommended Posts

Denis Ciumbargi    3
Denis Ciumbargi

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.


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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/


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
James B    436
James B

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

 


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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. :(


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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?


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
James B    436
James B

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;

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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.


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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;

Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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.


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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 ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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?


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
James B    436
James B

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 :-(


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Simon    247
Simon

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();
  • Like 2

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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
}

Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
Denis Ciumbargi    3
Denis Ciumbargi

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.


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites
Simon    247
Simon

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
Denis Ciumbargi    3
Denis Ciumbargi

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 :)


Where there is love, I'll be there.

Share this post


Link to post
Share on other sites

  • Similar Content

    • thirdstonemedia
      By thirdstonemedia+
      I've been fighting with a resolution issue ? Want to use Flick Slider, the site looks great on my monitor but client says she can't see bottom of homes. I believe she's on an old PC using outdated browser/s ... but, she's important to me and I'd like to make this work, on her system. Without asking her adjust her own set-up. 
      I put the Flick Slider inside a container, here ::
      http://becauze.xyz/home-five
      Set the Height of Flick Slider to 50 Base ... I don't know how this works exactly ... there is a Base then a Min ... but, haven't adjusted the Min ::
      http://becauze.xyz/home-four/
      Tried using Splash Up, which presents the same issue (she can only see top of home) and she wants several images to rotate on Home page, so not sure this would work anyway ::
      http://becauze.xyz/
      I have tried going into Layout and making the width narrower, and that does make the site narrower, but the homes still don't display in full, on her system. Help ?

      Here are her screen grabs, both desktop and iPad  (dumped the chalkboard background).

      FInally, she said these look great ::
      http://www.sinclairaia.com/
      http://www.kristihanson.com/
      What am I doing wrong ?? Is there a better way to accomplish making the site look great on any resolution at any size ?
      Joanne
      (Longtime Pagelines-lover.)


    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, so I have an issue that seems specific to iPhones.
      I have 2 "Menus" in a container both set to 6 columns (see image A) - I have added the classes .menuleft and .menuright
      When this gets to 768px and the mobile menu kicks in, both sections revert to 12 columns (or 100% width) so the 2 menus are stacked on top of each other. I want them to remain inline so that they look like image B - so need to control the section width.
      I have added the following CSS:
      .menuleft[class*='pl-col-'] {
        max-width: 22%;
        margin-left: 3%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      .menuright[class*='pl-col-'] {
        max-width: 74%;
        margin-right: 1%;
        padding-right: 0em;
        padding-left: 0em;
        float: left !important;
      }
      This works well for Android phones, on all online emulators and in Chrome mobile inspector, but does not seem to work on iPhones. I don't have an iPhone so it's very hard to test. Any help would be appreciated. The site is currently live at quitegoodcards.com.
      PS Is there a way to target the li items in the mobile menu toggle (image C) that does not effect the desktop li? There doesn't seem to be a separate class to apply.
      Thanks in advance



    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
×