Adding image into the href

Permalink Browser Info Environment
Hi,

I wanted to put the href around an image rather than just setting the background image for the href. Everything works fine except it won't lightbox on a couple of android tablets I have tried (with chrome and android browsers). Any ideas how I can counter this? Guessig it's a js issue?

- How I edited the view.php:
<a href="<?php echo $img->large->src ?>" style="background-image:url(<?php echo $img->thumb->src ?>); width:<?php echo $imagewidth;?>px; height:<?php echo $imageheight;?>px" title="<?php echo $img->title ?>"<?php if ($img->description && $showDesc) { echo ' data-tg-desc="' . $img->description . '"';} ?>>
         <img src="<?php echo $img->thumb->src ?>" width="<?php echo $imagewidth;?>">
      </a>

Type: Pre-Sale
Status: Resolved
maffp
View Replies:
mnakalay replied on at Permalink Reply
mnakalay
Hello,
I need a little more information:
1- is it working normally on those same devices when not modifying the code (default view)?
2- What exactly happens? Does it just load the image in the window instead of the lightbox?
3- Is it on a live site that I could look at to help understand what's happening?
maffp replied on at Permalink Reply
maffp
Hi and thanks,

Yeah it works fine without the img in the a / href.

It doesn't open anything when clicking the image but it is okay on my phones and PCs. I find it works if you click the very top left pixel!

The test site is at:
bit.ly/1Ij1fOY
mnakalay replied on at Permalink Reply
mnakalay
ok. Let's try something. Delete that line
background-image:url(<?php echo $img->thumb->src ?>);

Since you don't need it. See if it makes any difference.

If not, add
border:1px solid red;

where the deleted piece of code was.
Now you should have a red border around the picture. If it's not around the picture, tell me where it is. Is it in the top left corner?
maffp replied on at Permalink Reply
maffp
Just tried it but no change. The red border is around the entire image. I did get it wrong before though; if you click anywhere right on the border of the image - top, left, right or bottom - (whether the red border is there or not) the lightbox appears but never in the centre of the image...
mnakalay replied on at Permalink Reply
mnakalay
Yes I see, it seems to have the same problem on my Android phone with Chrome.

Frankly the gallery itself works just fine on my phone normally but I never tried it the way you did it.

I'll have a deeper look try to figure it out, but I'm curious, why do you want ti have the thumbnail as an image tag instead of in the background?
maffp replied on at Permalink Reply
maffp
It's mainly because we'd like the images to be save-able by the reader and I was hoping to add a pinterest hover button like on the old site:http://bit.ly/19G9IAd.

Edit: ... also like to get into google images where poss...
mnakalay replied on at Permalink Reply
mnakalay
I see.

Concerning saving images, the full screen images are already savable and it's probably better than just saving thumbnails.

Concerning why the full screen image are not centered in the screen on some devices, it's because some of your thumbnails are pretty big and on smaller screens like my phone for instance, they are bigger than the screen. As a result, they force the page to extend beyong screen boundaries and since the full screen overlay is taking all the space available, it is extending outside the screen.
maffp replied on at Permalink Reply
maffp
I see what you mean. I guess the main thing is that for my needs I have a lot of portrait and landscape images and as you saw on the test site I'd like to have two portraits side by side and one landscape over the full width but I just can't seem to get that to happen. Have spent ages trying to edit it but I'm no css expert.

i.e.
<a href="portrait 1" width="50%"></a><a href="portrait 2" width="50%"></a>
<a href="landscape 1" width="100%"></a>
etc...


Would be happy to pay you to add that feature?
mnakalay replied on at Permalink Reply
mnakalay
I see what you mean.

I can't really add this feature to the package itself since it's very specific and not for everybody. I'd be totally happy to create a template that would do that for you.

How about shooting me a PM so we can talk about it more privately?

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.3.1
Version Installed - 5.7.3.1
Database Version - 20150109000000

# concrete5 Packages
Block Designer (1.0.2), Equinox (1.0.0), Touch Gallery (2.0.4).

# concrete5 Overrides
languages/da_DK, languages/de_DE, languages/el_GR, languages/fi_FI, languages/fr_FR, languages/it_IT, languages/ja_JP, languages/nl_NL, languages/ru_RU, languages/sl_SI, languages/sv_SE, languages/tr_TR

# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.4.9 (Win64) PHP/5.5.12

# Server API
apache2handler

# PHP Version
5.5.12

# PHP Extensions
apache2handler, bcmath, bz2, calendar, com_dotnet, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, mysqlnd, odbc, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, Reflection, session, shmop, SimpleXML, soap, sockets, SPL, sqlite3, standard, tokenizer, wddx, xdebug, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib.

# PHP Settings
max_execution_time - 120
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 60
max_input_vars - 2500
memory_limit - 128M
post_max_size - 3M
sql.safe_mode - Off
upload_max_filesize - 64M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
odbc.max_links - Unlimited
odbc.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1800
soap.wsdl_cache_limit - 5
xdebug.max_nesting_level - 2000
xdebug.var_display_max_children - 128
xdebug.var_display_max_data - 512
xdebug.var_display_max_depth - 3

Browser User-Agent String

Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.