Presentation Page Widget – Link from Image instead of Widget title

Forums » WordPress » Tempera » How To

  • Author
    Posts
  • January 19th, 2014 at 12:03 #16407
    Katie

    I am trying to edit the widget columns on the presentation page so that the image is the link rather than the widget title. I don’t want the widget titles to appear (already figured out how to do that) but when I get rid of them the links no longer work.

    My experience and knowledge with coding is limited, but can anyone tell me what to do so that the image is the link and not the widget title?

    January 22nd, 2014 at 21:37 #20197
    Allie

    It’s not particularly elegant, or the best solution, but it might work it you add the code below to your custom css:

    
.column-image-inside { 
opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */;
}

.columnmore a { 
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */
padding:130px 250px;
}
    January 22nd, 2014 at 21:46 #20198
    Allie

    Also make sure you keep some word in the “Read more text:” option in the Presentation Page settings. It won’t work without it.

    Also, just remove the title from the Presentation Page Columns Cryout Column widget if you don’t want the title to show up.

    It’s kind of a clunky solution… but oh well.

    January 23rd, 2014 at 01:15 #20204
    Allie

    Sorry, just tested it. It doesn’t work with responsive site, or well on mobile devices. Basically the css styling is trying to make the “read more” button as large as the Column image, but makes it transparent so it appears the image is the link.
    I told you… it’s not a great solution!
    But if you insist on trying it, perhaps padding could be percentages to adapt to responsiveness? So css would look something like this? 

    .columnmore a { opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */
padding-left: 80%;
padding-right: 80%;
padding-top:60%;
padding-bottom:0px;

.column-image-inside { opacity: 0; filter:alpha(opacity=0); /* For IE8 and earlier */; }

    I dunno. There’s probably a better way. maybe request it be an option?

    January 24th, 2014 at 09:11 #20228
    Mike

    I have also been trying to find a sustainable solution for this that will survive the client updating the theme. So far the most elegant solution I have found is to modify the widgets.php file to place the link around the image and the overlay that animates on hover. However, this will be undone as soon as the theme is updated and you will have to go in and modify the widgets.php file again.

    I am not able to find a solution for creating a widgets.php file in the child theme folder.

    Can we get some help from Zed or another DM on this?

    January 24th, 2014 at 23:42 #20309
    Pascal

    Thank’s a lot for your theme ! Excellent !
    But Exactly the same problem for me, so if anyone can help us, it would be great !
    Thank’s a lot !
    Pascal

    January 25th, 2014 at 02:15 #20314
    Mike Heple

    So I managed to find some helpful information that lead me to a sustainable solution. I am not sure how it compares to WP best practices for child themes but it seems to work so far.

    Here are the steps I followed:
    1. Copy and paste the function responsible for the cryout column (in widgets.php on tempera theme) into your functions.php on your child theme. For Tempera it appears to actually a class called ColumnsWidget.

    2. Modify the class/function so that the link tags are around the elements you want to be linked. in my case I did the image, the text and the slide-over affect. Also, from what I read you should rename the function so it does not conflict with the default function.

    3. This is the part I was missing previously. You now need to unhook the class/function, that was creating these columns, from the hook that it is in and replace it with your new class/function.

    eg:

    // Remove the default ColumnsWidget function
    function remove_tempera_actions() {
    remove_action(‘widgets_init’, ‘ColumnsWidget’);
    }
    // Call ‘remove_tempera_actions’ (above) during WP initialization
    add_action(‘after_setup_theme’,’remove_tempera_actions’);

    // Add the new ColumnsWidgetChild function to the hook
    add_action( ‘widgets_init’, create_function(”, ‘return register_widget(“ColumnsWidgetChild”);’) );

    4. Save functions.php and check your presentation page to confirm changes.

    Please note, I did this with the Tempera theme so some function names and hook names might be different with different themes. It depends on if Cryout uses the same names in different themes.

    I hope this helps.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Presentation Page Widget – Link from Image instead of Widget title’ is closed to new replies.