Newsmag > Image Box functionality: Title below the image instead of overlaid

Posted in: Newsmag
Post count: 68

Hi – Please advise – How can I set up a 3-wide group of images with the titles below the images (similar in appearance to Block 16), so the images click directly to a custom URL at an external site (an item hosted by a business partner)?

In other words, I want the same functionality that is in Image Box, but with the title below the image, and not overlaid on the image.

If I use Block 16, each item must click to a post on my site – unless there is a work-around that does not require it to link to an internal post. See https://piracymonitor.org/partners/synamedia/ for the appearance that I want. But when I click on the item, I want the images to click directly to the partner’s landing page https://www.synamedia.com/whitepapers-reports/charting-global-sports-piracy/?utm_source=Piracy-Monitor

Thank you!

Best regards,
– Steve

Post count: 35449

Hi,
As an work around you can use the Image box with a custom css like this one -> https://i.imgur.com/hg3EMLm.jpg -> https://i.imgur.com/NZGLdka.png
.imgC.td_block_image_box .td-custom-title {
position: relative;
top: 0;
transform: none;
-webkit-transform: none;
}

Set this code in theme panel> custom code> custom css.
Hope it will help you!
Thank you!

Post count: 68

Hi – Thanks for the quick reply. Your suggestion did not work. I want to be able to set up a row of images, as Block 16 does (like this screen shot), with the titles below the images. So when I click each image, it goes to a URL that I define (for example, to a page on a different Web site). Your example looks like it should work fine, but it did not.

Instead, I still get this (See this screen shot). I entered the CSS that you gave me, into the Theme Panel Custom CSS (See screen shot), but it shows the resulting layout with the titles still inside the images. Could I have done something wrong?

Thank you

Post count: 68

One more question – same topic… What are the default image sizes for the Image Block? I may need to use images with text in them (like “Download”). Because Newsmag is Responsive, I want to make sure that I can anticipate auto-re-sizing.

Or, even better, can I set “fixed” sizes for the images in Image Block? Thanks

Post count: 35449

Hi,
I think that you forgot to set the extra class .imgC on each image box -> https://imgur.com/hg3EMLm I search for that class and I didn’t find it, but if I use the code without that class this is working -> https://i.imgur.com/CQ05cgV.png

For the second question, when you set an image, then you can select the image dimension that you want to use -> https://i.imgur.com/dzs6Sed.jpg
Let me know the results!

Post count: 68

Yes, it works! Thank you.
https://piracymonitor.org/partners/intertrust
Right now, the images are place-holders, and will be replaced with different images.

(So, yes! The titles for the items are now located below the images, and there is a custom URL for each image. The images are clickable, but the titles are not. Can the titles be made clickable also?)

Post count: 35449

Hi,
Yes, you can do that using this custom css -> https://i.imgur.com/FjlkULp.png
.td_block_image_box .td-custom-title {
pointer-events: auto;
}

Also if you are using the extra class the code will be like this:
.imgC.td_block_image_box .td-custom-title {
pointer-events: auto;
}

Let me know the results!
Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)
The forum ‘Newsmag’ is closed to new topics and replies.