- This topic has 1 reply, 2 voices, and was last updated 9 years, 7 months ago by Sakin.
-
AuthorPosts
-
April 18, 2015 at 1:03 am #56048emree025Participant
Hello dear Sakin. First let me say, that your theme is fantastic and your support and knowledge is absolutely great.
On this site http://bit.ly/1FSNGmS how to get images like on this picture http://bit.ly/1baUXqF (which I modified with paint.net). I don’t want use plugin or wordpress gallery because there is no option to use individual link for each picture.
Thank you in advance.April 18, 2015 at 2:49 pm #56074SakinKeymaster@emree025: This is bit complex. First you need to edit your page and go to text mode. See this screenshot for text mode https://www.pinterest.com/pin/548594798332210926/ add then add
<span class="image-columns">
before your image and add</span><!-- .image-columns -->
after the images. So, it should be as below:
<span class="image-columns"><a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/freyler.jpg"><img width="446" height="70" alt="freyler" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/freyler.jpg" class="alignnone size-full wp-image-113" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/elternstiftung.jpg"><img width="446" height="70" alt="elternstiftung" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/elternstiftung.jpg" class="alignnone size-full wp-image-112" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/efedugme.jpg"><img width="446" height="70" alt="efedugme" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/efedugme.jpg" class="alignnone size-full wp-image-132" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/zbg.jpg"><img width="446" height="70" alt="zbg" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/zbg.jpg" class="alignnone size-full wp-image-121" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/wolfach.jpg"><img width="446" height="70" alt="wolfach" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/wolfach.jpg" class="alignnone size-full wp-image-120" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/bfw.jpg"><img width="446" height="70" alt="bfw" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/bfw.jpg" class="alignnone size-full wp-image-110" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/ttiad.jpg"><img width="446" height="70" alt="ttiad" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/ttiad.jpg" class="alignnone size-full wp-image-119" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/tes.jpg"><img width="446" height="70" alt="tes" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/tes.jpg" class="alignnone size-full wp-image-118" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/msk.jpg"><img width="446" height="70" alt="msk" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/msk.jpg" class="alignnone size-full wp-image-117" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/mina.jpg"><img width="446" height="70" alt="mina" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/mina.jpg" class="alignnone size-full wp-image-116" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/jbl.jpg"><img width="446" height="70" alt="jbl" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/jbl.jpg" class="alignnone size-full wp-image-115" vdh-406539326=""></a> <a href="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/guetermann.jpg"><img width="446" height="70" alt="guetermann" src="http://www.xn--trkischer-dolmetscher-bersetzer-oidv.de/wp-content/uploads/2013/02/guetermann.jpg" class="alignnone size-full wp-image-114" vdh-406539326=""></a></span><!-- .image-columns -->
Then update that page and add the following css in “Appearance => Theme Options => Custom CSS” box:
.image-columns { clear: both: display: block; overflow: hidden; } .image-columns a { display: inline-block; float: left; width: 50%; } .image-columns a img.alignnone { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 479px) { .image-columns a { display: block; text-align: center; width: 100%; } }
-
AuthorPosts
- The topic ‘catch box – image side by side’ is closed to new replies.