Scale images under Structure theme
-
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 620×380 regardless of actual image size and CSS which I have set to 500×306. 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 620×380, but would prefer to fix the issue properly.
I also have a similar problem where the header image is required to be 960×120. 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: (visible only to logged in users)
-
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.
-
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 500×306, and the homepage feature image CSS specifying a window of 500×306, the served page gives me a 500×306 window onto the top left of the original image stretched to 620×380.
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=1If 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.
-
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.
-
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.
-
It is really strange that it didn’t work, and I suggested based on this explanation:
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?
-
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 500×306 feature image I am trying to display in a 500×306 box is being scaled up when it is served to the browser to 620×380. When it tries to display, I get a 500×306 view of the top left corner of the inappropriately scaled 620×380 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 :(
-
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….
-
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;
} -
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..
-
@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.
-
@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/ -
@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.
-
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.
https://en.forums.wordpress.com/topic/affiliate-link
http://wordpress.com/types-of-blogs/
- The topic ‘Scale images under Structure theme’ is closed to new replies.
WordPress.com Forums 