• HI,

    I am currently using elegant grunge on my blog and have been for a long time. I like it for the frames it places around the photo’s I put up.

    Now I am bored with it and would like to change to the last fall but it doesn’t have this function.

    Is there a way to add the frames to the new theme?? I’ve looked through the elegant grunge theme functions and found the code but I don’t know what to do with it. I don’t know if anything needs to change and most importantly, the new theme (last fall) displays the full size of my images where the old one does not. I would like the larger photo’s…and the frames.

    Pretty new to this. Basically I know nothing, and need help to do this. Is it possible. If so how??

    Thanks

    Boo

Viewing 5 replies - 1 through 5 (of 5 total)
  • goto style.css

    copy your the code under the frame – i m pasting it here – copy this code into your new themes style.css

    /* Frame */
    
    .frame-outer.aligncenter {
    	text-align: center;
    }
    
    .frame-outer span {
    	display: inline-block;
    	background: url(images/frame-top-left.jpg) no-repeat left top;
    }
    
    .frame-outer span span {
    	background: url(images/frame-bottom-left.jpg) no-repeat left bottom;
    }
    
    .frame-outer span span span {
    	background: url(images/frame-top-right.jpg) no-repeat right top;
    }
    
    .frame-outer span span span span {
    	background: url(images/frame-bottom-right.jpg) no-repeat right bottom;
    	padding: 32px;
    	min-width: 150px;
    	min-height: 150px;
    	text-align: center;
    	overflow: hidden;
    }
    
    .frame-outer span span span span * {
        max-width: 425px;
    }
    
    .frame-outer.small span {
    	background: url(images/frame-top-left-small.jpg) no-repeat left top;
    }
    
    .frame-outer.small span span {
    	background: url(images/frame-bottom-left-small.jpg) no-repeat left bottom;
    }
    
    .frame-outer.small span span span {
    	background: url(images/frame-top-right-small.jpg) no-repeat right top;
    }
    
    .frame-outer.small span span span span {
    	background: url(images/frame-bottom-right-small.jpg) no-repeat right bottom;
    	padding: 10px;
    	min-height: 38px;
    	min-width: 38px;
    }
    
    .frame-outer span span span span span {
    	background: none;
    }
    
    .frame-outer span span span span .wp-caption-text {
    	margin-top: 10px;
    }

    Now from your images folder copy all the images starting from name frame and copy them to your new theme images folder.

    Now got functions.php of the theme and copy all the code starting from ADD FRAMES to just before ADMINISTRATION copy this in new theme functions.php

    Copy imageclass.php and tagphotoblog.php from folder into new theme folder

    Try and tell..hope this works

    Thread Starter Boo_77

    (@boo_77)

    That didn’t work, which means I probably did something wrong.

    So I copied the code you gave in to the style.css. Just to be sure, I added it to the sheet just after the spot where it says “begin frames”
    Nothing changed when I did this.

    Then your next step, adding the frames images to the new theme images folder. I have done that. Is it ok to just copy them over because that’s what I did.

    The next step is where something I did is wrong. This is all that is IN my function.css file so I am not sure where you mean when you say ADD FRAMES and then ADMIN. Then of course, do you mean the code you supplied me to copy it in??

    <?php
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
            'before_widget' => '<li id="%1$s" class="widget %2$s">',
            'after_widget' => '</li>',
            'before_title' => '<h2 class="widgettitle">',
            'after_title' => '</h2>',
        ));
    ?>

    I have copied imageclass.php across and also tagphotoblog.php across. But the tagphotoblog has a “txt” at the end and I’m not sure why or if it’s correct. Should I remove the txt bit?

    I’m not sure if I’ve done the last thing correctly as I think it’s the functions.css that I’ve done wrong. But not sure.

    Thank you for your help with this. I’m not exactly new but I don’t work on the blog too much so the learning is very slow. Code is not poetry where I come from ??

    Boo

    add this in your new themes function.php after the content that it has..
    means append the following code in that file

    /**
     * Add frames
     *
     * Filters content, adding frames to all objects with class 'frame', and all images if
     *	corresponding option is set.
     */
    function elegant_grunge_filter( $content , $arg2=null, $arg3=null ) {
    	global $post;
    
    	// Not for feeds
    	if ( is_feed() ) return $content;
    
    	// Look-ahead for class 'frame'
    	$frameClass = '(?=[^>]+class=["\'][^"\']*frame)';
    
    	// Skipped classes
    	$classes = "(?:".join("|", array_map("trim", explode(",",get_option('frame_class_skip')))).")";
    	$skippedClasses = '(?![^>]+class=["\'][^"\']*'.$classes.')';
    
    	// Content which we want to include inside the frame
    	$aStart = '(?:<\s*a[^>]+>\s*)?';
    	$aEnd = '(?:\s*</a\s*>)?';
    	$caption = '(?:\s*<p class="wp-caption-text">.*?</p>)?';
    
    	// Beginning tag, including class check
    	$startTagWithFrameClass = "<\s*((?:(img)|[a-zA-Z]+))${skippedClasses}${frameClass}[^>]*";
    
    	// End of tag: Short form
    	$endSingleTag = '(?(2)\s*/?>|\s*/>)';
    
    	// End of tag: Long form
    	$endOriginalTag = '</\s*\\g{1}\s*>';
    
    	// Any tag
    	$anyStartTag = '<\s*([a-z]+)[^>]*';
    	$endLastTag = '</\s*\\g{-1}\s*>';
    
    	// Nested content - tags within tags
    	$nestedContent = "([^<]+|(?:$anyStartTag(?:$endSingleTag|>(?-2)*$endLastTag)))*";
    
    	// Composite expression - look for a block with class of 'frame', and include all content
    	$regex = "$aStart$startTagWithFrameClass(?:$endSingleTag|>$nestedContent$endOriginalTag)$aEnd$caption";
    	$regexes = array("@".$regex."@is");
    
    	// Also replace all images
    	$frame_all_images = get_option("frame_all_images");
    	$frame_all_images_post = get_post_meta($post->ID, 'frame_all_images', true);
    	if ( $frame_all_images_post == "true" )
    		$frame_all_images = true;
    	else if ( $frame_all_images_post == "false" )
    		$frame_all_images = false;
    
    	if ( $frame_all_images ) {
    
    		// Look-ahead for not class of frame (becuase we caught these above)
    		$notFrameClass = '(?![^>]+class=["\'][^"\']*frame)';
    
    		// Composite expression - any images not with class of 'frame'
    		$regex = "$aStart\s*<\s*(img)${notFrameClass}${skippedClasses}[^>]+>\s*$aEnd$caption";
    		$regexes[] = "@".$regex."@is";
    	}
    
    	// Perform replacement with helper function below
    	$newContent = @preg_replace_callback($regexes, 'elegant_grunge_replace', $content);
    	if ( !$newContent ) {
    		return $content;
    	}
    
    	return $newContent;
    }
    
    /**
     * Filter helper function
     *
     *	Perform replacements for blocks discovered in the filter function above.
     *	Adds surrounding divs for frame, styled according to original block,
     * resizes too-large images, and ignores entire block if it is a too-small
     * image (because it will look weird, otherwise)
     */
    function elegant_grunge_replace($matches) {
    
    	$inner = $matches[0];
    
    	// Look for align and style attributes
    	$align = '(^(?:<\s*a[^>]+>)?\s*<[^>]*?)align=["\'](left|right)["\']';
    	$style = '(^(?:<\s*a[^>]+>)?\s*<[^>]*?)style=["\']([^"\']+)["\']';
    	$class = '(^(?:<\s*a[^>]+>)?\s*<[^>]*?)class=["\']([^"\']+)["\']';
    
    	$styles = "";
    	if ( preg_match( "@$align@is", $inner, $newmatch ) ) {
    		// Align attribute found: Add an equivalent float
    		$styles .= "float: ".$newmatch[2].";";
    	}
    
    	if ( preg_match( "@$style@is", $inner, $newmatch ) ) {
    		// Style attribute found: Remember content, but minus some undesirable elements
    		$styles .= preg_replace("@(border(-[a-z]+)?|padding(-[a-z]+)?|margin-([a-z]+)?)\s*:[^;\"']*;?@is", "", $newmatch[2]);
    	}
    
    	if ( preg_match( "@$class@is", $inner, $newmatch ) ) {
    		// Style attribute found: Remember content
    		$classes = trim(preg_replace("@(?<![a-z])frame(?!=[a-z])@is", "", $newmatch[2]));
    	}
    
    	// Check width and height
    	$widthRegex = '@(^(?:<\s*a[^>]+>)?\s*<[^>]*?(?:width=[\'"]|width:\s*))([0-9]+)@is';
    	$heightRegex = '@(^(?:<\s*a[^>]+>)?\s*<[^>]*?(?:height=[\'"]|height:\s*))([0-9]+)@is';
    
    	if ( preg_match( $widthRegex, $inner, $newmatch ) ) {
    		$width = $newmatch[2];
    	}
    	if ( preg_match( $heightRegex, $inner, $newmatch ) ) {
    		$height = $newmatch[2];
    	}
    
    	if ( ( $width && $width < ELEGANT_GRUNGE_FRAME_MIN_WIDTH ) || ( $height && $height < ELEGANT_GRUNGE_FRAME_MIN_HEIGHT ) ) {
    		// Image is too small - just skip this one: return original content
    		return $inner;
    	} 
    
    	if ( $width && $width > ELEGANT_GRUNGE_FRAME_MAX_WIDTH ) {
    		// Image is too large - scale down proportionately
    		if ( $height ) {
    			$ratio = $width / $height;
    			$height = round(ELEGANT_GRUNGE_FRAME_MAX_WIDTH / $ratio);
    
    			// Replace height value
    			$inner = preg_replace( $heightRegex, "\${1}$height", $inner );
    		}
    		$width = ELEGANT_GRUNGE_FRAME_MAX_WIDTH;
    
    		// Replace width value
    		$inner = preg_replace( $widthRegex, "\${1}$width", $inner );
    	}
    
    	$small = '';
    	if ( ( $width && $width < ELEGANT_GRUNGE_FRAME_SMALL_WIDTH ) || ( $height && $height < ELEGANT_GRUNGE_FRAME_SMALL_HEIGHT ) ) {
    		// Image is too small for the large frame - use the small frame
    		$small = ' small';
    	}
    
    	// Wrap content, and remove align/style from inner tag
    	return '<span class="frame-outer '.$small.' '.$classes.'"'.($styles ? ' style="'.trim($styles).'"' : '' ).'><span><span><span><span>' .
    					preg_replace(array("@${align}@is","@${style}@is"), '\\1', $inner).
    				'</span></span></span></span></span>';
    }
    
    // Photoblog routines
    
    /**
     * Prepare image from post
     *
     *	Scans post for images and sets a few variables on post object
     */
    function image_setup(&$post) {
    
    	if ( !preg_match("@(?:<a([^>]+?)/?>\s*)?<img([^>]+?)/?>(?:\s*</a>)?@", $post->post_content, $matches) ) {
            return;
        }
    
    	$tagRegex = "@([a-zA-Z]+)(?:=([\"'])(.*?)\\2)@";
        if ( !preg_match_all($tagRegex, $matches[2], $tag) ) {
            return;
        } 
    
        $image = array_combine($tag[1], $tag[3]);
    
        if ( $matches[1] && preg_match_all($tagRegex, $matches[1], $tag) ) {
            $link = array_combine($tag[1], $tag[3]);
        }
    
        if ( !$image["src"] ) {
    		return;
    	}
    
    	$post->thumb_url = $post->image_url = clean_url( $image["src"], 'raw' );
    	$post->image_tag = $matches[0];
    
    	if ( $link["href"] && preg_match("/jpg|jpeg|jpe|png|gif/i", $link["href"]) ) {
    	    $post->image_url = $link["href"];
    	}
    
    	$post->image_dimensions = array("width" => $image["width"], "height" => $image["height"]);
    
    	$post->image_info = $image;
    	$post->image_link_info = $link;
    
    	$description = trim(strip_tags(preg_replace("/\[[a-zA-Z][^\]]+\]/", "", $post->post_content)));
    	if ( strlen($description) > 250 ) $description = substr($description, 0, 250)."...";
    	$post->image_info["description"] = $description;
    }
    
    /**
     * Template tag: Get the image from the post
     *
     * @param	return	boolean	If true, returns the image tag instead of printing it
     */
    function the_image($return = null) {
    	global $post;
    	if(!$post->image_tag) {
    		image_setup($post);
    	}
    	if ($return)
    		return $post->image_tag;
    	else
    		echo $post->image_tag;
    }
    
    /**
     * Template tag: Get the image URL from the post
     *
     * @param	return	boolean	If true, returns the image URL instead of printing it
     */
    function the_image_url($return = null) {
    	global $post;
    	if(!$post->image_url) {
    		image_setup($post);
    	}
    	if ($return)
    		return $post->image_url;
    	else
    		echo $post->image_url;
    }
    
    /**
     * Template tag: Get the thumbnail URL from the post
     *
     * @param	return	boolean	If true, returns the thumb URL instead of printing it
     */
    function the_image_thumb_url($return = false) {
    	global $post;
    	if(!$post->thumb_url) {
    		image_setup($post);
    	}
    	if ($return)
    		return $post->thumb_url;
    	else
    		echo $post->thumb_url;
    }
    
    /**
     * Get post image information
     *
     * @returns	Information about the image
     */
    function the_image_info() {
    	global $post;
    	if(!$post->thumb_url) {
    		image_setup($post);
    	}
    	return $post->image_info;
    }
    
    /**
     * Template tag: Determine if post has an image
     *
     * @returns	True if an image exists, false otherwise
     */
    function has_image() {
    	return (the_image_info() != null);
    }
    
    /**
     * Template tag: Get the scaled thumbnail
     *
     *	Attempts to create a new image derived from the original image and
     *	scaled down to width x height. Will crop out of center of image if
     *	aspect ratio does not match
     *
     * @param	width		int	Width of thumbnail
     * @param	height	int	Height of thumbnail
     *	@returns	Path to scaled thumbnail, or false on failure
     */
    function the_image_scaled_thumb_url($width, $height) {
    
    	global $post;
    	$thumb = the_image_thumb_url(true);
    	if ( !$thumb ) return false;
    
    	if ( substr($thumb, 0, strlen(WP_CONTENT_URL)) == WP_CONTENT_URL ) {
    		if ( file_exists($f = WP_CONTENT_DIR."/".substr($thumb, strlen(WP_CONTENT_URL))) )
    			$thumb = $f;
    	}
    
    	$path = "elegant-grunge-thumbnails/".preg_replace("/[^a-zA-Z0-9]/", "-", $thumb)."-$width.$height.jpg";
    
    	if ( file_exists(WP_CONTENT_DIR."/".$path) ) {
    		return clean_url(WP_CONTENT_URL."/".$path, 'raw');
    	}
    
    	if ( !get_option('create_photoblog_thumbnails') ) return false;
    
    	// Check for GD support
    	if ( !function_exists('imagejpeg') ) return false;
    
     	require_once("Image.class.php");
    	$image = Image::Load($thumb);
    	if ( !$image ) return false;
    
    	$image->Scale($width, $height, true);
    
    	if ( !file_exists(WP_CONTENT_DIR."/elegant-grunge-thumbnails") ) {
    		mkdir(WP_CONTENT_DIR."/elegant-grunge-thumbnails", 0755);
    	}
    
    	if ( !$image->Save(WP_CONTENT_DIR."/".$path) ) {
    		return false;
    	}
    
    	return clean_url(WP_CONTENT_URL."/".$path, 'raw');
    }
    
    /**
     * Template tag: Get the thumbnail
     *
     * @param	width		int		Width of thumbnail (optional)
     * @param	height	int		Height of thumbnail (optional)
     * @param	return	boolean	If true, returns the thumb URL instead of printing it (optional)
     */
    function the_thumbnail($width = 0, $height = 0, $return = false) {
    	global $post;
    	$url = the_image_url(true);
    	if ( !$url ) return;
    
    	$info = the_image_info();
    
    	if ( !$width && !$height ) {
    		$width = 100;
    		$height = 80;
    		if ( $info["width"] && $info["height"] ) {
    			if ( $info["width"] > $info["height"] ) {
    				$height = 100;
    				$width = ($info["width"] / $info["height"]) * $height;
    				if ( $width > 300 ) {
    					$width = 300;
    					$height = ($info["height"] / $info["width"]) * $width;
    				}
    			} else {
    				$height = 100;
    				$width = ($info["width"] / $info["height"]) * $height;
    			}
    		}
    
    		$width = round($width);
    		$height = round($height);
    	}
    	else if ( $width && !$height ) {
    		$height = (3/4) * $width;
    		if ( $info["width"] && $info["height"] ) {
    			$height = ($info["height"] / $info["width"]) * $width;
    		}
    	}
    
    	$thumb = the_image_scaled_thumb_url($width, $height);
    	if ( !$thumb )
    		$thumb = the_image_thumb_url(true);
    
    	$link = (get_option('photoblog_lightbox') ? $url : get_permalink());
    
    	ob_start();
    	?>
    	<div class="photoblog-thumbnail">
    	<a href="<?php echo $link ?>" rel="lightbox[photoblog]"><img src="<?php echo $thumb; ?>" width="<?php echo $width; ?>" <?php echo ($height ? "height=\"$height\"" : ""); ?> alt="<?php the_title(); ?>" title="<a href=&quot;<?php the_permalink(); ?>&quot;><?php the_title(); ?></a><?php echo ($info["description"]?" - ".$info["description"]:""); ?>" /></a>
    	</div>
    	<?php
    	$content = ob_get_contents();
    	ob_end_clean();
    
    	if ( $return )
    		return $content;
    	echo $content;
    }
    
    /**
     * Favicon template tag
     */
    function elegant_grunge_the_favicon() {
    	if ( file_exists(WP_CONTENT_DIR."/favicon.ico") ) {
    		?><link rel="icon" href="<?php echo WP_CONTENT_URL?>/favicon.ico" type="image/x-icon" />
    		<link rel="shortcut icon" href="<?php echo WP_CONTENT_URL?>/favicon.ico" type="image/x-icon" /><?php
    	}
    }

    sorry for that tagphotoblog.php i think you wont need that in new theme

    Thread Starter Boo_77

    (@boo_77)

    I’m sorry. I am really inexperienced at this, hence why I don’t make too many changes to the theme’s I use. As you can see that didn’t work. Obviously I’m not understanding what you’re trying to get me to do. It could be because it’s very late here where I am and I should go to bed. I’ll look in again tomorrow and see if I can get it to work. I’ve left everything I’ve done as is, so you should be able to see it and see my error??

    what i was trying to tell was that you should look what functions and components help your previous theme do that.These components include
    1.resizing of the image – thats in functions.php
    2.adding frame borders. – thats in style.css and borders are located in /images directory
    3.a call to these functions

    I think you missed the last one.See where in index.php,page.php and single.php where is these things called.

    If you have any problem, email me on [email protected] with your previous and new themes links i will do that for you,.,

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding something from another theme??’ is closed to new replies.