Need help? Check out our Support site, then


Image Frame

  1. Hello, I was wondering if anyone knew code for adding picture frames to Image posts, like they have for Esquire. I really like how that looks.

    Thanks!

    The blog I need help with is ladylira.com.

  2. In order to use the same method of adding frames to images like the Esquire theme does, you would need to not only add CSS, but the images would need to be entered with some extra HTML. Here is an example:

    <div class="frame"><div class="wrapper"><img class="alignnone size-full wp-image-127" title="mcm_0616-492x740" src="http://esquiredemo.files.wordpress.com/2011/07/mcm_0616-492x7401.jpg?w=560" alt=""></div></div>

    See how you have a "frame" class and also a "wrapper" class? Those are used by the CSS rules.

    If you check the original CSS for the Esquire theme, you can copy the part that adds frames to the photos, and as long as you have the naming of the HTML classes matched up, you can get a similar result. Here is the original CSS from Esquire that sets up the frames:

    https://s1.wp.com/wp-content/themes/pub/esquire/style.css?m=1352170622g&minify=false

    .photo .frame {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-bg.jpg) no-repeat 0 50%;
    	margin-bottom: 1em;
    	width: 560px;
    }
    .short .frame {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-short.jpg) no-repeat 0 50%;
    }
    .photo .frame .wrapper {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-base.jpg) no-repeat 0 100%;
    	display: block;
    	padding-bottom: 85px;
    	width: 560px;
    }
    .frame a {
    	border: none;
    }
    .photo .frame img {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-top.jpg) no-repeat 0 0;
    	display: block;
    	margin: 0 auto;
    	padding: 80px 80px 0;
    }
    .format-image .postbody .content .frame .wrapper img.alignleft {
    	float:none;
    }
    .format-image .postbody .content .frame .wrapper img.alignright {
    	float:none;
    }

    Here is an example of the HTML that would be needed to setup for frames to work in your http://ladylira.com/ blog using the Forever theme:

    <div class="frame"><div class="wrapper"><a href="http://ladylira.com/?attachment_id=534#main"><img class="alignnone size-full wp-image-534" title="Jacob Che Silva" src="http://ladyliradotcom.files.wordpress.com/2012/11/l.jpg?w=560" alt="" /></a></div></div>

    Here is an example of modified CSS that will work in the Forever theme as long as the correct HTML is in place for the image such as the example just above:

    .entry-content .frame {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-bg.jpg) no-repeat 0 50%;
    	margin-bottom: 1em;
    	width: 560px;
    }
    .entry-content .frame .wrapper {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-base.jpg) no-repeat 0 100%;
    	display: block;
    	padding-bottom: 85px;
    }
    .frame a {
    	border: none;
    }
    .entry-content .frame img {
    	background: url(http://s2.wp.com/wp-content/themes/pub/esquire/img/photo-top.jpg) no-repeat 0 0;
    	display: block;
    	margin: 0 auto;
    	padding: 80px 80px 0;
    	max-width: 72%;
    	height: auto;
    	}
    .entry-content .frame .wrapper img.alignleft {
    	float:none;
    }
    .entry-content .frame .wrapper img.alignright {
    	float:none;
    }

    Once that CSS is in place, as long as you wrap an image in div tags with "frame" and "wrapper" as the classes and set the ?w=560 part of the image URL, it should work the same way to add new images with frames:

    <div class="frame"><div class="wrapper">PUT_IMAGE_HTML_WITH_WITDTH_560_HERE</div></div>

    Note that you may also need to make an additional adjustment for landscape images. You can use the examples above as a starting point if you run into that.

  3. Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic