Outputs links which are images, with floting-over captions and changing images. Easily lets you disable the styles (and Scripts) so you can write your …

Patabugen

Outputs links which are images, with floting-over captions and changing images. 
Easily lets you disable the styles (and Scripts) so you can write your own styles.
Note there are no screens added to your dashboard – all the settings/information 
is in this readme.txt file.
<h3>Example</h3>
Here’s an example of a bunch of image links wrapped in an image link grid. The grid is optional and just makes the image links sit in columns instead of always being full width.
Be careful when using image_link_grid that there is no other markup included – watch out for text-editor line breaks being turned into paragraph or line-break tags. You’re probably best editing the shortcode data in Text and not Visual view.
<pre><code>[mha_image_link_grid columns_xs=2 columns_md=2]
 [mha_image_link attachment=100 link="/contact-us" text="Contact Us!" subtext="Get in touch now!"]
 [mha_image_link attachment=101 link="https://www.example.com" text="Checkout Example"]
 [mha_image_link attachment=102 link="/some-page" text="This is some page"]
 [mha_image_link attachment=102 link="/some-page" text="This is some page" style="full"]
 [mha_image_link image="/path-to/image.png" link="/another_page" text="This is another page"]
 [mha_image_link image="https://www.example.com/remote-image.png" link="/another_page"]
[/mha_image_link_grid] 
</code></pre>
<h3>Documentation</h3>
No screens or options are added to your Dashboard. All customising needs to be done in your theme’s CSS file.
<h3>Image links Javascript</h3>
The JavaScript enables multiple images on each image link. If you’re not using that functionlaity, or want to implement it yourself – you can stop the JavaScript file being included with:
<pre><code><?php
 add_filter( 'mha_image_link_include_scripts', '__return_false' );
?>
</code></pre>
The handle of the script is <code>mha-image-links</code>.
<h3>Image links CSS</h3>
To stop the plugin including it’s default CSS file use this filter:
<pre><code><?php
 add_filter( 'mha_image_link_include_styles', '__return_false' );
?>
</code></pre>
The handle of the styles is <code>mha-image-links</code>
<h3>[mha_image_link_grid] shortcode settings</h3>
<ul>
<li>
columns_xs Default: 2 
Specify hwo many columns should display on extra small devices. By default that’s anything up to 768px. Valid values are 1, 2, 3 or 4 unless you add more code based on the source in <code>image-links.scss</code>
</li>
<li>
columns_sm Default: none 
The same as columns_xs but for small screens (above 768px). If not set then this will default to the value of columns_xs
</li>
<li>
columns_md Default: none 
The same as columns_sm but for small screens (above 992px). If not set then this will default to the value of columns_sm
</li>
<li>
columns_lg Default: none 
The same as columns_md but for large screens (above 1200px). If not set then this will default to the value of columns_md.
</li>
</ul>
<h3>[mha_image_link] shortcode settings</h3>
<ul>
<li>
image *Default: ”** 
Specify the URL to an image. It’s better to use attachment if you can.
</li>
<li>
text *Default: ”** 
The big text to display on the image
</li>
<li>
subtext *Default: false** 
The smaller text to show on the image link
</li>
<li>
link *Default: ”** 
The link this image should direct to. Can be anything href=”” takes.
</li>
<li>
attachment *Default: false** 
The attachment ID of the image you want to use or the image. If you specify this instead of <code>image</code> then you’ll get a properly sized image and everything will be excellent. 
To get the attachment ID find the attachment in your Dashbaord -> media screen, click the one you want and look in your browsers address bar for the Item number. For example in this address <code>upload.php?item=400</code> the attachment ID is 400.
</li>
<li>
style *Default: half** 
By default the caption covers half the image – you can set style to <code>full</code> to make it cover the whole image. You can also enter anything you like here and the <code>.mha-image-link</code> element will be given it as an extra class. See the bottom of <code>image-link.scss</code> for an example of styling it.
</li>
</ul>

Alternatives to Image Links

Top alternatives