CODEWITHSUNDEEP
phpwordpressresponsive-design
peter
peter

Reputation: 66

wordpress responsive images using the cms uploader

I often build (using RESPONSIVE wordpress templates) sites that will allow the user to upload images to a cms page.

Not the hottest with php, but want to be able to set it so that I can add classes to images using the cms. for example...

50% width normally, 100% under 768px.

I can do the css, just not sure how to allow a cms user to access this?

Upvotes: 1

Views: 45

Answers (2)

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

The simplest way is the probably set the class in your CSS and refer to it in the 'text' tab, or directly edit the current classes...

.align-right{
    width:50%;
    float:right;
    margin:10px 0 10px 10px;
}
@media only screen and (max-width: 768px) {
        .align-right{
        width:100%;
        float:none;
        margin:10px 0 10px 0;
    }
}

Put this at the bottom of your stylesheet to override, or on a new stylesheet, or worst case add !important. NB the 'margin' added to keep a buffer between the image and text. You may need to tweak some other bits slightly for it to look bang on.

Upvotes: 1

user3752638
user3752638

Reputation: 21

you can host a page along in which you can get the elements of the image and store it to he same folder where your images get stored. all you have to do is redirect once to a page which resizes your pics. you can use code-igniter for that it has got best image manipulation class https://ellislab.com/codeigniter/user-guide/libraries/image_lib.html

        $this->load->library('image_lib');
        $config['image_library'] = 'gd2';
        $config['source_image'] = "image src here"; //with complete path
        $config['create_thumb'] = false;
        $config['maintain_ratio'] = TRUE;
        $config['width']    = 1920;
        $config['height']   = 800;
        $config['overwrite'] = TRUE;
        $config['new_image'] = 'newimage.jpg'; //with complete path

$this->image_lib->initialize($config); $this->image_lib->resize();

Upvotes: 2

Related Questions