lorenzck

<p>The usual way to include images in WordPress posts is to generate static anchor and <code><img></code> tags through the content editor interface. Similarly, links to other posts or pages of your blog are also generated as absolute <code><a></code> tags by the content editor.<br />
These kind of fixed links make your WordPress site hard to migrate and make it especially hard to automatically change your output markup (for instance if you decide to change the image size or change a post’s title).</p>
<p>No longer.<br />
With this plug-in, you can use the simple <code>[image]</code>, <code>[link]</code>, and <code>[page]</code> shortcodes in any of your posts.</p>
<h4>Image shortcode</h4>
<p>Images are referenced by their ID, for instance:</p>
<pre><code>[image id="123"]
</code></pre>
<p>This <em>shortcode</em> will generate the following HTML structure:</p>
<pre><code><div class="picture wp-image-123 size-medium">
  <img src="path-to-123-medium.jpg" srcset="…" />
</div>
</code></pre>
<p>Images default to their <code>medium</code> size, if none is set.<br />
You may easily add HTML classes or didascalies:</p>
<pre><code>[image id="123" didascaly="Nice picture." class="aligncenter"]
</code></pre>
<p>This generates the following HTML block, which can be easily styled with some custom CSS:</p>
<pre><code><div class="picture wp-image-123 size-medium aligncenter">
  <img src="path-to-123-medium.jpg" srcset="…" />
  <div class="didascaly">Nice picture.</div>
</div>
</code></pre>
<p>The <code>[image]</code> <em>shortcode</em> supports the following parameters:</p>
<ul>
<li><code>id</code>: the WordPress ID of the attachment to include;</li>
<li><code>size</code>: size of the image to include (can be any standard size such as <code>thumbnail</code>, <code>medium</code>, <code>full</code>, or any custom image size);</li>
<li><code>alt</code>: alternate description to include in the <code><img></code> tag;</li>
<li><code>title</code>: image title to use in (optional) link;</li>
<li><code>link</code>: if set to <code>true</code>, <code>1</code>, <code>yes</code>, or an equivalent value, a link to the full-resolution attachment will be generated, otherwise a fully specified target URL can be specified;</li>
<li><code>didascaly</code>: text to add as a didascaly;</li>
<li><code>class</code>: additional HTML/CSS classes to add to the root element.</li>
<li><code>atts</code>: additional HTML attributes to add to the wrapping <code><div></code> tag.</li>
<li><code>imgatts</code>: additional HTML attributes to add to the internal <code><img></code> tag of the image.</li>
</ul>
<h4>Page and link shortcodes</h4>
<p>This couple of <em>shortcodes</em> automatically generate hypertext links to pages or posts of your WordPress installation. Target posts can be referenced by ID, by <em>slug</em>, or by <em>path</em> (a post’s URL, relative to the website’s root).</p>
<p>Thus, <code>[link href="123"]…[/link]</code>, <code>[link href="slug-of-post"]…[/link]</code>, and <code>[link href="root-page/sub-page/slug-of-page"]…[/link]</code> are all equivalent.</p>
<p>These <em>shortcodes</em> are “enclosing” (they wrap the content of the link, just like HTML tags) and they support the following parameters:</p>
<ul>
<li><code>href</code>: the ID, <em>slug</em>, or <em>path</em> of the target post or page;</li>
<li><code>title</code>: the title to use in the link, if not set the target post’s title will be used;</li>
<li><code>class</code>: additional HTML/CSS classes to add to the link;</li>
<li><code>type</code>: type of the target post (defaults to “page” for <code>[page]</code> and “post” for <code>[link]</code>).</li>
</ul>
<p>If no link content to be enclosed is provided, the posts’s title is automatically used as link text.</p>


Simple Stupid Shortcode

The simplest and most flexible way to embed images or put internal links in Wordpress. Shortcodes to finally ditch all absolute paths and fixed sizes.

jjcoder

