Quantcast
Channel: Toolset » All Posts
Viewing all articles
Browse latest Browse all 20145

Image hover title and view grid

$
0
0

Hi,

I have successfully created a post type, as well as a view for displaying the type in a grid.

My objective is to create a grid column of 6 columns of sponsors logos on a page using the shortcode. (no problem so far with this)
I wish to use my field of logo image and URL to point to an external site. (no problem so far with this)

Here is my code I am using to display the logos as well as making the URL to be clickable on the images.

   <table width="100%">
      <wpv-loop wrap="6" pad="true">
         [wpv-item index=1]
            <tr><td><a href="[types field="sponsor-url" raw="true"][/types]">[types field="sponsor-logo" size="thumbnail" align="none" style="" id="$sponsor"][/types]</a></td>
         [wpv-item index=other]
            <td><a href="[types field="sponsor-url" raw="true"][/types]">[types field="sponsor-logo" size="thumbnail" align="none" style="" id="$sponsor"][/types]</a></td>
         [wpv-item index=6]
            <td><a href="[types field="sponsor-url" raw="true"][/types]">[types field="sponsor-logo" size="thumbnail" align="none" style="" id="$sponsor"][/types]</a></td></tr>
         [wpv-item index=pad]
            <td></td>
         [wpv-item index=pad-last]
            <td></td></tr>
      </wpv-loop>
   </table>

I am having 3 problems though:

1- My images that I am uploading seem to use the size I have allocated for the Pre-defined sizes 150×150, but in responsive mode they are resizing to be very small on mobile device.

2- Responsive mode, I would like to use these images with media queries so that the row will break down into 3 images wide on wide mobile device and 2 images wide in narrow device. My theme framework is Genesis, and is responsive.

3- When I hover the images they show the URL as the title. Is there a way to show the post title on hover?

The classes that I have for my theme if I wish to have 6 rows per column is:

<div class="one-sixth first"><div>
<div class="one-sixth"><div>
<div class="one-sixth"><div>
<div class="one-sixth"><div>
<div class="one-sixth"><div>
<div class="one-sixth"><div>

If I am able to somehow use my theme classes for the layout, then I can use the built in responsive breaks that my theme has.

I hope this description of help request is thorough enough.

Regards,

Ciaran


Viewing all articles
Browse latest Browse all 20145

Trending Articles