Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Scale images under Structure theme

  1. mwynands
    Member

    Hi,

    I'm in the process of setting up a new blog at http://www.watchpossible.com which is very much "work in progress". I liked the Featured Article functionality of the Structure theme as I thought it might work well for my content, but have been looking to customise the theme via CSS given I find the original layout a little "chunky". That being said, I am a CSS newbie :)

    I'm getting the overall structure towards the slimmed down look that I want (moving to 800 pixels wide versus original 960 pixels), but have run into a few snags with respect to scaling of images that I want to both resolve and understand before I progress further.

    The main issue is the Feature Article image stretches to 620x380 regardless of actual image size and CSS which I have set to 500x306. I think the relevant CSS code is as follows

    #homepagetop .featuredimage {
	float: left;
	display: block;
	background: #f5f5f5;
	width: 500px; /*** was 620px ***/
	height: 306px; /*** was 380px ***/
	margin: 0px 20px 0px 0px; /*** was 30px ***/
	padding: 0px;
	overflow: hidden;
	}

    I can work around this by padding my feature images out to 620x380, but would prefer to fix the issue properly.

    I also have a similar problem where the header image is required to be 960x120. I can of course work around that too, but I suspect insight into the above well help me solve that too.

    Thanks in advance for any help.

    The blog I need help with is watchpossible.com.

  2. devblog
    Member

    Regarding the scaling of images, since that's more of a "core" thing, you can set the image size through Settings > Media. There you can set the "large size" image dimensions to a maximum width and height (in your case 500px width)... that should resize your images to your specified dimensions.

    HTH.

  3. mwynands
    Member

    Thanks, I took a look at that and tried it but it hasn't solved the issue.

    I think it may be something embedded in the HTML of the theme which I believe we don't have access to. Even with the base feature image being uploaded at 500x306, and the homepage feature image CSS specifying a window of 500x306, the served page gives me a 500x306 window onto the top left of the original image stretched to 620x380.

    When I look at the properties of the image, I can see it is being stretched by the server

    http://watchpossible.files.wordpress.com/2010/05/pyrolume-colorsfeature1.jpg?w=620&h=380&crop=1

    If this is indeed being done by the HTML and I have no way to override it in CSS, I guess I'll have to fudge around it with padding my images with blank space. Not ideal.

  4. devblog
    Member

    I forgot to mention, since you have the CSS upgrade, below the editor there is a "Limit to _____ pixels... " field. If you haven't done so, set that to 500. That should do it.

    If that doesn't work, then I'd advise you to contact staff. They might have a better answer/solution.

  5. mwynands
    Member

    Never spotted that before, thanks. That helps me understand another minor quirk, but still doesn't address the issue.

    It is increasingly looking like I'll just have to pad my images and use offsets to centre them. Not a huge deal given the nature of the content (usually pics will be on plain white or black backgrounds which is easy and compresses well) but an extra step I would have liked to avoid.

  6. devblog
    Member

    It is really strange that it didn't work, and I suggested based on this explanation:

    http://en.forums.wordpress.com/topic/limit-content-width-anyone-psyched-out-how-to-use?replies=8#post-297311

    Perhaps it's a bug that the theme is not taking the settings. May I suggest you to contact support if this is the case?

    http://en.support.wordpress.com/contact/

  7. mwynands
    Member

    The "Limit to _____ pixels" functionality scales images when you upload them, and is intended to be used to avoid images inserted into posts being larger than the width of of the content column.

    However, that isn't related to my problem.

    My issue is that regardless of the size of my underlying images that I am using for feature images, they are scaled back up by the theme to the default sizes for that theme for display of feature images. So my 500x306 feature image I am trying to display in a 500x306 box is being scaled up when it is served to the browser to 620x380. When it tries to display, I get a 500x306 view of the top left corner of the inappropriately scaled 620x380 served image.

    Looking at the image properties and HTML of the served page, it definitely looks like this scaling is happening within the HTML.

    So, I either need to

    1. Find some way to scale the image back down via CSS (doesn't seem possible)

    2. Pad the images with a border and fInd a way to offset the image within the view window upwards and to the left (also doesn't seem possible upon investigation)

    3. Edit the HTML (doesn't seem possible)

    Hmmm I might be screwed :(

  8. devblog
    Member

    I thought it was kind of related because of the size you want them to be displayed with...

    Now, since you do have the CSS upgrade, why don't you widen the layout of the theme so that the images fit properly? this may be a bit of a kludge but a possible workaround....

  9. charanyakannan
    Member

    Did you try changing the width and height in the CSS featuredimage section?

    #homepagetop .featuredimage {
    float:left;
    display:block;
    background:#f5f5f5;
    width:620px;
    height:380px;
    overflow:hidden;
    margin:0 30px 0 0;
    padding:0;
    }

  10. charanyakannan
    Member

    my bad...i bet you tried it...I have the same problem with the thumbnail...I want the thumbnail images on the homepage to be scaled to a smaller size....but have not been able to do that..

  11. mwynands
    Member

    @devblog - I'm trying to slim the theme the default 960 pixels wide down to 800 pixels wide to make it less "chunky", so I can't leave the image their default sizes and need the flexibility to scale them to what I want for the best results.

    @charanyakannan - yes, see my original post. I'm pretty much certain the issue lies in the HTML hardcoding the images sizes for the homepage feature images, the thumbnails, and the post feature images. I assume they did that to ensure people couldn't screw up by uploading incorrectly sized or wrong aspect ratio images.

    I went through a complete list of available CSS attributes/commands. Thought I was onto something using offsets and "clip", but unfortunately not.

    I fear there is no solution and I may be better off trying to move to another theme.

  12. timethief
    Member

    @mwynands
    I see a page tab with the word "Store" and a blog with mass produced watches that you did not make yourself. Are you aware of the commercial restrictions here at wordpress.com? We are not allowed to resell or retail merchandise we do not make ourselves from our wordpress.com blogs. Consequently, our blogs cannot be equiped for e-commerce. If you are in any doubt, please contact support for clarification.
    http://en.support.wordpress.com/contact/
    types of blogs > http://wordpress.com/types-of-blogs/

  13. mwynands
    Member

    @timethief - I appreciate the heads up, but the purpose of the blog is informational with respect to my hobby of horology, and a test of the tech and process before I set up my own personal blog. The affiliate links are merely there to offset the costs of running it, and as it stands the structure and content is only placeholder while I sort out the structure. With respect to that intent, it falls within the terms of use of your link.

    I will, however, contact WordPress as suggested.

  14. timethief
    Member

    Please do contact Staff because affiliate links are problematic. We cannot use wordpress.com blogs to drive traffic to third party sites. (TOS section 2 - 5th bullet).

    See this section:
    Affiliate marketing blogs: Blogs with the primary purpose of driving traffic to affiliate programs and get-rich-quick schemes (“Make six figures from home!!”, “20 easy steps to top profits!!”, etc). This includes multi-level marketing (MLM) blogs and pyramid schemes. To be clear, people writing their own original book, movie or game reviews and linking them to Amazon, or people linking to their own products on Etsy do NOT fall into this category. Here is a thread in the support forums that talks more about which affiliate links are OK or not OK.
    http://en.forums.wordpress.com/topic/affiliate-link
    http://wordpress.com/types-of-blogs/

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags