Jump to content


Photo
- - - - -

Boxes Image Sizes


  • Please log in to reply
13 replies to this topic

#1 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 06 April 2013 - 03:24 AM

Having trouble controlling the size of images in boxes.  I'm trying to get the images in the boxes on this page to appear larger:

Please Login or Register to see this Hidden Content

But can't see where I can control the box image size...



#2 James B

James B

    Advocate

  • Moderators
  • 4995 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 April 2013 - 03:45 AM

Hi Arlo 

 

In the box meta settings you'll be able to set the sizes for the images. If you go to the pages tab from the wp admin area, find the page you have the boxes on and scroll down to the pagelines meta settings under the main text entry field. Click on the boxes tab and you'll see an array of options you can set for the boxes. One of these include the image size

 

Please Login or Register to see this Hidden Content

 

For more information on the boxes section see -

Please Login or Register to see this Hidden Content



#3 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 06 April 2013 - 04:06 AM

I saw that and have tried setting it at 200, 300, 600, but it doesn't make any difference.  Would there be something in the pagelines default css that keeps this from working?



#4 James B

James B

    Advocate

  • Moderators
  • 4995 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 April 2013 - 04:23 AM

If you have a figure in the site wide defaults it could be overriding it. Check in Pagelines>page options>site defaults>boxes to see if there's a figure in the box size set.

 

I've just tested in the page meta on both left align and top, the images have adjusted each time. Do you have any custom css that might fix anything with an img tag.



#5 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 06 April 2013 - 07:20 PM

I don't have much custom css for the site.  

the only thing in my css that affects images is this snippet:

.srp-thumbnail-box {padding-right: 10px !important; padding-top: 10px !important; width: 125px !important;}

 

this was the only way that I could get boxes for special recent posts on the homepage to not be miniscule.  something was forcing them to be tiny little as well.  

 

Nothing in Pagelines>page options>site defaults>boxes

 

I found this code with firebug: <div class="fboxgraphic img pl-imageframe" style="width: 22%; max-width:400px">

 

the max-width isn't constraining it, but the 22% width is. any idea where that is set?

 

With all the trouble I've had trying to get images formatted, it makes me wonder if I have things installed correctly.

I have Pagelines Framework, latest version

My active Theme is Base Theme 1.0.2

I have Pagelines Customize active

 

the only customization i have is in the Base Theme stylesheet:

 

 

Moderator: CSS Removed, turned post into a wall of text.


#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 13234 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 April 2013 - 07:31 AM

Hi,

 

The reason why you're unable to increase the size is because you're using the "Image at Left" option. This option is not allowed to be any larger than 22% of the box area. Therefore, you will either need to edit this or use another option. The simplest thing to do would be to use the On Top option, then use any size you like.



#7 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 07 April 2013 - 01:56 PM

aha.  so like this:

Please Login or Register to see this Hidden Content

 

spacing looks kind of rotten.  any other suggestions for tools that will give me better layout control?  should i just use grid shortcodes?  a different pagelines section?



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 02:01 PM

Hi,

 

Only someone logged in on your site can see Drafts.  You have to publish the post or page in order to enable us to see the examples. I'll be most happy to assist as soon as I can see the document.  Thanks for understanding.



#9 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 07 April 2013 - 02:18 PM

sorry about that, i didn't realize i'd posted the preview link.  here ya go:

Please Login or Register to see this Hidden Content



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 02:34 PM

Okay, So I'm seeing boxes that have images at 100% width of the box. This looks fine.

 

When applying the SRP code inside a box, the controls of the box for the thumbnail are ignored, as the image should be called specifically by SRP, and not added to the box.  If you have added the image to the box, then this code snippet will apply:

<div class="fboxgraphic img pl-imageframe" style="width: 22%; max-width:400px">

 

But, if SRP is calling the image, then it will be SRP's CSS code controlling the image size.

 

I use it myself here:

Please Login or Register to see this Hidden Content

and to make my images larger, I had to apply a change to the SRP styling.

 

Here's what I see now on your site.  Is it different from what you are seeing?

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  110.41KB   4 downloads



#11 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 07 April 2013 - 03:06 PM

I think that changing to SRP might work better for me then.

 

On my page, its just done with pagelines boxes.  What I don't like about it is that to make the images bigger than 22%, I had to put them at the top.  This makes the captions at the bottom, which I think just doesn't look as good.

 

I use SRP code for the blog images on my homepage:

Please Login or Register to see this Hidden Content

 

We love epicurus, BTW, use it a lot for recipes.  And the site is gorgeous.



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 03:19 PM

Thanks for the compliment.

 

I love SRP, and use it all over.  The great thing about it is the application by shortcode. It lets you place it anywhere you please.

 

I'm not sure what code you used for changing the image of the boxes from 22% to 100%, but if aligned left and set to 50%, then the names and titles should appear to the right, though they will wrap because of font size. Personally, I like the way it looks now, but that's just one man's opinion.

 

Out of curiosity, have you ever seen Boxer plugin?  Actually, that same link I gave you earlier uses Boxer. Each of the SRP codes is in a Boxer content block.



#13 arlomiller

arlomiller

    Advanced Member

  • Members
  • 97 posts
  • Country: Country Flag

Posted 07 April 2013 - 04:17 PM

I think i used Boxer once before.  I think it got rid of Boxer in part to avoid plugin bloat and was ultimately was able to get what I needed out of SRP, but perhaps I should revisit it.  I might try banners for these team images, but I think then I can only get 1 per row.

 

However, at some point, I need to get some video onto this page, and I think that once I do that, I will be modifying the layout in such a way that banners on 1 row will work well.  So, I think i'm going to just leave it for now, then modify in the future when I can add video.



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 07 April 2013 - 04:55 PM

You can also try using the Grid System, which is free, and works brilliantly, without extra plugins. Here's the code:

Please Login or Register to see this Hidden Content

.  I'm using this in creating our new store: 

Please Login or Register to see this Hidden Content

 

The entire construction of that table is done with the Grid System - all within divs, and no tables, no boxes, no content blocks. Any element within it can be wrapped in a div with a unique class, that can then be styled as desired.  Feel free to view the source code to see how I did it.