<p>The ‘JJ NextGen JQuery Slider’ allows you to create a ‘Nivo slider’ (http://nivo.dev7studios.com/) as a widget or as a shortcode.<br />
This plugin uses the ‘NextGen Gallery’ plugin for its images.</p>
<p>Requirements:</p>
<ul>
<li>NextGen Gallery Plugin (https://wordpress.org/extend/plugins/nextgen-gallery/)</li>
</ul>
<p>NextGen Gallery Integration:</p>
<ul>
<li>This plugin uses the original width and height of the image uploaded so make sure the images are the correct dimensions when uploaded.</li>
<li>Alt & Title Text Field: Provide a full url here and the image will link to this. Only works if alt field starts with either of these; /, http, or ftp.</li>
<li>Description Field: Will be used as a caption.</li>
</ul>
<p>You can specify the following parameters:</p>
<p>NOTE: sc means shortcode:</p>
<ul>
<li>Title: Title for slider. Leave blank for no title. (sc: title=”My Slider”)</li>
<li>Gallery: Leave blank to use all galleries or choose a gallery to use. (sc: gallery=”galleryid”)</li>
<li>Order: Order to display results in. You can choose; Random, Latest First, Oldest First, or NextGen Sortorder. Random will still work when a page is cached. (sc: order=”random”|”asc”|”desc”|”sortorder”)</li>
<li>Tags: comma separated list of tags to filter results by. (sc: tags=”tag1, tag2″)</li>
<li>Shuffle: If order is random and this is true will shuffle images with javascript. Useful if your are caching your pages. (sc: shuffle=”true”|”false”)</li>
<li>Max pictures: The maximum amount of pictures to use. (sc: max_pictures=”6″)</li>
<li>HTML id: HTML id to use. Defaults to ‘slider’. Needs to be different for multiple sliders on same page. (sc: html_id=”slider”)</li>
<li>Width: Width to use on slider. (sc: width=”200″)</li>
<li>Height: Height to use on slider. (sc: height=”150″)</li>
<li>Center: Centers content in container. Requires width to be set. (sc: center=”1″)</li>
</ul>
<p>Nivo slider settings:</p>
<p>Please check the Nivo slider home page for more details (http://nivo.dev7studios.com/#usage).</p>
<ul>
<li>effect: Specify sets like: ‘fold,fade,sliceDown’. (sc: effect=”setting”)</li>
<li>slices: (sc: slices=”setting”)</li>
<li>boxCols: (sc: boxcols=”setting”)</li>
<li>boxRows: (sc: boxrows=”setting”)</li>
<li>animSpeed: Slide transition speed. (sc: animspeed=”setting”)</li>
<li>pauseTime: (sc: pausetime=”setting”)</li>
<li>startSlide: Set starting Slide (0 index). (sc: startslide=”setting”)</li>
<li>directionNav: Next & Prev. (sc: directionnav=”setting”)</li>
<li>directionNavHide: Only show on hover. (sc: directionnavhide=”setting”)</li>
<li>controlNav: 1,2,3… (sc: controlnav=”setting”)</li>
<li>controlNavThumbs: Use thumbnails for Control Nav. You can choose ‘nextgen thumbs” that will automatically use the image’s thumbnail from nextgen gallery or ‘nextgen original’ that will use the current image. (sc: controlnavthumbs=”true”|”false”|”nextgen_thumbs”|”nextgen_original”)</li>
<li>thumbsWidth: Resize thumbnail to this width. Recommended to set if using thumbnails. (sc: thumbswidth=”20″)</li>
<li>thumbsHeight: Resize thumbnail to this height. Recommended to set if using thumbnails. (sc: thumbsheight=”20″)</li>
<li>thumbsContainerHeight: Height for thumbnails container. Calculation should be ‘number of thumbnail image rows’ x ‘thumbsheight’. (sc: thumbscontainerheight=”20″)</li>
<li>thumbsGap: Gap between thumbnails. (sc: thumbsgap=”5″)</li>
<li>controlNavThumbsFromRel: Use image rel for thumbs. (sc: controlnavthumbsfromrel=”setting”)</li>
<li>controlNavThumbsSearch: Replace this with… (sc: controlnavthumbssearch=”setting”)</li>
<li>controlNavThumbsReplace: …this in thumb Image src. (sc: controlnavthumbsreplace=”setting”)</li>
<li>keyboardNav: Use left & right arrows. (sc: keyboardnav=”setting”)</li>
<li>pauseOnHover: Stop animation while hovering. (sc: pauseonhover=”setting”)</li>
<li>manualAdvanc: Force manual transitions. (sc: manualadvance=”setting”)</li>
<li>captionOpacity: Universal caption opacity. (sc: captionopacity=”setting”)</li>
<li>Disable captions: (sc: disablecaptions=”1″)</li>
<li>beforeChange: (sc: beforechange=”setting”)</li>
<li>afterChange: (sc: afterchange=”setting”)</li>
<li>slideshowEnd: Triggers after all slides have been shown. (sc: slideshowend=”setting”)</li>
<li>lastSlide: Triggers when last slide is shown. (sc: lastslide=”setting”)</li>
<li>afterLoad: Triggers when slider has loaded. (sc: afterload=”setting”)</li>
</ul>
<p>Nivo Effects:</p>
<ul>
<li>sliceDown</li>
<li>sliceDownLeft</li>
<li>sliceUp</li>
<li>sliceUpLeft</li>
<li>sliceUpDown</li>
<li>sliceUpDownLeft</li>
<li>fold</li>
<li>fade</li>
<li>random</li>
<li>slideInRight</li>
<li>slideInLeft</li>
<li>boxRandom</li>
<li>boxRain</li>
<li>boxRainReverse</li>
<li>boxRainGrow</li>
<li>boxRainGrowReverse</li>
</ul>
<p>Shortcodes:</p>
<ul>
<li>[jj-ngg-jquery-slider html_id=”about-slider”]</li>
<li>[jj-ngg-jquery-slider title=”Hello” gallery=”1″ html_id=”about-slider” width=”200″ height=”150″ center=”1″]</li>
<li>[jj-ngg-jquery-slider html_id=”about-slider” directionnav=”false” controlnav=”false”]</li>
</ul>
<p>Try out my other plugins:</p>
<ul>
<li>JJ NextGen JQuery Carousel (https://wordpress.org/extend/plugins/jj-nextgen-jquery-carousel/)</li>
<li>JJ NextGen JQuery Cycle (https://wordpress.org/extend/plugins/jj-nextgen-jquery-cycle/)</li>
<li>JJ NextGen Unload (https://wordpress.org/extend/plugins/jj-nextgen-unload/)</li>
<li>JJ NextGen Image List (https://wordpress.org/extend/plugins/jj-nextgen-image-list/)</li>
<li>JJ SwfObject (https://wordpress.org/extend/plugins/jj-swfobject/)</li>
</ul>
<h3>Contributors</h3>


JJ NextGen JQuery Slider

Allows you to pick a gallery from the 'NextGen Gallery' plugin to use as a 'JQuery Nivo slider'.

Simple Stupid Shortcode vs JJ NextGen JQuery Slider