Problems, need help? Have a tip or advice? Post it here.
5 posts Page 1 of 1
Hello!

I am new to Couch and also new to coding in general so I hope my questions aren't overly basic! For almost everything I've run up against I've found a solution in the chat - but with this one I'm stumped.

I'm trying to make an image editable region. However, when I upload the image in Couch Admin the text of the image link appears where the image should be. I've attached a visual. It is the blue indented line starting with http. Am I doing something wrong ?<insert head scratch here> :roll:

<div class="post-sec">
<a class="img-effect" href="people.html">
<img src="<cms:editable name='test_image' label='Image' desc='Upload image here' type='image' />" />
</a>

<cms:editable name='blog_content3' type='richtext'>
<p> Make sure you invest in a juicer. Nutribullet or Vitamix are both excellent products. For all you busy New Yorkers, this does mean you need to stop by your local grocery store to pick up the necessary fruits and/or veggies you want to include. I want to let you in on another secret for juicing on a budget-freeze your fruit! If you don’t feel like going to the super market often, get what you need in that one outing, and cut up those bananas while you're watching TV or listening to music, throw them in a plastic bag, and slot them in the freezer until you're ready to use them. I have also found that Whole Foods carries organic unsweetened and unpreserved frozen fruit, this is truly perfect for smoothies because the fruit will already be nice and chilled before preparation. </p>
</cms:editable>

Attachments

There are 2 separate things that you are blurring together. The editable tag allows you to upload an image on the back end.
Code: Select all
<cms:editable name='test_image' label='Image' desc='Upload image here' type='image' />

You use a show tag to display it on the front end.
Code: Select all
<img src="<cms:show test_image />" />
@tim, actually the two things you mentioned *can* be clubbed together.
If instead of defining a region within cms:template block, we define it somewhere within the template's body it'll serve to create the input in backend and *also* to output whatever was inputted there (exactly like cms:show). This technique is useful in simpler templates.

@serendipity80, welcome :)
I copy/pasted your code into a template to test it out and it is working just fine for me.
So nothing wrong with the way the regions are defined.

Can you please paste here or PM me your full template?
Perhaps something is amiss in the "bigger picture".

Thanks.
Hi KK! I didn't hear back from you in my PM so I thought I'd post here. Maybe other folks can uncover what is going on. Basically when I try and upload an image the image link text uploads instead of the actual image. The code for the page is below. Thanks!


<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='Blog' clonable='1' commentable='1'>
<!-- The editable and folder tags can go here -->
</cms:template>

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Tasteful Health | Affordable Juicing </title>
<link href="css/maincss.css" rel="stylesheet" type="text/css" />
<link href="css/camera.css" rel="stylesheet" type="text/css" />
<link href="fonts/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="css/demostyles.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/drop-down.css" />
<link type="text/css" href="css/responsive.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/waltzerjs.js"></script>
<script type="text/javascript">

//stickey header
jQuery(function($) {
$(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 40) {
$("#wrap").addClass("smallheader");
}
else {
$("#wrap").removeClass("smallheader");
}
});
})(jQuery);
$(document).ready(function() {

$('#carousel').waltzer({scroll:1});
$('#clients').waltzer({scroll:1});

});

</script>



<script src="js/jquery.tabbedcontent.min.js"></script>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<script>
var tabs;
jQuery(function($) {
tabs = $('.tabscontent').tabbedContent().data('api');

// switch to tab...
$('a[href=#click-to-switch]').on('click', function(e) {
var tab = prompt('Tab to switch to (number or id)?');
if (!tabs.switchTab(tab)) {
alert('That tab does not exist :\\');
}
e.preventDefault();
});

// Next and prev actions
$('.controls a').on('click', function(e) {
var action = $(this).text().replace(/[^a-z]+/i, '').toLowerCase();
tabs[action](true);
e.preventDefault();
});
})(jQuery);
</script>




</head>

<body>
<div id="wrap">

<header id="header">
<div class="container">

<a class="logo" href="index.html"> <img src="images/logo.jpg" alt="" /></a>
<div class="menu">
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-5" tabindex="1">
<ul class="dropdown">
<li><a href="#">home</a></li>
<li><a href="#"> food </a></li>
<li><a href="#">fitness </a></li>
<li><a href="#">videos</a></li>
<li><a href="#"> lifestyle</a></li>
<li><a href="#">subscribe</a></li>
<li><a href="#">contact us</a></li>
<li><a href="#">tabs</a></li>
<li class="last"><a class="last" href="#"> Press</a></li>
</ul>
</div>
​</div>
</section>

</div>
<div class="search">
<input name="" type="text" onblur="if(this.value == '') { this.value='Search Articles'}" onfocus="if (this.value == 'Search Articles') {this.value=''}" value="Search Articles">
<a class="search-icon" href="#."><i class="fa fa-search"></i></a>
</div>

</div>
<nav class="nav-full-width">
<div class="container">
<a href="index.html" class="logo-small"><img src="images/logo-small.png" alt=""></a>
<ul id="menu" class="nav-menu list-unstyled pull-left">
<li class="sel"><a href="index.html">home</a>
<ul class="sub-menu">
<li> </li>
</ul>
</li>

<li class="mega-dropdown "><a href="#.">food </a>
<div class="mega-menu">
<div class="mega-menu-inner">

<div class="subnav">
<a class="subnavi img-effect" href="food posts.html">
<img src="images/pepperthumb.jpg" alt="" />
</a>
<span class="title"> All Food Posts</span>
<p> Stay balanced, steep some tea benefits, explore a raw summer and more with our food posts</p>

</div>

<div class="subnav">
<a class="subnavi img-effect" href="photography.html">
<img src="images/foodthumb2.jpg" alt="" />
</a>
<span class="title"> Recipes</span>
<p> Chow down some chia seeds and explore these healthy office snack options. </p>

</div>

<div class="subnav last">
<a class="subnavi img-effect" href="travel.html">
<img src="images/juicethumb.jpg" alt="" />
</a>
<span class="title"> Citrus Summer</span>
<p> Embrace the antibacterial, immune-boosting, and other powers of the mighty lemon</p>

</div>




<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</li>

<li class="mega-dropdown "><a href="#.">Fitness </a>
<div class="mega-menu">
<div class="mega-menu-inner">


<div class="subnav">
<a class="subnavi img-effect" href="#">
<img src="images/sideplank.jpg" alt="" />
</a>
<span class="title"> All Fitness Posts </span>
<p> Stay balanced, learn these meditative stretches, and how to be kind to yourself wiht exercise. </p>

</div>

<div class="subnav">
<a class="subnavi img-effect" href="#">
<img src="images/downwarddog_314 x 252.jpg" alt="" />
</a>
<span class="title"> Home vs. Studio Workouts </span>
<p> Which one is better to keep you motivated? </p>

</div>

<div class="subnav last">
<a class="subnavi img-effect" href="#">
<img src="images/forwardfold_ 314 x 252.jpg" alt="" />
</a>
<span class="title"> My Head is Spinning</span>
<p> Why it's important to be kind to yourself with exercise.</p>

</div>




<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</li>

<li class="mega-dropdown "><a href="#">videos</a></li>

<li ><a href="#."> Lifestyle </a>
<ul class="sub-menu">
<li><a href="#">Spas</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Fashion </a></li>
<li><a href="#">Beauty </a></li>
<li><a href="#">Home Decor</a></li>
</ul>
</li>

<li class="mega-dropdown "><a href="#">contact</a></li>




</ul>
<div class="menu">
<section class="main">
<div class="wrapper-demo">
<div tabindex="1" class="wrapper-dropdown-5" id="dd2">
<ul class="dropdown">
<li><a href="index.html">home</a></li>
<li><a href="video.html">videos</a></li>
<li><a href="typography.html">typography</a></li>
<li><a href="contact-us.html">contact us</a></li>
<li><a href="image-styles.html">image styles</a></li>
<li><a href="message-box.html">message box</a></li>
<li><a href="columns.html">columns</a></li>
<li><a href="tabs.html">tabs</a></li>
<li class="last"><a href="404.html" class="last">404 error</a></li>
</ul>
</div>
</div>
</section>
</div>
</div>
<div class="container">
<div class="social">
<a class="fb" href="#."><i class="fa fa-facebook"></i></a>
<a class="fb" href="#."><i class="fa fa-twitter"></i></a>
<a class="fb" href="#."><i class="fa fa-pinterest"></i></a>
<a class="fb" href="#."><i class="fa fa-google-plus"></i></a>
<a class="fb" href="#."><i class="fa fa-linkedin"></i></a>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</nav>

</header>


<div class="clear"></div>
<div class="container">
<div id="content">
<div class="sub-page"></div>

<div class="left-sec">
<div class="singal-post">

<div class="heading">
<h2> affordable JUICING</h2>
<div class="clear"></div>
</div>

<div class="post-sec">
<h3>Affordable Juicing</h3>
<span>Posted on August 15, 2014 </span>
<cms:editable name='blog_content' type='richtext'>
<p> You know the feeling of ordering your favorite meal at a restaurant and thinking "I wish I could make this at home every night"? Well, I'm not promising that you can mimic the culinary masterpiece of a restaurant chef, but don’t get discouraged when it comes to juicing. </p>
</cms:editable>
</div>

<div class="post-sec">
<a class="img-effect" href="travel.html">
<cms:editable name='prop_image' label='Image'
desc='Upload main image of property here' type='image'/>
</a>

<cms:editable name='blog_content2' type='richtext'>
<p> As a frequent juicer, I see the regulars always stopping by the local juice joints in my SoHo neighborhood. If you pick up one of their menus to order their clever-named juices, you'll also find the ingredients listed right below the name. </p>
<p>Have you actually picked up a menu and taken a look at those ingredients? There are at most 5 ingredients and some include something as basic as "cinnamon" or “almond milk”. Don't fool yourself into thinking you could never recreate this recipe in your own home- you will save a ton of money doing it. Plan ahead and think about the different juices you would like to make. A few cases of raspberries are expensive, but not nearly as expensive as your $12 smoothie.</p>
</cms:editable>
</div>

<div class="post-sec">
<a class="img-effect" href="people.html">
<img src="<cms:editable name='test_image' label='Image' desc='Upload image here' type='image' />" />
</a>

<cms:editable name='blog_content3' type='richtext'>
<p> Make sure you invest in a juicer. Nutribullet or Vitamix are both excellent products. For all you busy New Yorkers, this does mean you need to stop by your local grocery store to pick up the necessary fruits and/or veggies you want to include. I want to let you in on another secret for juicing on a budget-freeze your fruit! If you don’t feel like going to the super market often, get what you need in that one outing, and cut up those bananas while you're watching TV or listening to music, throw them in a plastic bag, and slot them in the freezer until you're ready to use them. I have also found that Whole Foods carries organic unsweetened and unpreserved frozen fruit, this is truly perfect for smoothies because the fruit will already be nice and chilled before preparation. </p>
</cms:editable>

</div>

</div>
<div class="clear"></div>
<div class="comments">
<div class="heading">
<h2>3 COMMENTS</h2>
</div>

<div class="comment-sec">
<img src="images/sara_square_smile100px.jpg" alt="" />
<div class="text">
<span class="title">ADMIN<span class="admin-date">January 12, 2014</span> <a href="#." class="reply">reply</a></span>

<p>Lorem ipsum delore foster lupe gloreb yuste fuste lorem ipsum delore yutcha quchiea ipsumst.</p>

</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

<div class="clear"></div>

<cms:if k_is_commentable >
<div class="leave-comment">
<div class="heading">
<h2>LEAVE A COMMENT</h2>
</div>

<div class="form">
<cms:form method="post">
<cms:if k_success>
<cms:process_comment/>

<cms:if k_process_comment_success>
<cms:send_mail from=k_email_from to=k_email_to subject='Comment posted'>
The following comment has been posted at your site:
<cms:show k_success />
</cms:send_mail>

<div class="comment-sec">
<p>
Thank you for the feed back! <br>
Your comment awaits moderation and will be published as soon as reviewed by the Admin.
</p>
</div>
<cms:else />
<div class="comment-sec">
<p>
Could not post comment! <br>
The following error occured while processing your comment:<br>
<cms:show k_process_comment_error />
</p>
</div>

</cms:if>
<cms:else />
<cms:if k_error >
<div class="comment-sec">
<h2>Fields incomplete!</h2>
<ul>
<cms:each k_error >
<li><cms:show item /></li>
</cms:each>
</ul>
</div>
</cms:if>

<cms:input type='text' name='k_author' onblur="if(this.value == '') { this.value='Name *'}"
onfocus="if (this.value == 'Name *') {this.value=''}" value="Name *"></cms:input>

<cms:input type='text' class='last' name='k_email' onblur="if(this.value == '') { this.value='Email *'}"
onfocus="if (this.value == 'Email *') {this.value=''}" value="Email *"></cms:input>

<cms:input type='textarea' name='k_comment' onblur="if(this.value == '') { this.value='Comment *'}" onfocus="if (this.value == 'Comment *')
{this.value=''}" validator_msg="required=Please enter something as comment"required="1" >Comment *</cms:input>

<a href="#" class="submit"> <cms:input type="submit" name="submit"/> Submit </a>


</cms:if>
</cms:form>
</div>
</cms:if>
</div>
</div>

<div class="right-sec">
<div class="tabs">

<ul>
<li><a href="#tab-1">POPULAR</a></li>
<li><a href="#tab-2">recent</a></li>
<li><a href="#tab-3">tags</a></li>

</ul>
<div class="tabscontent">
<div id="tab-1">

<div class="popular">
<div class="bw pic"><a href="Homeworkout_vs_studioworkout.html"><img src="images/wheel.jpg" alt="" /></a></div>
<div class="detail">
<a href="#">
<h4> Home Workout vs. Studio Workout</h4></a>
<p>Are classes worth the trip and expense?...</p>
<span>Aug 16, 2014</span>
</div>

</div>

<div class="popular">
<div class="bw pic"><a href="#"><img src="images/smile.jpg" alt="" /></a></div>
<div class="detail">
<a href="photography.html"><h4> My Head is Spinning</h4></a>
<p> One of my personal philosophies is to be kind to yourself and to know your body....</p>
<span>Aug 16, 2014</span>
</div>

</div>

<div class="popular">
<div class="bw pic"><a href="#"><img src="images/green juice_ 66 x 68.jpg" alt="" /></a></div>
<div class="detail">
<a href="people.html">
<h4>Affordable Juicing</h4></a>
<p>Gourmet juicing at your fingertips...</p>
<span>Aug 12, 2014</span>
</div>

</div>

<div class="popular">
<div class="bw pic"><a href="#"><img src="images/pepper.jpg" alt="" /></a></div>
<div class="detail">
<a href="people.html">
<h4>Party Snack</h4>
</a>
<p>Beautiful, elegant hors d&rsquo;oeuvres...</p>
<span> Aug 22, 2014</span>
</div>

</div>
<div class="clear"></div>

</div>
<div id="tab-2">
<div class="popular">
<div class="bw pic"><a href="#"><img src="images/pasta 66 x 68.jpg" alt="" /></a></div>
<div class="detail">
<a href="people.html"><h4> The Gluten Free Movement</h4></a>
<p> It's a craze sweeping the city. ...</p>
<span>Aug 12, 2014</span>
</div>

</div>

<div class="popular">
<div class="bw pic"><a href="#"><img src="images/tea 66 x 68.jpg" alt="" /></a></div>
<div class="detail">
<a href="people.html">
<h4>Steep Benefits</h4></a>
<p>Explore green, oolong, and white tea....</p>
<span>August 12, 2014</span>
</div>

</div>

<div class="popular">
<div class="bw pic"><a href="#"><img src="images/island 66 x 68.jpg" alt="" /></a></div>
<div class="detail">
<a href="people.html"><h4> Summer Getaway</h4></a>
<p> St. Tropez - one of the most memorable trips of my life...</p>
<span>Aug 12, 2014</span>
</div>

</div>

<div class="popular">
<div class="bw pic"><a href="#"><img src="images/teavine 66 x 68.jpg" alt="" /></a></div>
<div class="detail">
<a href="people.html">
<h4>Teavine is Devine</h4></a>
<p>My favorite go-to drink of the summer...</p>
<span>Aug 12, 2014</span>
</div>

</div>
<div class="clear"></div>
</div>
<div id="tab-3">
<div class="tags">
<p><a href="#.">recipes</a> <a href="#.">yoga</a> <a href="#.">fitness</a> <a href="#.">healthy living</a> <a href="#.">pilates</a>
<a href="#.">lifestyle</a> <a href="#.">mobile</a> <a href="#.">spa</a><a href="#.">juice press</a> <a href="#.">travel</a>
<a href="#.">detox</a> <a href="#.">barre</a> <a href="#.">meditation</a> <a href="#.">regenerate</a><a href="#.">easy recipes</a><a href="#.">affordable health</a> <a href="#.">organic</a> </p>
<p><a href="#.">Relieve stress nyc</a> <a href="#.">welness ideas nyc</a>
</p>
<div class="clear"></div>
</div>
<div class="controls">
</div>
</div>

</div>

</div>
<div class="clear"></div>
<div class="clear"></div>
<div class="img-right-header"></div>
<div class="clear"></div>

<div class="sub-tags">
<div class="heading">
<h2>TAGS</h2>
</div>

<div class="all-tags">
<a href="#.">Raw Food</a> <a href="#.">Vegan Restaurants NYC</a> <a href="#."> Healthy Food</a> <a href="#."> Vegan Restaurant Review NYC</a> <a href="#."> Fresh Food </a>
<a href="#.">Upscale Vegan Restaurant</a> <a href="#.">Vegan</a>
<a href="#.">Healthy Vegan</a> <a href="#.">Pure Food and Wine</a>

</div>

</div>

<div class="clear"></div>

<div class="photography">
<h1>&nbsp;</h1>
<div class="clear"></div>
</div>

</div>
<div class="clear"></div>

</div>

<div class="clear"></div>
<footer id="footer">

<div class="newsletter">
<div class="text">
<h1>Signup for my blog</h1>
<span>Never miss a scoop for how the urban girl can make health accessible anywhere they go</span>
</div>

<div class="email">

<input name="" type="text" onblur="if(this.value == '') { this.value='Enter your email address'}"
onfocus="if (this.value == 'Enter your email address') {this.value=''}" value="Enter your email address">
<a class="subscribe" href="#.">Subscribe</a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>

<div class="foot-sec">
<div class="menu">
<span class="title">About</span>
<ul>
<li><a href="#.">Home</a></li>
<li><a href="#.">About Us</a></li>
<li><a href="#.">Location</a></li>
<li><a href="#.">Contact Us</a></li>
</ul>
</div>

<div class="menu menu2">
<span class="title">CATEGORIES</span>
<ul>
<li><a href="#.">Food &amp; Recipes</a></li>
<li><a href="#.">Healthy Living</a></li>
<li><a href="#.">Terms and Conditions</a></li>
<li><a href="#.">Privacy Policy</a></li>
</ul>
</div>

</div>


<div class="foot-sec sec2">

<div class="share">
<span class="title">Share Sarandipity </span>
<img src="images/share-button.png" alt="" />
</div>

<div class="payment"></div>

</div>

<div class="foot-sec sec3">

<div class="contact">
<span class="number">Advertising Questions: 555-555-5555 </span>
<span class="number">Press Questions: 555-555-5555</span></div>



</div>



</footer>

</div>
<div class="clear"></div>

<div class="foot-bot">
<div class="container">
<div class="social">
<a href="#."><i class="fa fa-facebook"></i></a>
<a href="#."><i class="fa fa-twitter"></i></a>
<a href="#."><i class="fa fa-pinterest"></i></a>
<a href="#."><i class="fa fa-google-plus"></i></a>
<a href="#."><i class="fa fa-linkedin"></i></a>
</div>
<p>Copyright 2014 Tasteful Health. All rights reserved.</p>

</div>
<div class="clear"></div>
</div>




</div>



<script type="text/javascript">

function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;

obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}

jQuery(function($) {

var dd = new DropDown( $('#dd, #dd2') );

$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});

})(jQuery);

</script>

</body>
</html>
<?php COUCH::invoke(); ?>
Apologies but I must have missed your PM.

Thanks for posting your code.
I had a look at it and can see that you have defined two image regions.
Code: Select all
<a class="img-effect" href="travel.html">
<cms:editable name='prop_image' label='Image'
desc='Upload main image of property here' type='image'/>
</a>

Code: Select all
<img src="<cms:editable name='test_image' label='Image' desc='Upload image here' type='image' />" /> 

While both the definitions are correct, you are *not* using the first region correctly.
Every image/file region stores just the text path to the image/file. So the correct way would be to use the stored value as the 'src' attribute of IMG tag (or 'href' of A). You have used the second region the proper way. The first one is not used as either the 'src' or 'href' parameter and so will simply output the path it holds.

If you use it like the following, you should see the image instead of the path -
Code: Select all
<img src="<cms:editable name='prop_image' label='Image'
desc='Upload main image of property here' type='image'/>" />

Hope this helps.
5 posts Page 1 of 1
cron