Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

In my post, I am using a shortcode [slickr-flickr tag="MyAlbum"] to grab images from flickr. This shortcode is available for my wordpress via Slickr Flickr plugin.

When I put this shortcode in my post, it simply generates a gallery and output it according to the place of shortcode usage along other content in the post.

I want to place output of this shortcode (gallery) in the specific area of the post. How can I do that?

To get a better idea of slideshow place, please check the attached image. enter image description here

EDIT: Selected code from page.php and style.css is as under:

page.php code

<div class="entry-content">
        <h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php echo esc_attr( sprintf( __( 'Permanent link to %s', 'chaostheory' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title() ?></a></h2>
    <?php the_content() ?>
    <?php link_pages('<div class="page-link">'.__('Pages: ', 'chaostheory'), '</div>', 'number'); ?>
    <?php edit_post_link(__('Edit this entry.', 'chaostheory'),'<p class="edit-link">','</p>') ?>
</div><!-- .entry-content -->

style.css:

.page-2cols .entry-content {width:100%;}
.page-2cols .entry-title {text-align:center;}
.page-2cols .slickr-flickr-slideshow {width:330px !important; float: left !important;}
share|improve this question
    
Can you not wrap the short code in a div and manage its location through css? –  Ray Mitchell Feb 10 '12 at 20:41
1  
This is a user support, Plugin-specific question that would be better-directed to the Slickr Flickr Plugin support forum. –  Chip Bennett Feb 10 '12 at 21:35
    
@ChipBennett This is not exactly related to the support for Slickr Flickr plugin. I want to know how can I get shortcode output in theme and then format it as desired. –  Kash Feb 10 '12 at 22:34
    
@RayMitchell In that case I have to put div in each post, which is not convenient. –  Kash Feb 10 '12 at 22:35
add comment

1 Answer

up vote 2 down vote accepted

Ray is right - either wrap the shortcode in a div that you then style by setting a width (and float:left), or else add this to your css:

.slickr-flickr-slideshow {
    width: 300px; /* use your desired width */
    float: left;
}

You may have to tweak the css given your specific install, but this would get you started.

NOTE: this style will occur AFTER the slickr flickr stylesheet styles in order to properly override them, or else you'll need to use the !important operator:

.slickr-flickr-slideshow {
    width: 300px !important; /* use your desired width */
    float: left !important;
}
share|improve this answer
    
It worked! But now my post content went below the slideshow. Please check the original post for code. –  Kash Feb 10 '12 at 22:04
    
Can you provide a url to see the behavior? –  cale_b Feb 10 '12 at 22:44
    
Please check the original post. –  Kash Feb 10 '12 at 22:51
    
Can someone suggest any solution? –  Kash Feb 11 '12 at 21:58
1  
There's a couple of things going on: #1) IMMEDIATELY after the slideshow is this: <div style="clear:both"></div> which is causing everything to show up below the slideshow (whatever is after the slideshow cannot clear anything, otherwise it will be below, not to the right of the slideshow) and #2) after THAT there is some malformed html: <div<br /> - so you need to look at the html for that page/post. If slickr-flickr is adding the "clear:both" div as part of the shortcode, that will be a challenge to resolve. –  cale_b Feb 12 '12 at 2:30
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.