SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Theme Development: Incorporating responsiveness in post images???

    OK so recently Ive run into something that has raised a question...

    Normally if i'm developing a responsive website, to make imagery responsive and scaleable, i do it like this:

    I set the images inside a div which has a class, that class has its width (percentage) and height... then images inside that class are set to width: 100%; .. that forces the image to scale the smaller the "image container" gets...

    But recently ive been building a wordpress theme, and ive noticed that wordpress doesnt wrap images in any kind of a container div or class or anything, so how would i go about building responsiveness for post and page images into the theme? everything else about the theme is totally responsive at the min but when the user ads images, they arent responsive because of this problem.

    Has anyone else run into this issue and how did you overcome it?

    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2011
    Location
    Kolding, Denmark
    Posts
    108
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can add filter to image_send_to_editor and remove width and height with regex and then add extra html.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Location
    Northern Ireland
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im not familiar with what you mean. can you explain in more detail please?

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2011
    Location
    Kolding, Denmark
    Posts
    108
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You should check WordPress codex, to find more information on filters.
    In this case I would add something like this in themes functions.php file:
    PHP Code:
    add_filter'image_send_to_editor''my_image_tag_filter'10 );

    function 
    my_image_tag_filter($html) {
        
    $html preg_replace'/(width|height)=\"\d*\"\s/'""$html );
        return 
    '<div class="my_image">'.$html.'</div>';


  5. #5
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,615
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    No need to dive into PHP code to get this done.

    Code:
    img {
    width:100%;
    height:auto;
    }
    This will just resize the image proportionately as it appears on the screen so that it doesn't stretch beyond the container (or screen)--it won't limit the data that's actually being downloaded.

    If you have massive images, you might also want to consider this: http://adaptive-images.com/
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •