Additional sizes of images and frames in themeforest Karma theme WordPress
- SOLVED
Hi,
I am a new user of WP and have the Karma theme, see sample here
http://demo.truethemes.net/Karma-Wordpress/
I just realized there are only some fixed sizes/dimensions of the images and framed. I would like to be able to make posts and use some other too, in addition to the originals.
300*300, 400*400, 500*500, 500*333, 333*500
As far as I understand this will take some time and knowledge to do - things I don't have.
I can see some similar has been done here
http://wpquestions.com/question/show/id/4186
I Would be happy if someone can do the code work, frames and instruct me how to upload.
Please let me know if you want/need more information
Answers (7)
Gabriel Reguly answers:
Hi malin_s,
I can do it for you, I have done it before: [[LINK href="http://wpquestions.com/question/show/id/4186"]]http://wpquestions.com/question/show/id/4186[[/LINK]]
Have you commited with someone else?
Regards,
Gabriel
Malin Sundqvist comments:
Hi Gabriel Reguly,
No I have not. It would be great if you can do it.
And instruct me how to upload it - I am totally a newbee ;)
Thank you
//malin
Gabriel Reguly comments:
@LatinUnit, thanks for the images.
@malin_s, I have sent you a PM instructing how to upload the Karma files.
Gabriel Reguly comments:
Hi Malin,
Please have a look at [[LINK href="http://wpquestions.ppgr.com.br/malin/"]]http://wpquestions.ppgr.com.br/malin/[[/LINK]] and tell me if it is what you want.
The new shortcode sizes are:
square_300_full
square_400_full
square_500_full
landscape_500_full
portrait_500_full
You can add the images like this:
[frame style="modern" image_path="" link_to_page="" target="" description="" size="square_300_full"]
The new code is [[LINK href="https://www.dropbox.com/s/qopwf18336f6j5q/Karma.zip"]]here[[/LINK]].
Regards,
Gabriel
Gabriel Reguly comments:
For a clear register, I would like to thank all experts who made some images.
Unfortunately all of them were if incorrect sizes, because they would be used as frames with inside space as 300px, 400px, etc.
And the provided images had total widths of 300px, 400px, etc, e.g., inner space was less than 300px, 400px, etc.
So I had to make new images, like this one http://wpquestions.ppgr.com.br/wp-content/themes/Karma/images/_global/image-frame-square-300-modern.png ( 317x325 pixels ).
Other aspect is that Karma has it's own shortcodes for images, so I added the new sizes to them.
Regards,
Gabriel
Christianto answers:
Hi,
Do you need it to be framed in individual images or in a gallery format?
if you need to frame individual images that you can use in each post repeatedly,
you can use this custom shortcode
add this on your functions.php
[[LINK href="https://gist.github.com/nefic/5006890"]]view custom shortcode[[/LINK]]
this is stylesheet code (put in style.css or custom.css)
[[LINK href="https://gist.github.com/nefic/5006894"]]view custom css code[[/LINK]]
And this is your image spite, put it on your images folder
https://www.dropbox.com/s/pa2v6jn0l4a3y4m/cframed.png
Example usage in your post editor:
[framed title="Your title" alt="My images Alt" href="http://www.google.com" type="frame" float="left" size="300*300"]http://your-image-url.com/myimage.jpg[/framed]
attribute description
size => your image size ("300*300", "400*400", "500*500", "500*333", "333*500")
type => frame type ("shadow or "frame" box default to "shadow")
float => frame float ("left", "none", "right" default to "none")
If you need it in gallery format, Gabriel will help you with this..
this is psd sprite that I created, not perfect but hope it will help.
https://www.dropbox.com/s/4618vp1e6dxc42k/cframed.psd
need to zzzleeep now.. :)
Malin Sundqvist comments:
Hi,
I am trying to learn....
So where exactly in the functions.php and style.css do I need to put the code?
And the png-file is to be put in Karma\images\shotcodes ?
And the attribute discription - where to put it?
Thank you!
Christianto comments:
Ok, No problem,
On your Karma theme folder wp-content/themes/karma
there are functions.php and style.css
the .png sprite will be placed in Karma\images
the attribute description only to explain some of parameter you might need to pass if you use this shortcode to create your framed image
[framed title="Your title" alt="My images Alt" href="http://www.google.com" type="frame" float="left" size="300*300"]http://your-image-url.com/myimage.jpg[/framed]
As you can see above, your image address (http://your-image-url.com/myimage.jpg) is wrapped inside [framed] shortcode, with several attribute that you can use.
This shortcode will create framed for single image.
Hope this help
Malin Sundqvist comments:
Thank you!
Kyle answers:
You should come up with names that are easy to remember for each, then add something like this to your functions file:
if ( function_exists( 'add_image_size' ) ) {
add_image_size( '300', 300, 300, true );
add_image_size( '400', 400, 400, true );
add_image_size( 'medium2', 500, 333, true );
add_image_size( 'medium3', 333, 500, true );
}
The first part in '' is the name of the size, like medum, large, thumbnail
Plugarized answers:
<strong>You can add this to your theme's functions.php found in</strong> http://yourdomain.com/Karma/wp-content/functions.php
add_theme_support( 'post-thumbnails' );
add_image_size( 'image_300', 300, 300, false); // Sets Recent Posts Thumbnails
add_image_size( 'image_400', 400, 400, false ); // Sets portofolio Thumbnails
add_image_size( 'image_500', 500, 500, false ); // Sets portofolio Thumbnails
The <strong>false </strong>parameter means whether you want to crop the image to the set dimensions or not.
and then style each one by using your css style sheet, found in http://yourdomain.com/Karma/wp-content/style.css perhaps
.image_300 {
border: solid 1px;
}
Perhaps the lines you would want to add the styling code are found in style.css lines here are the examples of the existing frames. name your new size relatively to those found in the css.
<strong>2390</strong>
/*---------------------------------*/
/* 2. Modern Frames
/*---------------------------------*/
.shadow_portrait_full {width: 624px;height: 836px;background: url(images/_global/image-frame-portrait-shadow.png) 0px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_thumb {width: 293px;height: 392px;background: url(images/_global/image-frame-portrait-shadow.png) -625px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_square_full {width: 624px;height: 649px;background: url(images/_global/image-frame-portrait-square-shadow.png) 0px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_square_thumb {width: 293px;height: 293px;background: url(images/_global/image-frame-portrait-square-shadow.png) -625px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_2_full {width: 624px;height: 836px;background: url(images/_global/image-frame-portrait-2-shadow.png) 0px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_2_thumb {width: 293px;height: 402px;background: url(images/_global/image-frame-portrait-2-shadow.png) -625px 0px no-repeat;margin-bottom: 6px;}
<strong>and 2448</strong>
/*---------------------------------*/
/* 3. Shadow Frames
/*---------------------------------*/
.shadow_portrait_full {width: 624px;height: 836px;background: url(images/_global/image-frame-portrait-shadow.png) 0px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_thumb {width: 293px;height: 392px;background: url(images/_global/image-frame-portrait-shadow.png) -625px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_square_full {width: 624px;height: 649px;background: url(images/_global/image-frame-portrait-square-shadow.png) 0px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_square_thumb {width: 293px;height: 293px;background: url(images/_global/image-frame-portrait-square-shadow.png) -625px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_2_full {width: 624px;height: 836px;background: url(images/_global/image-frame-portrait-2-shadow.png) 0px 0px no-repeat;margin-bottom: 6px;}
.shadow_portrait_2_thumb {width: 293px;height: 402px;background: url(images/_global/image-frame-portrait-2-shadow.png) -625px 0px no-repeat;margin-bottom: 6px;}
Malin Sundqvist comments:
Thank you, maybe I was a bit "unclear".
I want to be able to use the two frame types in the theme, not just a coloured border.
And I need them to work "everywhere"
Plugarized comments:
I see what you need now,
It requires creating/re-sizing or editing the image frames to support the new custom image sizes and also you need to assign these new custom sizes to shortcodes and also alter the wysiwyg file and some other files as well as adding the css styling to the new frames.
I don't have time to do all this, maybe the other experts can help.
Cheers
Plugarized comments:
To create new frames to fit in the new custom sizes it requires to edit from this file.
http://themes.truethemes.net/Karma/wp-content/themes/Karma/images/_global/global-sprite.png